Data Table

@sushindustries/ui

The same table with TanStack Table under it: sorting, filtering and paging that somebody else has already tested.

7 min read
View as MarkdownEdit on GitHub

Props

PropTypeDefaultDoes
rowsreadonly TRow[]-
columnsreadonly DataTableColumn<TRow>[]-
sortBy?string-Which column to sort by first, and which way.
descending?boolean-
empty?string-What to say when there are no rows. Not an error - usually a filter.
labelstring-Announced to screen readers, and never drawn.
density?"comfortable" | "compact"-How much room each row gets. comfortable is a table somebody reads a few rows of. compact is one they scan fifty rows of, which is a genuinely different job: at fifty rows the padding is most of the height, and a table that needs two screens to show what fits on one is a table people stop scrolling. Only the padding and the line height change. The type stays the same size in both, because shrinking text to fit more of it is where a dense table stops being readable and starts being a screenshot.
striped?boolean-Shades alternate rows. Off by default and worth turning on for wide tables specifically: banding exists to stop the eye slipping a row between the first column and the last, and a three-column table has no such distance to slip across. On a narrow table it is decoration that makes every second row look selected.

Notes

Anything the types cannot say: which combinations are meaningless, which prop is ignored when another is set, and what it does when handed something it cannot render.