Pivot tablePro
Drag fields into rows, columns and values, with subtotals, grand totals and value tinted cells. Every drag has a keyboard twin.
On this page
ProNew revenue by region and plan across quarters, with subtotals; drag or use Space and arrows to move fields.
Installation
Usage
import { PivotTable } from "@/components/ui/chatcn/pro/pivot-table"
<PivotTable
data={rows}
fields={fields}
defaultValue={{ rows: ["region", "plan"], columns: ["quarter"], values: [{ field: "revenue", agg: "sum" }] }}
/>Fields are dimensions or measures; a measure dropped in Values sums by default and a dimension counts distinct values. Two or more row fields add a subtotal per group. Cells tint with the first chart color by their share of the largest value; set heat={false} for plain cells. pivot in chatcn-pro-data-a does the aggregation, so you can run it on the server for big data.
Examples
States
ProTwo values by country without heat, nothing placed yet, loading and error.
Props
| Prop | Type | Notes |
|---|---|---|
data | Record<string, unknown>[] | Rows to pivot |
fields | PivotField[] | { id, label?, kind, format? } |
value, defaultValue, onValueChange | PivotConfig | { rows, columns, values: { field, agg }[] } |
heat | boolean | Default true |
loading, error, onRetry, maxHeight, title, locale | Pivot states |
Keyboard
| Key | Action |
|---|---|
| Space or Enter on a field | Picks it up or drops it |
| Up and Down while held | Moves it to the previous or next well |
| Left and Right while held | Reorders it inside the well |
| Escape while held | Puts it back where it was |
| Delete on a placed field | Returns it to Fields |
Accessibility
- Fields are buttons with a draggable role description and instructions; every move is announced.
- The table has a caption naming the values and groupings, and scoped row and column headers.
- Aggregates change from a menu on each value field.
Motion
The dragged field follows the pointer one to one; the target well tints and an insertion bar shows where it lands. Drops and keyboard moves are instant.