Table
Usage
A column-configured data table. Tables are the one thing that genuinely cannot always fit a phone, so this one scrolls itself horizontally rather than letting the page scroll — the surrounding layout stays intact. For sorting, filtering and pagination over large sets, `data-table` is the catalogued heavier component; this is the presentational one.import { Table } from '@summonware/ui';Best practices
DoRight-align numeric columns with `align: "right"`. Digits only compare when their places line up.
DoUse `render` to put a Badge or an action in a cell rather than pre-formatting strings into your row data.
DoAlways supply `empty`. A table with a header and no body reads as broken.
Don'tUse `striped` and `dense` together on wide tables — it gets noisy fast.
Anatomy
Column *`{ key, header, render?, align?, width? }`. `key` indexes the row object.
Row *Any record. Needs a stable `id`.
Empty stateRendered in place of the body when `rows` is empty.
Examples
Common configurations, variations and states.Striped with a rendered cell
| Reference | Customer | Status | Total |
|---|---|---|---|
| ORD-2043 | Acme Ltd | Paid | $1,004.36 |
| ORD-2044 | Globex | Pending | $248.00 |
| ORD-2045 | Initech | Overdue | $97.50 |
The status column uses `render` to return a Badge, and the total is right-aligned so the amounts compare.
Dense
| Reference | Customer | Total |
|---|---|---|
| ORD-2043 | Acme Ltd | $1,004.36 |
| ORD-2044 | Globex | $248.00 |
| ORD-2045 | Initech | $97.50 |
Tighter padding for tables with many rows, where vertical space is the constraint.
Empty
| Reference | Customer | Total |
|---|---|---|
| No orders in this period. | ||
With no rows, the `empty` node replaces the body. Never leave this to chance.
Appointment schedule
| Time | Attendee | Type | Status |
|---|---|---|---|
| 9:00 AM | Jane Doe | Consultation | Confirmed |
| 11:30 AM | Sam Lee | Follow-up | Pending |
| 2:00 PM | Ali Khan | Consultation | Cancelled |
The same rendered-cell pattern applied to a booking list instead of an order list — status still carries a Badge, but the columns are time and attendee, not reference and total.
Reference variants
4 of 18 labels from the reference are demonstrated above.Basic TableStriped TableSmall TableDefault TableHover TableDark TableContextual ClassesBoth BordersBorderless TableDefault Table BorderBorder Bottom ColorExtra Large TableLarge TableExtra Small TableDefault StylingTable Footer StylingCustom Table ColorCustom Table Color with Hover and Stripped