# Table

Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.

Kit part · Free · https://tactileui.dev/parts/table

- Element: `<table>`
- Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit))
- Categories: Tables
- Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED
- Volumes: Tactile, Quiet

## Variants

### Sortable · data-sort

```html
<table class="tui-table" style="width:300px"><thead><tr><th data-sort="text">Service</th><th class="is-num" data-sort="number" aria-sort="descending">p95</th><th class="is-num" data-sort="number">Errors</th></tr></thead><tbody><tr><td>checkout-api</td><td class="is-num">405 ms</td><td class="is-num">0.84%</td></tr><tr><td>payments</td><td class="is-num">286 ms</td><td class="is-num">0.41%</td></tr><tr aria-selected="true"><td>webhooks</td><td class="is-num">210 ms</td><td class="is-num">0.09%</td></tr><tr><td>search</td><td class="is-num">118 ms</td><td class="is-num">0.03%</td></tr></tbody></table>
```

### With row actions

```html
<table class="tui-table" style="width:260px"><tbody><tr><td>Kitchen</td><td class="is-num">0.41 kW</td><td class="is-num"><input type="checkbox" class="tui-switch" checked aria-label="Kitchen power"></td></tr><tr><td>Office</td><td class="is-num">0.00 kW</td><td class="is-num"><button class="tui-key tui-key--sm">Edit</button></td></tr></tbody></table>
```

## Every state

- Header
- Row
- Hovered row

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## API

| Name | Kind | Values | What it does |
| - | - | - | - |
| .tui-table | class | on | Full width, collapsed, tabular figures, hairlines between rows. |
| .tui-table-wrap | class | wrapper | Scrolls a wide table inside itself, never the page. |
|  | element | — | Printed as labels: small, tracked, upper case. |
| .is-num | class | on / | 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 | Sortable by that column: with kit.mjs the header’s words become a key; press it for ascending, again for descending. Needs a and a . |
| 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 | The cell’s sort key when its printed text is not its order: a date, “3.5m”, “n/a”. |
| 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

```html
<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>
```

The demo on the page:

```html
<div class="tui-panel tui-table-wrap" style="width:min(100%,620px)"><div class="tui-panel__head"><span class="tui-label">Recent sessions</span><span class="tui-tag"><span class="tui-lamp" data-on></span>Live</span></div><table class="tui-table"><thead><tr><th>Session</th><th>Engineer</th><th>Status</th><th class="is-num">Length</th></tr></thead><tbody><tr><td>Harbour survey</td><td>M. Aske</td><td><span class="tui-status"><span class="tui-lamp" data-on></span>Mixed</span></td><td class="is-num">42:10</td></tr><tr><td>Common Comb ident</td><td>T. Brand</td><td><span class="tui-status"><span class="tui-lamp" data-lamp="amber" data-on></span>In review</span></td><td class="is-num">0:30</td></tr><tr><td>Lode, reel 3</td><td>K. Osei</td><td><span class="tui-status"><span class="tui-lamp" data-lamp="red" data-on></span>Recording</span></td><td class="is-num">1:18:02</td></tr></tbody></table></div>
```

## Usage notes

Figures are tabular and right-aligned, so they read as columns.

## Accessibility

- A real table: header cells in `<thead>`, one row of headers, `scope` on row headers if you use them.
- Status cells use a lamp with words; row switches carry an `aria-label` naming 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

Numbers right-aligned with their units; row actions small and to the right.

The full rules are in `table.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Spec list](https://tactileui.dev/parts/spec): Key and value facts, printed like the plate on the back of a device.
- [Lamp](https://tactileui.dev/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](https://tactileui.dev/parts/switch): On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.