Table

A table is a specific pattern for comparing datasets in a very direct and analytical way.

install	yarn add @clayui/core
version	3.123.0

Beta 3.123.0 View in Lexicon CHANGELOG

Table

Property	Description
`alwaysVisibleColumns` `Set<React.Key>`	Defines the columns that are always visible and will be ignored by the visible columns functionality. The default value is new Set()
`columnsVisibility` `boolean`	Flag to enable column visibility control. The default value is true
`defaultExpandedKeys` `Set<React.Key>`	Property to set the initial value of `expandedKeys` (uncontrolled). The default value is new Set<React.Key>()
`defaultSort` `Sorting \| null`	Default state of sort (uncontrolled).
`defaultVisibleColumns` `Map<React.Key, number>`	Default value for visible columns in the table (uncontrolled). The default value is new Map()
`expandedKeys` `Set<React.Key>`	The currently expanded keys in the collection (controlled).
`visibleColumns` `Map<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).
`sort` `Sorting \| null`	Current state of sort (controlled).
`nestedKey` `string`	Flag to indicate which key name matches the nested rendering of the tree.
`itemIdKey` `string`	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
`children` `React.ReactNode \| ChildrenFunction<T, unknown>`	Children content to render a dynamic or static content.
`defaultItems` `Array<T>`	Property to set the initial value of items (uncontrolled).
`items` `Array<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
`children` `React.ReactNode \| ChildrenFunction<T, unknown>`	Children content to render a dynamic or static content.
`items` `Array<T>`	Property to render content with dynamic data.

Row

Property	Description
`children` `React.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.
`divider` `boolean`	Applies a divider style inside the row. The default value is false
`items` `Array<T>`	Property to render content with dynamic data.
`lazy` `boolean`	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