Pivot table

A React component in Beamline's Data & tables category.

Records summed up by the fields people choose: rows grouped by one or more fields that fold open level by level, columns split by another, one or more measures (sum, count, average, min, max) in every cell, subtotals on every group and totals at the end; fields move between Rows, Columns and Values from a menu on each chip, the table rearranges with rows sliding to their new places, cells can be shaded by their size, and a cell with no records stays blank while one whose values were never measured is hatched.

Use it for

Summing up records by two or three fields: revenue by region and quarter, tickets by team and priority, hours by project and person.
Letting people choose the breakdown themselves (rows, columns, measures) and open a group to see what makes it up.

Not for

Working through the records themselves: sorting, editing, selecting (data-grid).
A small fixed table that is already summed (table).
One measure over time (line-chart, bar-chart); one grid of values coloured by size (activity-heatmap).

Anatomy

wells: Rows, Columns, Values; each field a chip whose menu moves it, reorders it or removes it; Add field per well
header: column field values (one band per column field) over the measures
body: group rows with a fold button and their subtotal, nested to the depth of the row fields; leaf rows
totals: a Total row at the end, a Total column when columns are split
cells: the aggregate, right-aligned in tabular figures; blank (–) with no records; hatched when every value was unmeasured

Variants

0: aggregate per measure: sum · count · avg · min · max · your own function
1: shading: none · heat (each cell tinted by its share of its measure's largest value, the number always written)
2: configurable: wells shown or hidden
3: density: compact · default

States

loading (skeleton rows)
empty (no records, or no fields chosen: says which)
group open / folded
cell pointed or focused (its row and column header light)
No row dimensions: one All row aggregates every record across the selected columns and values.

Keyboard

The table is one tab stop (treegrid); arrows move between cells, Home / End to the row's ends
→ on a folded group opens it, ← on an open group folds it (or moves to its parent)
Enter on a cell calls onCellClick with its records
Chip menus: Enter opens, arrows choose Move to rows / columns / values, Move earlier / later, Remove

Motion

Rows that stay keep their path when fields move or groups fold: they slide to their new places, new rows grow in, rows that leave fade where they stood (the shared flip). The fold chevron turns; heat tints ease to their new strength. Nothing moves at rest.

Props

Prop	Type	Default	Description
`data` (required)	`Record<string, unknown>[]`	—	The records.
`dimensions` (required)	`PivotDimension[]`	—	{ id, label, format?, order? }: fields to group by.
`measures` (required)	`PivotMeasure[]`	—	{ id, label, field?, aggregate, format? }
`rows / defaultRows / onRowsChange`	`string[]`	—	Dimension ids down the side, outermost first.
`columns / defaultColumns / onColumnsChange`	`string[]`	—	Dimension ids across the top.
`values / defaultValues / onValuesChange`	`string[]`	—	Measure ids in every cell.
`expanded / defaultExpanded / onExpandedChange`	`string[] \| true`	—	Keys of open groups; true opens all.
`totals`	`boolean`	—	Total row and column. Default true.
`shading`	`"none" \| "heat"`	—	Default none.
`configurable`	`boolean`	—	Show the wells. Default true.
`onCellClick`	`(cell: PivotCell) => void`	—	{ rowPath, columnPath, measure, value, records }: drill into a cell.
`title / aria-label, density, height, loading, emptyLabel, locale`		—
`className / classNames / style`	`string / PivotTableClassNames / CSSProperties`	—

Dependencies

lucide-react

Import

import { PivotTable } from "@/components/pivot-table/pivot-table";

Get it

Pivot table is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent