Pivoting

Grand Totals

Summarize all pivot data with a grand total row. Configure the grid to display this summary at either the top or bottom of the viewport.

Grand Total Row

To display the grand totals row for pivots, set the pivotGrandTotals property on the client row data source. The pivotGrandTotals property accepts one of two values:

"top": Pins the grand totals row to the top of the viewport.
"bottom": Pins the grand totals row to the bottom of the viewport.

The grand totals row is an aggregation row. Aggregation rows summarize data but do not contain any children. In the case of pivots, the grand totals row aggregates all rows in the current view.

The demo below shows a measure summing Profit. Rows are pivoted by Country and Product, columns by Age Group. The grand totals row is positioned at the bottom of the viewport.

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 { RowGroupCell } from "@1771technologies/lytenyte-pro/components";
16

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

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

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

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

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

51
export default function PivotDemo() {
52
  const ds = useClientDataSource<GridSpec>({
53
    data: salesData,
54
    pivotMode: true,
55
    pivotGrandTotals: "bottom",
56
    pivotModel: {
57
      columns: [{ id: "ageGroup" }],
58
      rows: [{ id: "country" }, { id: "productCategory" }],
59
      measures: [
60
        {
61
          dim: { id: "profit", name: "Profit", type: "number", cellRenderer: ProfitCell, width: 140 },
62
          fn: "sum",
63
        },
64
      ],
65
    },
66
    rowGroupDefaultExpansion: true,
67
    aggregateFns: { sum: aggSum },
68
  });
69

70
  const pivotProps = ds.usePivotProps();
71
  return (
72
    <>
73
      <div className="ln-grid" style={{ height: 500 }}>
74
        <Grid columns={columns} rowSource={ds} columnBase={base} rowGroupColumn={group} {...pivotProps} />
75
      </div>
76
    </>
77
  );
78
}

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 below shows the client data source configuration that enables the grand totals row. To compute the grand totals row aggregations, the grid uses the measures defined in the pivotModel property.

1
const ds = useClientDataSource<GridSpec>({
2
  data: salesData,
3
  pivotMode: true,
4
  pivotGrandTotals: "bottom",
5
  pivotModel: {
6
    columns: [{ id: "ageGroup" }],
7
    rows: [{ id: "country" }, { id: "productCategory" }],
8
    measures: [
9
      {
10
        dim: { id: "profit", name: "Profit", type: "number", cellRenderer: ProfitCell, width: 140 },
11
        fn: "sum",
12
      },
13
    ],
14
  },
15
  rowGroupDefaultExpansion: true,
16
  aggregateFns: { sum: aggSum },
17
});

Next Steps

Row & Column Pivots: Configure row and column dimensions for pivot view.
Pivot Filters: Filter pivots by labels or predicate conditions.
Measures: Aggregate and summarize row data when pivoting.

Grand Totals

Grand Total Row

Row Grand Totals

Next Steps

On this page