Preview Updated 2026-05-10

Pivot

2D aggregation table — sum / avg / count / min / max aggregators, built-in row/col totals, optional heatmap shading, cell drill-down.

Basic usage

Group a flat array of objects by rowField (rows) and colField (columns), aggregating valueField. Row totals, column totals, and grand total are computed automatically.

region/channel	官网	门店	App	合计
华北	¥12,400	¥8,200	¥4,900	¥25,500
华东	¥22,800	¥14,200	¥9,800	¥46,800
华南	¥18,200	¥6,800	¥5,400	¥30,400
西部	¥7,400	¥3,200	¥2,100	¥12,700
合计	¥60,800	¥32,400	¥22,200	¥115,400

Heatmap mode

With heatmap, each cell is shaded with a translucent accent color proportional to its value (larger = deeper). Combined with different aggregator settings it gives an at-a-glance distribution view.

aggregator

周 × 小时出行热力（模拟数据）

weekday/hour	00	04	08	12	16	20
周一	81	103	292	316	314	51
周二	51	52	272	326	323	97
周三	89	84	311	275	271	58
周四	66	63	293	289	293	104
周五	108	73	285	300	310	62
周六	162	171	127	334	145	297
周日	140	121	121	292	159	319

Drill-down

onCellClick receives { row, col, value, rows } — rows is every source record that fell into this cell, ideal for triggering a drawer or modal with the underlying detail.

product/store	上海	北京	深圳	合计
A	6,000	1,900		7,900
B	5,400	6,100	4,200	15,700
C	1,200	2,400	3,300	6,900
合计	12,600	10,400	7,500	30,500

API

Prop	Type	Default	Description
`data`	`T[]`	—	Flat data array
`rowField`	`keyof T`	—	Row grouping field
`colField`	`keyof T`	—	Column grouping field
`valueField`	`keyof T`	—	Numeric field (omittable with `aggregator='count'`)
`aggregator`	`'sum' \| 'avg' \| 'count' \| 'min' \| 'max'`	`'sum'`	Aggregation method
`format`	`(value, { row, col }) => string`	—	Custom cell formatter
`showTotals`	`boolean`	`true`	Render row + column totals
`heatmap`	`boolean`	`false`	Shade cells by value
`heatmapColor`	`string`	`var(--accent-1)`	Heatmap base color
`caption`	`string`	—	Caption above the table
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size scale
`onCellClick`	`(cell) => void`	—	Cell click callback (receives source `rows`)

Utility

import { pivotCompute, pivotAggregate } from '@chufix-design/vue';

const result = pivotCompute(data, 'region', 'channel', 'amount', 'sum');
// → { rowKeys, colKeys, cells, raw, rowTotals, colTotals, grandTotal, min, max }

pivotCompute is the same pure function the component uses internally — re-use it for CSV export, charting, or custom drill-down flows.