Pivot Analytics & Export
Measures can be shown as percentages of a total or as running sums, big matrices stay smooth with two-axis virtual scrolling, the whole layout persists under a stateKey, and the visible matrix exports to CSV or a typed Excel workbook with merged multi-level headers.
display modes virtual scrolling stateKey CSV / Excel
50.000 rows percent of column running total virtual
Right-click a header for sorting and filters; the second measure shows each column's share of its grand total.
FiltersDrag fields between the areas
Rows Region Country
Columns Year
Values Amount % of Column
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgePivotField, OgePivotGrid } from '@oge-ui/pivot';
@Component({
selector: 'demo-root',
imports: [OgePivotField, OgePivotGrid],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<oge-pivot-grid [data]="sales">
<oge-pivot-field dataField="region" area="row" />
<oge-pivot-field dataField="date" area="column" groupInterval="year" />
<!-- measures can post-process their values -->
<oge-pivot-field
dataField="amount" caption="% of Column" area="data"
summaryType="sum" summaryDisplayMode="percentOfColumnGrandTotal" />
<oge-pivot-field
dataField="amount" caption="Running" area="data"
summaryType="sum" [runningTotal]="{ direction: 'row' }" />
</oge-pivot-grid>
`,
})
export class Demo {
protected readonly sales = [
{ region: 'EMEA', date: '2026-02-11', amount: 1249 },
{ region: 'EMEA', date: '2026-05-02', amount: 890 },
{ region: 'APAC', date: '2025-11-19', amount: 2140 },
];
} stateKey exportCsv export-excel entry
Re-pivot or expand something, reload the page — the layout comes back.
FiltersDrag fields between the areas
Rows Region City
Columns Year
Values Amount Units
import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import { OgePivotField, OgePivotGrid } from '@oge-ui/pivot';
@Component({
selector: 'demo-root',
imports: [OgePivotField, OgePivotGrid],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- layout + expansion survive reloads via stateKey -->
<oge-pivot-grid #pivot [data]="sales" stateKey="sales-report">
<oge-pivot-field dataField="region" area="row" />
<oge-pivot-field dataField="amount" area="data" summaryType="sum" />
</oge-pivot-grid>
<button type="button" (click)="exportCsv()">CSV</button>
<button type="button" (click)="exportExcel()">Excel</button>
`,
})
export class Demo {
protected readonly sales = [
{ region: 'EMEA', date: '2026-02-11', amount: 1249 },
{ region: 'EMEA', date: '2026-05-02', amount: 890 },
{ region: 'APAC', date: '2025-11-19', amount: 2140 },
];
private readonly pivot = viewChild.required(OgePivotGrid);
// CSV ships in the package…
protected exportCsv(): void {
this.pivot().exportCsv('sales.csv');
}
// …Excel lives in a lazy secondary entry, so exceljs stays out of the bundle
protected async exportExcel(): Promise<void> {
const { exportPivotToExcel } = await import('@oge-ui/pivot/export-excel');
await exportPivotToExcel(this.pivot(), { filename: 'sales.xlsx' });
}
}Notes
summaryDisplayMode: percent-of row/column/grand totals and variations against the previous column;runningTotalaccumulates along an axis and resets per group.[virtualScrolling]="true"windows both axes — only the visible headers and cells hit the DOM, wherever you scroll.stateKeysaves field layout, expansion and the panel state through the same storage token the data grid uses (OGE_STATE_STORAGE);state()/applyState()give you the snapshot programmatically.getCsv()/exportCsv()flatten exactly what is on screen;@oge-ui/pivot/export-exceladdsbuildPivotWorkbook+exportPivotToExceland stays out of your main bundle.