Components · Content
Table / Data Grid
The data grid: a toolbar, sortable column headers, cells that carry one to three lines, and a footer with pagination. The most-assembled component in the suite.
Figma source: Table (Data Grids) ↗Examples
| Status | Direct costs | |||
|---|---|---|---|---|
| 24-0117 | Longitudinal study of soil microbiota R. Alvarez · Chemistry |
Under review | $412,000 | |
| 24-0118 | Coastal sediment transport modelling M. Chen · Earth Sciences |
Requires changes | $188,500 | |
| 24-0119 | Machine learning for protein folding J. Okafor · Biology |
Approved | $740,200 |
Parts
The Figma file breaks the table into eight components so a product can assemble the grid it needs. The annotation is explicit that the Full Table is a starting point: “Use this full table example as a basis… When using the pattern, select DETACH INSTANCE to use if the Full Table Pattern does not match needs (ie. column amount).”
| Component | Purpose |
|---|---|
| Table Header | The toolbar above the grid. Toggles for a main button, secondary button, special button, more-menu and toggle. |
| Table Cells | Header and data cells. Carries 1–3 lines, left or right alignment, a sort icon, and a component before or after the text. |
| Single Table Column | A whole column, with alignment and optional leading icons. |
| T Components | The controls that sit inside a cell: checkbox, radio, icon. |
| Table Footer | Row count and pagination. |
| Full Table | The assembled default — detach and adjust. |
| Property | Values | Notes |
|---|---|---|
Parts | Data · Headers | Which row type the cell belongs to. |
Line height | 1 · 2 · 3 | How many lines of content the cell carries. |
Aligned | Left · Right | Right for numbers, left for everything else. |
Component | Before · After · Off | A control or icon alongside the cell text. |
Selected/Hovered | On · Off | Row state. |
Sort Icon? | boolean | Header sort affordance. |
Usage
The file also notes what column headers are for: “How the data in the data grid should [be] referential to its column header.” Every cell must be readable as an answer to its header — which is the same requirement that makes a table accessible.
When to use it
- Right-align numbers so digits line up and magnitudes compare at a glance.
- Put the secondary line inside the cell it qualifies, as with the PI name beneath the title above.
- Keep column headers short and make them describe the values, not the database field.
- Show the total row count near the pagination.
When not to use it
- Do not centre-align numeric columns.
- Do not put more than three lines in a cell — at that point it is a card, not a row.
- Do not rely on row colour alone to convey state; use a Status Pill.
- Do not make the entire row clickable if the row also contains buttons and links.
The header checkbox above is a select-all. When some but not all rows are selected
it must show the indeterminate state — el.indeterminate = true plus
aria-checked="mixed". The Figma
Checkbox set does not currently include that state.
Accessibility
- Use a real
<table>with<th scope="col">. A grid built from divs loses the row/column relationships entirely. - Give the table a
<caption>describing what it contains — visually hidden if the page heading already says it. - Sortable headers are buttons inside the
<th>, witharia-sorton the<th>itself set toascending,descendingor omitted. - Row checkboxes need names identifying the row — “Select proposal 24-0117”, not “Select row”.
- Announce the new state after sorting or filtering; the visual change is silent otherwise.
- Wide tables scroll horizontally in their own container, and that container needs
tabindex="0"and a label so keyboard users can scroll it.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--table-header-background | Header row fill | --color-gray-100 |
--table-header-border | Header rule | --color-gray-300 |
--table-header-text | Header text | --color-black |
--table-cell-background | Cell fill | --color-white |
--table-cell-border | Row rules | --color-gray-200 |
--table-cell-hover | Row hover | --color-gray-200 |
--table-cell-text | Cell text | --color-black |