DataTable

The batteries-included, API-driven data grid: pass columns + data and get sorting (click a header), a search filter, row selection (with select-all), and inline editing — all controllable via props. Built on the composable Table primitives, so it inherits the same look. Generic over any row type with a string id.

Use this for real application tables. Reach for RecordsTable only when you specifically want Attio's records grid (typed-cell pickers, sticky columns, bulk bar); use Table when you want to lay out cells by hand.

Preview

Try it — sort by any header, search, select rows, and click a Name or Role cell to edit it.

Usage

import { DataTable, type DataTableColumn } from "crisp";

const columns: DataTableColumn<Person>[] = [
  { key: "name", header: "Name", sortable: true, editable: true },
  { key: "status", header: "Status", sortable: true,
    render: (v) => <Badge tone={v === "active" ? "success" : "neutral"} dot>{v}</Badge> },
  { key: "score", header: "Score", sortable: true, align: "right" },
];

<DataTable
  columns={columns}
  data={people}
  filterable
  selectable
  interactive
  defaultSort={{ key: "score", dir: "desc" }}
  onSelectionChange={setSelected}
  onEdit={(id, key, value) => update(id, key, value)}
/>;

API

DataTableProps<T>

DataTableColumn<T>

key, header, and optional sortable, filterable, editable, align, width, render(value, row), and accessor(row) (derive the sort/filter/display value).