Table

This component has low-level abstraction similar to built-in table elements. For a higher-level abstraction and rendering based on column, please check TableData component.

Example

Basic Usage

In example below, you can pass built-in td props like width to TableCell component. There are also helper props align accepting css text-align property, and boolean ellipsis prop.

Note that TableCell is used to render td or th. It will render td under TableBody, and renders th under TableHead.

Fixed Header

By default, table header is sticky on top relative to TableContainer. So, you just need to specify the max-height of TableContainer so that it scrolls.

How this works is header automatically set sticky prop to top. You can remove this behaviour by specifying sticky={null}. Learn more about sticky prop in the following section.

Fixed Column and Header

For displaying large amounts of data with long columns, you can specify TableCell’s sticky prop to keep a certain column or row visible.

This sticky props accept:

• StickyPositions (top, bottom, left, right). This will set the sticky offset 0.
• Array<StickyPositions>. For example, header column on the top right you can specify ['top', 'right'].
• { [StickyPositions]: number }. To specify the offset, you should pass an object like { right: 120 }.

Accessibility

This component uses html table elements, so there’s no need to specify additional roles and aria attributes. Regarding keyboard interactions, each row is focusable. ArrowDown and ArrowUp can be used to navigate through each row.

References

• WAI ARIA Table: https://www.w3.org/WAI/ARIA/apg/patterns/table/
• Data Grid Example: https://www.w3.org/WAI/ARIA/apg/example-index/grid/dataGrids.html
• Material UI: https://material-ui.com/components/tables/#table
• Ant Design: https://ant.design/components/table/

API

Table

TableBody

TableCell

TableContainer

TableHead

TableRow