patterns
Tables and data density
The workhorse of enterprise Wolf. Semantic table, sticky header, one action column on the right, density matched to the surface.
Read the full specLive specimen — reports table
Toggle density to see 36px compact and 48px comfortable rows. Badge variant derives from status.
Density
| Area | Status | Reported | Row actions | |
|---|---|---|---|---|
Suspicious vehicle at gate 3CW-1042 | Midrand · ward 92 | Open | 12 Apr 14:32 | |
Street-light outage on Main RdCW-1041 | Khayelitsha · site B | In progress | 12 Apr 12:08 | |
Patrol missed checkpoint 4CW-1040 | Sandton · route 7 | Escalated | 12 Apr 09:41 | |
Resident reported smash-and-grabCW-1039 | Rosebank · ward 117 | Resolved | 11 Apr 22:14 | |
Access scan — unknown plateCW-1038 | Fourways · estate 3 | Resolved | 11 Apr 19:02 |
Showing 1–5 of 1,247
Page 1 of 250
Regions — what lives where
Five regions stacked vertically. Filter bar above, table in the middle, pagination footer at the bottom.
- Filter barSearch, filters, bulk actions · sticky below page header
- Header rowSortable columns · bg-muted/50 · sticky on scroll
- Body rowsOne per record · hover highlight · avoid zebra stripes
- Row actionsRightmost column · ⋮ opens DropdownMenu
- FooterPagination · row count · page-size selector optional
Density modes
Three heights. Default is comfortable. Compact for dashboards and control rooms; spacious only when cells need to breathe (avatars, rich content).
- Compact36pxDashboards, control rooms, dense lists
- Comfortable48pxDefault — most surfaces
- Spacious64pxAvatars, rich content, marketing surfaces
Column-type rules
Alignment and formatting follow the data, not the surface.
- TextLeft-align · truncate at ~200px · tooltip reveals full
- NumberRight-align · tabular-nums · thousand separators · unit in the header
- Date / timeLeft-align · '12 Apr 14:32' recent, '12 Apr 2026' older
- StatusBadge variant matches semantic — success / warning / destructive
- ActionsRightmost · icon button opens DropdownMenu · muted until hover