Data Table

<DataTabletitle="Workers"description="Everything deployed in this project."searchableselectablerows={workers}getRowId={(worker) => worker.id}columns={[  { id: "name", header: "Worker", primary: true, sortBy: (w) => w.name, cell: (w) => w.name },  { id: "region", header: "Region", cell: (w) => w.region },  { id: "requests", header: "Requests", numeric: true, sortBy: (w) => w.requests, cell: (w) => w.requests.toLocaleString() },  { id: "status", header: "Status", cell: (w) => <Badge dot variant={w.tone}>{w.status}</Badge> },]}bulkActions={(selected, clear) => (  <Button size="sm" variant="destructive-secondary" onClick={() => remove(selected, clear)}>    Delete {selected.length}  </Button>)}/>

DataTable is Table with everything a real list needs bolted on: search, sorting, column visibility, selection with a bulk-action bar, loading skeletons and two different empty states.

Two layout decisions are worth knowing about.

• The bulk bar replaces the toolbar in place. It does not appear above it: pushing the table down the moment you tick a checkbox moves the rows out from under the cursor, which is how you end up selecting the wrong one.
• The whole thing is one card. Toolbar, table and footer share a single ring and one background, because they are one control — three stacked boxes read as three unrelated widgets.

Filtering and sorting are client-side by default: the 95% case is a page of a few hundred rows you already have, and a server round trip to filter those turns a snappy list into a spinner. Every input is also controllable, so the same component works against a server when the list outgrows the page.

Usage

import { DataTable } from "@heyo-sh/heyo-ui";<DataTable  rows={workers}  getRowId={(worker) => worker.id}  columns={[    { id: "name", header: "Worker", primary: true, cell: (w) => w.name },    { id: "region", header: "Region", cell: (w) => w.region },  ]}/>;

Columns

A column is data plus a renderer. cell returns a node, so formatting lives in the column and not in the rows.

const columns: DataTableColumn<Worker>[] = [  {    id: "name",    header: "Worker",    primary: true,    sortBy: (w) => w.name,    cell: (w) => w.name,  },  {    id: "requests",    header: "Requests",    numeric: true,    sortBy: (w) => w.requests,    cell: (w) => w.requests.toLocaleString(),  },  {    id: "actions",    header: "",    actions: true,    cell: (w) => <RowMenu worker={w} />,  },];

Loading and empty

Three states, and they are not the same thing. loading draws skeleton rows, empty is "there is nothing here yet", and emptyFiltered is "your query matched nothing" — a different problem that deserves different words.

<DataTable loading loadingRows={3} rows={[]} columns={columns} getRowId={byId} /><DataTablerows={[]}columns={columns}getRowId={byId}empty={<Empty title="No workers yet" description="Deploy one to see it here." />}/>

Against a server

Control the query and take over filtering. toolbar is the slot on the right of the search field — filters, a date range, a "New" button — and footer is the strip under the table, which is where Pagination belongs.

<DataTable  rows={page.rows}  columns={columns}  getRowId={(row) => row.id}  searchable  query={query}  onQueryChange={setQuery}  loading={isPending}  toolbar={<Button icon={IconPlus}>New worker</Button>}  footer={    <Pagination page={page.number} pageCount={page.count} onPageChange={goTo} />  }/>

Properties