Patterns
Data Tables
The single most-used pattern in any product dashboard. Strict top-to-bottom anatomy: breadcrumb → stat cards → toolbar → table → pagination.
Full anatomy
$84,920.50
Total volume
4
Pending
1
Failed
| S/N | Reference | Customer | Status | Amount | Actions |
|---|---|---|---|---|---|
| 1 | TXN-84012 | Ada Lovelace | Completed | $1250.00 | |
| 2 | TXN-84013 | Grace Hopper | Pending | $84.50 | |
| 3 | TXN-84014 | Alan Turing | Failed | $320.75 |
Showing 1–10 of 128 items
Page 1 of 13
Do
- Keep S/N as the first column and ACTIONS as the last, always.
- Design and build both the empty and filled state — the state most often skipped and most often shipped broken.
- Right-align amounts to 2 decimals; show status as a Badge, never plain text.
Don't
- Reorder the anatomy — a reader’s eyes expect stats above the toolbar, the toolbar above the table.
- Show table rows and an empty state at the same time — the state is binary.