Table
Rows and columns of comparable records, with headers.
In Multi-brand
See it live
Start Storybook to see it live:
npm run storybookWhen to use it
In Multi-brand: A customer's own records in the account area, such as Your subscriptions, in comfortable rows. Not as a tool for bulk work.
- 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 Multi-brand uses it
A number in a table
Use type.body
Not A mono font
Prices sit in sentences and offers, not in columns to compare, so a mono font adds nothing in any brand.
A selected row or item
Use color.surface.selected (from the brand)
Not A fixed blue
Selection follows the brand color.
Table row height
Use size.row (comfortable)
Not A compact row
Customers browse on phones, and compact rows are hard to tap in any brand.
Words
- Shared structure: object, state, next step.
- Brand tone lives in headlines and marketing copy, not in errors.
- Errors and confirmations read the same in every brand.
- Use: Get started, Plan, Order. Avoid: Brand-specific words in errors, Jargon.
The labels components use, from the voice tokens:
content.action.commit: Savecontent.action.cancel: Cancelcontent.action.destroy: Removecontent.action.retry: Try againcontent.action.empty-action: Get started
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
Multi-brand decides what changes when you switch theme. Here a switch changes colors, type and shape, so the marked rows differ between its brands and between light and dark; everything else holds steady.
| Part | Its token and the semantic it aliases | Value |
|---|---|---|
| Table | ||
| Header background Changes with theme | component.table.header-backgroundcolor.surface.sunkenvar(--table-header-background) | Aster Lightslate-deep.light.100:#F1F5F9Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.100:#F1F5F9Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.100:#F1F5F9Coral Darkslate-deep.dark.100:#1E293B |
| Row height | component.table.row-heightsize.rowvar(--table-row-height) | size.48:3rem |
| Cell padding x | component.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) | Aster Lightslate-deep.light.200:#E2E8F0Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.200:#E2E8F0Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.200:#E2E8F0Coral Darkslate-deep.dark.100:#1E293B |
| Row selected Changes with theme when selected | component.table.row-selectedcolor.surface.selectedvar(--table-row-selected) | Aster Lightteal.light.100:#DEF3F0Aster Darkteal.dark.100:#012C28Birch Lightpurple.light.100:#EDEAFEBirch Darkpurple.dark.100:#271745Coral Lightorange.light.100:#FEEBE4Coral Darkorange.dark.100:#3F1702 |
| Text size | component.table.font-sizetype.data.font-sizevar(--table-font-size) | font.size.16:1rem |
| Text Changes with theme | component.table.labelcolor.text.primaryvar(--table-label) | Aster Lightslate-deep.light.900:#0F172AAster Darkslate-deep.dark.900:#F8FAFCBirch Lightslate-deep.light.900:#0F172ABirch Darkslate-deep.dark.900:#F8FAFCCoral Lightslate-deep.light.900:#0F172ACoral Darkslate-deep.dark.900:#F8FAFC |
| Row | ||
| Border width | component.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) | Aster Lightslate-deep.light.700:#334155Aster Darkslate-deep.dark.500:#CBD5E1Birch Lightslate-deep.light.700:#334155Birch Darkslate-deep.dark.500:#CBD5E1Coral Lightslate-deep.light.700:#334155Coral Darkslate-deep.dark.500:#CBD5E1 |
| Font family Changes with theme | component.table.head.font-familytype.label.font-familyvar(--table-head-font-family) | Aster Lightfont.family.inter:Inter, system-ui, sans-serifAster Darkfont.family.inter:Inter, system-ui, sans-serifBirch Lightfont.family.plus-jakarta-sans:"Plus Jakarta Sans", system-ui, sans-serifBirch Darkfont.family.plus-jakarta-sans:"Plus Jakarta Sans", system-ui, sans-serifCoral Lightfont.family.poppins:Poppins, system-ui, sans-serifCoral Darkfont.family.poppins:Poppins, system-ui, sans-serif |
| Text size | component.table.head.font-sizetype.label.font-sizevar(--table-head-font-size) | font.size.14:0.875rem |
| Weight | component.table.head.font-weighttype.label.font-weightvar(--table-head-font-weight) | font.weight.600:600 |
| Cell | ||
| Font family Changes with theme | component.table.cell.font-familytype.data.font-familyvar(--table-cell-font-family) | Aster Lightfont.family.inter:Inter, system-ui, sans-serifAster Darkfont.family.inter:Inter, system-ui, sans-serifBirch Lightfont.family.plus-jakarta-sans:"Plus Jakarta Sans", system-ui, sans-serifBirch Darkfont.family.plus-jakarta-sans:"Plus Jakarta Sans", system-ui, sans-serifCoral Lightfont.family.poppins:Poppins, system-ui, sans-serifCoral Darkfont.family.poppins:Poppins, system-ui, sans-serif |