Table
The workhorse data surface. Sortable, sticky-header, row select, striped, two densities — used wherever the operator scans a list of records.
Primitive vs pattern.
Per audit-reuse D-6, .table remains the bare semantic primitive — header / row / cell with sensible defaults. For rich features (data toolbar, sortable columns, row select, pagination), use the x-data-table pattern, which wraps .dtable. Legacy .data-table markup aliases to .dtable.
Default
A plain table — left-aligned text, right-aligned numbers, hairline rows.
| Receipt | Till | Cashier | Items | Total (USD) |
|---|---|---|---|---|
| R-19281 | 02 | Tariro M. | 7 | 17.21 |
| R-19282 | 02 | Tariro M. | 2 | 4.50 |
| R-19283 | 01 | Blessing K. | 12 | 42.80 |
| R-19284 | 03 | Tendai N. | 1 | 2.10 |
Sortable & sticky header
Header sticks when the table scrolls. Sortable columns show a caret in the active sort direction.
Row select
Checkbox column for bulk actions. Selected rows tint brand-soft.
| Supplier | National ID | Last load (kg) | Status | |
|---|---|---|---|---|
| Sipho Moyo | 00-184273-A-00 | 3.218 | Cleared | |
| Tendai Mhuri | 00-184274-B-00 | 2.140 | Cleared | |
| Rumbidzai Chiweshe | 00-184275-C-00 | 1.890 | KYC due | |
| Kuda Mapfumo | 00-184276-D-00 | 4.020 | Pending |
Striped & density
Striped rows for long lists. Compact density (28 px) for high-volume reconciliation; comfortable (44 px) when readability matters more than density.
| Account | Debit | Credit |
|---|---|---|
| 1100 Cash | 240.00 | — |
| 1200 Receivables | — | 240.00 |
| 4100 Sales | — | 208.70 |
| 2200 VAT output | — | 31.30 |
| Branch | Tills open |
|---|---|
| Park Centre | 3 / 4 |
| Avondale | 2 / 2 |
| Mazowe | 1 / 2 |
Parts
| Property | Value | Notes |
|---|---|---|
| row height | 36 px default | 28 compact · 44 comfortable |
| header | 11 px · uppercase · text-subtle | Sticky on scroll containers |
| cell padding | 8 px 12 px | Numeric cells use mono |
| numeric col | right-aligned · tabular-nums | .num modifier |
| selected row | --brand-soft fill | tr.selected |
| hover | --surface-muted | Whole row tint |
Do & don't
Right-align numbers and use tabular nums. Operators compare totals down a column.
Centre-align money. Decimals stop lining up and the eye can't scan.
Make the table scrollable horizontally on small screens — keep all columns visible, never collapse them.
Hide columns behind a "more" toggle. The operator needs to see what's there.
Use compact density (28 px) when the user is reconciling — they want as many rows in view as possible.
Mix densities on the same page. Pick one based on the dominant task.
Code
<!-- Sortable, sticky-header data table --> <div style="max-height: 320px; overflow: auto;"> <table class="dtable"> <thead><tr> <th class="sortable asc">SKU</th> <th class="sortable num">On hand</th> </tr></thead> <tbody> <tr class="selected">…</tr> </tbody> </table> </div>
Related
For the full data-table pattern with toolbar, see Data table. For pagination controls, see Pagination.