Rows of data people sort, search, select and act on: sortable headers, checkbox selection, bulk actions and a menu per row.
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
| Name | Role | Seats | Joined | |
|---|---|---|---|---|
| Ana Costa | ana@northwind.co.uk | Member | 1 | 21 May 2026 |
| Kofi Mensah | kofi@northwind.co.uk | Member | 1 | 9 Jul 2026 |
| Li Wei | li@northwind.co.uk | Viewer | 0 | 30 Sept 2026 |
| Priya Shah | priya@northwind.co.uk | Owner | 4 | 14 Jan 2026 |
| Tom Ellis | tom@northwind.co.uk | Admin | 2 | 2 Mar 2026 |
1 selected
| Name | Role | Seats | Joined | Actions | ||
|---|---|---|---|---|---|---|
| Priya Shah | priya@northwind.co.uk | Owner | 4 | 14 Jan 2026 | ||
| Tom Ellis | tom@northwind.co.uk | Admin | 2 | 2 Mar 2026 | ||
| Ana Costa | ana@northwind.co.uk | Member | 1 | 21 May 2026 | ||
| Kofi Mensah | kofi@northwind.co.uk | Member | 1 | 9 Jul 2026 | ||
| Li Wei | li@northwind.co.uk | Viewer | 0 | 30 Sept 2026 |
The 26 design tokens DataTable reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
| Token | Value now | CSS variable |
|---|---|---|
| checkbox.bg | … | --sd-checkbox-bg |
| checkbox.bg-checked | … | --sd-checkbox-bg-checked |
| checkbox.border | … | --sd-checkbox-border |
| checkbox.border-width | … | --sd-checkbox-border-width |
| checkbox.mark | … | --sd-checkbox-mark |
| checkbox.radius | … | --sd-checkbox-radius |
| checkbox.size | … | --sd-checkbox-size |
| color.bg.brand-subtle | … | --sd-color-bg-brand-subtle |
| color.bg.muted | … | --sd-color-bg-muted |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.default | … | --sd-color-border-default |
| color.border.subtle | … | --sd-color-border-subtle |
| color.icon.default | … | --sd-color-icon-default |
| color.icon.strong | … | --sd-color-icon-strong |
| color.text.default | … | --sd-color-text-default |
| color.text.secondary | … | --sd-color-text-secondary |
| shape.radius-surface | … | --sd-shape-radius-surface |
| spacing.gap.md | … | --sd-spacing-gap-md |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| spacing.inset.md | … | --sd-spacing-inset-md |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
| spacing.inset.xl | … | --sd-spacing-inset-xl |
| spacing.inset.xs | … | --sd-spacing-inset-xs |
| spacing.stack.sm | … | --sd-spacing-stack-sm |
| target.min | … | --sd-target-min |
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/data-tableThen import it
import { DataTable } from "@/components/ui/data-table"| Prop | Type | What it does |
|---|---|---|
aria-labelrequired | string | Names the table (required). |
columnsrequired | DataTableColumn<T>[] | |
rowsrequired | T[] | |
selectionMode | 'none' | 'single' | 'multiple'Default 'none' | Row selection with checkboxes. Default none. |
selectedKeys | Selection | |
defaultSelectedKeys | Selection | |
onSelectionChange | (keys: Selection) => void | |
defaultSort | { column: string; direction: 'ascending' | 'descending' } | Initial sort. |
searchLabel | string | Show a search field above the table that filters rows; this is its label. |
bulkActions | (selected: T[], clear: () => void) => ReactNode | Actions shown above the table while rows are selected (e.g. Delete selected). |
rowActions | (row: T) => ReactNode | MenuItems for each row's action menu (adds a final column with an IconButton). |
onRowAction | (action: Key, row: T) => void | Called with the MenuItem id and the row when a row action is chosen. |
emptyState | ReactNode | Shown in the body when there are no rows (or no matches). |
className | string |
Screen readers announce "Team members, table, 6 rows"; on a row "Select Ana Costa, checkbox, not checked"; on a header "Name, sorted ascending".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Comfortable rows are 44px (AAA). Compact rows are 24px and meet AA (2.5.8), not AAA: the documented exception.
Shared patterns it ships with: 3.3.6 (bulk delete pairs with AlertDialog or undo); 2.4.8 (row header names every row action).
| axe-core (WCAG A, AA, AAA and best practice) | 80 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 605 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 58 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 114 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 8 of 8, Firefox 8 of 8, WebKit 8 of 8 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the search field |
| Tab | Tab reaches the bulk action (one row is selected) |
| Tab | Tab reaches Clear selection |
| Tab | Tab enters the grid once, on the selected row |
| ArrowDown | Down moves to the next row |
| Space | Space selects the row; the bulk action counts it |
| ArrowRight | Right moves into the row, to its checkbox |
| ArrowUp | Up moves to the same cell in the row above |
The Figma component is DataTable, with Selection (None, Single, Multiple); State (Default, Empty, Some selected). The Figma library isn’t published yet.
Figma to code: Selection → selectionMode (None = "none", Single = "single", Multiple = "multiple"); Search label → searchLabel when Show search; Show bulk actions → bulkActions; Show row actions → rowActions; State (Default, Empty = emptyState (with rows=[]), Some selected); Rows → rows (data) with columns[].cell; nested Header → columns; nested Row → rows; nested Bulk action → bulkActions.