Example app · PivotGrid

Sales Analytics

A sales analysis screen where the pivot table does the work. Slice revenue, margin and orders by region, product, channel, rep and month, compare each year with the last, chart what you see and open the order lines behind any number.

  • Drag Category from the field list into the rows, or pick an analysis such as Rep performance.
  • Set the period to 2025 and watch the KPIs, the pivot and the chart change together.
  • Right-click Revenue in the values, choose Field settings and switch Sum to Average or Max.
  • Click a number to list its order lines; click a bar to filter the pivot by it.

Built with the React PivotGrid. Charts, the drill-down window and Excel export are Enterprise features and are marked in the app; everything else is in the free Community edition.

What this app shows

A fictional supplier of laptops, monitors, accessories, networking gear, software licences and services sells to consumers and businesses in North America, Europe, Asia Pacific and Latin America. The data is synthetic: 20,000 orders and 43,472 order lines from January 2024 to September 2026, generated in your browser from a fixed seed, so every visit shows the same numbers. No company, person or product in it is real.

The figures are consistent by construction. Each line's revenue is units × unit price × (1 − discount), its cost is always below its revenue and its gross profit is revenue minus cost, all in whole cents. An order has one to five lines, so Orders counts distinct order numbers rather than lines. There is a fourth-quarter peak, a summer dip and growth that differs by region, category and channel, so comparing years tells you something.

One set of filters

The period, region, category and channel controls above the pivot are the pivot's own field filters. They appear in the grid's filter area, its header-filter popups show the same selection, and a filter set in the grid lights up the controls. The KPI strip runs the pivot's fields through the pivot's own filter function and, after every recompute, checks that its total revenue equals the pivot's grand total; the line under the strip says so.

Revenue growth compares the selected months with the same calendar months a year earlier, under the same region, category and channel filters. Months with no earlier year in the data (2024) are left out of both sides.

How it is built

  • Gross Margin % and Average Order Value are summary-level calculated fields: they divide the aggregated Gross Profit by Revenue, and Revenue by Orders, in each cell. Averaging line margins instead would weigh a $59 mouse like a fleet of laptops.
  • Orders is a distinct count of the numeric order number (summaryType: 'distinct').
  • Analyses such as Rep performance and Channel mix are field layouts set with ref.setFields; the filters you set carry over.
  • The chart is the pivot's result, passed to ChartFactory by the grid's chart sync. Expand a region and its countries appear in the chart.
  • Drill-down reads the cell's records in onCellClick and shows them in PivotDrillDownModal, with a check that their revenue adds up to the cell.
  • Colour schemes and density are the grid's theme and density props; the app frame takes its colours from the same scheme.
import { EnterprisePivotGrid, ChartDataTransformer } from '@kanunilabs/pivotgrid-react-enterprise';
import '@kanunilabs/pivotgrid-react/styles.css';
import '@kanunilabs/pivotgrid-react/themes/all.css';

const fields = [
  { id: 'region', dataField: 'region', caption: 'Region', area: 'row' },
  { id: 'year', dataField: 'year', caption: 'Year', area: 'column' },
  { id: 'revenue', dataField: 'revenue', caption: 'Revenue', area: 'data', summaryType: 'sum' },
  { id: 'profit', dataField: 'profit', caption: 'Gross Profit', area: 'data', summaryType: 'sum' },
  { id: 'orders', dataField: 'orderId', caption: 'Orders', area: 'data', summaryType: 'distinct' },
  { id: 'margin', caption: 'Gross Margin %', area: 'data', isCalculated: true, formulaType: 'summary',
    calculateSummaryExpression: (v) => v.profit / v.revenue, format: { style: 'percent' } },
];

<EnterprisePivotGrid
  gridId="sales"
  data={orderLines}
  initialFields={fields}
  theme={{ id: 'corporate' }}
  density="normal"
  chartIntegrationOptions={chartOptions}   // { transformer: ChartDataTransformer.transform }, memoised
  onChartSync={setChart}
  onCellClick={(e) => showLines(e.records)}
/>

The guides cover each part: calculated fields, drill-down and charts, export and the full feature list.

Where to next