Table

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

install	yarn add @clayui/core
version	3.107.1

Beta 3.107.1 View in Lexicon CHANGELOG

Table

Property	Description
`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).
`expandedKeys` `Set<React.Key>`	The currently expanded keys in the collection (controlled).
`messages` `{ expandable: string; sortDescription: string; sorting: string; }`	Texts used for assertive messages to SRs. The default value is { 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).
`sort` `Sorting \| null`	Current state of sort (controlled).
`nestedKey` `string`	Flag to indicate which key name matches the nested rendering of the tree.

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.
`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
`wrap`	The default value is true