# KanuniLabs

> Documentation for the KanuniLabs PivotGrid and DataGrid: data components for React and for plain JavaScript that stay responsive at a million rows: sorting, filtering and aggregation run in a Web Worker compiled into the package. The Community edition is free on npm, with no licence key, no watermark and commercial use allowed; editing, styled Excel/PDF export and other advanced features are in the paid Enterprise edition. The links below are the guides, in the order of the documentation sidebar, and the generated API reference for every package.

PivotGrid: A fast, framework-agnostic PivotGrid: off-main-thread aggregation, drill-down, advanced filtering and Excel/PDF export. Renderers: React and plain JavaScript.
Install: `npm i @kanunilabs/pivotgrid-react`.
Free (proprietary): `@kanunilabs/pivotgrid-core`, `@kanunilabs/pivotgrid-react`, `@kanunilabs/pivotgrid`.
Commercial: `@kanunilabs/pivotgrid-react-enterprise`, `@kanunilabs/pivotgrid-enterprise`.

DataGrid: A high-performance DataGrid for React and plain JavaScript: virtualized rows and columns, a Web Worker pipeline, editing and charts in the Enterprise edition. Renderers: React and plain JavaScript.
Install: `npm i @kanunilabs/datagrid-react`.
Free (proprietary): `@kanunilabs/datagrid-core`, `@kanunilabs/datagrid-react`, `@kanunilabs/datagrid`.
Commercial: `@kanunilabs/datagrid-react-enterprise`, `@kanunilabs/datagrid-enterprise`.

## PivotGrid: Getting Started

- [Introduction](https://kanunilabs.com/docs/pivotgrid): A fast, framework-agnostic PivotGrid for the web.
- [Installation](https://kanunilabs.com/docs/pivotgrid/installation): Install the PivotGrid packages.
- [Next.js setup](https://kanunilabs.com/docs/pivotgrid/nextjs): Use the PivotGrid in a Next.js app.
- [Supported browsers](https://kanunilabs.com/docs/pivotgrid/browser-support): Which browsers the PivotGrid targets, the oldest versions that have every feature it uses, and what is tested in a real browser.
- [Upgrading](https://kanunilabs.com/docs/pivotgrid/upgrading): How to move the PivotGrid packages to a new version, and every change an existing app may notice, version by version.
- [AI coding assistants](https://kanunilabs.com/docs/pivotgrid/ai-assistants): Give Claude Code, Cursor, VS Code and other AI coding assistants the PivotGrid docs and API reference, so the code they write uses props that exist.
- [Quick start (React)](https://kanunilabs.com/docs/pivotgrid/react): Render your first PivotGrid in React.
- [Quick start (JavaScript)](https://kanunilabs.com/docs/pivotgrid/javascript): Use the PivotGrid without React: the same engine, the same stylesheet, a plain createPivotGrid() call — and the Enterprise edition through createEnterprisePivotGrid().

## PivotGrid: Guides

- [Features](https://kanunilabs.com/docs/pivotgrid/features): Aggregation, summary display modes, grouping, Top-N, conditional formatting, totals & layout, import, export, saved views, theming and performance — all configured through props.
- [FAQ](https://kanunilabs.com/docs/pivotgrid/faq): Frequently asked questions about licensing, frameworks and support.

## PivotGrid: Enterprise

- [Enterprise & licensing](https://kanunilabs.com/docs/pivotgrid/enterprise): Unlock calculated fields, charts, drill-down and export.
- [Private registry access](https://kanunilabs.com/docs/pivotgrid/registry): Install the enterprise package with your .npmrc credentials — and regenerate them from the dashboard in one click.
- [Calculated fields](https://kanunilabs.com/docs/pivotgrid/calculated-fields): A field whose value is computed rather than read. Row-level or summary-level, the formula language, the designer modal, and what a saved report does to them.
- [Prefilter & node menu](https://kanunilabs.com/docs/pivotgrid/prefilter): A row-level predicate applied before aggregation, its visual builder, and the right-click expand/collapse menu — with the two places their behaviour surprises people.
- [Drill-down & charts](https://kanunilabs.com/docs/pivotgrid/drill-down-and-charts): Two headless features: the rows behind a cell, and a live chart of the pivot. Both hand you data and let you render it — including the wiring the grid does not do for you.
- [Styled Excel & PDF export](https://kanunilabs.com/docs/pivotgrid/export): Three formats the Enterprise package adds, the options that actually reach the exporter, and an honest list of what the file will not match on screen.
- [Pivot layout for AI models](https://kanunilabs.com/docs/pivotgrid/ai): Let users describe a pivot in plain language: a JSON Schema of its fields, measures, filters, sorts and totals for your own model, and a checked apply for the answer. Enterprise.
- [Server-side pivot](https://kanunilabs.com/docs/pivotgrid/server-side): Pivot a dataset too large for the browser: your server aggregates, the grid lays the answer out. Lazy by level, one small contract to implement. Enterprise.

## PivotGrid: API reference

- [React (@kanunilabs/pivotgrid-react)](https://kanunilabs.com/docs/pivotgrid/api): The free React package: the pivot grid, its controller, and every free feature.
- [React · Enterprise (@kanunilabs/pivotgrid-react-enterprise)](https://kanunilabs.com/docs/pivotgrid/api/enterprise): The paid React package: drill-down, calculated fields, charts, prefilters.
- [JavaScript (@kanunilabs/pivotgrid)](https://kanunilabs.com/docs/pivotgrid/api/javascript): The free renderer with no React: the same engine, driven by a plain API.
- [JavaScript · Enterprise (@kanunilabs/pivotgrid-enterprise)](https://kanunilabs.com/docs/pivotgrid/api/javascript-enterprise): The paid renderer with no React: the designer, prefilter, drill-down, charts and export, attached rather than rendered.
- [Licensing (@kanunilabs/licensing)](https://kanunilabs.com/docs/pivotgrid/api/licensing): Keys, verification and the watermark. One key covers both components.

## DataGrid: Getting Started

- [Introduction](https://kanunilabs.com/docs/datagrid): A fast, framework-agnostic data grid for the web.
- [Installation](https://kanunilabs.com/docs/datagrid/installation): Install the DataGrid packages.
- [Supported browsers](https://kanunilabs.com/docs/datagrid/browser-support): Which browsers the DataGrid targets, the oldest versions that have every feature it uses, and what is tested in a real browser.
- [Upgrading](https://kanunilabs.com/docs/datagrid/upgrading): How to move the DataGrid packages to a new version, and every change an existing app may notice, version by version.
- [AI coding assistants](https://kanunilabs.com/docs/datagrid/ai-assistants): Give Claude Code, Cursor, VS Code and other AI coding assistants the DataGrid docs and API reference, so the code they write uses props that exist.

## DataGrid: Guides

- [Features](https://kanunilabs.com/docs/datagrid/features): Sorting, filtering, grouping, selection, export and theming.
- [Editing](https://kanunilabs.com/docs/datagrid/editing): Cell, batch, row, form and popup editing with validation, CRUD handlers and undo.
- [Formulas & calculated columns](https://kanunilabs.com/docs/datagrid/formulas): Spreadsheet formulas in DataGrid: calculated columns, a dialog your users add their own with, and =A1*B2 typed into cells. CSP-safe, no eval.
- [Server-side data](https://kanunilabs.com/docs/datagrid/remote): Load rows from your server as the user scrolls — filtering, sorting, search and totals run there. Free in Community; server grouping is Enterprise.
- [Events](https://kanunilabs.com/docs/datagrid/events): All 59 grid events and the three from the Enterprise chart panel, what each payload carries, and the patterns behind them — coarse vs granular, start/end brackets, and why some events are deliberately absent.
- [Theming](https://kanunilabs.com/docs/datagrid/theming): Six packaged themes at three densities, 42 colour palettes and schemes measured against WCAG AA, and the CSS custom properties they are built from — so your own theme is written the same way ours are.
- [Theme Builder](https://kanunilabs.com/theme-builder): Build a colour theme for a React or JavaScript data grid and pivot table: start from 36 light and dark schemes, check WCAG contrast live, and export the CSS. Free.
- [Charts](https://kanunilabs.com/docs/datagrid/charts): Chart the grid you are looking at: category and value pickers, six chart types, cross-filtering, and aggregation that runs off the main thread.
- [Performance](https://kanunilabs.com/docs/datagrid/performance): Measured benchmarks and the techniques behind them.
- [SSR & bundlers](https://kanunilabs.com/docs/datagrid/ssr): Server-side rendering with Next.js, worker resolution in Vite and other bundlers, and what the grid does before hydration.
- [JavaScript](https://kanunilabs.com/docs/datagrid/javascript): Use the DataGrid without React: the same engine, the same stylesheet, a plain createGrid() call — and the Enterprise edition through createEnterpriseGrid().
- [FAQ](https://kanunilabs.com/docs/datagrid/faq): Common questions about KanuniLabs DataGrid.

## DataGrid: Enterprise

- [Enterprise & licensing](https://kanunilabs.com/docs/datagrid/enterprise): Editing, range selection, server-side grouping, Excel and PDF export, charts.
- [Private registry access](https://kanunilabs.com/docs/datagrid/registry): Install the Enterprise package from the private npm registry.
- [Range, fill & clipboard](https://kanunilabs.com/docs/datagrid/range-selection): Drag a rectangle of cells, drag the fill handle to extend a series, and cut/copy/paste as TSV — all behind one editing.range switch.
- [Grouping & group summaries](https://kanunilabs.com/docs/datagrid/grouping): Group by more than one column and repeat the footer totals on every group header. What Community already does, and the two things Enterprise adds.
- [Master-detail & tree data](https://kanunilabs.com/docs/datagrid/hierarchy): Expandable detail panels under any row, and flat rows turned into a hierarchy through a parent reference. Both Enterprise.
- [Filter builder](https://kanunilabs.com/docs/datagrid/filter-builder): A dialog for nested AND/OR conditions, the AST it produces, and how it relates to the column filters the user sets in the header.
- [Import wizard](https://kanunilabs.com/docs/datagrid/import): A two-step CSV import dialog that maps file columns onto grid columns and hands you the rows. The parser itself is Community.
- [Side bar & status bar](https://kanunilabs.com/docs/datagrid/panels): A docked tool panel on the right, a counter strip along the bottom, and the selection statistics that live in it.
- [Grid state for AI models](https://kanunilabs.com/docs/datagrid/ai): Let users drive the grid in plain language: a JSON Schema of its filters, sort, grouping and columns for your own model, and a checked apply for the answer. Enterprise.

## DataGrid: API reference

- [React (@kanunilabs/datagrid-react)](https://kanunilabs.com/docs/datagrid/api): The free React package: the grid, its controller, and every free feature.
- [React · Enterprise (@kanunilabs/datagrid-react-enterprise)](https://kanunilabs.com/docs/datagrid/api/enterprise): The paid React package: editing, range selection, charts, panels, import.
- [JavaScript (@kanunilabs/datagrid)](https://kanunilabs.com/docs/datagrid/api/javascript): The free renderer with no React: the same engine, driven by a plain API.
- [JavaScript · Enterprise (@kanunilabs/datagrid-enterprise)](https://kanunilabs.com/docs/datagrid/api/javascript-enterprise): The paid renderer with no React. Same features, attached rather than rendered.
- [Licensing (@kanunilabs/licensing)](https://kanunilabs.com/docs/datagrid/api/licensing): Keys, verification and the watermark. One key covers both components.

## Optional

- [Full text of the guides](https://kanunilabs.com/llms-full.txt): every guide page above in one Markdown file, without the API reference.
- [Playground](https://kanunilabs.com/playground): Try the KanuniLabs component libraries live in your browser.
- [Changelog](https://kanunilabs.com/changelog): Release notes and version history for the KanuniLabs components.
- [Pricing and what each edition includes](https://kanunilabs.com/pricing): the free Community edition and the paid tiers, feature by feature.
- [Who builds it, and what keeps working if a licence ends](https://kanunilabs.com/about): the maker, how the claims on the site are checked, and what a lapsed licence still allows.
- [Issue tracker and release notes](https://github.com/kanunilabsdev/support): public issues and the changelog of every release.

## Demos on real data

- [Sales dashboard on 1,067,371 real rows](https://kanunilabs.com/demos/online-retail): DataGrid and PivotGrid over the UCI Online Retail II dataset, in the browser.
- [Pivot table on a million rows](https://kanunilabs.com/demos/pivot): Drag fields; each recompute is timed in the browser with the longest main-thread pause.
- [Sales report in a pivot table](https://kanunilabs.com/demos/pivot-report): Top countries and their best sellers of 2011 with units, average price and share; click a value for the invoice lines behind it.
- [Select rows in a million](https://kanunilabs.com/demos/selection): Deferred select-all and what to send to a server for it.
- [Export a million-row table to Excel](https://kanunilabs.com/demos/excel-export): Grouped export with subtotals, real dates and the sheet row limit.
- [Editable order table](https://kanunilabs.com/demos/order-editing): Batch editing, validation, undo and a save that sends only what changed.
- [Benchmarks](https://kanunilabs.com/benchmarks): Sort, filter and search times on 1,000,000 rows, with the script to reproduce them.

## Articles

- [A pivot table your users can drag, on a million rows, and how to tell whether it freezes the page](https://kanunilabs.com/blog/pivot-table-million-rows): Letting users build their own reports means aggregating every row on each drag. Measured on 1,067,371 real invoice lines, in the browser: what a Web Worker buys, what a plain loop costs, and a sort that froze the page for half a second until we fixed it.
- [Three ways an Excel export stops matching the screen, measured on a million rows](https://kanunilabs.com/blog/excel-export-what-arrives): An Export button is easy. A file that says what the screen said is not. We exported 1,067,371 real invoice lines and opened them in Excel: dates arrived as text, subtotals vanished, and 18,843 rows past the sheet limit were silently cut.
- [Select all in a million filtered rows, and send the server one line instead of a list](https://kanunilabs.com/blog/select-all-in-a-million-rows): Ticking the header checkbox on a filtered million-row table is one click. What "all" means, what getSelectedRows returns, and what you send to the server are the actual work. Measured on 1,067,371 real invoice lines.
- [The hard part of an editable table is knowing what changed](https://kanunilabs.com/blog/editable-table-knowing-what-changed): Putting an input in a cell is easy. Knowing which cells changed, refusing a bad value where it is typed, taking an edit back, sending only what changed and losing nothing when the server says no is the actual work.
- [How to find cancellations in a million invoice lines](https://kanunilabs.com/blog/find-cancellations-in-a-million-invoice-lines): The obvious filter, quantity below zero, gets the money right and more than doubles the returned units. A walk through 1,067,371 real invoice lines in a React grid and pivot, and the filter that matches the data.
- [How to build a sales dashboard on a million real rows in React](https://kanunilabs.com/blog/sales-dashboard-on-a-million-real-rows-in-react): A grid, a pivot and a chart over 1,067,371 transactions from a real UK online retailer. The data goes to the browser once, and every sort, search and pivot after that runs there.
- [Copy-paste that behaves like Excel — and where it doesn't](https://kanunilabs.com/blog/copy-paste-that-behaves-like-excel): Excel-like editing can mean anything from a rectangle you can drag to a fill handle that continues a series. Here is what our grid actually does with a drag, a fill handle and a clipboard — and the specific places the comparison to Excel breaks down.
- [What a data grid renders before it hydrates](https://kanunilabs.com/blog/what-a-data-grid-renders-before-it-hydrates): When an install guide makes ssr false a required step, it is worth asking what the component touches on the server. Here is what actually has to happen before a grid can render there, and what changes after hydration.
- [Where client-side sorting and filtering stop working](https://kanunilabs.com/blog/where-client-side-sorting-and-filtering-stop-working): A Web Worker gets you a million interactive rows in the browser. It does not get you a dataset bigger than a browser tab, or one where a user is only allowed to see some of the rows. That is a different problem with a different contract.
- [What actually blocks the main thread in a data grid](https://kanunilabs.com/blog/what-blocks-the-main-thread-in-a-data-grid): Virtualization fixes rendering. It does nothing for the 18 ms to 1.8 s a sort, filter or search still costs — and if that work runs on the interaction thread, the tab freezes regardless of how few rows you draw.
- [Why your popup disappears in fullscreen](https://kanunilabs.com/blog/why-your-popup-disappears-in-fullscreen): A menu that opens, receives events, has a real bounding box, and is invisible. The top layer explains it, z-index cannot fix it, and the obvious fix uncovered a worse bug underneath.
- [How we embedded a Web Worker in an npm package](https://kanunilabs.com/blog/embedding-a-web-worker-in-an-npm-package): Shipping a worker used to mean asking every user to copy a file into public/. We compiled it into the bundle instead. Here is the technique, the cost we measured, and the two ways it can quietly break.
- [How to choose a React data grid](https://kanunilabs.com/blog/how-to-choose-a-react-data-grid): Feature checklists all look the same. These are the eight questions that actually separate grids once you are six months into a project — and how to test each one in an afternoon.
- [Virtual scrolling a million rows — where it actually breaks](https://kanunilabs.com/blog/virtual-scrolling-a-million-rows): Rendering 24 rows instead of a million is the easy part. The hard part is that browsers refuse to make an element as tall as you asked, and they do not tell you.
- [Why a licence key is not a secret](https://kanunilabs.com/blog/why-a-licence-key-is-not-a-secret): Our licence keys ship in client bundles, and that is fine. Here is what they actually are, what they can and cannot protect, and why pretending otherwise makes products worse.