Pivoting

Pivot State Persistence

Enabling pivots dynamically creates columns. Control pivot state to customize the pivot configuration to your requirements.

The PivotState type defines the pivot configuration. It includes column-specific state and expansion states for row and column groups.

1
export interface PivotState {
2
  readonly columnState: {
3
    readonly ordering: string[];
4
    readonly resizing: Record<string, number>;
5
    readonly pinning: Record<string, ColumnPin>;
6
  };
7
  readonly columnGroupState: Record<string, boolean>;
8
  readonly rowGroupExpansions: Record<string, boolean | undefined>;
9
}

By default, the client data source maintains and controls the pivot state internally. This means pivots support features such as re-ordering and resizing without requiring any external hooks.

Controlled Pivot State

Set pivotState on the client data source to manage pivot state. To keep it in sync, handle onPivotStateChange and write the updated state back to pivotState.

The demo below shows a measure summing Profit, with rows pivoted by Country and Product, and columns by Age Group. It demonstrates controlled pivot state. This configuration behaves identically to the default (uncontrolled) approach, but the state is now exposed to your application.

1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { salesData, type SaleDataItem } from "@1771technologies/grid-sample-data/sales-data";
4
import { computeField, Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
5
import {
6
  AgeGroup,
7
  CostCell,
8
  CountryCell,
9
  DateCell,
10
  GenderCell,
11
  NumberCell,
12
  ProfitCell,
13
} from "./components.jsx";
14
import { sum } from "es-toolkit";
15
import { useState } from "react";
16
import { RowGroupCell } from "@1771technologies/lytenyte-pro/components";
17

18
export interface GridSpec {
19
  readonly data: SaleDataItem;
20
}
21

22
export const columns: Grid.Column<GridSpec>[] = [
23
  { id: "date", name: "Date", cellRenderer: DateCell, width: 110 },
24
  { id: "age", name: "Age", type: "number", width: 80 },
25
  { id: "ageGroup", name: "Age Group", cellRenderer: AgeGroup, width: 110 },
26
  { id: "customerGender", name: "Gender", cellRenderer: GenderCell, width: 80 },
27
  { id: "country", name: "Country", cellRenderer: CountryCell, width: 150 },
28
  { id: "orderQuantity", name: "Quantity", type: "number", width: 60 },
29
  { id: "unitPrice", name: "Price", type: "number", width: 80, cellRenderer: NumberCell },
30
  { id: "cost", name: "Cost", width: 80, type: "number", cellRenderer: CostCell },
31
  { id: "revenue", name: "Revenue", width: 80, type: "number", cellRenderer: ProfitCell },
32
  { id: "profit", name: "Profit", width: 80, type: "number", cellRenderer: ProfitCell },
33
  { id: "state", name: "State", width: 150 },
34
  { id: "product", name: "Product", width: 160 },
35
  { id: "productCategory", name: "Category", width: 120 },
36
  { id: "subCategory", name: "Sub-Category", width: 160 },
37
];
38

39
const base: Grid.ColumnBase<GridSpec> = { width: 120, widthFlex: 1 };
40

41
const group: Grid.RowGroupColumn<GridSpec> = {
42
  cellRenderer: RowGroupCell,
43
  width: 200,
44
  pin: "start",
45
};
46

47
const aggSum: Grid.T.Aggregator<GridSpec["data"]> = (field, data) => {
48
  const values = data.map((x) => computeField<number>(field, x));
49
  return sum(values);
50
};
51

52
export default function PivotDemo() {
53
  const [pivotState, setPivotState] = useState<Grid.T.PivotState>({
54
    columnGroupState: {},
55
    columnState: { ordering: [], pinning: {}, resizing: {} },
56
    rowGroupExpansions: { Australia: false },
57
  });
58

59
  const ds = useClientDataSource<GridSpec>({
60
    data: salesData,
61
    pivotMode: true,
62
    pivotState,
63
    onPivotStateChange: setPivotState,
64
    pivotModel: {
65
      columns: [{ id: "ageGroup" }],
66
      rows: [{ id: "country" }, { id: "productCategory" }],
67
      measures: [
68
        {
69
          dim: { id: "profit", name: "Profit", type: "number", cellRenderer: ProfitCell, width: 140 },
70
          fn: "sum",
71
        },
72
      ],
73
    },
74
    rowGroupDefaultExpansion: true,
75
    aggregateFns: { sum: aggSum },
76
  });
77

78
  const pivotProps = ds.usePivotProps();
79
  return (
80
    <>
81
      <div className="ln-grid" style={{ height: 500 }}>
82
        <Grid columns={columns} rowSource={ds} columnBase={base} rowGroupColumn={group} {...pivotProps} />
83
      </div>
84
    </>
85
  );
86
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import type { GridSpec } from "./demo";
3
import { format, isValid, parse } from "date-fns";
4
import { countryFlags } from "@1771technologies/grid-sample-data/sales-data";
5
import { clsx, type ClassValue } from "clsx";
6
import { twMerge } from "tailwind-merge";
7

8
export function DateCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
9
  const field = api.columnField(column, row);
10

11
  if (typeof field !== "string") return "-";
12

13
  const dateField = parse(field as string, "MM/dd/yyyy", new Date());
14

15
  if (!isValid(dateField)) return "-";
16

17
  const niceDate = format(dateField, "yyyy MMM dd");
18
  return <div className="flex h-full w-full items-center tabular-nums">{niceDate}</div>;
19
}
20

21
export function AgeGroupPivotHeader({ column }: Grid.T.HeaderParams<GridSpec>) {
22
  const field = column.name ?? column.id;
23

24
  if (field === "Under 25") return <div className="text-[#944cec] dark:text-[#B181EB]">Under 25</div>;
25
  if (field === "25-34") return <div className="text-[#aa6c1a] dark:text-[#E5B474]">25-34</div>;
26
  if (field === "35-64") return <div className="text-[#0f7d4c] dark:text-[#52B086]">35-64</div>;
27

28
  if (field === "Grand Total") return "Grand Total";
29

30
  return "Other";
31
}
32

33
export function AgeGroup({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
34
  const field = api.columnField(column, row);
35

36
  if (field === "Under 25") return <div className="text-[#944cec] dark:text-[#B181EB]">Under 25</div>;
37
  if (field === "25-34") return <div className="text-[#aa6c1a] dark:text-[#E5B474]">25-34</div>;
38
  if (field === "35-64") return <div className="text-[#0f7d4c] dark:text-[#52B086]">35-64</div>;
39

40
  return "-";
41
}
42

43
export function GenderCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
44
  const field = api.columnField(column, row);
45

46
  if (field === "M")
47
    return (
48
      <div className="flex h-full w-full items-center gap-2">
49
        <div className="flex size-6 items-center justify-center rounded-full bg-blue-500/50">
50
          <span className="iconify ph--gender-male-bold size-4" />
51
        </div>
52
        M
53
      </div>
54
    );
55

56
  if (field === "F")
57
    return (
58
      <div className="flex h-full w-full items-center gap-2">
59
        <div className="flex size-6 items-center justify-center rounded-full bg-pink-500/50">
60
          <span className="iconify ph--gender-female-bold size-4" />
61
        </div>
62
        F
63
      </div>
64
    );
65

66
  return "-";
67
}
68

69
function tw(...c: ClassValue[]) {
70
  return twMerge(clsx(...c));
71
}
72

73
const formatter = new Intl.NumberFormat("en-US", {
74
  maximumFractionDigits: 2,
75
  minimumFractionDigits: 0,
76
});
77
export function ProfitCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
78
  const field = api.columnField(column, row);
79

80
  if (typeof field !== "number") return "-";
81

82
  const formatted = field < 0 ? `-$${formatter.format(Math.abs(field))}` : "$" + formatter.format(field);
83

84
  return (
85
    <div
86
      className={tw(
87
        "flex h-full w-full items-center justify-end tabular-nums",
88
        field < 0 && "text-red-600 dark:text-red-300",
89
        field > 0 && "text-green-600 dark:text-green-300",
90
      )}
91
    >
92
      {formatted}
93
    </div>
94
  );
95
}
96

97
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
98
  const field = api.columnField(column, row);
99

100
  if (typeof field !== "number") return "-";
101

102
  const formatted = field < 0 ? `-$${formatter.format(Math.abs(field))}` : "$" + formatter.format(field);
103

104
  return <div className={"flex h-full w-full items-center justify-end tabular-nums"}>{formatted}</div>;
105
}
106

107
export function CostCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
108
  const field = api.columnField(column, row);
109

110
  if (typeof field !== "number") return "-";
111

112
  const formatted = field < 0 ? `-$${formatter.format(Math.abs(field))}` : "$" + formatter.format(field);
113

114
  return (
115
    <div
116
      className={tw(
117
        "flex h-full w-full items-center justify-end tabular-nums text-red-600 dark:text-red-300",
118
      )}
119
    >
120
      {formatted}
121
    </div>
122
  );
123
}
124

125
export function CountryCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
126
  const field = api.columnField(column, row);
127

128
  const flag = countryFlags[field as keyof typeof countryFlags];
129
  if (!flag) return "-";
130

131
  return (
132
    <div className="flex h-full w-full items-center gap-2">
133
      <img className="size-4" src={flag} alt={`country flag of ${field}`} />
134
      <span>{String(field ?? "-")}</span>
135
    </div>
136
  );
137
}

The code to control the pivot state is shown below. The initial state starts with the Australia row group collapsed. To control pivot state, the onPivotStateChange is set to the setPivotState function returned by React’s useState hook.

1
const [pivotState, setPivotState] = useState<Grid.T.PivotState>({
2
  columnGroupState: {},
3
  columnState: { ordering: [], pinning: {}, resizing: {} },
4
  rowGroupExpansions: { Australia: false },
5
});
6

7
const ds = useClientDataSource<GridSpec>({
8
  data: salesData,
9
  pivotMode: true,
10
  pivotState,
11
  onPivotStateChange: setPivotState,
12
  pivotModel: {
13
    columns: [{ id: "ageGroup" }],
14
    rows: [{ id: "country" }, { id: "productCategory" }],
15
    measures: [
16
      {
17
        dim: { id: "profit", name: "Profit", type: "number", cellRenderer: ProfitCell, width: 140 },
18
        fn: "sum",
19
      },
20
    ],
21
  },
22
  rowGroupDefaultExpansion: true,
23
  aggregateFns: { sum: aggSum },
24
});

Warning

Only control pivot state when your use case requires it. Do not use controlled pivot state to modify columns generated by the client data source. To adjust generated columns, use pivotColumnProcessor instead.

Next Steps

Row & Column Pivots: Configure row and column dimensions for pivot view.
Measures: Aggregate and summarize row data when pivoting.
Pivot Sorting: Customize the sort order of pivoted row groups.

Pivot State Persistence

Controlled Pivot State

Controlled Pivot State

Warning

Next Steps

On this page