System

Table / Data tables with opt-in sorting and numeric cells.

Default

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.

TitleStatusDateViews
Building AI-Powered Business ToolsPublishedMar 15, 20262,847
The Case for Variable FontsPublishedMar 8, 20261,923
Design Systems That ScaleDraftMar 1, 20260
Typography on the Modern WebPublishedFeb 22, 20263,102
From Figma to CodePublishedFeb 15, 20261,456

Sortable

Sorting is opt-in per column: pass sortable, sorted, and onSort to TableHead. Click any column header to sort.

TitleStatusDateViews
Building AI-Powered Business ToolsPublishedMar 15, 20262,847
The Case for Variable FontsPublishedMar 8, 20261,923
Design Systems That ScaleDraftMar 1, 20260
Typography on the Modern WebPublishedFeb 22, 20263,102
From Figma to CodePublishedFeb 15, 20261,456

Compact

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.

TokenValuePixelsGrid
--text-xs0.75rem12px2×8
--text-sm0.875rem14px3×8
--text-base1rem16px4×8
--text-lg1.125rem18px3×8
--text-xl1.25rem20px7×4
--text-2xl1.5rem24px4×8
--text-3xl1.75rem28px9×4

Row states

Rows tint on hover, and a row marked data-state="selected" (the second one here) carries a subtle accent highlight.

ProductPriceSalesRevenue
Super Life$29847$24,563
Super Work$29623$18,067
Super Budget$191,204$22,876
Super Goals$19956$18,164

Stacked rows (alternative)

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.

Stacked rows
Display
36pxHero headlines and page titles
Heading
28pxPrimary section headings
Body
16pxDefault paragraph and content text