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 grid structure.

Element	Role / attribute
Table wrapper	`role="table"`, `aria-label` (from `ariaLabel` prop), `aria-busy` during load
Header section	`role="rowgroup"`
Body section	`role="rowgroup"`
Header row	`role="row"`
Data row	`role="row"`, `aria-selected` (when `selectableRows` is enabled)
Data cell	`role="cell"`
Column header	`role="columnheader"`

Sorting

Sortable column headers expose aria-sort so screen readers announce the current direction.

State	`aria-sort` value
Not sorted	`"none"`
Sorted A → Z / low → high	`"ascending"`
Sorted Z → A / high → low	`"descending"`
Column not sortable	attribute omitted

Keyboard: sortable headers receive tabIndex={0}. Press Enter to toggle the sort direction. Non-sortable headers are removed from the tab order.

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.

Column filters

Each filterable column header contains a filter toggle button. The popup is a role="dialog".

Filter toggle button

Attribute	Value
`aria-label`	`"Filter active"` when a filter is applied, `"Filter column"` otherwise
`aria-pressed`	`true` while the popup is open, `false` when closed

Attribute	Value
`role`	`"dialog"`
`aria-label`	`"Column filter"`

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

Keyboard interactions inside the panel:

Key	Action
Escape	Close the panel
Tab / Shift+Tab	Move between operator select, value inputs, and action buttons

Controls inside the panel

Control	`aria-label` / attribute
Operator `<select>`	`aria-label="Filter operator"`
Primary value `<input>`	`aria-label="Filter value"`
Secondary value `<input>` (Between)	`aria-label="Filter second value"`
AND toggle button	`aria-pressed` reflects active state
OR toggle button	`aria-pressed` reflects active state
Add condition button	`aria-label="Add a second filter condition"`
Remove condition button	`aria-label="Remove condition"`

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.

Pagination

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

Button	`aria-label`
First page	`"First Page"`
Previous page	`"Previous Page"`
Next page	`"Next Page"`
Last page	`"Last 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 empty-state container has role="status" so screen readers announce the “no records” message 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 is the visible label announced for sortable headers and filter dialogs.
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.