Components / Data Display
Table
stableThe single most-used pattern in any product dashboard. Reference IDs in monospace, amounts right-aligned with 2 decimals, status as a coloured badge, rows or empty state — never both.
Filled
| Reference | Customer | Status | Amount |
|---|---|---|---|
TXN-84012 | Ada Lovelace | Completed | $1250.00 |
TXN-84013 | Grace Hopper | Pending | $84.50 |
TXN-84014 | Alan Turing | Failed | $320.75 |
Empty
No transactions yet.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
columns | TableColumn<T>[] | — | Yes | Column definitions: key, header, align, and an optional custom render. |
rows | T[] | — | Yes | Row data. An empty array renders the empty state instead of the table. |
emptyMessage | string | "No items yet." | No | Shown when rows is empty. |
getRowKey | (row: T) => string | — | Yes | Stable key extractor for each row. |
Do
- Right-align every numeric/currency column, and give it a monospace or tabular-numeral treatment.
- Always design and build the empty state alongside the filled state — never ship one without the other.
- Truncate long text with an ellipsis rather than wrapping and breaking row height.
Don't
- Render an empty <tbody> with headers still showing — swap to a dedicated empty state instead.
- Show status as plain coloured text — use the Badge component.
- Left-align currency or numeric columns.