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 |
Stable3.56.0View in LexiconCHANGELOG
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
| ||
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. |