synthetic
PivotTable
A cross-tab that totals your records by a row and a column, with row and column totals.
Budget by team and statusSum of budget; every cell is several records collapsed
Budget by team and status (GBP)
| team | On track | Review | Late | Done | Total |
|---|---|---|---|---|---|
| Brand | 48200 | 21800 | 0 | 0 | 70000 |
| Product | 0 | 72900 | 0 | 0 | 72900 |
| Research | 0 | 0 | 9400 | 0 | 9400 |
| Operations | 0 | 0 | 0 | 6150 | 6150 |
| Total | 48200 | 94700 | 9400 | 6150 | 158450 |
Brand only
| team | On track | Review | Total |
|---|---|---|---|
| Brand | 48200 | 21800 | 70000 |
| Total | 48200 | 21800 | 70000 |
In context
Finance summaryWhere the money is, at a glance
Budget by teamFive projects, October
Projects by team and status
| team | On track | Review | Late | Done | Total |
|---|---|---|---|---|---|
| Brand | 1 | 1 | 0 | 0 | 2 |
| Product | 0 | 1 | 0 | 0 | 1 |
| Research | 0 | 0 | 1 | 0 | 1 |
| Operations | 0 | 0 | 0 | 1 | 1 |
| Total | 1 | 2 | 1 | 1 | 5 |
Props
| Prop | Type | Required | Default |
|---|---|---|---|
data | Record<string, string | number>[] | Yes | — |
rowField | string | Yes | — |
colField | string | Yes | — |
valueField | string | Yes | — |
aggregate | PivotAggregate | undefined | No | sum |
formatValue | ((n: number) => string) | undefined | No | — |
title | string | undefined | No | — |
className | string | undefined | No | — |
aria-label | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
data-rebar-* attributes
data-rebar-component="pivot-table" on the root; renders through the real Table component underneath.
Migrating to Ant Design
AntD ships no dedicated pivot-table component of its own — a migration typically composes AntD's Table with the aggregation done ahead of time (the same shape this component already produces) or reaches for a dedicated library (e.g. react-pivottable) for drill-down.