Pivot Grid for Angular

import { AuiPivotGrid } from '@absoluteui/angular/pivot-grid';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Pivot Grid page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { pivotGrid: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { PivotField, PivotGridLayoutChangeDetail, PivotLayoutInput } from '@absoluteui/components/pivot-grid';
import { AuiPivotFieldList } from '@absoluteui/angular/pivot-field-list';
import { AuiPivotGrid } from '@absoluteui/angular/pivot-grid';

interface Sale { region: string; quarter: string; amount: number }

@Component({
  selector: 'app-sales-pivot',
  imports: [AuiPivotGrid, AuiPivotFieldList],
  template: `
    <aui-pivot-field-list label="Pivot fields" [grid]="pivot"></aui-pivot-field-list>
    <aui-pivot-grid #pivot="auiPivotGrid" caption="Sales" [fields]="fields" [data]="sales" [layout]="layout" (layoutChanged)="save($event)"></aui-pivot-grid>`,
})
export class SalesPivotComponent {
  readonly fields: PivotField<Sale>[] = [{ id: 'region', label: 'Region' }, { id: 'quarter', label: 'Quarter' }, { id: 'amount', label: 'Amount' }];
  readonly sales: Sale[] = [{ region: 'North', quarter: 'Q1', amount: 10 }];
  readonly layout: PivotLayoutInput = { rows: ['region'], columns: ['quarter'], values: [{ field: 'amount', aggregate: 'sum' }] };

  save(detail: PivotGridLayoutChangeDetail): void {
    // persist detail.layout
  }
}

<aui-pivot-grid>

Class AuiPivotGrid; template reference #ref="auiPivotGrid".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
caption	string		Required. Visible <caption> and accessible name of the table and its scroll region (aria-labelledby). Non-empty.
hideCaption	boolean	false	Keep the caption for assistive technology only (visually hidden).
fields	readonly PivotField<Row>[]		Required. Available fields: { id (unique; default row property), label, value?(row) (grouping or aggregation value; keys must be string | number | boolean | null, dates as ISO strings, other values converted to text), formatMember?(key) (member label), numberFormat? (Intl.NumberFormatOptions of aggregated values), areas? (allowed areas in the field list; default all), aggregate? (default when added to values; default ‘sum’) }. Changing it with update() revalidates the layout and reloads.
data	readonly Row[]		Records aggregated in the browser by the local engine (createLocalPivotSource). Exactly one of data or dataSource. Passing a new array with update() reloads; mutating the array in place needs reload().
dataSource	PivotDataSource		Server-side aggregation: { query(query, signal): Promise<{ cells }>; members(request, signal): Promise<{ members, total }> }. A query lists rowParents and columnParents; the answer holds one PivotCell { row, column, values } for every combination of a requested row path (each parent plus its children one level deeper) and a requested column path that has records. Results are validated (PIVOT_DATA_SOURCE). Exactly one of data or dataSource.
virtual	boolean	false	Render only the rows in view (plus an overscan) with spacer rows; aria-rowcount and aria-rowindex keep the positions. The region gets max-block-size 70vh unless the page sets another.
rowHeight	number	'40'	Virtual mode row height estimate in CSS px (integer 16..200); replaced by the measured height after the first render.
emptyMessage	string		Body text when no record matches (default localized ‘No data’).
grandTotals	PivotGrandTotals	'both'	Grand total row (last), grand total column (last), both, or none. Without column fields the value columns are always shown.
columnSubtotals	boolean	true	A ‘{member} total’ column after the children of each expanded column group. Row groups always show their subtotal on the group row (compact form).
expandDepth	number	'16'	Group levels expanded when the layout has no explicit expanded (integer 0..16; 0 = only the top level, the lazy-loading setting for servers). After loading, the expansion is explicit (layout.expanded).
requestTimeoutMs	number	'30000'	Timeout of every data source request in ms (integer 100..600000); the request’s signal is aborted with a TimeoutError.
stickyHeader	boolean	true	Column header rows stay visible while the region scrolls vertically (row headers always stick to the inline start).
locale	string	'en-US'	Locale of number formatting, member order (Intl.Collator, numeric), search, and messages.
density	Density	'comfortable'	Cell padding.
direction	Direction	'ltr'	rtl mirrors the collapsed-group chevron; columns follow the document direction through the table layout.

Two-way bindings

Model	Type	Change output	Description
[(layout)]	PivotLayoutInput	(layoutChange)	{ rows: fieldId[]; columns: fieldId[]; values: { field, aggregate: ‘sum’ | ‘count’ | ‘average’ | ‘min’ | ‘max’ | ‘distinctCount’ }[]; filters?: fieldId[]; include?: Record<fieldId, PivotKey[]> (included members; a missing field includes all); sort?: { rows?, columns? } (PivotSort: { by: ‘label’, direction } or { by: ‘value’, value (index into values), column? (row sort: the column path compared, default [] = grand total), direction }); expanded?: { rows: PivotKey[][]; columns: PivotKey[][] } | null }. A field appears at most once in rows, columns, and filters together, and at most once in values. Serializable: save the layout getter or aui-layout-change detail.layout.

Outputs

Output	Payload	Description
(layoutChanged)	PivotGridLayoutChangeDetail	The layout changed through the UI, the field list, or a method (not through update()). Save detail.layout. Dispatched on the grid host. Re-emits aui-layout-change.
(loadError)	PivotGridLoadErrorDetail	A data source request failed, timed out, or returned an invalid result. A failed initial load shows ‘The data could not be loaded.’ with a Retry button. Superseded requests do not report. Re-emits aui-load-error.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setLayout(layout: PivotLayoutInput): void	Replace the layout (validated) and reload. A changed row, column, or value list resets the expansion to expandDepth (unless the layout has expanded). Emits aui-layout-change (reason ‘layout’, or ‘filter’ when only include changed).
setFilter(field: string, include: readonly PivotKey[] | null): void	Set the included members of any field (null includes all) and reload. Emits aui-layout-change (reason ‘filter’).
sort(axis: PivotAxis, sort: PivotSort | null): void	Sort the members of an axis within each group by label or by a value (null: ascending labels). Blank members stay last. No reload. Emits aui-layout-change (reason ‘sort’).
setExpanded(axis: PivotAxis, path: PivotPath, expanded: boolean): Promise<void> | undefined	Expand or collapse a group; the first expansion queries its children (one delta query). On failure the group stays collapsed and ‘The data could not be loaded.’ is announced. Emits aui-layout-change (reason ‘expand’ / ‘collapse’).
expandAll(axis: PivotAxis, expanded: boolean): Promise<void> | undefined	Expand every group of an axis, level by level (one query per level), or collapse all. Emits aui-layout-change.
members(field: string, options?: { search?: string; offset?: number; limit?: number; } | undefined): Promise<PivotMembersResult & { labels: string[]; }> | undefined	A page of a field’s members (filtered by the other fields’ filters) through the data source, with display labels. limit 1..10000 (default 100). Emits aui-load-error and rejects on failure.
memberLabel(field: string, key: PivotKey): string | undefined	Display label: the field’s formatMember, else localized ‘(blank)’ for null, locale digits for numbers, or the text.
valueLabel(index: number): string | undefined	Header of a value field, for example ‘Sum of Amount’.
reload(): Promise<void> | undefined	Discard loaded cells and reload everything (keeps the expansion). The Retry button in the error state calls it.
toMatrix(): PivotMatrix | undefined	The visible pivot as data: rows (path, labels, kind), columns split by value (path, labels, kind, value, valueLabel), and values[row][column] (null where empty). Feed it to charts.
toCsv(options?: (PivotCsvOptions & { values?: "formatted" | "raw"; }) | undefined): string | undefined	CSV (RFC 4180) of the visible pivot: one column per row field with member labels, then one per visible value column (‘Q1 / Sum of Amount’). Formula injection is escaped (escapeFormulas, default true); numbers are trusted. Options: values, delimiter, lineEnding, bom, escapeFormulas. Save it with downloadCsv.

import { AuiPivotFieldList } from '@absoluteui/angular/pivot-field-list';

<aui-pivot-field-list>

Class AuiPivotFieldList; template reference #ref="auiPivotFieldList".

AbsoluteUI Pivot Field List for a Pivot Grid in the same template: <aui-pivot-grid #pivot="auiPivotGrid" ...></aui-pivot-grid> <aui-pivot-field-list label="Pivot fields" [grid]="pivot"></aui-pivot-field-list>. The field list applies layout changes to the grid itself; the grid reports them through [(layout)] and (layoutChanged). Created when the grid exists and re-created when it changes.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
grid	AuiPivotGrid<Row> | null		The pivot grid it edits: a #pivot="auiPivotGrid" reference.
label	string		Required. Accessible name of the field list.
memberPageSize	number		Members shown per page in a field filter.
locale	string		Messages locale (defaults to the configured locale).

Outputs

Output	Payload	Description
(fieldMoved)	PivotFieldMoveDetail	The user moved a field between areas (rows, columns, values, filters, or unused).