Skip to main content

Table

Rows and columns of comparable records, with headers.

In Content 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 Content first: The rare table inside an article, read row by row at a comfortable height. Not for records people scan or sort.

  • 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 Content first uses it​

A number in a table
Use type.body
Not A mono font
Tables are rare and read row by row, so digits never need to line up in columns. A mono font would break the reading voice.
A selected row or item
Use color.surface.selected
Not Bold text only
A tint shows the choice clearly on warm paper.
Table row height
Use size.row (comfortable)
Not A compact row
Rows are read, not scanned.

Words​

  • Write to one person: "you", not "users".
  • Short sentences with room to breathe.
  • Explain why before asking for anything.
  • Use: Read, Save for later, You, Next issue. Avoid: Click here, Submit, Users, Content.

The labels components use, from the voice tokens:

  • content.action.commit: Save
  • content.action.cancel: Not now
  • content.action.destroy: Remove
  • content.action.retry: Try again
  • content.action.empty-action: Browse guides

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

Content 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)Lightstone.light.100:#F6F2EADarkstone.dark.100:#2E2A24
Row heightcomponent.table.row-heightsize.rowvar(--table-row-height)size.48:3rem
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)Lightstone.light.200:#E4DDD0Darkstone.dark.100:#2E2A24
Row selected
Changes with theme
when selected		component.table.row-selectedcolor.surface.selectedvar(--table-row-selected)Lightnavy.light.100:#E0E9F5Darknavy.dark.100:#202B3B
Text sizecomponent.table.font-sizetype.data.font-sizevar(--table-font-size)font.size.18:1.125rem
Text
Changes with theme		component.table.labelcolor.text.primaryvar(--table-label)Lightstone.light.900:#1F1B16Darkstone.dark.900:#FFFDF8
Row
Border widthcomponent.table.row.border-widthborder-width.defaultvar(--table-row-border-width)border-width.1:1px
Focus
when selected		component.table.row.focusborder-width.focusvar(--table-row-focus)border-width.2:2px
Head
Text
Changes with theme		component.table.head.labelcolor.text.secondaryvar(--table-head-label)Lightstone.light.700:#4A4339Darkstone.dark.500:#CFC6B6
Font familycomponent.table.head.font-familytype.label.font-familyvar(--table-head-font-family)font.family.inter:Inter, system-ui, sans-serif
Text sizecomponent.table.head.font-sizetype.label.font-sizevar(--table-head-font-size)font.size.16:1rem
Weightcomponent.table.head.font-weighttype.label.font-weightvar(--table-head-font-weight)font.weight.600:600
Cell
Font familycomponent.table.cell.font-familytype.data.font-familyvar(--table-cell-font-family)font.family.source-serif-4:"Source Serif 4", Georgia, serif