Pivot Table

1'use client'
2 
3import { useMemo, useState } from 'react'
4import {
5  flexRender,
6  getCoreRowModel,
7  useReactTable,
8} from '@tanstack/react-table'
9import type { ColumnDef } from '@tanstack/react-table'
10 
11import {
12  Table,
13  TableBody,
14  TableCell,
15  TableFooter,
16  TableHead,
17  TableHeader,
18  TableRow,
19} from '#/components/ui/table'
20import {
21  Select,
22  SelectContent,
23  SelectItem,
24  SelectTrigger,
25  SelectValue,
26} from '#/components/ui/select'
27import type { AggregationType, PivotRow, SalesRecord } from './pivot'
28import { pivotData } from './pivot'
29 
30const DIMENSIONS: { value: keyof SalesRecord; label: string }[] = [
31  { value: 'region', label: 'Region' },
32  { value: 'quarter', label: 'Quarter' },
33  { value: 'channel', label: 'Channel' },
34]
35 
36const AGGREGATIONS: { value: AggregationType; label: string }[] = [
37  { value: 'sum', label: 'Sum' },
38  { value: 'avg', label: 'Average' },
39  { value: 'count', label: 'Count' },
40]
41 
42function formatValue(value: number, aggFn: AggregationType) {
43  if (aggFn === 'count') return value.toLocaleString('en-US')
44  return value.toLocaleString('en-US', {
45    style: 'currency',
46    currency: 'USD',
47    maximumFractionDigits: 0,
48  })
49}
50 
51interface PivotTableProps {
52  data: SalesRecord[]
53}
54 
55export function PivotTable({ data }: PivotTableProps) {
56  const [rowDim, setRowDim] = useState<keyof SalesRecord>('region')
57  const [colDim, setColDim] = useState<keyof SalesRecord>('quarter')
58  const [aggFn, setAggFn] = useState<AggregationType>('sum')
59 
60  const { colValues, rows, columnTotals, grandTotal } = useMemo(
61    () => pivotData(data, rowDim, colDim, aggFn),
62    [data, rowDim, colDim, aggFn],
63  )
64 
65  const rowLabel = DIMENSIONS.find((d) => d.value === rowDim)!.label
66 
67  const columns = useMemo<ColumnDef<PivotRow>[]>(
68    () => [
69      {
70        id: 'rowValue',
71        header: rowLabel,
72        accessorKey: 'rowValue',
73        cell: ({ getValue }) => (
74          <span className="font-medium">{getValue() as string}</span>
75        ),
76      },
77      ...colValues.map(
78        (colValue): ColumnDef<PivotRow> => ({
79          id: colValue,
80          header: colValue,
81          accessorFn: (row) => row.cells[colValue],
82          cell: ({ getValue }) => formatValue(getValue() as number, aggFn),
83        }),
84      ),
85      {
86        id: 'total',
87        header: 'Total',
88        accessorKey: 'total',
89        cell: ({ getValue }) => (
90          <span className="font-medium">
91            {formatValue(getValue() as number, aggFn)}
92          </span>
93        ),
94// … truncated