Show a sortable, filterable, paginated data table

At a glanceCopy Anchor Link

• Who: Developers listing queryable records (deliveries, users, orders).
• What: Tables with sorting, filtering, pagination plus loading/error/empty states.
• Use when: For record lists over ~20 rows or needing search.
• Avoid when: For a handful of static rows — map a simple table instead.
• See also: Show key-value details and a live indicator

PreviewCopy Anchor Link

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.3.0 (via changesets).

ExampleCopy Anchor Link

import { DataTable, createDataTableColumns } from "@zedtech/zedkit-ui";
const helper = createDataTableColumns<Item>();
const columns = [helper.accessor("name", { header: "Name" })];
<DataTable columns={columns} data={items} loading={isLoading}
  error={error} pageSize={20} />

Wraps: @tanstack/react-table

PropsCopy Anchor Link