Table
A table is a specific pattern for comparing datasets in a very direct and analytical way.
| install | yarn add @clayui/core |
|---|---|
| version | 3.122.0 |
Beta3.122.0View in LexiconCHANGELOG
Table
| Property | Description |
|---|---|
alwaysVisibleColumnsSet<React.Key> | Defines the columns that are always visible and will be ignored by the
visible columns functionality. The default value is new Set() |
columnsVisibilityboolean | Flag to enable column visibility control. The default value is true |
defaultExpandedKeysSet<React.Key> | Property to set the initial value of expandedKeys (uncontrolled).The default value is new Set<React.Key>() |
defaultSortSorting | null | Default state of sort (uncontrolled). |
defaultVisibleColumnsMap<React.Key, number> | Default value for visible columns in the table (uncontrolled). The default value is new Map() |
expandedKeysSet<React.Key> | The currently expanded keys in the collection (controlled). |
visibleColumnsMap<React.Key, number> | Defines which columns are visible in the table (controlled). |
messages{
columnsVisibility: string;
columnsVisibilityDescription: string;
columnsVisibilityHeader: string;
expandable: string;
sortDescription: string;
sorting: string;
} | Texts used for assertive messages to SRs. The default value is { columnsVisibility: 'Manage Columns Visibility', columnsVisibilityDescription: 'At least one column must remain visible.', columnsVisibilityHeader: 'Columns Visibility', expandable: 'expandable', sortDescription: 'sortable column', sorting: 'sorted by column {0} in {1} order', } |
onExpandedChange(keys: Set<React.Key>) => void | A callback that is called when items are expanded or collapsed (controlled). |
onLoadMore(item: unknown) => Promise<Array<any> | undefined> | When a tree is very large, loading items (nodes) asynchronously is preferred to decrease the initial payload and memory space. The callback is called every time the item is a leaf node of the tree. |
onSortChange(sorting: Sorting | null) => void | Callback for when the sorting change (controlled). |
onVisibleColumnsChange(columns: Map<React.Key, number>) => void | Callback called when columns visibility changes (controlled). |
sortSorting | null | Current state of sort (controlled). |
nestedKeystring | Flag to indicate which key name matches the nested rendering of the tree. |
itemIdKeystring | Defines which key should be used as the item identifier. The default value is 'id' |
size'sm' | 'lg' | Defines the size of the table. |
Body
| Property | Description |
|---|---|
childrenReact.ReactNode | ChildrenFunction<T, unknown> | Children content to render a dynamic or static content. |
defaultItemsArray<T> | Property to set the initial value of items (uncontrolled). |
itemsArray<T> | Property to render content with dynamic data (controlled). |
onItemsChange(items: Array<T>) => void | A callback which is called when the property of items is changed (controlled). |
Head
| Property | Description |
|---|---|
childrenReact.ReactNode | ChildrenFunction<T, unknown> | Children content to render a dynamic or static content. |
itemsArray<T> | Property to render content with dynamic data. |
Row
| Property | Description |
|---|---|
childrenReact.ReactNode | ChildrenFunction<T, unknown> | Children content to render a dynamic or static content. |
delimiter'start' | 'end' | This property can be added to the "new" first or last ClayTable.Row to maintain table styles on the top and bottom sides. |
dividerboolean | Applies a divider style inside the row. The default value is false |
itemsArray<T> | Property to render content with dynamic data. |
lazyboolean | Flag to indicate that the row has children to be loaded lazily when
onLoadMore is set.The default value is false |
Cell
| Property | Description |
|---|---|
width | The default value is 'auto' |
wrap | The default value is true |