Data table

FREE

Rows you scan, sort, select and open.

Every shadcn style · one file

Installation

pnpm dlx shadcn@latest add https://notchset.dev/r/data-table.json

Free, no account or key. One command for every shadcn style. With the @notchset registry added, @notchset/<name> works too.

Works with React 18.3 or 19 on Tailwind CSS v4, in any shadcn project. What's tested

Install by hand

1. No extra packages: React is enough.
2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/blocks/data-table.tsx
3. No stylesheet needed.
4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles), Checkbox, Sortable header

Styles didn't apply?

The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.

Usage

Import it and pass your content. The props that matter most are listed next.

Example

"use client";
import * as React from "react";
import { DataTable } from "@/components/ui/notchset/blocks/data-table";
import { CompanyMark } from "@/components/ui/notchset/company-mark";
import { StatusPill } from "@/components/ui/notchset/status-pill";

/* the companies' own marks, 24×24 paths as the CRM seed draws them */
const GLYPH: Record<string, string> = {
  airtable: "M11.992 1.966c-.434 0-.87.086-1.28.257L1.779 5.917c-.503.208-.49.908.012 1.116l8.982 3.558a3.266 3.266 0 0 0 2.454 0l8.982-3.558c.503-.196.503-.908.012-1.116l-8.957-3.694a3.255 3.255 0 0 0-1.272-.257zM23.4 8.056a.589.589 0 0 0-.222.045l-10.012 3.877a.612.612 0 0 0-.38.564v8.896a.6.6 0 0 0 .821.552L23.62 18.1a.583.583 0 0 0 .38-.551V8.653a.6.6 0 0 0-.6-.596zM.676 8.095a.644.644 0 0 0-.48.19C.086 8.396 0 8.53 0 8.69v8.355c0 .442.515.737.908.54l6.27-3.006.307-.147 2.969-1.436c.466-.22.43-.908-.061-1.092L.883 8.138a.57.57 0 0 0-.207-.044z",
  stripe: "M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z",
  revolut: "M20.9133 6.9566C20.9133 3.1208 17.7898 0 13.9503 0H2.424v3.8605h10.9782c1.7376 0 3.177 1.3651 3.2087 3.043.016.84-.2994 1.633-.8878 2.2324-.5886.5998-1.375.9303-2.2144.9303H9.2322a.2756.2756 0 0 0-.2755.2752v3.431c0 .0585.018.1142.052.1612L16.2646 24h5.3114l-7.2727-10.094c3.6625-.1838 6.61-3.2612 6.61-6.9494zM6.8943 5.9229H2.424V24h4.4704z",
  webflow: "m24 4.515-7.658 14.97H9.149l3.205-6.204h-.144C9.566 16.713 5.621 18.973 0 19.485v-6.118s3.596-.213 5.71-2.435H0V4.515h6.417v5.278l.144-.001 2.622-5.277h4.854v5.244h.144l2.72-5.244H24Z",
  posthog: "M9.854 14.5 5 9.647.854 5.5A.5.5 0 0 0 0 5.854V8.44a.5.5 0 0 0 .146.353L5 13.647l.147.146L9.854 18.5l.146.147v-.049c.065.03.134.049.207.049h2.586a.5.5 0 0 0 .353-.854L9.854 14.5zm0-5-4-4a.487.487 0 0 0-.409-.144.515.515 0 0 0-.356.21.493.493 0 0 0-.089.288V8.44a.5.5 0 0 0 .147.353l9 9a.5.5 0 0 0 .853-.354v-2.585a.5.5 0 0 0-.146-.354l-5-5zm1-4a.5.5 0 0 0-.854.354V8.44a.5.5 0 0 0 .147.353l4 4a.5.5 0 0 0 .853-.354V9.854a.5.5 0 0 0-.146-.354l-4-4zm12.647 11.515a3.863 3.863 0 0 1-2.232-1.1l-4.708-4.707a.5.5 0 0 0-.854.354v6.585a.5.5 0 0 0 .5.5H23.5a.5.5 0 0 0 .5-.5v-.6c0-.276-.225-.497-.499-.532zm-5.394.032a.8.8 0 1 1 0-1.6.8.8 0 0 1 0 1.6zM.854 15.5a.5.5 0 0 0-.854.354v2.293a.5.5 0 0 0 .5.5h2.293c.222 0 .39-.135.462-.309a.493.493 0 0 0-.109-.545L.854 15.501zM5 14.647.854 10.5a.5.5 0 0 0-.854.353v2.586a.5.5 0 0 0 .146.353L4.854 18.5l.146.147h2.793a.5.5 0 0 0 .353-.854L5 14.647z",
};

const STAGE = { Discovery: "#8f9bb3", Evaluation: "#38a6d6", Proposal: "#9b87f5", "Security review": "#e3a33b" } as const;
type Deal = { id: string; name: string; color: string; stage: keyof typeof STAGE; value: number; close: string };
const DEALS: Deal[] = [
  { id: "d1", name: "Airtable", color: "#18bfff", stage: "Proposal", value: 48000, close: "2026-11-07" },
  { id: "d2", name: "Stripe", color: "#635bff", stage: "Security review", value: 152000, close: "2026-12-12" },
  { id: "d3", name: "Revolut", color: "#191c1f", stage: "Proposal", value: 97500, close: "2026-11-14" },
  { id: "d4", name: "Webflow", color: "#146ef5", stage: "Evaluation", value: 214500, close: "2027-01-30" },
  { id: "d5", name: "PostHog", color: "#1d1f27", stage: "Discovery", value: 31000, close: "2027-02-06" },
];
const money = (n: number) => `$${Math.round(n / 1000)}k`;
const MON = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const day = (iso: string) => `${MON[Number(iso.slice(5, 7)) - 1]} ${Number(iso.slice(8))}`;
/* every column offered for sorting sorts by its own value: stages in pipeline order, close dates by date */
const ORDER = Object.keys(STAGE);
const BY: Record<string, (a: Deal, b: Deal) => number> = {
  name: (a, b) => a.name.localeCompare(b.name),
  stage: (a, b) => ORDER.indexOf(a.stage) - ORDER.indexOf(b.stage) || a.name.localeCompare(b.name),
  close: (a, b) => a.close.localeCompare(b.close),
  value: (a, b) => a.value - b.value,
};

export default function DataTableDemo() {
  const [sort, setSort] = React.useState<{ key: string; direction: "ascending" | "descending" }>({ key: "value", direction: "descending" });
  const [selected, setSelected] = React.useState<Set<string>>(new Set(["d2"]));
  const rows = [...DEALS].sort((a, b) => (sort.direction === "ascending" ? 1 : -1) * (BY[sort.key] ?? BY.name!)(a, b));
  const toggle = (id: string) => setSelected((s) => (s.has(id) ? new Set([...s].filter((x) => x !== id)) : new Set([...s, id])));
  return (
    <DataTable
      rows={rows}
      rowKey={(d) => d.id}
      rowLabel={(d) => d.name}
      sort={sort}
      onSort={(k) => setSort((s) => (s.key === k ? { key: k, direction: s.direction === "ascending" ? "descending" : "ascending" } : { key: k, direction: k === "value" ? "descending" : "ascending" }))}
      selected={selected}
      onSelect={toggle}
      onSelectAll={() => setSelected(selected.size === rows.length ? new Set() : new Set(rows.map((d) => d.id)))}
      onOpen={() => {}}
      empty="No deals in this filter"
      columns={[
        { key: "name", label: "Company", sortable: true, grow: true, cell: (d) => <span className="flex items-center gap-2.5"><CompanyMark name={d.name} color={d.color} glyph={GLYPH[d.name.toLowerCase()]} />{d.name}</span> },
        { key: "stage", label: "Stage", hideOnPhone: true, cell: (d) => <StatusPill color={STAGE[d.stage]}>{d.stage}</StatusPill> },
        { key: "close", label: "Close", hideOnPhone: true, cell: (d) => <span className="text-[var(--ns-ink-2)]">{day(d.close)}</span> },
        { key: "value", label: "Amount", sortable: true, align: "end", cell: (d) => <span className="tabular-nums">{money(d.value)}</span> },
      ]}
    />
  );
}

This example also uses Company mark, Status pill. This command installs them with it, so the example pastes as it is:

pnpm dlx shadcn@latest add https://notchset.dev/r/data-table.json https://notchset.dev/r/company-mark.json https://notchset.dev/r/status-pill.json

Anatomy

Built fromCheckbox Sortable header

Source

components/ui/notchset/blocks/data-table.tsx

Props

rows–
R[]
Required.
rowKey–
(row: R) => string
Required.
rowLabel–
(row: R) => string
Required.
columns–
Column<R>[]
Required.
sort–
{ key: string; direction: "ascending" | "descending" }
onSort–
(key: string) => void

Show all 13 props

selected–
Set<string>
onSelect–
(id: string, index: number, range: boolean) => void
onSelectAll–
() => void
phoneSelect–
boolean
Keep the checkboxes on a phone, for a list whose job is acting on several rows at once (approvals).
onOpen–
(row: R) => void
activeIndex–
number
empty–
React.ReactNode