Display

DataTable

Records with search, sorting across pages, columns, pagination and bulk actions.

import { DataTable } from "@flinbu/seed";

Components

				Updated
dialog	Published	Mei Chen	237	Aug 10
tabs	Published	Tomás Gil	234	Aug 19
banner	Published	Ana Ruiz	212	Aug 5
popover	Published	Mei Chen	209	Aug 14
combobox	Published	Ana Ruiz	184	Aug 9
switch	Published	Mei Chen	181	Aug 18

import { Button, DataTable } from "@flinbu/seed";
import { Archive, Plus } from "lucide-react";

<DataTable<Row> className="w-full" aria-label="Components" columns={COLUMNS} rows={ROWS} pageSize={6} noun={["component", "components"]} selectable
  defaultSort={{ key: "uses", dir: "desc" }}
  toolbar={<Button size="sm" leftIcon={<Plus />}>New component</Button>}
  bulkActions={(rows, clear) => <Button size="sm" variant="secondary" leftIcon={<Archive />} onClick={clear}>Archive {rows.length}</Button>} />

Use it for

Lists of components, tokens, people, versions.

Use something else for

A few rows with no actions: use Table.

Props

Prop	Type	Default	Description
`columns`	`{ key, header, render?, align?, sortable?, sortValue?, hideable? }[]`	–	Columns.
`rows`	`object[]`	–	Records.
`rowKey`	`string(row, i) => key`	`'id'`	Identity.
`pageSize`	`number`	`10`	Rows per page.
`noun`	`[string, string]`	`['row', 'rows']`	Summary words.
`selectable / bulkActions`	`boolean / (rows, clear) => ReactNode`	–	Selection.
`sort / onSortChange`	`{ key, dir }null`	–	Sorting.
`toolbar`	`ReactNode`	–	Buttons on the right.
`stackOnMobile`	`boolean`	`true`	Below 768px each row is a card under a bar of sort buttons.
`loading / empty / density / onRowClick`	`…`	–	More.

Accessibility

Sort headers are buttons with aria-sort.
Select all covers the current page.
A search with no results says so and offers to clear it.
On phones rows are cards; the sort buttons and select all stay above them, and every value keeps its header.