@pivotblitz/react

React 18 components for PivotBlitz — interactive pivot tables, charts, and data visualization.

Installation

pnpm add @pivotblitz/react
# or
npm install @pivotblitz/react

Optional peer dependencies:

pnpm add chart.js        # Required only for PivotChart component
pnpm add @pivotblitz/pro # Excel/PDF/image export, preset formatting rules

Quick Start

import { usePivotStore, PivotTable } from '@pivotblitz/react';
import '@pivotblitz/react/styles.css';

const data = [
  { region: 'North', product: 'Widget', sales: 1200 },
  { region: 'South', product: 'Gadget', sales: 950 },
  // ...
];

export default function App() {
  const store = usePivotStore(data, {
    rows: ['region'],
    cols: ['product'],
    vals: ['sales'],
    aggregatorName: 'Sum',
  });

  return <PivotTable store={store} enableHover zebra />;
}

Hooks

| Hook | Description | |------|-------------| | usePivotStore(data, config) | Creates a reactive pivot store with aggregation engine | | usePivotTableController(store, options) | Headless controller for custom table rendering |

usePivotStore

Returns a PivotStore object with:

• config — Current pivot configuration (rows, cols, vals, aggregatorName, etc.)
• attributes — Available field names from data
• rowKeys / colKeys — Computed row and column keys
• pivotData — Aggregated PivotData instance
• setRows(rows) / setCols(cols) / setVals(vals) — Update dimensions
• setConfig(config) — Replace full configuration
• getAttributeValues(attr) — Get unique values for a field
• addInclusion(attr, value) / removeInclusion(attr, value) — Filter control
• clearFilters() — Remove all filters
• getAggregator(rowKey, colKey) — Get aggregated value for a cell
• getRecordsForCell(rowKey, colKey) — Get source records for drill-down

Components

| Component | Description | |-----------|-------------| | PivotTable | Core pivot table with sorting, formatting, hover, zebra striping | | PivotTableAdvanced | Extended table with context menu, keyboard nav, drill-down, resize | | ContextMenu | Right-click context menu for cells | | DrillDownModal | Modal showing source records for a cell | | FieldChooser | Drag-and-drop field configuration (rows/cols/vals) | | PivotToolbar | Toolbar with layout, export, view mode, chart type controls | | SlicerPanel | Interactive filter panel with buttons/pills/checkboxes | | ThemeProvider | Light/dark/system theme wrapper with CSS custom properties | | FormulaEditor | Visual editor for calculated field formulas | | ConditionalStyleEditor | Rule builder for conditional formatting | | ConfigManager | Save/load/export/import pivot configurations | | PivotChart | Chart.js visualization (bar, line, pie, doughnut, area, stacked) | | HeatmapChart | Pure SVG heatmap with 8 color scales | | ScatterChart | Pure SVG scatter plot with trendline |

Theme Support

import { ThemeProvider, PivotTable } from '@pivotblitz/react';

<ThemeProvider mode="dark">
  <PivotTable store={store} />
</ThemeProvider>

Documentation

• Getting Started (React)
• API Reference
• All Guides

License

MIT