Primitive
Table
Lightweight grid-based table for figure tables (e.g. cashflow periods). Renders as a bordered card surface; the header row uses the surface tone and the body rows sit on the card tone. The first column is auto-sized for a label and is left-sticky so it stays visible while amount columns scroll horizontally. The header row is top-sticky so column labels stay visible while the body scrolls vertically — see data-narrow below.
Preview
Q4 2025
Q1 2026
Starting Balance
$42,000.00
$55,000.00
Ending Balance
$55,000.00
$61,500.00
Class
| Class | When applied |
|---|---|
.asset-table | Container — bordered card surface. Defaults to overflow-x: auto so wide tables scroll horizontally. |
.asset-table[data-narrow] | Variant for layouts that fit without horizontal scroll (e.g. the responsive narrow viewport on the cashflow / P&L reports). Switches the columns to two equal-width tracks (1fr 1fr) with a 12px column gap and sets overflow: visible so the sticky head can pin against the page rather than the table itself. Toggle via the Table primitive's narrow prop. |
.asset-table-row | Row — even-width grid columns. |
.asset-table-head | TableHead row — surface-tinted band that bleeds to the table edges, with a bottom border and smaller cell text. position: sticky; top: 0 keeps the column labels visible while body content scrolls past. |
.asset-table-footer | TableFooter wrapper — adds a dashed top rule above its child rows. |
.asset-table-cell | Default cell. colSpan={n} sets gridColumn: span n inline. |
.asset-table-cell-right | align="right" — right-aligned text. |
.asset-table-cell-muted | muted — muted-foreground color. |
.asset-table-cell-emphasis | emphasis — bold + foreground color. |
.asset-table-cell-numeric | numeric — monospace + tabular figures. |
CSS variables
Override these on any ancestor scope (or globally) to restyle this primitive. See the CSS Variables reference for the full token list and Theming for override patterns.
| Variable | Affects |
|---|---|
--asset-card | Body background of the table. |
--asset-surface | Background tone of the header row. |
--asset-border | Outer border, header row bottom rule, and footer dashed rule. |
--asset-radius | Outer corner radius (table is always rounded). |
--asset-foreground | Default cell text color. |
--asset-muted-foreground | Cell text when muted, and within header rows. |
--asset-font-mono | Cell font when numeric. |