Embed self-service Pivot analytics directly in a React product. RevoGrid Pivot gives users an Excel-familiar field workflow while your application keeps control of data, permissions, saved views, navigation, and surrounding UI.
View the live Pivot demo · Request a Pro trial · Read the React implementation tutorial
RevoGrid Pivot is built for SaaS products, finance and operations tools, admin systems, customer portals, and embedded reporting screens where a fixed dashboard is not enough.
Users can reshape one analytical model at runtime:
React owns the controlled application state and product shell. RevoGrid owns the virtualized tabular viewport and Pivot runtime. This separation keeps the integration idiomatic without asking React to reconcile every analytical cell as an ordinary component tree.
| Capability | React product value |
|---|---|
Typed PivotConfig | Define dimensions, measures, filters, totals, formatting, and drill state in TypeScript. |
| Drag-and-drop fields | Let users change the report without a new route, API shape, or hard-coded dashboard. |
| Custom aggregations | Add business metrics beside sum, average, count, min/max, median, and other standard summaries. |
| Totals and hierarchy | Show nested rows and columns with controllable subtotals, grand totals, and labels. |
| Linked Pivot charts | Keep an application-owned chart synchronized with Pivot revisions and supported drill navigation. |
| Export and state | Export the committed result to Excel-friendly CSV and save versioned Pivot configuration. |
| Client-side engine | Analyze local in-memory records without a round trip for each field change. |
| Server-side contracts | Connect large, governed, or remote datasets to an application-owned analytical backend. |
| Cross-framework engine | Reuse the same Pivot behavior if another product surface uses Vue, Angular, Svelte, or JavaScript. |
Install PivotPlugin through the grid's plugin list and pass a typed pivot property through the React wrapper:
import { useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import type { DataType } from '@revolist/revogrid';
import {
PivotPlugin,
type PivotConfig,
} from '@revolist/revogrid-enterprise';
const initialPivot = {
dimensions: [
{ prop: 'region', name: 'Region' },
{ prop: 'quarter', name: 'Quarter' },
{ prop: 'revenue', name: 'Revenue' },
],
rows: ['region'],
columns: ['quarter'],
values: [{ prop: 'revenue', aggregator: 'sum' }],
totals: { subtotals: true, grandTotal: true },
hasConfigurator: true,
fieldPanel: { visible: true, allowFieldDragging: true },
} satisfies PivotConfig;
export function RevenuePivot({ rows }: { rows: DataType[] }) {
const plugins = useMemo(() => [PivotPlugin], []);
return (
<RevoGrid
style={{ height: 680 }}
source={rows}
pivot={initialPivot}
plugins={plugins}
readonly
resize
filter
hideAttribution
/>
);
}For the complete application—including typed data generation, repeated measures, a custom percentile aggregation, synchronized charts, Excel-friendly export, state restoration, and 10K/100K/350K measurements—follow How to Build a React Pivot Table for Large Datasets.
Choose the execution model based on data ownership and measured product requirements.
| Use client-side Pivot when | Use server-side Pivot when |
|---|---|
| The complete dataset is already available in the browser. | Raw records should remain behind authorization or data-governance boundaries. |
| Field changes meet the latency target on representative devices. | Dataset size, cardinality, or custom calculations exceed browser budgets. |
| Users need offline or zero-round-trip exploration. | Metrics must be shared and authoritative across applications. |
| The application can afford the source data's memory footprint. | An existing warehouse, cube, or analytical service should perform aggregation. |
RevoGrid uses the same Rows, Columns, Values, Filters, totals, and drill concepts across both paths. That allows a product to begin with local analysis and adopt a remote engine without replacing the entire React surface.
The component uses a familiar field-list mental model, but it remains an embedded web analytics surface rather than a spreadsheet clone.
Use it when users need to:
The Pivot-specific CSV helper exports generated headers, values, and pinned totals in a format Excel can open. Native XLSX workflows can use RevoGrid Pro's Excel provider when workbook styling, multiple worksheets, formulas, or other Excel metadata is part of the acceptance criteria.
“Supports large data” is incomplete without a data shape and measurement method. During a trial, test:
The companion tutorial publishes one reference run through 350,000 rows and explains why source size, result cardinality, and aggregation complexity must be reported separately. RevoGrid's client-side capability is useful, but a production decision should be based on your own service-level target and representative data.
For Next.js App Router, place the grid in a Client Component because it uses event handlers and browser APIs. Build function-bearing Pivot dimensions inside that boundary instead of passing aggregators from a Server Component. Keep metadata, static explanation, and server data access outside the client bundle where possible.
The React wrapper does not create a separate Pivot implementation. It binds React properties and refs to the same RevoGrid custom-element and plugin runtime used across frameworks. This is useful for teams that want React integration without maintaining framework-specific analytical behavior.
RevoGrid Pivot is included in RevoGrid Pro Advanced. RevoGrid Core remains the MIT-licensed grid foundation; the Pivot engine, configurator, chart workflow, export/state helpers, and remote analytical contracts are commercial capabilities.
Use the request-based trial to validate your real dataset, browser targets, Next.js boundary, chart workflow, export requirements, and server architecture before purchasing. Review the Pivot product overview, pricing, live demo, and complete example repository.
FAQ
@revolist/react-datagrid for property and ref integration, then install Pivot through the normal RevoGrid plugin contract.Open the live demo, clone the repository, or request a Pro trial. Developers ready to implement can continue with the large-dataset React Pivot tutorial.