Data grid

npm install @tanstack/react-table

import { DataGrid, type ColumnDef } from "@/components/ui/data-grid";

import { DataGrid, type ColumnDef } from "@/components/ui/data-grid";

type Project = {
  id: string;
  name: string;
  status: "Active" | "Paused" | "Archived";
};

const PROJECTS: Project[] = [
  { id: "p_1", name: "Sermon series", status: "Active" },
  { id: "p_2", name: "Mid-week graphics", status: "Active" },
  { id: "p_3", name: "Volunteer recruitment", status: "Paused" },
];

const columns: ColumnDef<Project, unknown>[] = [
  { accessorKey: "name", header: "Project", meta: { label: "Project" } },
  { accessorKey: "status", header: "Status", meta: { label: "Status" } },
];

export function Example() {
  return (
    <DataGrid
      columns={columns}
      data={PROJECTS}
      searchable="Filter projects..."
      getRowId={(row) => row.id}
    />
  );
}

// Flat one-liner — toolbar / table / pagination composed automatically
<DataGrid
  columns={columns}
  data={data}
  searchable="Filter rows..."   // false | true | placeholder string
  selectable                    // prepends the checkbox column
  hidableColumns                // adds the View menu
  paginated={{ pageSize: 10 }}  // true | { pageSize, pageSizes }
  scrollHeight="420px"
  stickyHeader
  getRowId={(row) => row.id}
/>

// Slot escape hatch — use when you need external table state access
// (e.g. reading rowSelection to drive a bulk-action toolbar)
import { DataGridRoot, useDataGrid, DataGridTable, DataGridToolbar } from "@/components/ui/data-grid";

const table = useDataGrid({ data, columns, features: { selection: true }, getRowId });
const selectedIds = Object.keys(table.getState().rowSelection ?? {});

<DataGridRoot table={table}>
  {selectedIds.length > 0 && (
    <DataGridToolbar>
      <span>{selectedIds.length} selected</span>
    </DataGridToolbar>
  )}
  <DataGridTable />
</DataGridRoot>

// All slot exports are retained as the escape hatch:
// DataGridRoot, DataGridToolbar, DataGridSearch, DataGridColumnVisibility,
// DataGridTable, DataGridPagination, DataGridSelectColumn, useDataGrid