caliper uidocs
DemoSign inGet Pro

Pivot table

Pro

Summarise any records by the fields you choose: rows grouped one or two deep, a field across the columns, and the sum, average, count, minimum or maximum, with totals, sorting, shading and a grid you move through with the keyboard.

Installs components/ui/pivot-table.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/pivot-table
RowsRegionCustomer
Columns
Values
Show
Sum of Amount by Region then Customer and Quarter. Arrow keys move between cells.
Region / Customer2025 Q42026 Q12026 Q22026 Q3Total
€39,940€43,035€43,945€44,855€171,775
€7,175€6,035€7,080€8,125€28,415
€45,695€47,650€49,605€53,745€196,695
€51,565€53,520€55,475€59,615€220,175
Total€144,375€150,240€156,105€166,340€617,060

When to use #

Use it for

  • Finance and sales reports where people ask the next question themselves.
  • Admin tools over exported data.

Skip it when

  • A fixed report everyone reads the same way; use a table or a chart.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/pivot-table

Adds its 8 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { PivotTable } from "@/components/ui/pivot-table"

The worked example comes with Pro

The 34-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

PivotTable

component
PropTypeDefault
records *readonly T[]—
fields *readonly PivotField[]—
value *PivotConfig—
onValueChange *(value: PivotConfig) => void—
labelstring"Pivot table"
classNamestring—

Accessibility #

It exposes group, grid and status semantics, with aria-label, aria-hidden, aria-describedby, aria-sort and aria-expanded kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
EnterActivates the focused control.
SpaceActivates the focused control.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.