@zedtech/zedkit-ui

DataTable

Tables with sorting, filtering, pagination plus loading/error/empty states.

Stable@zedtech/zedkit-ui

Click a column header to sort. Type in the filter to search every column.


#1042	Camille Rousseau	26 Oct	€128.50	Paid
#1041	Noah Bernard	26 Oct	€54.90	Pending
#1040	Inès Moreau	25 Oct	€239.00	Shipped
#1039	Lucas Petit	25 Oct	€18.20	Paid
#1038	Sofia Garcia	24 Oct	€76.40	Refunded
#1037	Hugo Lambert	24 Oct	€312.75	Shipped
#1036	Léa Fontaine	23 Oct	€42.00	Paid
#1035	Adam Mercier	23 Oct	€99.99	Pending
#1034	Chloé Girard	22 Oct	€150.30	Paid
#1033	Jules Faure	21 Oct	€27.60	Shipped

Page 1 of 2

View props table

Who is it for?: Developers listing queryable records (deliveries, users, orders).
When should I use it?: For record lists over ~20 rows or needing search.
When should I pick something else?: For a handful of static rows — map a simple table instead.

Use it

Simple

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} emptyMessage="No orders yet." emptyAction={<Button>Add order</Button>}
  pageSize={20} />

Standalone pagination

Product	Price
Cotton socks	9 €
Denim jacket	120 €
Rain cape	65 €
Beach towel	22 €
Straw hat	28 €

Page 2 of 4

import { DataTablePagination } from "@zedtech/zedkit-ui";
const [page, setPage] = useState(2);
<DataTablePagination page={page} pageCount={4}
  canPrevious={page > 1} canNext={page < 4}
  onPrevious={() => setPage(page - 1)} onNext={() => setPage(page + 1)} />

Standalone empty row

Search: “gift card”

Product	Stock	Price
No product matches “gift card”. Check the spelling or clear the search.

import { DataTableEmpty, Table, TableBody } from "@zedtech/zedkit-ui";
<Table><TableBody>
  <DataTableEmpty colSpan={3} message="Nothing here." />
</TableBody></Table>

Standalone toolbar

6 of 6 customers

Customer	City	Orders
Camille Rousseau	Lyon	14
Noah Bernard	Nantes	3
Inès Moreau	Lille	9
Lucas Petit	Lyon	1
Sofia Garcia	Marseille	22
Hugo Lambert	Nantes	6

import { DataTableToolbar } from "@zedtech/zedkit-ui";
const [query, setQuery] = useState("");
<DataTableToolbar value={query} onChange={setQuery} />

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

Simple

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} emptyMessage="No orders yet." emptyAction={<Button>Add order</Button>}
  pageSize={20} />

Package version 2.0.1.

Props

Prop

Type

Accessibility

Native table semantics (column headers associate by position); head/cell/caption spacing comes from --spacing-table-* theme tokens.

RouteModal

A route-driven modal (right drawer or centered dialog) that plays its exit before navigating back, with a list fallback.

DetailPanel

Key-value details as boxed rows or `variant="grid"` stats, plus a live pulse. Idle copy is `inactiveLabel`; `label` only overrides Live.