Table
Structured records for comparison, scanning, and row-level workflows. The component owns the table grammar; surrounding demos should not add a second visual frame.
Table · Divided
| Project | Status | Owner | Tasks | Budget |
|---|---|---|---|---|
| Website relaunch | Active | OM | 42 | $18,400 |
| Brand refresh | Review |  | 16 | $9,750 |
| App onboarding | Draft | BQ | 28 | $12,100 |
| Checkout cleanup | Queued | MS | 9 | $4,800 |
| Analytics audit | Paused |  | 31 | $7,250 |
Default table with row separators for scannable records.
Table · Plain
| Project | Status | Owner | Tasks | Budget |
|---|---|---|---|---|
| Website relaunch | Active | OM | 42 | $18,400 |
| Brand refresh | Review | JV | 16 | $9,750 |
| App onboarding | Draft | BQ | 28 | $12,100 |
| Checkout cleanup | Queued | MS | 9 | $4,800 |
| Analytics audit | Paused | ZN | 31 | $7,250 |
Same spacing and row height as divided; only the body row separators are removed.
Table · Row action
| Project | Status | Owner | Open | Due |
|---|---|---|---|---|
| Website relaunch | Open | OM | 8 | 3d |
| Brand refresh | Review | JV | 5 | 5d |
| App onboarding | Draft | BQ | 12 | 9d |
| Archive audit | Locked | ZN | 0 | - |
| Checkout cleanup | Queued | MS | 3 | 12d |
Rows can advertise one clear action; static tables do not show hover affordance.
Table · Row selection
| Name | Status | Owner | Budget | |
|---|---|---|---|---|
| Website relaunch | Active | OM | $18,400 | |
| Brand refresh | Selected | JV | $9,750 | |
| App onboarding | Draft | BQ | $12,100 | |
| Checkout cleanup | Selected | MS | $4,800 | |
| Analytics audit | Paused | ZN | $7,250 |
Selection composes the native Checkbox; checked rows and the select-all indeterminate state use its exact visual and keyboard contract.
Usage notes
A table is for records with comparable columns.
| Verdict | Rule |
|---|---|
| Do | Use Table when rows compare across columns — items that are mainly narrative content belong in lists or cards. |
| Do | Default to --divided; --plain removes only the body row separators — spacing, density, and typography never change between variants. |
| Do | Keep ordinary text in every column on Table's complete body recipe: body family, copy-sm, normal line height, regular weight, and normal tracking. Headers keep the same recipe and change only to semibold. |
| Do | Let composed Badge, Chip, Avatar, Checkbox, Button, Link, Code, and similar components retain their own contracted typography and sizing. |
| Do | Right-align numeric columns with tabular numbers, and give mixed tables explicit column tracks (colgroup) so numeric headers and cells share one right-aligned box. |
| Do | Use the medium Avatar as-is in owner cells — standing alone it names the person (role="img" + aria-label). |
| Do | Keep real table semantics — th headers, scope where it clarifies, a caption or heading naming the table; sorting, resizing, virtualization, and keyboard grids keep this visual contract and live in L2. |
| Don’t | Give a static table hover affordance — --row-action exists for rows with one clear action, --row-selection for rows that persistently select. |
| Don’t | Apply page typography or ds-text-* recipes to individual plain cells or columns to manufacture hierarchy; semantic emphasis may change weight or color, never family or size. |
| Don’t | Mark selection with a second fill or a left marker — the checked checkbox is the selected state. |
| Don’t | Round the table itself — the outer radius belongs to a wrapping container that owns the clipping, and header cells never round. |