KanuniLabs DataGrid

KanuniLabs DataGrid is a high-performance data grid for React. Columns are encoded into typed arrays and the filter/sort pipeline moves to a Web Worker once the dataset gets large, so scrolling, sorting and filtering a million rows stays responsive.

Why this grid

• Fast on large data, measurably. At 1,000,000 rows: numeric sort 90 ms, text sort 108 ms, equality filter 19 ms, free-text search 58 ms. The performance guide shows how each number is reached and how to reproduce it.
• Small DOM. Rows and columns are virtualized. A 100,000-row grid keeps roughly 25 rows mounted.
• Pinned columns that cannot drift. Pinned columns are sticky cells inside a single scroll container — there is no second table to keep in sync.
• Keyboard and screen-reader ready. A complete WAI-ARIA grid model, virtual focus, and one tab stop for the header instead of one per column.
• Free core. Everything on this page is in the free Community package.

Packages

Installing the React package pulls in the core automatically:

npm i @kanunilabs/datagrid-react

A first grid

import { DataGrid, type ReactGridColumnDef } from '@kanunilabs/datagrid-react';
import '@kanunilabs/datagrid-react/styles.css';

const columns: ReactGridColumnDef<Sale>[] = [
  { field: 'id', headerName: 'ID', dataType: 'number', width: 80, pin: 'left' },
  { field: 'product', headerName: 'Product', width: 220 },
  { field: 'revenue', headerName: 'Revenue', dataType: 'number', width: 140 },
];

<DataGrid gridId="sales" dataSource={rows} rowKey="id" columns={columns} style={{ height: 600 }} />;

rowKey is required — selection and focus are keyed by row identity, which is what lets them survive sorting and filtering.

Where to next

• Installation — packages, styles, bundler notes
• Features — sorting, filtering, grouping, export
• Performance — the numbers and the techniques
• FAQ
• Playground — try it on 100,000 rows

Status

The Community edition is feature-complete for its v1 scope. Cell/row/batch editing, master-detail, multi-level grouping and remote data models are planned for the Enterprise edition.

Missing something? Tell us what you need — feature requests are read by the people who write the code.