Accessibility

react-data-table-component documents the ARIA semantics, keyboard interactions, and known considerations for each interactive region.

Labelling the table

Always provide ariaLabel so screen readers can identify DataTable. Without it, assistive technology announces a generic “table” with no context.

<DataTable
  ariaLabel="Employee directory"
  columns={columns}
  data={data}
/>

Table structure

react-data-table-component renders div elements with explicit ARIA roles, giving screen readers a full table structure.

With columnGroups, the column headers sit in a single role="row"; the group labels above them are visual only.

By default this is a static table: nothing but sortable headers is focusable, which is the right shape for a screen reader’s native table-reading commands. Passing cellNavigation turns it into an interactive grid (WAI-ARIA grid pattern) instead — every cell becomes focusable via a single roving tab stop, and arrow keys move between them. See Keyboard navigation for the full key reference and the reasoning for making this opt-in rather than the default.

Sorting

Sortable column headers expose aria-sort on the role="columnheader" element so screen readers announce the current direction.

Keyboard: the sort control inside a sortable header receives tabIndex={0}. Press Enter or Space to toggle the sort direction. Non-sortable headers are removed from the tab order. Keyboard focus draws a 2px :focus-visible ring in the theme’s primary color (--rdt-color-primary) around the header cell. The filter, menu, expander and pagination buttons get the same ring. With cellNavigation enabled, header cells instead participate in the grid’s roving tabindex: arrowing onto a sortable header focuses its sort control, and a non-sortable header takes focus itself. See Keyboard navigation.

Row selection

When selectableRows is enabled:

• Each data row carries aria-selected={true|false} so screen readers announce selection state.
• The select-all checkbox in the header has aria-label="Select all rows".
• Per-row checkboxes have aria-label="Select row {id}" where {id} is the row’s key field value.
• The indeterminate state (some-but-not-all rows selected) is set via the native indeterminate DOM property, which screen readers announce correctly.
• With cellNavigation enabled, checkboxes are reachable by arrowing to their column and are toggled with Space. See Keyboard navigation.

Column filters

Each filterable column header contains a filter toggle button, inside the role="columnheader" element. The popup is a role="dialog".

Filter toggle button

Filter panel (popup)

Focus moves automatically to the first focusable element (the operator <select>) when the panel opens.

Keyboard interactions inside the panel:

Controls inside the panel

Inline editing

Editor inputs, selects and checkboxes are labelled by their column header through aria-labelledby, so the label matches whatever column.name renders, including React nodes. When the header is not rendered (noTableHead), a string column.name is used as the aria-label instead.

Expandable rows

The expand toggle is a <button> with aria-label="Expand Row" or "Collapse Row". Expanded content renders inline beneath the row and is read naturally by screen readers.

Keyboard: press Enter or Space on the expander button to toggle. If expandOnRowClicked is set, pressing Enter on the row itself also toggles. With cellNavigation enabled, the expander button is reachable by arrowing to its column. See Keyboard navigation.

Pagination

The pagination controls are wrapped in a <nav aria-label="Table pagination">, distinguishing them from other landmarks on the page.

Disabled buttons have both disabled and aria-disabled="true". The rows-per-page <select> uses the rowsPerPageText option value as its aria-label.

Loading and empty states

• While data is loading, the table wrapper carries aria-busy="true". Skeleton rows are aria-hidden="true" so they are not read aloud.
• When a re-fetch overlays existing rows, the overlay is aria-hidden="true" and aria-busy on the wrapper communicates the busy state.
• When there is no data, the message renders in a single-cell row and is wrapped in role="status" so screen readers announce it when it appears.

Resize handles

Column resize handles are aria-hidden="true". They are drag-only with no keyboard equivalent.

Tips for consumers

• Always provide ariaLabel. Without it, screen readers announce a generic “table”.
• Always set id on filterable columns. The filter state is keyed by column.id; omitting it silently disables filtering.
• Use descriptive name values. Column name labels the header, the sort control, the filter button and inline editors.
• Avoid icon-only column names without labels. If column.name is a React node (e.g. an icon), wrap it with an accessible label (aria-label or a visually-hidden <span>).
• Test with a keyboard. Tab through the header row, sort with Enter, open a filter panel with Enter or Space, navigate inputs with Tab, and close with Escape.