### dataHook - type: string - description: Applies a data-hook HTML attribute to be used in the tests. ### onSelectionChanged - type: OnSelectionChangedFn - description: Defines a callback function which is called when selection happens.
There are 3 types of selections: * `ALL` - bulk selection checkbox has been triggered to select all items * `SINGLE_TOGGLE` - a checkbox to select one item from the list has been triggered. The change object also includes an `id` prop with the unique item identifier and a `value` prop with the new boolean selection state of the item. * `NONE` - bulk selection has been triggered to unselect all items. ### onSelectionStarted - type: () => void - description: Called when item selection triggered but not changed yet. ### showSelection - type: boolean - description: Displays selection checkbox as a first column in each row. To hide the selection checkbox from a specific row, set its `row.unselectable` value to true in the data array. - default: false ### showRowNumbers - type: boolean - description: When true and showSelection is enabled, displays row numbers in the selection column. The checkbox appears on hover or when the row is selected. - default: false ### hideBulkSelectionCheckbox - type: boolean - description: Hides bulk selection checkbox in the table titlebar. - default: false ### bulkSelectionCheckboxRef - type: null | (instance: HTMLInputElement | null) => void | RefObject - description: A ref to the bulk selection checkbox in the table titlebar. ### selectedIds - type: string[] | number[] - description: Defines an array of selected rows. ### selectionDisabled - type: false | true | SelectionDisabledFn - description: Specifies whether table row selection is restricted at a given moment. Can be defined as: * `bool` disables selection for all table rows * `function` that is called for each row to check whether to disable selection or not depending on specified condition ### deselectRowsByDefault - type: boolean - description: Controls bulk selection checkbox behaviour in indeterminate state. By default, first click on indeterminate state selects all items in the table. If set to `true`, the first click deselects all items instead. - default: false ### withWrapper - type: boolean - description: When false then Table would not create a `
` wrapper around it's children. Useful when using `` to wrap a `` component, in that case we use the `
` only as a context provider and it doesn't render anything to the DOM by itself. - default: true ### controlled - type: boolean - description: Specifies whether infinite scroll paging is controlled by the consumer. When `true`, the table renders all of `data` and calls `loadMore` whenever it needs more rows, instead of first revealing the rows already in `data` `itemsPerPage` at a time. Used only when `infiniteScroll` is `true`. ### viewportRef - type: RefObject - description: Sets the scrollable element that `` sticks to. Used only when `horizontalScroll` is `true`. Inside a ``, the page's scroll container is used instead. ### onSortClick - type: (colData: TableColumn, colNum: number) => void - description: Defines a callback function which is called on column title click. ### totalSelectableCount - type: number - description: Specifies the total number of selectable items in the table (including items not loaded yet). When 'Select all' is triggered in infinite scroll tables, newly loaded items are selected automatically. In this case, `SelectionContext` holds not-selected items rather than the selected ones. SelectionContext.infiniteBulkSelected is true and SelectionContext.selectedCount is the value of totalSelectableCount minus the count of unselected items. ### columns - type: TableColumn[] - description: Configures table columns. Required properties for each column:
* `title`: specifies a text string or an element to display in the table titlebar * `render`: defines a function which is called to display this row value for this column
Optional properties for each column: * `onCellClick`: defines a callback function which is called each time a cell in this column is clicked. Signature: `onCellClick(column, rowData, rowNum, event)` * `sortable`: specifies whether field is sortable. If true, clicking the header calls `onSortClick`. * `sortDescending`: specifies what sort icon to display in the column header. `true` shows an up arrow, `false` shows a down arrow, `undefined' shows no icon. * `infoTooltipProps`: controls info [tooltip](/?path=/story/components-overlays--tooltip) appearance in titlebar. Note: `dataHook`, `moveBy` and `children` won't be passed to tooltip. * `style`: applies a custom CSS class to the component's root element * `align`: controls the alignment of the column content * `width`: sets the width of a column. No value means the column tries to contain its children, if possible. * `important`: increases text size of this column data across all rows, sets font color to D10 * `stickyActionCell`: specifies whether `` controls are fixed to the right side of the table * `resizeProps`: configures column resize behavior. When provided with an `id`, enables resizing for this column. Use `disabled: true` to show a disabled handle, or `disabled: true, hideDisabledResizeHandle: true` to hide the handle completely. ### dragAndDrop - type: any - description: Enables reordering rows by drag and drop. Pass `TableDragAndDrop` from `@wix/wix-style-react-incubator/drag-and-drop`, which supplies the droppable table context and the drag handle column. ### onDragEnd - type: (event: DragEndEvent) => unknown - description: No description ### onDragStart - type: (event: DragStartEvent) => unknown - description: No description ### onDragCancel - type: (event: DragEndEvent) => unknown - description: No description ### isDragAndDropDisabled - type: boolean - description: Disables dragging rows and hides the drag handle column. Used only when `dragAndDrop` is set. ### rowStatus - type: (row: RowData, rowNum: number) => TableRowStatusValue | null | undefined - description: When provided, renders a fixed-width status slot per row to the right of the selection/row-number control. The callback returns a `{ status, messages }` config for rows that need a status indicator, or `null`/`undefined` for an empty but width-reserved slot — the slot never collapses. Only `error` and `warning` statuses are supported; the slot is exclusively for those two indicator kinds, rendered via the WDS ``. ### children - type: ReactNode - description: Accept any wrapper component as a child element. It must eventually include . ### data - type: RowData[] - description: No description ### id - type: string - description: No description ### infiniteScroll - type: boolean - description: Specifies whether rows are rendered gradually as the user scrolls instead of all at once. - default: false ### loadMore - type: () => void - description: Defines a callback function which is called when more rows are requested while scrolling. Used only when `infiniteScroll` is `true`. - default: null ### hasMore - type: boolean - description: Specifies whether there are more rows to load. When `false`, `loadMore` isn't called. Used only when `infiniteScroll` is `true`. - default: false ### skin - type: "standard" | "neutral" - description: Controls the header style of the table. `'standard'` fills the header with the standard surface color and `'neutral'` fills it with the neutral surface color. - default: 'standard' ### resizable - type: boolean - description: No description ### width - type: string - description: Sets the width of the table. Accepts a percentage or pixel value. - default: '100%' ### allowMultiDetailsExpansion - type: boolean - description: No description ### dynamicRowClass - type: (rowData: RowData, rowNum: number) => string - description: No description ### isRowHighlight - type: (rowData: RowData, rowNum: number) => boolean - description: No description ### isRowActive - type: (rowData: RowData, rowNum: number) => boolean - description: No description ### initialLoad - type: boolean - description: Specifies whether infinite scroll checks for more rows to load right after the table mounts. Used only when `infiniteScroll` is `true`. - default: true ### itemsPerPage - type: number - description: Sets how many rows are revealed on each load. Used only when `infiniteScroll` is `true`. - default: 20 ### loader - type: ReactNode - description: No description ### onRowClick - type: (rowData: RowData, rowNum: number) => void - description: No description ### onMouseEnterRow - type: (rowData: RowData, rowNum: number) => void - description: No description ### onMouseLeaveRow - type: (rowData: RowData, rowNum: number) => void - description: No description ### useWindow - type: boolean - description: Specifies whether infinite scroll listens to scroll events on the window. When `false`, it listens on the table's parent element. Used only when `infiniteScroll` is `true`. - default: true ### scrollElement - type: HTMLElement | RefObject - description: Sets the element whose scroll events infinite scroll listens to. Overrides `useWindow`. Used only when `infiniteScroll` is `true`. - default: null ### rowVerticalPadding - type: "small" | "tiny" | "medium" | "large" | "xxTiny" | "xTiny" - description: Controls the vertical padding of the table rows. - default: 'small' ### rowDetails - type: (rowData: RowData, rowNum: number) => ReactNode - description: No description ### removeRowDetailsPadding - type: boolean - description: Specifies whether the vertical padding of an expanded row details section is removed. - default: false ### rowDataHook - type: string | DataTableRowDataHookFn - description: No description ### rowClass - type: string - description: No description ### headerRowClass - type: string - description: No description ### headerClass - type: string - description: No description ### showHeaderWhenEmpty - type: boolean - description: Specifies whether the table header is rendered when `data` is empty. When `false`, an empty table renders nothing. - default: false ### showLastRowDivider - type: boolean - description: Specifies whether a divider is shown below the last row. - default: true ### virtualized - type: boolean - description: No description ### virtualizedTableHeight - type: number - description: No description ### virtualizedLineHeight - type: number - description: Sets the height of each row in pixels. Used only when `virtualized` is `true`. - default: 60 ### virtualizedListRef - type: null | string | (instance: any) => void | RefObject - description: No description ### horizontalScroll - type: boolean - description: Specifies whether the table scrolls horizontally when its columns are wider than its container. - default: false ### stickyColumns - type: number - description: Sets the number of leading columns that stay fixed while the table scrolls horizontally. Used only when `horizontalScroll` is `true`. - default: 0 ### isRowDisabled - type: (rowData: RowData) => boolean - description: No description ### infiniteScrollRef - type: null | (instance: any) => void | RefObject - description: No description ### isApplyColumnWidthStyle - type: boolean - description: No description ### resizeProps - type: DataTableResizeProps - description: No description