Use tables to display static data in a tabular format. If columnar display is not required, consider a list of Row components instead.

Install the component dependency:

Include a React component in your project:

Table PropTypes

Name
Value
Description
Default
children
Table.Row | Drawer
content of table, per row

Table.Cell PropTypes

align
left | right | center
text alignment
left
emphasis
boolean
highlight content priority
false
flex
string
flex css attribute to control column width

Table.ColumnHeader PropTypes

align
left | right | center
text alignment
left
flex
string
flex css attribute to control column width
onClick
sort => ()
triggered on header click, returns new sort direction
sort
asc | desc
labels column as sortable or sorted
DB
Dmitry Borodyansky
2
12m
JT
Jake Trent
7
294m
TG
Tod Gentille
41
839m

Place the primary column, often "Name" or "Title", leftmost in the table. Add emphasis to visually anchor the primary column.

Add sorting to your table with the sort prop. It will control which ColumnHeader is marked as sorted.

Providing an onClick prop will make it become clickable. When clicked, the callback will receive what it expects to be the new sort order on that column. If your callback needs additional data, like a column identifier, it is up to you to prebind it.

Always left align alphabetic columns. Always right align numeric columns.

By default, all columns are equally spaced. A single column may be prioritized to be grow differently by using the flex prop which is a convenience API for the flex CSS attribute.

Pass the Drawer component as a direct child of Table in order to expose additional content or controls in your UI. Pass the row's Table.Row to the Drawer base prop.

The table is fully supported in the light theme.

DB
Dmitry Borodyansky
2
12m
JT
Jake Trent
7
294m
TG
Tod Gentille
41
839m