Table
Table is a component that allows you to display tabular data.
Usage
Props
Table
| Name | Type | Default | Description |
|---|
| children | ReactNode | — | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. |
| selectionBehavior | SelectionBehavior | 'toggle' | How multiple selection should behave in the collection. |
| disabledBehavior | DisabledBehavior | 'selection' | Whether disabledKeys applies to all interactions, or only selection. |
| dragAndDropHooks | DragAndDropHooks | — | The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the Table. |
| disabledKeys | Iterable<Key> | — | A list of row keys to disable. |
| selectionMode | SelectionMode | — | The type of selection that is allowed in the collection. |
| disallowEmptySelection | boolean | — | Whether the collection allows empty selection. |
| selectedKeys | 'all' | Iterable<Key> | — | The currently selected keys in the collection (controlled). |
| defaultSelectedKeys | 'all' | Iterable<Key> | — | The initial selected keys in the collection (uncontrolled). |
| sortDescriptor | SortDescriptor | — | The current sorted column and direction. |
| className | string | — | The CSS className for the element. A function may be provided to compute the class based on component state. |
| style | React.CSSProperties | — | The inline style for the element. A function may be provided to compute the style based on component state. |
Events
| Name | Type | Description |
|---|
| onRowAction | (key: Key) => void | Handler that is called when a user performs an action on the row. |
| onSelectionChange | (keys: Selection) => void | Handler that is called when the selection changes. |
| onSortChange | (descriptor: SortDescriptor) => any | Handler that is called when the sorted column or direction changes. |
| onScroll | (e: UIEvent<Element>) => void | Handler that is called when a user scrolls. See MDN. |
| Name | Type | Description |
|---|
| columns | object[] | A list of table columns. |
| children | ReactNode | (item: object) => ReactElement | A list of Column(s) or a function. If the latter, a list of columns must be provided using the columns prop. |
| dependencies | any[] | Values that should invalidate the column cache when using dynamic collections. |
| className | string | The CSS className for the element. A function may be provided to compute the class based on component state. |
| style | React.CSSProperties | The inline style for the element. A function may be provided to compute the style based on component state. |