How to build an accessible DataTable in React

Built on a native <table> with proper header semantics; sortable headers expose sort state, selection uses real checkboxes, and arrow-key navigation follows the grid pattern so keyboard users can traverse cells

When to use a DataTable

• Displaying tabular data with columns the user sorts, filters, or pages through
• Selecting rows for batch actions across a dataset
• Rendering large datasets that benefit from row containment and server-side sort/paging

When not to use it

• A simple static list of items — use List
• Layout grids of cards or media — use a Card grid, not a data table

Keyboard interactions

Role table, verified at WCAG 2.2-AA.

• Tab
• ArrowUp
• ArrowDown
• ArrowLeft
• ArrowRight
• Enter
• Space

Common mistakes

Avoid: Using DataTable for two columns of label/value pairs

Prefer: A description list or a small Card with Stat/Text

The full table machinery (sort, paging, selection) is overhead when there is no dataset to operate on

Example

<DataTable
  columns={[
    { key: 'name', header: 'Name', sortable: true },
    { key: 'role', header: 'Role' },
  ]}
  rows={[
    { name: 'Alice', role: 'Engineer' },
    { name: 'Bob', role: 'Designer' },
  ]}
  getRowId={(r) => r.name}
/>

See the full DataTable reference →