DataTable

Structure

The DataTable component is built with semantic HTML table elements (<table>, <thead>, <tbody>, <th>, <td>) so it may constructed similarly to any normal table. A visually hidden <caption> is required and provides an accessible name for screen reader users. Header cells automatically receive scope="col" or scope="row" depending on their position.

Using HTML elements under the hood ensures that DataTable subcomponents maintain their inherent accessible roles for assistive technology.

ARIA

The DataTable applies ARIA attributes based on the features enabled:

table

Element	Attribute	Description
Row selection checkbox	aria-label	Describes the action: "Select row" / "Deselect row" for individual rows, "Select all rows" / "Deselect rows" for the header checkbox.
Row expand/collapse button	aria-label	Updates to reflect the current state: "Expand" / "Collapse" for individual rows, "Expand all" / "Collapse all" for the header button.
Row action menu trigger	aria-label	Identifies the row the action menu belongs to.
Pagination region	aria-label	Set to "Pagination" to identify the navigation region.
Pagination button	aria-label	Labels each button with its function (e.g., "First page", "Previous page", "Next page", "Last page").
Virtualized table	aria-rowcount	Conveys the total number of rows in the dataset.
Virtualized table row	aria-rowindex	Conveys the row's position within the full dataset.
Selected row	aria-selected	Set to true on rows that are currently selected.
Sortable column header	aria-sort	Set to ascending, descending, or none to communicate the current sort state.

Keyboard

Table

table

Key	Function
Tab	Moves focus to the next focusable element within or after the table (sortable headers, checkboxes, expand buttons, row action buttons).
Shift+Tab	Moves focus to the previous focusable element.

Pagination

table

Key	Function
Enter/Space	Activates the focused pagination button.
Tab	Moves focus to the next pagination control.
Shift+Tab	Moves focus to the previous pagination control.

Row actions

table

Key	Function
Enter/Space	Opens the row action dropdown menu.
Escape	Closes the dropdown.
↓	Moves to the next item in the dropdown.
↑	Moves to the previous item in the dropdown.

Row expansion

table

Key	Function
Enter/Space	Expands or collapses a row when its expand button is focused.

Row selection

table

Key	Function
Space	Toggles selection of a row when its checkbox is focused.

Sorting

table

Key	Function
Enter/Space	Toggles the sort direction on a focused sortable column header. Selects the radio option highlighted. Activates the focused "Sort" button.
Escape	Closes the "Sort" button dropdown.
↓	Moves to the radio in the group.
↑	Moves to the previous radio in the group.