Components / Data display / Data table
D3 · Data display
Data table
A dense table with a sticky header, a heat column, a mini bar, and a sparkline.
<table class="c-dense">
<thead><tr><th>Document</th><th class="num">Age</th><th class="num">Change</th></tr></thead>
<tbody><tr><td class="num">DOC-1042</td><td class="num">6</td><td class="num bad">−2</td></tr></tbody>
</table>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- Readers scan many records on the same fields.
- A column encodes a number with colour and a digit.
When not to use
- There are fewer than four records.
- The layout is a form.
Usage
<table class="c-dense">
<thead><tr><th>Document</th><th class="num">Age</th><th class="num">Change</th></tr></thead>
<tbody><tr><td class="num">DOC-1042</td><td class="num">6</td><td class="num bad">−2</td></tr></tbody>
</table>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| c-dense | class | — | Sticky header inside c-scroll. |
| heat cell | style | — | Flat tint from the signed change. The number remains. |
| c-bar | 0–100% | — | Completeness. The percent is also text. |
| sparkline | svg | — | Seven touches. Decorative; the table still names the row. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves past the table. Cells are not a grid widget. |
| Arrow keys | Scroll the overflow region when it is focused. |
Accessibility
- The header row names every column.
- Heat is paired with a signed number.
- The bar is aria-hidden and the percent is text.
- Sparklines are aria-hidden.
Motion
- No motion. The header sticks while the body scrolls.
Pattern origin
Pattern type: a dense table with heat, bars, and sparklines.