Table

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

install	yarn add @clayui/table
version	3.56.0

Stable 3.56.0 View in Lexicon CHANGELOG

Table
Table.Body
Table.Cell
Table.Head
Table.Row

Table

Property	Description
`bodyVerticalAlignment` `'bottom' \| 'middle' \| 'top'`	This property vertically align the contents inside the table body according a given position.
`borderedColumns` `boolean`	Applies a Bordered style on Table's columns.
`borderless` `boolean`	Removes the default border and rounded corners from table.
`headingNoWrap` `boolean`	This property keeps all the headings on one line.
`headVerticalAlignment` `'bottom' \| 'middle' \| 'top'`	This property vertically align the contents inside the table header according a given position.
`hover` `boolean`	Applies a Hover style on Table. The default value is true
`noWrap` `boolean`	This property enables keeping everything on one line.
`responsive` `boolean`	Turns the table responsive. The default value is true
`responsiveSize` `'lg' \| 'md' \| 'sm' \| 'xl'`	Defines the responsive sizing.
`striped` `boolean`	Applies a Striped style on Table.
`tableVerticalAlignment` `'bottom' \| 'middle' \| 'top'`	This property vertically align the contents inside the table according a given position.

Table.Body

Extends from React.TableHTMLAttributes<HTMLTableSectionElement>

Table.Cell

Property	Description
`align` `'center' \| 'left' \| 'right'`	Aligns the text inside the Cell.
`cellDelimiter` `TDelimiter`	Sometimes we are unable to remove specific table columns from the DOM and need to hide it using CSS. This property can be added to the "new" first or last cell to maintain table styles on the left and right side.
`columnTextAlignment` `'center' \| 'end' \| 'start'`	Aligns horizontally contents inside the Cell.
`expanded` `boolean`	Fills out the remaining space inside a Cell.
`headingCell` `boolean`	Defines the type of the Cell element, if true, cell element will be a	, otherwise	. The default value is false
`headingTitle` `boolean`	Applies a style of heading inside a child of table header cell element. The default value is false
`noWrap` `boolean`	The default value is false
`truncate` `boolean`	Truncates the text inside a Cell. Requires `expanded` property value set to true. The default value is false

Table.Head

Extends from React.TableHTMLAttributes<HTMLTableSectionElement>

Table.Row

Property	Description
`active` `boolean`	Forces the active state inside the row. The default value is false
`divider` `boolean`	Applies a divider style inside the row. The default value is false
`rowDelimiter` `TDelimiter`	This property can be added to the "new" first or last ClayTable.Row to maintain table styles on the top and bottom sides.