Skip to main content

Table

Rows and columns of comparable records, with headers.

In Brand expressive

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 Brand expressive: A rare line-up people compare cell by cell, with comfortable rows. Not as the story of a section.

  • 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 Brand expressive uses it​

A number in a table
Use type.body
Not A mono font
Tables are rare and never compared column by column, so mono digits add nothing. The brand font keeps the voice.
A selected row or item
Use color.surface.selected (brand tint)
Not Grey
Selection carries the brand.
Table row height
Use size.row (comfortable)
Not A compact row
Tables are rare and short, so there is no need to fit many rows. Comfortable rows keep the brand's airy rhythm.

Words​

  • Headlines are short and bold. Three to six words.
  • Verbs that move: Join, Try, Go.
  • Playful in headlines, plain in errors.
  • Use: Join, Drop, Go, Love. Avoid: Synergy, Leverage, Kindly.

The labels components use, from the voice tokens:

  • content.action.commit: Go
  • content.action.cancel: Not now
  • content.action.destroy: Remove
  • content.action.retry: Try again
  • content.action.empty-action: Explore the drop

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

Brand expressive 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)Lighttaupe.light.100:#FCEFE6Darktaupe.dark.100:#33241F
Row heightcomponent.table.row-heightsize.rowvar(--table-row-height)size.52:3.25rem
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)Lighttaupe.light.200:#F2DCCFDarktaupe.dark.100:#33241F
Row selected
Changes with theme
when selected		component.table.row-selectedcolor.surface.selectedvar(--table-row-selected)Lightpink.light.100:#FFEAF0Darkpink.dark.100:#451731
Text sizecomponent.table.font-sizetype.data.font-sizevar(--table-font-size)font.size.17:1.0625rem
Text
Changes with theme		component.table.labelcolor.text.primaryvar(--table-label)Lighttaupe.light.900:#1F1411Darktaupe.dark.900:#FFF8F3
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)Lighttaupe.light.700:#4D3A33Darktaupe.dark.500:#E2C4B3
Font familycomponent.table.head.font-familytype.label.font-familyvar(--table-head-font-family)font.family.dm-sans:"DM Sans", system-ui, sans-serif
Text sizecomponent.table.head.font-sizetype.label.font-sizevar(--table-head-font-size)font.size.15:0.9375rem
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.dm-sans:"DM Sans", system-ui, sans-serif