SystemsFinance

Table

Default and sheet-mode tables. Compose with TableHeader, TableBody, TableRow, TableHead, and TableCell.

Basic

DateDescriptionAmount
Jan 12Groceries$82.40
Jan 18Fuel$54.10

Section headers

NameValue
Assets
Checking$12,340
Savings$45,600
Liabilities
Credit Card$1,240
Total$56,700

Sheet mode

Tracking spreadsheet density with sticky headers.

mode="sheet" enables sticky headers, compact density, and sheetRole on TableHead / TableCell, used on /tracking/[year]. Vertical sticky uses --table-sheet-sticky-top-header (flush under fixed TopNav) and --table-sheet-sticky-top-group (group bands under the thead; needs --table-sheet-header-row-height to match the real thead row). Avoid overflow-x: auto on a wrapper around the table; it forces a vertical scrollport and breaks sticky.
AccountOwnerJan
Currency
Cash
$1,200
CheckingShared$800

ContentLockup sizes

Small
Chase CheckingJPMorgan Chase
Default
Chase CheckingJPMorgan Chase
Large
Chase CheckingJPMorgan Chase
Small inline (no separator)
LV FundWealthsimple

ContentLockup in cells

AccountBalance
Chase CheckingJPMorgan Chase
$12,340
Ally SavingsAlly Financial
$45,600

Editable

DescriptionOwnerAmount
Coffee shop$5.40
Groceries$82.40

Developer

import { Table } from "@financial-tracking/design-system"

Table

PropTypeDefault
modesheet enables sticky headers and sheet cell roles."default" | "sheet""default"
densityledger — transactions-style density."default" | "ledger""default"
scrollHorizontal scroll wrapper.booleantrue
wrapperClassNamestring—

TableRow

PropTypeDefault
variant"default" | "category" | "summary""default"
categoryToneWhen variant="category"."muted" | "canvas""muted"
summaryEmphasisWhen variant="summary"."default" | "strong""default"
sheetRowSheet mode row height / hover."account" | "groupHeader"—