Accessible React data table — keyboard, screen readers
▶ See it working: arrow through a Mantine table and read the live-region transcript — Tab in, arrow between cells, and every announcement appears as text. The same page exists for MUI, Chakra, antd, Radix, Base UI, shadcn and Tailwind. Keyboard walk is documented in cell navigation.
An accessible data table is one a person can use without a mouse, and one a
screen reader can describe. AdaptTable ships that way. There is no
accessible prop to turn on.
Related: Keyboard & cell navigation · i18n & RTL · FAQ
What is on by default
Section titled “What is on by default”Every table you render already:
- uses a real
<table>with header and body cells - names every control it draws (Filters, checkboxes, close, Done — not icon-only)
- marks sortable headers with
aria-sort - honours
prefers-reduced-motionwhen rows animate in
Every adapter is audited with axe in CI, on desktop and mobile card layouts.
Try it yourself
Section titled “Try it yourself”On the accessibility demo:
- Press Tab until a cell shows a focus ring.
- Press the arrow keys. The ring moves cell to cell.
- Open a cell with Enter or a double-click; Escape cancels.
If Tab never enters the table or arrows do nothing, that page is failing.
What this page is not
Section titled “What this page is not”The optional spreadsheet grid — one Tab stop, arrow keys through every cell,
role="grid" — is a separate feature. See
keyboard & cell navigation. Omit that prop and the
grid extras are absent; the default table above still stands.
- Works in all eight adapters. The demo is the same walk on each kit.
- Labels you pass through
labelsare the accessible names, including in Arabic and the other bundled locales.