DataTable
| 1.1.1 | Non-text Content | A | pass |
| 1.2.1 | Audio-only and Video-only | A | todo |
| 1.2.2 | Captions (Prerecorded) | A | fail |
| 1.3.1 | Info and Relationships | A | pass |
| 1.3.2 | Meaningful Sequence | A | pass |
| 1.4.1 | Use of Color | A | todo |
| 1.4.3 | Contrast (Minimum) | AA | pass |
| 2.1.1 | Keyboard | A | pass |
import { DataTable } from '@eekodigital/raster/data-table';
import type { DataTableColumnDef } from '@eekodigital/raster/data-table';
type Row = { id: string; name: string; status: string };
const columns: DataTableColumnDef<Row>[] = [
{ accessorKey: 'ref', header: 'Ref' },
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'status', header: 'Status' },
];
<DataTable columns={columns} data={rows} />Multi-column sorting
Section titled “Multi-column sorting”All columns are sortable by default. Click a header to sort ascending, click again for descending, click a third time to clear. Hold Shift to sort by multiple columns simultaneously.
| 1.1.1 | Non-text Content | A | pass |
| 1.2.1 | Audio-only and Video-only | A | todo |
| 1.2.2 | Captions (Prerecorded) | A | fail |
| 1.3.1 | Info and Relationships | A | pass |
| 1.3.2 | Meaningful Sequence | A | pass |
| 1.4.1 | Use of Color | A | todo |
| 1.4.3 | Contrast (Minimum) | AA | pass |
| 2.1.1 | Keyboard | A | pass |
// All columns are sortable — no extra config needed.
// Shift+click a second header to add a secondary sort.
<DataTable columns={columns} data={rows} />Pagination
Section titled “Pagination”Pass pageSize to enable built-in pagination. Previous/next controls appear
below the table when the data exceeds one page.
| 1.1.1 | Non-text Content | A | pass |
| 1.2.1 | Audio-only and Video-only | A | todo |
| 1.2.2 | Captions (Prerecorded) | A | fail |
<DataTable columns={columns} data={rows} pageSize={3} />Filtering
Section titled “Filtering”Add filter to show a search input above the table that filters across all
column values simultaneously. Use filterPlaceholder to customise the input text.
| 1.1.1 | Non-text Content | A | pass |
| 1.2.1 | Audio-only and Video-only | A | todo |
| 1.2.2 | Captions (Prerecorded) | A | fail |
| 1.3.1 | Info and Relationships | A | pass |
| 1.3.2 | Meaningful Sequence | A | pass |
| 1.4.1 | Use of Color | A | todo |
| 1.4.3 | Contrast (Minimum) | AA | pass |
| 2.1.1 | Keyboard | A | pass |
<DataTable columns={columns} data={rows} filter />Column resizing
Section titled “Column resizing”Add resizable to enable drag handles on column borders. Individual columns can
opt out by setting enableResizing: false in their column definition.
| 1.1.1 | Non-text Content | A | pass |
| 1.2.1 | Audio-only and Video-only | A | todo |
| 1.2.2 | Captions (Prerecorded) | A | fail |
| 1.3.1 | Info and Relationships | A | pass |
| 1.3.2 | Meaningful Sequence | A | pass |
| 1.4.1 | Use of Color | A | todo |
| 1.4.3 | Contrast (Minimum) | AA | pass |
| 2.1.1 | Keyboard | A | pass |
<DataTable columns={columns} data={rows} resizable />Column pinning
Section titled “Column pinning”Pass pinnedColumns to keep columns sticky at the left or right edge while the
table scrolls horizontally. Use column id or accessorKey to
identify which columns to pin. Set explicit size values in your column
definitions for accurate sticky offsets when multiple columns are pinned.
| 1.1.1 | Non-text Content | A | Perceivable | All images have alt text | 2025-01-10 | pass |
| 1.2.1 | Audio-only and Video-only | A | Perceivable | 2025-01-10 | todo | |
| 1.4.3 | Contrast (Minimum) | AA | Perceivable | Button text fails at 3.2:1 | 2025-01-12 | fail |
| 2.1.1 | Keyboard | A | Operable | All interactions keyboard accessible | 2025-01-11 | pass |
| 2.4.6 | Headings and Labels | AA | Operable | 2025-01-11 | pass |
<DataTable
columns={columns}
data={rows}
pinnedColumns={{ left: ['ref'], right: ['status'] }}
/>Caption
Section titled “Caption”| 1.1.1 | Non-text Content | A | pass |
| 1.2.1 | Audio-only and Video-only | A | todo |
| 1.2.2 | Captions (Prerecorded) | A | fail |
| 1.3.1 | Info and Relationships | A | pass |
| 1.3.2 | Meaningful Sequence | A | pass |
| 1.4.1 | Use of Color | A | todo |
| 1.4.3 | Contrast (Minimum) | AA | pass |
| 2.1.1 | Keyboard | A | pass |
<DataTable columns={columns} data={rows} caption="WCAG 2.2 criteria" />When to use
Section titled “When to use”Use DataTable when: you need multi-column sorting, pagination, column resizing, or column pinning.
Use Table instead when:
your dataset is small and static — changelogs, pricing grids, blog posts. It renders server-side with zero JavaScript.
Use SummaryList instead when:
you’re displaying key–value pairs rather than rows of comparable records.
| Prop | Type | Default | Description |
|---|---|---|---|
columns | ColumnDef<TData>[] | — | TanStack Table column definitions. Re-exported as |
data | TData[] | — | Data rows. |
caption | string | — | Optional visible |
pageSize | number | — | Rows per page. Omit to show all rows without pagination controls. |
filter | boolean | false | Show a global filter input above the table. Filters across all column values. |
filterPlaceholder | string | ”Filter…” | Placeholder text for the filter input. Only used when |
resizable | boolean | false | Enable drag-to-resize handles on column borders. Individual columns can opt out with
|
pinnedColumns | { left?: string[]; right?: string[] } | — | Pin columns to the left or right edge during horizontal scroll. Pass column |