Installation

Install the React bindings (the framework-agnostic core comes with them):

npm i @kanunilabs/datagrid-react

(Any package manager works — yarn add / pnpm add too.)

React is the only required peer dependency. There are no other runtime dependencies to install.

Styles

Import the stylesheet once, near your app root:

import '@kanunilabs/datagrid-react/styles.css';

The stylesheet is plain CSS scoped under .kanuni-datagrid-root, so it cannot leak into your app and your app's CSS cannot leak into the grid. Theming is done with CSS custom properties — see Features → Theming.

The Web Worker: nothing to configure

Above roughly 20,000 rows the grid moves filtering and sorting into a Web Worker. The worker is compiled into the package and started from a Blob URL, so there is no file to copy, no bundler recipe and nothing to import — Vite, webpack, Next.js and Parcel all work as they are.

You can still control the offload:

<DataGrid worker={{ enabled: false }} />          {/* always main thread */}
<DataGrid worker={{ threshold: 50_000 }} />        {/* offload later */}

If you have a strict Content-Security-Policy

A Blob worker needs worker-src to allow blob::

Content-Security-Policy: worker-src 'self' blob:

If you cannot change the policy, serve the worker as a file instead. It ships in the package either way, and pointing at it opts out of the Blob entirely.

Vite — import the worker as an asset URL:

import workerUrl from '@kanunilabs/datagrid-core/dist/datagrid.worker.js?url';

<DataGrid worker={{ url: workerUrl }} /* ... */ />

Next.js and other bundlers — copy datagrid.worker.js from node_modules/@kanunilabs/datagrid-core/dist/ into a served path (e.g. public/) and point at it:

<DataGrid worker={{ url: '/datagrid.worker.js' }} /* ... */ />

The same route is worth taking if you would rather serve the worker from a CDN, so it caches separately from your app bundle.

Excel export (optional)

CSV export needs nothing extra. For .xlsx, install the optional peer:

npm i exceljs

It is loaded lazily, so apps that never export to Excel don't pay for it. If it isn't installed, the Excel path reports an actionable error and CSV keeps working.

TypeScript

Types ship with the packages — no @types/* needed. The public API is fully typed, including GridColumnDef, ReactGridColumnDef, the filter AST and every event payload.

Server-side rendering

The grid renders on the server without a worker or DOM measurement and hydrates normally. Popups are created on mount, so nothing is portaled during SSR. See SSR & bundlers for the Next.js and Vite specifics.

Next: explore the features.