Pivot totals can be inserted into the grid to display the total aggregations of rows.
Column Group Totals Copy Link
When pivoting by multiple columns, the grid automatically inserts a column for each active aggregation representing that group's total. These columns are by default only displayed when the column group is closed.
The example below demonstrates that when collapsed, group totals are displayed for each sport. When expanded, these are hidden and instead display the break-down per year.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
AutoGroupColumnDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import { PivotModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, PivotModule]);
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:pivotMode="true"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "country", rowGroup: true },
{ field: "sport", pivot: true },
{ field: "year", pivot: true },
{ field: "gold", aggFunc: "sum" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 130,
});
const autoGroupColumnDef = ref<AutoGroupColumnDef>({
minWidth: 200,
});
const rowData = ref<IOlympicData[]>(null);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
defaultColDef,
autoGroupColumnDef,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
Row Totals Copy Link
A total column can be included for each aggregation by using the pivotRowTotals grid option. This option can be set to "before" or "after" determining the position of these total columns relative to the pivot columns.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
AutoGroupColumnDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
PivotRowTotals,
enableDevValidations,
} from "ag-grid-community";
import { PivotModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule, PivotModule]);
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:pivotMode="true"
:pivotRowTotals="pivotRowTotals"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "country", rowGroup: true },
{ field: "year", pivot: true },
{ field: "gold", aggFunc: "sum" },
{ field: "silver", aggFunc: "sum" },
{ field: "bronze", aggFunc: "sum" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 130,
});
const autoGroupColumnDef = ref<AutoGroupColumnDef>({
minWidth: 200,
});
const pivotRowTotals = ref<PivotRowTotals>("before");
const rowData = ref<IOlympicData[]>(null);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
defaultColDef,
autoGroupColumnDef,
pivotRowTotals,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
The example above demonstrates the following configuration for adding additional pivot row totals at the start of the grid:
<ag-grid-vue
:pivotRowTotals="pivotRowTotals"
/* other grid options ... */>
</ag-grid-vue>
this.pivotRowTotals = 'before';When trying to update the position of row totals reactively, see Changing Data, Filters, and Configurations.