Table
The Table is a component that provides features such as column sorting, row selection, and click events.
The Table follows the WAI-ARIA - Table Pattern for accessibility.
Setting an aria-label on the Table allows it to be read by screen readers.
<Table columns={columns} data={data} aria-label="DRAGON BALL characters" />
Keyboard Navigation
| Key | Description | State |
|---|---|---|
ArrowLeft | Moves focus one cell to the left.If focus is on the left-most cell in the row, focus does not move. | - |
ArrowRight | Moves focus one cell to the right.If focus is on the right-most cell in the row, focus does not move. | - |
ArrowUp | Moves focus one cell Up.If focus is on the top cell in the column, focus does not move. | - |
ArrowDown | Moves focus one cell down.If focus is on the bottom cell in the column, focus does not move. | - |
Home | Moves focus to the first cell in the row that contains focus. | - |
End | Moves focus to the last cell in the row that contains focus. | - |
ARIA Roles and Attributes
| Component | Role and Attributes | Usage |
|---|---|---|
Table | role="table" | Indicates that the element is a table. |
aria-rowcount | Indicates the total number of rows in the table. | |
aria-colcount | Indicates the total number of columns in the table. | |
Tr Internal | aria-disabled | Set to "true" when the row's id is included in disabledRowIds. |
aria-selected | Set to "true" if the row is selected, "false" if not selected. | |
Th Internal | aria-colindex | Indicates which column the element is in the table. |
aria-rowindex | Indicates which row the element is in the table. | |
aria-sort | Set to "ascending" for ascending order, "descending" for descending order, and "none" if no order is specified. |
Edit this page on GitHub