Table
Default and sheet-mode tables.
Basic Table
| Date | Description | Amount |
|---|---|---|
| Jan 12 | Groceries | $82.40 |
| Jan 18 | Fuel | $54.10 |
Table with Section Headers
| Name | Value |
|---|---|
| Assets | |
| Checking | $12,340 |
| Savings | $45,600 |
| Liabilities | |
| Credit Card | $1,240 |
| Total | $56,700 |
Sheet mode (Tracking)
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.| Account | Owner | Jan |
|---|---|---|
Currency | ||
Cash | $1,200 | |
| Checking | Shared | $800 |
ContentLockup Sizes
Small
Chase CheckingJPMorgan Chase
Default
Chase CheckingJPMorgan Chase
Large
Chase CheckingJPMorgan Chase
Small inline (no separator)
LV FundWealthsimple
ContentLockup in Table Cells
| Account | Balance |
|---|---|
Chase CheckingJPMorgan Chase | $12,340 |
 Ally SavingsAlly Financial | $45,600 |
Editable Table with Interactive Elements
| Description | Owner | Amount |
|---|---|---|
| Coffee shop | $5.40 | |
| Groceries | $82.40 |