Design system

Tables

Scannable operational data with explicit headers, links, and number alignment.

Use a table when people compare the same fields across records. Keep the surface flat and let rows, spacing, and alignment carry structure.

Work orderVehicleStatusEstimate
WO-1042Toyota Hilux · ABC123In progress$226.40
WO-1041Ford Ranger · DEF321Blocked$1,840.00
WO-1040Mazda 3 · XYZ789Created—

The primary cell contains a real link. Do not turn the entire row into a button. Right-align money and counts, apply tabular-nums, render a missing value as an em dash, and preserve a real zero.

Sorting controls must announce the column and next sort direction. Keep truncated values discoverable. Put the empty result outside the table while leaving filter controls available.