Add totals to a table

Show rows with aggregated measure data in the PivotTable component with the totals prop. Create each total with newTotal(type, measure, attribute, alias?), where type is one of the TotalType values below.

Supported aggregation functions

Function	`TotalType`	Description
Sum	`"sum"`	Sum of values
Maximum	`"max"`	Largest value
Minimum	`"min"`	Smallest value
Average	`"avg"`	Average value
Median	`"med"`	Middle value
Rollup	`"nat"`	Sum (or another type of aggregation) of pre-aggregated (raw) values

Add a column grand total

A column grand total aggregates data for all values in a column and displays it in the row pinned to the bottom of the table. Define it with a measure and the first row attribute.

Totals can’t be calculated for tables without row attributes or without measures. A pivot table with column attributes shows totals for all columns with the specified measure.

Pivot table of franchise fees by state and month, with Sum and Avg grand total rows at the bottom

import { PivotTable } from "@gooddata/sdk-ui-pivot";
import { newTotal } from "@gooddata/sdk-model";
import * as Md from "./catalog.js";

const measures = [Md.$FranchiseFees];
const columns = [Md.DateMonth.Short];
const rows = [Md.LocationCity];

const totals = [
    newTotal("sum", Md.$FranchiseFees, Md.LocationCity),
    newTotal("avg", Md.$FranchiseFees, Md.LocationCity),
];

export const TableWithGrandTotals = () => (
    <div style={{ height: 300 }}>
        <PivotTable measures={measures} columns={columns} rows={rows} totals={totals} />
    </div>
);

Add a subtotal

A subtotal aggregates data for all values in an attribute group. It’s displayed as a regular table row and isn’t pinned to the bottom of the table.

Define a subtotal the same way as a grand total, but pass the attribute that is being grouped.

Note

Custom executions (Execute, RawExecute, useExecutionDataView) accept totals on any dimension. PivotTable renders totals defined on its row attributes as total rows and totals defined on its column attributes as total columns. Subtotals are rendered only when the table is sorted by the first row attribute, which is the default sorting for tables.

Pivot table of franchise fees by state and menu category, with a Sum subtotal row for each state and a Sum grand total row

import { PivotTable } from "@gooddata/sdk-ui-pivot";
import { newTotal } from "@gooddata/sdk-model";
import * as Md from "./catalog.js";

const measures = [Md.$FranchiseFees];
const columns = [Md.DateMonth.Short];
const rows = [Md.LocationState, Md.MenuCategory];

const totals = [
    newTotal("sum", Md.$FranchiseFees, Md.LocationState),
    newTotal("sum", Md.$FranchiseFees, Md.MenuCategory),
];

export const TableWithSubtotals = () => (
    <div style={{ height: 300 }}>
        <PivotTable measures={measures} rows={rows} columns={columns} totals={totals} />
    </div>
);

Add totals to a table

Supported aggregation functions

Add a column grand total

Add a subtotal

Related