@bmsuisse/datagrid

Headless-core React datagrid built on TanStack Table v9, with a shared filter/sort contract (mirrored by the bmsdna-datagrid Python package) and shadcn/ui-based primitives. Includes <DataGrid>, <TreeDataGrid> (lazy-loading tree grid), <ColumnSelector>, row virtualization, infinite scroll, and column-level filter widgets (NumberComparisonFilter, NumberHistogramFilter, enum filters, and more).

Install

npm install @bmsuisse/datagrid

Peer dependencies: react and react-dom (^18 or ^19).

Usage

import { DataGrid, type ColumnDef } from "@bmsuisse/datagrid";

const columns: ColumnDef<Row>[] = [
  { id: "name", type: "string", header: "Name", accessorKey: "name" },
];

<DataGrid columns={columns} dataSource={{ mode: "client", data: rows }} />;

Translating the filter UI

Filter widgets ship with English strings. Pass filterLabels (a Partial<FilterLabels>; anything omitted keeps its default from defaultFilterLabels) to translate them:

import { de } from "date-fns/locale";

<DataGrid
  columns={columns}
  dataSource={{ mode: "client", data: rows }}
  filterLabels={{
    selectAll: "Alle auswählen",
    searchPlaceholder: (header) => `${header} suchen…`,
    filterAriaLabel: (header) => `${header} filtern`,
    dateLocale: de,
  }}
/>;

Widgets rendered outside a <DataGrid> read the same labels from a <FilterLabelsProvider labels={…}>, or take a per-widget labels prop.

See AGENTS.md for the full design rationale, and packages/datagrid/demo for a runnable example against both a SQL and a Meilisearch backend.

License

MIT