Docs draft
Table
Component storyFigma (TableRow set + Table container) ↗React component ↗DSDS entity ↗
When to use it
useSpec lists (Publisher, Audio languages) and order summaries — label/value pairs with dividers.
avoidSortable multi-column data. This is a definition list, not a spreadsheet.
a-real-data-grid-unplanned a real data grid (unplanned).Variants
tone · default / muted / emphasis — default = bold label + secondary right value (wraps for long values like language lists); muted = both secondary; emphasis = entry-white bold value for totals.
Design specifications
| label | type.label, 140px column, color.text.primary |
| value | type.body-sm right-aligned, color.text.secondary |
| value-emphasis | type.label-lg in color.text.entry |
| divider | 1px color.border.subtle |
| padding-y | space.12 |
Accessibility
Renders dl/dt/dd — label/value semantics for free. The Figma Table carries a Rows slot; code composes TableRow children.