@wix/design-system

### 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. <br /> 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 will also include 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<HTMLInputElement> - 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<RowData> - 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 will be 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`, first click will deselect all items instead. - default: false ### withWrapper - type: boolean - description: When false then Table would not create a `<div/>` wrapper around it's children. Useful when using `<Table/>` to wrap a `<Page/>` component, in that case we use the `<Table/>` only as a context provider and it does not render anything to the DOM by itself. - default: true ### controlled - type: boolean - description: No description ### viewportRef - type: RefObject - description: No description ### onSortClick - type: (colData: TableColumn<any>, 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 will be 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<RowData>[] - description: Configures table columns. Required properties for each column:<br /> * `title`: specifies a text string or an element to display in the table titlebar * `render`: defines a function which will be called to display this row value for this column<br> 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 will call `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` will not 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 column will try 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 `<TableActionCell/>` 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: No description ### 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: No description ### children - type: ReactNode - description: Accept any wrapper component as a child element. It must eventually include <Table.Content/>. ### skin - type: "standard" | "neutral" - description: Sets the style skin for the empty state - default: 'standard' ### data - type: RowData[] - description: No description ### id - type: string - description: No description ### infiniteScroll - type: boolean - description: No description - default: false ### loadMore - type: () => void - description: No description - default: null ### hasMore - type: boolean - description: No description - default: false ### width - type: string - description: No description - default: '100%' ### resizable - type: boolean - description: No description ### 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: No description - default: true ### itemsPerPage - type: number - description: No description - 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: No description - default: true ### scrollElement - type: HTMLElement | RefObject<any> - description: No description - default: null ### rowVerticalPadding - type: "xxTiny" | "xTiny" | "tiny" | "small" | "medium" | "large" - description: No description - default: 'small' ### rowDetails - type: (rowData: RowData, rowNum: number) => ReactNode - description: No description ### removeRowDetailsPadding - type: boolean - description: No description - default: false ### rowDataHook - type: string | DataTableRowDataHookFn<RowData> - 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: No description - default: false ### showLastRowDivider - type: boolean - description: No description - default: true ### virtualized - type: boolean - description: No description ### virtualizedTableHeight - type: number - description: No description ### virtualizedLineHeight - type: number - description: No description - default: 60 ### virtualizedListRef - type: null | string | (instance: any) => void | RefObject<any> - description: No description ### horizontalScroll - type: boolean - description: No description - default: false ### stickyColumns - type: number - description: No description - default: 0 ### isRowDisabled - type: (rowData: RowData) => boolean - description: No description ### infiniteScrollRef - type: null | (instance: any) => void | RefObject<any> - description: No description ### isApplyColumnWidthStyle - type: boolean - description: No description ### resizeProps - type: DataTableResizeProps - description: No description