Tarva BXD · LumosIndex › Components › Table
1920 × 1080 · Landscape
Index › Components › Table
Flagship · variants + states
Components · Table
Quietly tabular.
A theme-agnostic set of eight slots in an overflow-auto container. Density is the single knob — comfortable, compact, or spacious — set once on the root and read by every head and cell through context. Status lives in moss, amber, and rust; accent appears only on a selected row.
Anatomy · 8 slots
| Client | Plan | Sessions |
|---|---|---|
| Avery Lindqvist | Restore | 12 |
| Maren Okafor | Renew | 8 |
| Total | 20 |
1Table —
caption-bottom root in an overflow-auto container2TableHeader — faint tint, hairline below
3TableHead — left-aligned, medium, muted label
4TableBody · TableRow — last row drops its border
5TableCell — align-middle, density-padded
6TableFooter — muted fill, top border, medium
Usage
Do
Set density once on Table — context threads it to every TableHead and TableCell. Right-align numerals and set them in mono.
Don't
Don't reach for Table when you need sort, filter, or virtualized scroll — that is DataGrid. Keep accent off cells; reserve it for the selected row only.
Props · <Table>
| Prop | Type | Default | Notes |
|---|---|---|---|
| density | comfortable · compact · spacious | "comfortable" | Visual density. Provided via context to descendant heads + cells; sets data-density on the table. |
| className | string | — | Merged onto the root via cn(). Same on every slot. |
| …props | ComponentProps<'table'> | — | Native table attributes forwarded through the rest spread. |
Density · the one variant axis
compacth-8 · py-2
| User | Role |
|---|---|
| okafor | Admin |
| lindqvist | Coach |
| navarro | Viewer |
comfortableh-10 · p-3
| User | Role |
|---|---|
| okafor | Admin |
| lindqvist | Coach |
| navarro | Viewer |
spacioush-12 · py-4
| User | Role |
|---|---|
| okafor | Admin |
| lindqvist | Coach |
| navarro | Viewer |
Composed table · status column
| Client | Program | Status | Next visit | |
|---|---|---|---|---|
| Avery Lindqvist | Restore · 12-wk | Active | Jun 28 | |
| Maren Okafor | Renew · 8-wk | Pending | Jul 02 | |
| Theo Navarro | Reset · 6-wk | Lapsed | — | |
| Saoirse Bell | Restore · 12-wk | Paused | Aug 11 | |
| 4 clients | 1 active | 3 booked |
Row states · <TableRow>
| Default row |
| Hover row |
| Focused row |
| Selected row |
| Disabled row |
8.5 × 11 · Portrait