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 === "Male")
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
          <svg width="16" height="16" fill="currentcolor" viewBox="0 0 256 256">
51
            <path d="M216,28H168a12,12,0,0,0,0,24h19L154.28,84.74a84,84,0,1,0,17,17L204,69V88a12,12,0,0,0,24,0V40A12,12,0,0,0,216,28ZM146.41,194.46a60,60,0,1,1,0-84.87A60.1,60.1,0,0,1,146.41,194.46Z"></path>
52
          </svg>
53
        </div>
54
        Male
55
      </div>
56
    );
57

58
  if (field === "Female")
59
    return (
60
      <div className="flex h-full w-full items-center gap-2">
61
        <div className="flex size-6 items-center justify-center rounded-full bg-pink-500/50">
62
          <svg width="16" height="16" fill="currentcolor" viewBox="0 0 256 256">
63
            <path d="M212,96a84,84,0,1,0-96,83.13V196H88a12,12,0,0,0,0,24h28v20a12,12,0,0,0,24,0V220h28a12,12,0,0,0,0-24H140V179.13A84.12,84.12,0,0,0,212,96ZM68,96a60,60,0,1,1,60,60A60.07,60.07,0,0,1,68,96Z"></path>
64
          </svg>
65
        </div>
66
        Female
67
      </div>
68
    );
69

70
  return "-";
71
}
72

73
function tw(...c: ClassValue[]) {
74
  return twMerge(clsx(...c));
75
}
76

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

84
  if (typeof field !== "number") return "-";
85

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

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

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

104
  if (typeof field !== "number") return "-";
105

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

108
  return <div className={"flex h-full w-full items-center justify-end tabular-nums"}>{formatted}</div>;
109
}
110

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

114
  if (typeof field !== "number") return "-";
115

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

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

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

132
  const flag = countryFlags[field as keyof typeof countryFlags];
133
  if (!flag) return "-";
134

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

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