- Weight
- 2.4 kg
- Power
- 18 W
Spec list
Key and value facts, printed like the plate on the back of a device.
Kit part · Tables
Table
Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
- Element
- <table>
- Needs
- kit.css
- Rules
- table.rules.md · 5
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
| Service | p95 | Errors |
|---|---|---|
| checkout-api | 405 ms | 0.84% |
| payments | 286 ms | 0.41% |
| webhooks | 210 ms | 0.09% |
| search | 118 ms | 0.03% |
| Kitchen | 0.41 kW | |
| Office | 0.00 kW |
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Header | Row | Hovered row | ||||||
|---|---|---|---|---|---|---|---|---|---|
| Table |
|
|
|
Graphite
| Part | Header | Row | Hovered row | ||||||
|---|---|---|---|---|---|---|---|---|---|
| Table |
|
|
|
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-table | class | on <table> | Full width, collapsed, tabular figures, hairlines between rows. |
| .tui-table-wrap | class | wrapper | Scrolls a wide table inside itself, never the page. |
| <th> | element | — | Printed as labels: small, tracked, upper case. |
| .is-num | class | on <td>/<th> | Right-aligned. Put units in the cell. |
| tbody tr:hover | state | — | The row lifts a touch toward the cap colour. |
| data-sort | attribute | "number" · "text" on <th> | Sortable by that column: with kit.mjs the header’s words become a key; press it for ascending, again for descending. Needs a <thead> and a <tbody>. |
| aria-sort | attribute | set by script | On the sorted header. Set it yourself in the markup if the rows arrive sorted. |
| data-value | attribute | on <td> | The cell’s sort key when its printed text is not its order: a date, “3.5m”, “—”. |
| tui-sort | event | { column, direction } | After each sort, on the table; bubbles. |
| tr[aria-selected="true"] | state | — | A chosen row: the face lifts under it and its words go to full ink. |
Markup
<div class="tui-table-wrap">
<table class="tui-table">
<thead><tr><th>Session</th><th>Status</th><th class="is-num">Length</th></tr></thead>
<tbody>
<tr>
<td>Harbour survey</td>
<td><span class="tui-status"><span class="tui-lamp" data-on></span>Mixed</span></td>
<td class="is-num">42:10</td>
</tr>
</tbody>
</table>
</div>Needs kit.css only, no script. How to install the kit.
Accessibility
- A real table: header cells in
<thead>, one row of headers,scopeon row headers if you use them. - Status cells use a lamp with words; row switches carry an
aria-labelnaming the row.
How it’s built
Type and hairlines. Header cells take the label style; the hover is a color-mix of the raised face. No script, no images.
Rules
table.rules.mdIn the brain
Numbers right-aligned with their units; row actions small and to the right.
5 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.
Related parts
Lamp
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
Switch
On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.