Table

yarn add @clayui/table

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

Stable 3.32.0 View in Lexicon CHANGELOG

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

Table

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

Table.Body

Extends from React.TableHTMLAttributes<HTMLTableSectionElement>

Table.Cell

Property	Type	Required	Default	Description
align	'center' \| 'left' \| 'right'	false		Aligns the text inside the Cell.
cellDelimiter	TDelimiter	false		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'	false		Aligns horizontally contents inside the Cell.
expanded	boolean	false		Fills out the remaining space inside a Cell.
headingCell	boolean	false	false	Defines the type of the Cell element, if true, cell element will be a `<th>`, otherwise `<td>`.
headingTitle	boolean	false	false	Applies a style of heading inside a child of table header cell element.
noWrap	boolean	false	false
truncate	boolean	false	false	Truncates the text inside a Cell. Requires `expanded` property value set to true.

Table.Head

Extends from React.TableHTMLAttributes<HTMLTableSectionElement>

Table.Row

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