ReactBuilt for ReactJavaScriptPlain JavaScript, no framework required

A data grid that stays fast at a million rows

Virtualized rows and columns, sorting and filtering in a Web Worker, and 64 of 113 features that need no licence key. For React 18+ and for plain JavaScript, from one engine.

Try 82 live demos Install it

Sort it, filter it, group it — nothing here is a screenshot

Loading the demo…

One install, no bundler configuration

npm install @kanunilabs/datagrid-react
import { DataGrid } from '@kanunilabs/datagrid-react';
import '@kanunilabs/datagrid-react/styles.css';

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

<DataGrid
  gridId="sales"
  dataSource={rows}
  rowKey="id"
  columns={columns}
  sorting={{ multi: true }}
  filterRow
  toolbar
  style={{ height: 600 }}
/>

No framework? createGrid() renders the same grid into a plain element, with a UMD build for a bare <script> tag.

Make it match your product

Six structure themes decide the lines and the rhythm; 36 light and dark colour schemes decide the colours; compact, normal and comfortable decide the row height. Each is one prop, and all three combine. Every colour scheme is measured against WCAG AA contrast, and menus and popups follow it too.

Design a DataGrid theme in the Theme Builder Start from a scheme, change any colour on a live grid, export the stylesheet. Free.

Measured, with the method published

Sort, number column
101 ms
Sort, date column
92 ms
Sort, two columns
208 ms
Filter, equality
18 ms
Filter, 3 clauses (AND)
60 ms
Filter + sort
40 ms

1,000,000 rows × 9 columns, columnar path (the code the worker runs), median of 3 runs. The method, the caveats, and the script to run it yourself. We publish no comparison against other grids — a benchmark we ran on someone else's library would not be evidence, it would be marketing.

Every feature, and which edition it needs

Read from the inventory the product itself uses, so this list cannot disagree with the grid you install.

Data & performance

  • Virtual scrollingCommunityA million rows, with only the visible window in the DOM.
  • Web Worker offloadCommunityFiltering and sorting move off the main thread above ~20,000 rows.
  • Columnar encodingCommunityTyped arrays instead of objects — the reason sort and filter stay fast.
  • Server-side dataCommunityRows load from your server as the user scrolls; filtering, sorting, search, distinct values and totals run there, with Retry and refresh.
  • Server-side grouping & exportEnterpriseYour server groups and totals, opens groups and tree levels on demand, and an export pages through the whole result.
  • Rows pushed by the serverEnterpriseThe grid says which rows are on screen; your server pushes them and every change — a price feed, an order book.
  • PaginationCommunityClassic pager with page size control.
  • Numbered page buttonsCommunityJump straight to a page — 1 2 3 … 40, keyboard accessible.
  • Infinite scrollCommunityAppend rows as the user reaches the end.
  • TransactionsCommunityAdd, update and remove rows without rebuilding the grid.
  • Async transactionsCommunityBatch a burst of live updates into one pass.

Columns

  • SortingCommunitySingle and multi-column, with a custom comparator escape hatch.
  • ResizingCommunityDrag the edge; double-click for best fit.
  • ReorderingCommunityDrag a header to move the column.
  • PinningCommunityFreeze columns to either edge.
  • Visibility & chooserCommunityHide columns and bring them back from a picker.
  • Rename columns in the gridEnterpriseUsers rename a header in place — the name follows into exports and saved views.
  • Bands (multi-level headers)CommunityGroup headers over related columns, collapsible.
  • Auto-size, fit & flexCommunitySize to content, fill the grid exactly, or share its width with flex columns.
  • Automatic columnsCommunityInfer columns from the first row when you have not declared any.
  • Custom sort orderCommunitySort by your own rule — "Critical > High > Normal".
  • Sort by magnitudeCommunityOrder a variance column by size — −50 beside +50.
  • Click cycle per columnCommunityChoose the steps a header click goes through — largest first, or never unsorted.
  • Large integers (BigInt)CommunityExact sorting and filtering of 64-bit ids and amounts, held as bigint or as digits from JSON.
  • Row animationCommunityRows glide to their new place after a sort, a filter or a data change, so a reader keeps track of them.
  • Reorder after sortingCommunityHave the last word after every sort — keep cancelled orders or a total row at the bottom.
  • Cell span / mergeEnterpriseMerge repeating cells down a column.
  • Column spanCommunityDraw a cell across the columns after it, decided per row — a section heading across the grid.
  • Calculated columnsCommunityA spreadsheet formula per column — [Price] * [Qty], IF, ROUND — that sorts, filters, groups and totals like data.
  • Columns your users calculateEnterpriseUsers add, edit and remove calculated columns from the column menu, with a live preview; kept in the saved view.

Filtering

  • Filter rowCommunityA per-column input under the header.
  • Header filter popupCommunityCheckbox list of every distinct value, virtualized and unlimited.
  • Quick searchCommunityOne box across every column, with match highlighting.
  • Filter panel barCommunityShows the active filter as text, with one-click clear.
  • Relative date filtersCommunityFilter a date column by "this month" or "the last 30 days" — typed into the filter row in the grid’s language, kept meaning the same tomorrow.
  • External filterCommunityAND your own row predicate into the grid filter.
  • Multi filterCommunityThe filter row and the popup coexist instead of overwriting each other.
  • Find without filteringEnterpriseCtrl+F inside the grid marks every matching cell and steps through them — no row is hidden.
  • Filter builderEnterpriseNested AND/OR conditions, built visually.

Grouping & hierarchy

  • Grouping (one level)CommunityGroup by a column; drag it to the group panel.
  • Group panelCommunityDrag columns in and out to regroup.
  • Group columnCommunityThe group names, counts and toggles in a column of their own at the start, with its own header, width and sort.
  • Sticky group headersCommunityThe headers of the groups you are scrolling through stay under the column header; the next group pushes them out.
  • Multi-level groupingEnterpriseNest groups as deep as the data goes.
  • Group summariesEnterprisePer-group totals in the group footer.
  • Edit a group totalEnterpriseType a new subtotal and it is shared out over the group’s rows — proportionally or evenly, one undo step.
  • Master-detailEnterpriseExpand a row into your own detail panel, and write the details into Excel and PDF exports.
  • Tree dataEnterpriseHierarchies from a parent key, a path or nested children, with expand/collapse.

Totals

Selection & keyboard

  • Row selectionCommunitySingle, multiple, and checkbox selection.
  • Cell focus & keyboardCommunityArrow keys, Tab, Home/End, Page Up/Down.
  • Focused rowCommunityA highlighted current row, independent of selection.
  • Deferred selectionCommunityApply the selection when the user confirms it.
  • Unselectable rowsCommunityRows your rule refuses cannot be ticked, clicked or picked up by select-all.
  • CopyCommunityCtrl+C, with or without headers.
  • Range selectionEnterpriseDrag a rectangle across cells; Ctrl/Cmd adds more.
  • Column selection from the headerEnterpriseClick a header to select its whole column; Shift widens, Ctrl adds.
  • Fill handleEnterpriseDrag the corner to fill a range, spreadsheet-style.
  • Clipboard callbacksEnterpriseDecide what a copy writes and how a paste is read — raw values, cleaned pastes, your own clipboard.
  • Cut & pasteEnterprisePaste a block from Excel straight into a range.

Editing

  • Cell editingEnterpriseEdit one cell at a time, committed on blur or Enter.
  • Cell formulasEnterpriseType =A1*B2 into a cell: references stay on their cells through sorting and filtering, and the fill handle moves them.
  • Batch editingEnterpriseCollect changes and save them together.
  • Row editingEnterpriseEdit a whole row with save/cancel controls.
  • Form editingEnterpriseEdit the record as a form laid out in the row flow.
  • Popup editingEnterpriseEdit the record in a dialog over the grid.
  • ValidationEnterprisePer-column rules with inline error reporting.
  • CRUD handlersEnterpriseOne call per row — the shape REST and SQL want.
  • PermissionsEnterpriseAllow add, update and delete per row, enforced in the engine.
  • Custom editors & lookupsEnterpriseYour own editor component, or a lookup bound to another source.
  • Undo / redoEnterpriseFull history with a public API and events.

Export & import

  • CSV exportCommunityThe whole result or the current selection.
  • Excel exportEnterpriseReal .xlsx, with the grid’s formatting carried over.
  • Formulas & links in exportsEnterpriseCalculated columns and cell formulas reach Excel as live formulas; a column’s links become hyperlinks in Excel and PDF.
  • PDF exportEnterprisePaginated, with repeated headers; streams for large results.
  • Styled exportEnterpriseNumber formats, banded rows, outline levels, totals.
  • Import wizardEnterpriseFile → column mapping → commit.

Presentation

  • Themes & palettesCommunitySix themes, six palettes, light and dark.
  • DensityCommunityCompact, normal and comfortable row heights.
  • LocalizationCommunityTwelve languages, and your own strings.
  • TooltipsCommunityAutomatic on truncated text, or your own rich content; open on hover, on keyboard focus or a tap, and let the pointer rest on them.
  • Row numbersCommunityA numbered column that renumbers after sort and filter.
  • Print layoutCommunityEvery row on paper, not just the rendered window.
  • Aligned gridsCommunityTwo grids sharing one column layout.
  • Cell flashCommunityHighlight cells that just changed.
  • Loading & empty overlaysCommunityBuilt-in states you can drive yourself.
  • Pinned rowsCommunitySticky comparison rows above or below the data.
  • Pin rows from the menuCommunityUsers right-click a row to keep it in view above or below the data while they scroll and filter.
  • Row drag & dropCommunityReorder rows, or move them between grids.
  • SparklinesEnterpriseA small chart inside a cell.
  • Cell notesEnterpriseA corner marker with text on hover, editable from the menu.
  • Status barEnterpriseDocked counters and range statistics.
  • Side bar & tool panelsEnterpriseDocked Columns and Filters panels.
  • Your own side bar panelsEnterpriseAdd a tab of your own beside Columns and Filters — a summary, a legend, the selected row.

Charts

  • Chart data hookCommunityShapes the grid’s current result for any chart library.
  • Chart panelEnterpriseDocked charts driven by the grid’s own columns.
  • Chart API, events & saved chartsEnterpriseOpen, update and read the chart from code, hear it open, change and close, and keep it in the saved view.
  • Box plotEnterpriseEach category’s spread of a number column: quartiles, median, whiskers and outliers.
  • Waterfall, funnel, treemap, heatmap & rangeEnterpriseRunning totals, process stages, part-of-whole areas, a value matrix and low-to-high spans, from the same panel.
  • Scatter & bubble chartsEnterpriseOne point per row over two columns, with a size column for bubbles; large sets are sampled evenly and the panel says so.
  • Chart titles, labels & legendEnterpriseTitle, axis titles, legend, values on the marks, text size and colour, label angle, grid lines and line styles.
  • Stacked & 100% chartsEnterpriseColumn, bar, line and area series side by side, stacked, or as shares of 100%.
  • Cross-filter & zoomEnterpriseClick a bar to filter the grid; wheel to zoom the axis.
  • Chart exportEnterpriseSave a chart as PNG, JPEG or SVG at a size you choose, or get it back as a data URL.

Integration

  • EventsCommunityFifty-nine events covering cells, rows, columns, editing and lifecycle.
  • Imperative APICommunityDrive the grid from your own code via the controller.
  • Grid state for AI modelsEnterpriseA JSON Schema of the grid’s filters, sort, grouping and columns for your own model, and a checked apply for its answer.
  • Saved viewsCommunityPersist and restore columns, filters, sort, grouping and footer totals; selection, focus and scroll when you ask for them.
  • Context menusCommunityHeader, row and cell menus you can extend or replace.
  • SSR & bundlersCommunityRenders on the server; works with Vite, Next.js and webpack.

Before you read the guide

How many rows can it actually handle?

The playground lets you push the demo to 1,000,000 rows in your own browser — that is the honest test, and it is one click away. Above ~20,000 rows sorting and filtering move into a Web Worker automatically, so the main thread stays free for your UI.

Does it work without React?

Yes, with full feature parity. @kanunilabs/datagrid builds the grid straight into the DOM with one createGrid(element, config) call, and a UMD build means a script tag is a complete install. The parity is enforced in CI, not asserted in a README.

Angular or Vue?

No. React and plain JavaScript only. If your stack is Angular or Vue this is the wrong component today, and knowing that now is worth more than discovering it after an afternoon.

What do I have to configure for the Web Worker?

Nothing. It is compiled into the package and started from a Blob URL — no file to copy into public/, no bundler recipe, no import. Under a CSP that forbids blob: workers you can point at a served file instead.

Is the free edition crippled?

No watermark, no expiry, no signup, and commercial use is allowed. What the paid edition adds is a coherent boundary rather than an arbitrary one: changing the data (editing, validation, undo, range and fill) and taking it out (styled Excel and PDF, charts, grouping on the server).

Can I match the grid to our brand colours?

Yes, without writing CSS. Pick one of 36 light and dark colour schemes, or build your own in the free Theme Builder on this site: start from a scheme, change any colour on a live grid, check the contrast, and export the stylesheet. Structure (six themes) and density (three) are separate props.

Can I see the source?

No — it is proprietary, free of charge but not open source. If an OSI licence is a hard requirement, this is not your library.

One licence covers this and PivotGrid

A paid key unlocks the Enterprise features of both components — there is no second purchase. 4,743 tests stand behind them.

See pricing Meet PivotGrid