System
The default table. Plain TableHead cells, no sorting. Columns follow the columns="data"template: the first column takes the primary share of width, and the rest split what’s left evenly.
| Title | Status | Date | Views |
|---|---|---|---|
| Building AI-Powered Business Tools | Mar 15, 2026 | 2,847 | |
| The Case for Variable Fonts | Mar 8, 2026 | 1,923 | |
| Design Systems That Scale | Mar 1, 2026 | 0 | |
| Typography on the Modern Web | Feb 22, 2026 | 3,102 | |
| From Figma to Code | Feb 15, 2026 | 1,456 |
Sorting is opt-in per column: pass sortable, sorted, and onSort to TableHead. Click any column header to sort.
| Title | Status | Date | Views |
|---|---|---|---|
| Building AI-Powered Business Tools | Mar 15, 2026 | 2,847 | |
| The Case for Variable Fonts | Mar 8, 2026 | 1,923 | |
| Design Systems That Scale | Mar 1, 2026 | 0 | |
| Typography on the Modern Web | Feb 22, 2026 | 3,102 | |
| From Figma to Code | Feb 15, 2026 | 1,456 |
dense steps the body to 12px and tightens rows to a 32px rhythm for high-density data. Everything else is identical to the default table.
| Token | Value | Pixels | Grid |
|---|---|---|---|
| --text-xs | 0.75rem | 12px | 2×8 |
| --text-sm | 0.875rem | 14px | 3×8 |
| --text-base | 1rem | 16px | 4×8 |
| --text-lg | 1.125rem | 18px | 3×8 |
| --text-xl | 1.25rem | 20px | 7×4 |
| --text-2xl | 1.5rem | 24px | 4×8 |
| --text-3xl | 1.75rem | 28px | 9×4 |
Rows tint on hover, and a row marked data-state="selected" (the second one here) carries a subtle accent highlight.
| Product | Price | Sales | Revenue |
|---|---|---|---|
| Super Life | $29 | 847 | $24,563 |
| Super Work | $29 | 623 | $18,067 |
| Super Budget | $19 | 1,204 | $22,876 |
| Super Goals | $19 | 956 | $18,164 |
Not a table. When a row pairs one large element with small metadata (a type specimen, an avatar-and-name, a media card), fixed columns fight the size difference. Stack the primary element above its metadata instead, reusing the table’s border and hover treatment. Reach for this when the row is a thing with attributes, not a set of comparable cells.