Display
Data table
Once the columns line up, the lines between them are redundant - so they are gone, along with the zebra striping and the outer border. What replaces them is discipline: numeric columns are right aligned and set in tabular figures, so the digits form their own vertical rule. Sorting animates by row identity, which means a re-sort is rows travelling to new positions rather than the whole block blinking and redrawing, and it stays possible to follow one row through the change.
npx shadcn@latest add @minflow/data-tableWhere to use it
- Anywhere values need comparing down a column: usage, billing, metrics, inventory.
- With sortable headers when the interesting question is 'which is the largest', not 'what is in row four'.
- Reach for List instead when rows are read one at a time and never compared.
Variations
Sortable
The default for numeric data. Only the active column shows its caret, and the caret rotates between directions rather than being swapped out.
Read-only
Short, fixed sets where sorting would be theatre - a summary, a comparison of three plans, a set of totals.