Quick start (React)

Define your data, describe the fields, and render BasePivotGrid.

import { BasePivotGrid, type PivotField } from '@kanunilabs/pivotgrid-react';
import '@kanunilabs/pivotgrid-react/styles.css';

const data = [
  { region: 'EMEA', quarter: 'Q1', revenue: 1200 },
  { region: 'EMEA', quarter: 'Q2', revenue: 980 },
  { region: 'APAC', quarter: 'Q1', revenue: 1500 },
];

const fields: PivotField<(typeof data)[number]>[] = [
  { 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' },
];

export function MyGrid() {
  return <BasePivotGrid gridId="demo" data={data} initialFields={fields} />;
}

Fields

Each field declares where it lives (area: 'row' | 'column' | 'data' | 'filter'), its dataType, and — for measures — a summaryType (sum, count, avg, min, max). Numbers accept an Intl format:

{
  id: 'revenue',
  dataField: 'revenue',
  caption: 'Revenue',
  dataType: 'number',
  area: 'data',
  summaryType: 'sum',
  format: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },
}

Localization

Pass a locale (one of 12) and the grid translates its chrome; ar switches to RTL.

<BasePivotGrid gridId="demo" data={data} initialFields={fields} locale="tr" />

Using Next.js? See Next.js setup for the one extra step the bundler needs.

For the complete prop and type list, see the API Reference.