@crispy-seed/data-table

A publishable build of seed-design's Attio-measured DataTable, for apps that already run @seed-design/* (e.g. an existing seed-design-based admin). The JS bundle does not vendor a second copy of seed-design — every published @seed-design/* package DataTable touches is a peer dependency, so your app supplies one shared instance instead of shipping two. Two exceptions:

• @seed-design/react-data-table (the headless data-table primitives this DataTable is built on) isn't published to npm yet, so it's bundled in rather than declared as a peer — there is no existing instance of it in your app to dedupe against.
• @seed-design/react-primitive is ALSO bundled in, even though a package by that name and version is published upstream: this fork's copy adds table/thead/tbody/tfoot/tr/th/td primitives (see packages/react-headless/primitive/src/index.tsx) that DataTable needs for a real <table> grid, without bumping the version number, so a published @seed-design/[email protected] installed from the real npm registry (what any existing seed-design app already has) does NOT have them — declaring it a peer crashes at render (Cannot read properties of undefined (reading 'displayName'), from Primitive.tfoot/.td being undefined). Bundling means two copies of this (small) module ship if your app already depends on it, which is the right trade against a hard crash.

This is a derivative of SEED Design's DataTable (@seed-design/react), repackaged under a different scope for standalone distribution. See NOTICE for attribution.

Install

npm install @crispy-seed/data-table react react-dom

You also need the peer @seed-design/* packages DataTable imports — @seed-design/dom-utils, @seed-design/react-checkbox, @seed-design/react-field, @seed-design/react-image, @seed-design/react-menu, @seed-design/react-scale-feedback, @seed-design/react-segmented-control, @seed-design/react-select, @seed-design/react-switch, @seed-design/react-text-field (see peerDependencies in package.json for the version ranges). If your app already depends on @seed-design/react, it already has all of these transitively — nothing new to install. @seed-design/react-data-table and @seed-design/react-primitive are bundled in (see above) — do not install either separately.

You also need @seed-design/css@^2.8.0 installed, even though it isn't in peerDependencies: the JS imports 14 of its recipes (@seed-design/css/recipes/{avatar,avatar-stack,badge,checkbox,checkbox-group, checkmark,menu,menu-item,segmented-control,select,select-item,select-trigger, switch,switchmark,text-input}) as real external imports, same as the other peers above — package.json can't express "peer, but only these specific deep imports, not the one this package bundles instead" (see CSS section below), so this is a peer in practice that npm has no way to declare that precisely.

Usage

import { DataTable } from "@crispy-seed/data-table";

const columns = [
  { key: "name", header: "Name", type: "entity" as const },
  { key: "email", header: "Email", type: "email" as const },
  { key: "amount", header: "Amount", type: "currency" as const },
];

const data = [
  { id: "1", name: "Ada Lovelace", email: "[email protected]", amount: 1200 },
  { id: "2", name: "Alan Turing", email: "[email protected]", amount: 900 },
];

export function Example() {
  return <DataTable columns={columns} data={data} selectable />;
}

CSS: two cases

DataTable renders @seed-design/css recipe classes (data-table, avatar, badge, checkbox, menu, select, segmented-control, switch, text-input, …). Those class names need their CSS loaded exactly once. Note that data-table itself is the one recipe not in the published @seed-design/css (same reason @seed-design/react-data-table is bundled above — it's unreleased upstream), so it's always missing regardless of which case below you're in.

• Your app does not otherwise import @seed-design/css: import @crispy-seed/data-table/styles.css once anywhere (it's a side-effect-only CSS import). dist/styles.css is @seed-design/css's all.css — tokens + every recipe in the design system, copied verbatim (including data-table, from this fork's own build, since it's the one recipe upstream doesn't publish). It's correct but not minimal (ships more than the table alone needs); scoping it down to just the recipes DataTable renders is a worthwhile follow-up if bundle size matters.
• Your app already imports @seed-design/css (all.css or all.layered.css) — e.g. any existing seed-design admin: do not import @crispy-seed/data-table/styles.css — it would duplicate everything you already have, and if your app uses the layered variant (all.layered.css, common alongside Tailwind so seed's rules sit in a named @layer and lose the cascade to your overrides), our copy is the unlayered all.css — importing it alongside would inject the same rules unlayered, which beats every layered rule regardless of source order and can override your app's own token overrides. Instead import only the one recipe your @seed-design/css is missing: @crispy-seed/data-table/data-table-recipe.layered.css if you're on the layered pipeline (wrapped in @layer seed-components, matching every other seed recipe you already load — put the import wherever your other @seed-design/css imports live so layer order is consistent), or @crispy-seed/data-table/data-table-recipe.css (unlayered) otherwise. Both are sourced from this fork's own packages/css/recipes/data-table*.css, not from dist/styles.css.

License

Apache-2.0. See LICENSE and NOTICE.