A free pivot table your users build themselves
Drag fields into rows, columns and values over a million rows. On 1,067,371 real invoice lines a recompute took 29 to 48 ms in the browser, because the totals are computed in a Web Worker compiled into the package. No licence key, no watermark, commercial use allowed.
Drag a field. The numbers follow.
Twelve more demos in the playground, each with its source.
Three fields is a working pivot
npm install @kanunilabs/pivotgrid-reactimport { BasePivotGrid } from '@kanunilabs/pivotgrid-react';
import '@kanunilabs/pivotgrid-react/styles.css';
<BasePivotGrid
gridId="sales"
data={rows}
initialFields={[
{ id: 'region', dataField: 'region', caption: 'Region', dataType: 'string', area: 'row' },
{ id: 'quarter', dataField: 'quarter', caption: 'Quarter', dataType: 'string', area: 'column' },
{ id: 'revenue', dataField: 'revenue', caption: 'Revenue', dataType: 'number', area: 'data', summaryType: 'sum' },
]}
/>The three aggregation workers are compiled into the package and started from a Blob URL — there is no workerUrl to set and no file to copy into public/.
A pivot table in your dashboard’s colours
36 light and dark colour schemes cover the whole pivot — headers, subtotals, the grand total, the field chooser, filter popups and dialogs — and compact, normal and comfortable set the row height. The same schemes exist for the DataGrid, so a pivot and a data grid on one page can match.
What is free, and what is not
In the free edition
- Drag fields between row, column, value and filter areas
- Sum, average, min, max, count and distinct aggregation
- Expand and collapse any node — including bulk expand/collapse from the right-click menu
- Percent-of-total, running totals and cell colour scales
- Saved views, 36 light and dark colour schemes and twelve locales (Arabic RTL included)
- CSV and JSON export, and print
Enterprise adds
- Calculated measures, with a visual editor in the footer
- Visual prefilter builder over the source rows
- Drill down from any cell to the rows behind it
- Styled Excel and PDF export, with the crosstab structure preserved
- Interactive charts driven by the current pivot
The full wording, with the licence key setup, is in the Enterprise guide.
Before you read the guide
Is this a feature of the data grid, or a separate component?
A separate component with its own package, its own field panel and its own aggregation engine. It is not a mode of DataGrid — but it IS covered by the same licence key, which is the part most competitors charge twice for.
Which frameworks?
React 18+ and plain JavaScript. @kanunilabs/pivotgrid builds the grid straight into the DOM with one createPivotGrid(element, config) call, a UMD build makes a script tag a complete install, and a parity ledger checked in CI records where the two renderers agree. No Angular or Vue adapter.
How much data can it aggregate?
The pivot demo aggregates 1,067,371 real invoice lines in the browser and times every recompute: country by year took 29 to 48 ms, with no main-thread pause over 50 ms. A layout with thousands of rows on screen still pauses the page, by about 100 to 500 ms depending on the sort; the demo shows that too. Aggregation, sorting and filtering run in a Web Worker embedded in the package, with nothing to configure.
Can the pivot table match our design?
Yes. Pick one of 36 light and dark colour schemes, or build your own in the free Theme Builder on this site, which previews the PivotGrid and the DataGrid side by side and exports one stylesheet for both. Row density is a separate prop: compact, normal or comfortable.
What is free?
Everything listed under "In the free edition" above: the whole drag-and-drop pivoting experience, aggregation, expand/collapse, conditional formatting, saved views, theming, 12 locales and CSV/JSON export. Calculated measures, the prefilter builder, drill-down, charts and styled Excel/PDF export are the paid tier.
One licence covers this and DataGrid
Most vendors sell the pivot as a second product, or fold it into a single expensive tier. Here one key opens both, and the subscription ending does not switch off what you already shipped.