ProPivot
โœจ New in v0.3

Accessible, touch-ready, and more powerful.

Every grid below is the real library running in your browser. The latest release adds full keyboard navigation & ARIA, touch dragging, deeper filters, numeric binning, range copy, dark mode, RTL, and localization โ€” all driven by the same declarative report object.

flips every demo on this page

โŒจ๏ธ Keyboard navigation & ARIA a11y

The grid is a proper ARIA grid with row/column-header roles, aria-sort and aria-expanded. Navigate entirely from the keyboard with a single tab stop.

โ–ถ Press Tab to enter the grid, then use arrow keys, Home/End, Enter (sort / expand), and Shift+F10 (column menu / drill-through). A focus ring tracks the active cell.

๐Ÿ”ข Numeric binning new

Group a numeric dimension into ranges with binning: { interval } or custom breaks. Buckets sort numerically and drill-through still resolves the underlying rows.

Raw order value โ€” one member per value
Binned into { interval: 250 } ranges

๐Ÿ”Ž Label & value filters new

Beyond member checkboxes and Top-N: filter members by text (contains, beginsWithโ€ฆ) or by a measure threshold (> < โ‰ฅ โ‰ค = โ‰  between). The member picker also gained a search box.

โ–ถ This demo starts with a label filter (Region does not contain โ€œthโ€, so North/South are hidden). Click the โ–พ on the Region header โ†’ Filter tab to change it โ€” try the search box, label operators, or a value threshold.

๐Ÿ“‹ Range selection & copy new

Select a rectangle of cells and copy it as TSV โ€” pasteable straight into Excel or Sheets. Off-screen (virtualized) rows are included in the copied text.

โ–ถ Click a value cell, then Shift+click another (or hold Shift + arrow keys) to select a range, and press Ctrl/Cmd+C. Paste below to see the tab-separated text.

๐ŸŒ— Dark mode new

Ship a built-in dark theme with options.theme: 'dark' (or 'auto' to follow the OS). The grid, toolbar, field list, popups and modals all theme together.

theme: 'light'
theme: 'dark'

๐ŸŒ RTL & localization new

options.rtl: true mirrors the layout for right-to-left locales (numbers stay LTR), and every toolbar / filter / drill-through string is overridable via localization.grid.

RTL layout (rtl: true)
Localized chrome (French strings)

๐Ÿงฎ Calculated columns & formula editor v0.4

Define a measure from a formula over other aggregations (e.g. sum('sales') / sum('qty')). Open a column โ–พ โ†’ Calculation tab to see the column's type, edit the formula with live validation, and browse the built-in functions as click-to-insert chips โ€” or do it in code with pivot.setMeasureFormula() / pivot.validateFormula(). Gate the panel with options.columnProperties (showType / showFormula / editFormula).

โ–ถ Click ฦ’ + in the Values box of the field list to add a new calculation, or open the โ–พ on the Sales / Unit header โ†’ Calculation tab to edit this one.

โš™ Field list as a modal v0.4

Keep the layout tidy: options.fieldList: { mode: 'icon', placement } swaps the inline rearrange panel for a โš™ button (in any corner) that opens the drag-drop field list in a modal. Omit it and the inline panel stays โ€” existing apps are unchanged.

โ–ถ Click the โš™ in the grid's top-right corner, then drag fields between Rows / Columns / Values.

๐Ÿ“ฑ Touch: column resize, reorder and the drag-drop field list now use Pointer Events, so every grid on this page is fully usable on a phone or tablet. See the full documentation for the binning, theme, rtl, localization, setLabelFilter(), setValueFilter(), setBinning() and setMeasureFormula() APIs.