# DataTable

The dashboard table at packed density: a muted header line, then rows as raised 12-radius panels (the accounts table), or a single raised panel with rule-separated lines (the agent log). Numbers are tabular so columns of figures line up.

```html
<div class="postie-table" role="table" aria-label="Connected accounts">
  <div class="postie-table__head" role="row"><span>Account</span><span>Provider</span>…</div>
  <div class="postie-table__row" role="row"><span class="postie-table__cell postie-table__cell--primary">…</span>…</div>
</div>
<div class="postie-table postie-table--log" style="--postie-table-cols: 56px 1fr 72px">…</div>
```

**When.** `rows` for entities the user owns (accounts, API keys, rules) — each row is a thing, with a pebble or a name in the primary cell and a StateChip at the end. `log` for time-ordered events (agent activity) where the lines are read as a stream.

**Never.**
- Never zebra striping, never vertical rules, never a bordered grid — the row IS the panel (tonal-step); the rule token appears only inside `log`.
- Never a coloured status cell; state is a StateChip (word + dot).
- Never sortable-column arrows in the accent, never a filter chip row above the table.
- Never proportional figures — `font-variant-numeric: tabular-nums` stays on.
- Never a hover colour other than one raised step; never a row shadow.