Data table

Many records in one view, with search, filters, sorting, column choice, selection and paging.

Left out of Accessible first Data table is for finding and acting on many records, often in bulk. Accessible first avoids dense expert tools, and its one density has no compact mode. Use instead: Card

See it live

Start Storybook to see it live: npm run storybook

Live from StorybookOpen Data table in StorybookSee it in dark

When to use it

• Use it when: People find, compare and act on many records, often in bulk.
• Not when: A handful of rows (a plain table), or items people browse rather than compare (cards).

Instead:

• Table: A few rows, no tools.
• Card: Items to browse, not compare.

How Accessible first uses it

A number in a table

Use type.body

Not A small or mono font

Every number must be readable at large size.

A selected row or item

Use color.surface.selected and a check icon

Not Color alone

Selection never relies on color alone.

Table row height

Use size.row (large)

Not A compact row

Large rows are easy to read and tap.

An action on one row or item

Use Button secondary with a word

Not An icon on its own

A word says what will happen.

Words

• Use common words. Explain any term you must use.
• One idea per sentence. Put the action first.
• Never blame the person.
• Use: Continue, Change, Start, You. Avoid: Invalid, Utilise, Submit, Error code.

The labels components use, from the voice tokens:

• content.action.commit: Continue
• content.action.cancel: Go back
• content.action.destroy: Delete
• content.action.retry: Try again
• content.action.empty-action: Start a new application

See Voice and tone for the whole voice.

Accessibility and keyboard

Keyboard	What happens	Not
undefined	Every tool and row action is reachable by keyboard.	undefined

Test before you ship:

• It stays a real table with headers; sorting and selection are announced. undefined

Use it in code

npx open-ds add data-table

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads

Data table reads 12 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Data table's tokens to change Data table alone.

Changes with theme

Accessible first decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.

Part	Its token and the semantic it aliases	Value
Shared
Card radius	component.card.radiusradius.containervar(--card-radius)	radius.8:0.5rem
Table row height	component.table.row-heightsize.rowvar(--table-row-height)	size.56:3.5rem
Table row border Changes with theme	component.table.row-bordercolor.border.defaultvar(--table-row-border)	Lightgray.light.200:#D6D6D6Darkgray.dark.100:#222222
Data table
Gap	component.data-table.gapspace.gap.tightvar(--data-table-gap)	space.12:0.75rem
Label hover Changes with theme on hover	component.data-table.label-hovercolor.text.primaryvar(--data-table-label-hover)	Lightgray.light.900:#141414Darkgray.dark.900:#F7F7F7
Padding	component.data-table.paddingcomponent-spacing-map.x2var(--data-table-padding)	space.8:0.5rem
Gap 2	component.data-table.gap-2space.gap.defaultvar(--data-table-gap-2)	space.16:1rem
Corner	component.data-table.radiusradius.badgevar(--data-table-radius)	radius.4:0.25rem
Padding, left and right	component.data-table.padding-xcomponent-spacing-map.x2var(--data-table-padding-x)	space.8:0.5rem
Padding, top and bottom	component.data-table.padding-ycomponent-spacing-map.x1var(--data-table-padding-y)	space.4:0.25rem
Background hover Changes with theme on hover	component.data-table.background-hovercolor.surface.sunkenvar(--data-table-background-hover)	Lightgray.light.100:#EDEDEDDarkgray.dark.100:#222222
Text Changes with theme	component.data-table.labelcolor.text.mutedvar(--data-table-label)	Lightgray.light.500:#595959Darkgray.dark.500:#949494
From the system
Edge Changes with theme	color.border.default straight from the system, through --border	Lightgray.light.200 · #D6D6D6Darkgray.dark.100 · #222222