Table The Table component is a controlled component that can be used to display tabular data.
import { Table } from ' @cerberus/react '
The Table component is a controlled component that can be used to display tabular data. It can be used in a group with other tables to allow for multiple selections.
Basic table example Product Category Price Laptop Electronics 999.99 Coffee Maker Home Appliances 49.99 Desk Chair Furniture 150 Smartphone Electronics 799.99 Headphones Accessories 199.99
The Table.Root component supports different sizes for its cells. You can set the size of the table using the size prop. The available sizes are sm, md, and lg. The default size is md.
Table with different cell sizes Small Small
Table with different cell sizes Medium Medium
Table with different cell sizes Large Large
The Table.Root component supports different decorations for its rows. You can set the decoration of the table using the decoration prop. The available decorations are default and zebra.
Table with default decorations Default one two three
Table with zebra decorations Zebra one two three
The Table.Root component supports a sticky prop, which makes the table header sticky. This is useful for long tables where you want to keep the header visible while scrolling.
Note
The sticky prop removes the border from the table so you can provide it on the scrollable container for a better design experience.
Better find a mop, it's getting sticky... Product Category Price Laptop Electronics 999.99 Coffee Maker Home Appliances 49.99 Desk Chair Furniture 150 Smartphone Electronics 799.99 Headphones Accessories 199.99
The Table.HeaderCol component supports a Table.Trigger, which renders a button element. This allows you to create clickable headers for sorting or other actions.
Clickable table Name Age Jane Doe 25 John Doe 30
You can utilize the primitive components or the css prop to customize the table.
Component Description TableRoot The table container component. TableEl The table component. Caption The caption component. Thead The table header component. Th The table header cell component. Tbody The table body component. Tr The table row component. Td The table cell component. Tfoot The table footer component. TableTrigger The table trigger component.
Customized table Cerberus Family Alias Cerberus The Three-Headed Dog Hades God of the Underworld Persephone Queen of the Underworld Charon The Ferryman Cerberus The Guardian of the Underworld Thanatos God of Death
The Table component is an abstraction of the primitives and accepts the following props:
Name Default Description caption The accessible caption of the Table. size mdThis cell size of the Table. decoration defaultThe decoration of the Table. sticky falseIf true, the table header will be sticky.
The Table API is an Object containing the full family of abstracted components.
Note
Although the Table API is similar to the TableParts, it returns abstractions of the primitives. The TableParts return the primitives only.
Name Description Root An abstraction of the TableRoot, TableEl, and Caption. Header The table header component. HeaderCol The table header cell component. Body The table body component. Row The table row component. Cell The table cell component. Footer The table footer component. Trigger The optional table header col trigger component.
The TableParts API is an Object containing the full family of components.
Note
It is best to only use the TableParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.
Name Description Root The TableRoot component which is the container of the table. Table The TableEl component which is the table element. Caption The Caption component which is the caption of the table. Header The Thead component which is the table header component. HeaderCol The Th component which is the table header cell component. Body The Tbody component which is the table body component. Row The Tr component which is the table row component. Cell The Td component which is the table cell component. Footer The Tfoot component which is the table footer component. Trigger The TableTrigger component which is the optional table header col trigger component.