Installation

Install the React bindings (the framework-agnostic core is pulled in automatically):

npm i @kanunilabs/pivotgrid-react

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

To try it before installing anything, open a ready project — React or plain JavaScript — that runs in your browser:

The React package declares its UI libraries as peer dependencies. npm 7+ installs these automatically; if your setup doesn't, add the ones your app doesn't already have:

npm i @dnd-kit/core lucide-react zustand

Not using React? @kanunilabs/pivotgrid is the same grid over the same engine, driven by a plain createPivotGrid() call — no framework peer at all (@dnd-kit, lucide-react and zustand are not needed). The JavaScript guide covers it end to end, including the Enterprise edition via createEnterprisePivotGrid().

npm i @kanunilabs/pivotgrid

Styles

Import the stylesheet once, near your app root:

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

The JavaScript package ships the same stylesheet as @kanunilabs/pivotgrid/styles.css.

The Web Worker: nothing to configure

The engine runs its aggregation in a Web Worker, and the worker is compiled into the package and started from a Blob URL. There is no file to copy, no bundler recipe and nothing to import — Vite, webpack, Next.js and Parcel all work as they are. The same is true of the import and export workers.

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, the grid falls back to loading the worker file from node_modules on its own — and where that fails too, point workerUrl at a copy you serve. The file ships in the package either way.

Vite — import the worker as an asset URL:

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

<BasePivotGrid workerUrl={workerUrl} /* ... */ />

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

<BasePivotGrid workerUrl="/pivot.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.

TypeScript

Types ship with the packages — no @types/* needed. The public API is fully typed, including PivotField, PivotLocale, and the component props.

Next: render your first grid.

Versions that go together

Each package carries its own version number, so a release can ship @kanunilabs/pivotgrid and its React package at different numbers: a package moves only when its own code or a dependency changes. They are still released as one set. Install the latest of each; the paid packages pin the exact versions of the free ones they build on, so your package manager resolves a matching set. The current set, read from the changelog: