Skip to main content

Table

Rows and columns of comparable records, with headers.

In Accessible first

See it live​

Start Storybook to see it live: npm run storybook
Live from StorybookOpen Table in StorybookSee it in dark

When to use it​

In Accessible first: A summary like the steps of an application, with large rows and numbers in body text. Not compact rows or small fonts.

  • Use it when: Records people scan, sort or compare cell by cell.
  • Not when: A grid of teasers (cards), or the shape of a relationship (chart).

Instead:

  • Data table: Many records with search, filters and paging.
  • Chart: The shape of the numbers.

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.

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​

Test before you ship:

  • It has a caption and header cells, so each cell is read with its header. undefined

Use it in code​

npx open-ds add table

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

Tokens it reads​

Table reads 14 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 Table's tokens to change 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.

PartIts token and the semantic it aliasesValue
Table
Header background
Changes with theme		component.table.header-backgroundcolor.surface.sunkenvar(--table-header-background)Lightgray.light.100:#EDEDEDDarkgray.dark.100:#222222
Row heightcomponent.table.row-heightsize.rowvar(--table-row-height)size.56:3.5rem
Cell padding xcomponent.table.cell-padding-xspace.inset.cell-xvar(--table-cell-padding-x)space.16:1rem
Row border
Changes with theme		component.table.row-bordercolor.border.defaultvar(--table-row-border)Lightgray.light.200:#D6D6D6Darkgray.dark.100:#222222
Row selected
Changes with theme
when selected		component.table.row-selectedcolor.surface.selectedvar(--table-row-selected)Lightblue.light.100:#E2EDFFDarkblue.dark.100:#102547
Text sizecomponent.table.font-sizetype.data.font-sizevar(--table-font-size)font.size.19:1.1875rem
Text
Changes with theme		component.table.labelcolor.text.primaryvar(--table-label)Lightgray.light.900:#141414Darkgray.dark.900:#F7F7F7
Row
Border widthcomponent.table.row.border-widthborder-width.defaultvar(--table-row-border-width)border-width.2:2px
Focus
when selected		component.table.row.focusborder-width.focusvar(--table-row-focus)border-width.3:3px
Head
Text
Changes with theme		component.table.head.labelcolor.text.secondaryvar(--table-head-label)Lightgray.light.700:#333333Darkgray.dark.600:#B4B4B4
Font familycomponent.table.head.font-familytype.label.font-familyvar(--table-head-font-family)font.family.atkinson-hyperlegible:"Atkinson Hyperlegible", Verdana, sans-serif
Text sizecomponent.table.head.font-sizetype.label.font-sizevar(--table-head-font-size)font.size.18:1.125rem
Weightcomponent.table.head.font-weighttype.label.font-weightvar(--table-head-font-weight)font.weight.700:700
Cell
Font familycomponent.table.cell.font-familytype.data.font-familyvar(--table-cell-font-family)font.family.atkinson-hyperlegible:"Atkinson Hyperlegible", Verdana, sans-serif