Pivot Overview

Pivot turns a flat fact table into an analytical view. You choose which fields define the row hierarchy, which fields define generated columns, and which fields become aggregated measures. RevoGrid stays responsible for rendering and interaction, while Pivot builds the grouped rows, generated headers, totals, and summary cells.

For raw type signatures, see Pivot API and Pivot Config API. Use this guide set for behavior, defaults, and how the parts work together.

Choose Your Integration

Interactive example

Pivot overview

Choose attached plugin, custom constructor, standalone/headless, linked charts or remote execution

What you need	API to use	Guide
A Pivot table in RevoGrid	`PivotPlugin` with `grid.pivot`	Configuration
Your own constructor or toolbar for an installed Pivot	`pivotPlugin.getAuthoringController()`	Custom integrations
Report calculation and editing without a grid	`createPivotController` from `@revolist/pivot/headless`	Headless controller
Charts linked to the table	`PivotChartsPlugin` from `@revolist/pivot`	Charts
Charts over your own data	Standalone dataset builder and chart controller from `@revolist/pivot/charts`	Standalone charts
Server aggregation and paging	An application-owned engine adapter or remote store	Remote contract

Start with PivotConfig for grid setup. Use a portable report document for saved analytical intent and keep runtime bindings separate. The installed plugin owns its execution; use its authoring controller for a custom UI. A separately created headless controller owns a separate report session.

Open the full demo and framework source.

When To Use Pivot

Use Pivot when your source rows represent detailed facts such as orders, transactions, tickets, or events, and users need to answer questions like:

“Sales by region and quarter”
“Count of incidents by team and priority”
“Average margin by category and month”
“Grand totals and subtotals across multiple hierarchies”

Use a normal grid when users mainly inspect or edit row-level records. Use Pivot when users need grouped analytical summaries.

Core Vocabulary

dimension: A field that can be placed on the row axis, column axis, or used as a value source.
row field: A dimension listed in rows. It creates the vertical hierarchy.
column field: A dimension listed in columns. It creates generated headers.
value: A measure listed in values. It is aggregated into Pivot cells.
generated row: A synthetic row produced by Pivot, not a raw input row.
generated column: A synthetic column or column group produced by Pivot.
subtotal: A summary for one intermediate branch of a hierarchy.
grand total: A summary across the full filtered result.

Mental Model

Client-side Pivot follows this shape:

1
source rows
2
  -> group by rows / columns
3
  -> aggregate values
4
  -> generate row hierarchy
5
  -> generate column hierarchy
6
  -> render with RevoGrid

Server-side Pivot keeps the same public config, but the aggregation step moves behind a remote engine boundary:

1
source rows
2
  -> analytical engine
3
  -> visible analytical window
4
  -> RevoGrid

That means the same concepts stay in place even when the data becomes too large for full client-side materialization.

Conceptual Foundations

If you are new to Pivot tables or Business Intelligence (BI) concepts, we recommend starting with these conceptual guides:

What Is Pivot?: The basic mental model of transforming flat data.
What is an OLAP Cube?: Understanding multidimensional analysis and core operations.
Data Modeling for Pivot: How to structure your facts and dimensions for the best results.

First Working Pivot

Install Pro and the standalone Pivot package.

1
pnpm add @revolist/revogrid @revolist/revogrid-pro @revolist/pivot

Import the plugin and any aggregators you want to expose.

1
import {
2
  PivotPlugin,
3
  type PivotConfig,
4
} from '@revolist/pivot';
5
import { commonAggregators } from '@revolist/revogrid-pro';
6
import '@revolist/revogrid-pro/dist/revogrid-pro.css';
7
import '@revolist/pivot/styles.css';

Define a PivotConfig.

1
const pivot: PivotConfig = {
2
  dimensions: [
3
    { prop: 'region', name: 'Region' },
4
    { prop: 'quarter', name: 'Quarter' },
5
    {
6
      prop: 'sales',
7
      name: 'Sales',
8
      aggregators: {
9
        ...commonAggregators,
10
      },
11
    },
12
  ],
13
  rows: ['region'],
14
  columns: ['quarter'],
15
  values: [{ prop: 'sales', aggregator: 'sum' }],
16
};

Apply it through the direct pivot binding.
```
1
grid.pivot = pivot;
```
additionalData.pivot is still observed for legacy integrations, but new code should bind pivot directly.

How To Read A PivotConfig

1
const pivot: PivotConfig = {
2
  dimensions: [...],
3
  rows: ['region', 'rep'],
4
  columns: ['year', 'quarter'],
5
  values: [{ prop: 'sales', aggregator: 'sum' }],
6
  totals: { grandTotal: true, subtotals: true },
7
  collapsed: true,
8
};

dimensions describes the reusable field metadata.
rows defines the row hierarchy from left to right.
columns defines the generated header hierarchy from left to right.
values defines which measures are aggregated in each visible cell.
totals enables grand totals and subtotals.
collapsed enables grouped row drill-down when the row hierarchy has multiple levels.
groupAggregations makes grouped Pivot rows show aggregate values across generated metric columns.

What RevoGrid Pivot Owns

When Pivot is active, PivotPlugin temporarily owns:

the rendered source
the rendered columns
optional pinnedBottomSource for grand totals
grouped-row metadata used for drill-down

When Pivot is cleared, the plugin restores the original source, columns, grouping, and pinned totals.

Feature Map

Current Scope

Client-side Pivot rows, columns, values, totals, and drill-down are implemented.
Client-side grouped row aggregates are implemented through pivot.groupAggregations.
valuesOnRows, flat headers, and the drag-and-drop configurator are implemented.
Server-side Pivot exposes a first-class remote engine/store contract and plugin integration.
Pivot Charts expose a renderer-neutral linked chart lifecycle, the first-party Pivot Charts renderer, persistence, external containers, and an optional modeless UI.
The docs below describe the current implementation in packages/pivot/src, including Pivot core, Pivot Charts, and Pivot Config.