This section shows how to include group and grand total rows in the grid.
Grand Total Row
To include a grand total row in the grid, set the property grandTotalRow
to either 'top' or 'bottom', this determines whether the grand total row will be included as the first or last row in the grid.
<ag-grid-angular
[grandTotalRow]="grandTotalRow"
/* other grid options ... */ />
// adds subtotals to the bottom of each row group
this.grandTotalRow = 'bottom';
Group Total Rows
To include a total row in each group, set the property groupTotalRow
to either 'top' or 'bottom', this determines whether the total row will be included as the first or last row in the group.
<ag-grid-angular
[groupTotalRow]="groupTotalRow"
/* other grid options ... */ />
// adds subtotals to the bottom of each row group
this.groupTotalRow = 'bottom';
The example above demonstrates this property. Note the following:
- Expanding groups reveals subtotal rows at the bottom of each group as
groupTotalRow = 'bottom'
. - The medal totals are aggregated via the
aggFunc: 'sum'
column property.
Dynamically Display Group Total Rows
To only display a group total row in some groups but not others, you can dynamically specify which groups to add the row to by providing a callback function to the property groupTotalRow
instead of 'top' or 'bottom'.
The example above demonstrates custom group footers. Note the following:
- Group Total Row is shown for the group called
United States
- Group Total Row is shown for the
year
level of groups - No Group Total Rows are shown for any other groups.
The code for implementing this behaviour is shown below:
<ag-grid-angular
[groupTotalRow]="groupTotalRow"
/* other grid options ... */ />
// adds a group total row at the bottom of the second level of groups, and groups with name 'France'
this.groupTotalRow = (params) => {
const node = params.node;
if (node && node.level === 1) return 'bottom';
if (node && node.key === 'United States') return 'bottom';
return undefined;
;
Showing Values in Group and Total Rows
By default, when a group is expanded the aggregation values show in the total row, and are hidden from the group row. This behaviour can be changed to show values both in the expanded group and the total row by enabling the option groupSuppressBlankHeader
.
<ag-grid-angular
[groupSuppressBlankHeader]="groupSuppressBlankHeader"
/* other grid options ... */ />
this.groupSuppressBlankHeader = true;
Suppress Sticky Total Rows
By default, all total rows are sticky, meaning they will remain visible when scrolling vertically. This behaviour can be changed by using the property suppressStickyTotalRow
.
In the example above, note the following:
- Clicking the Suppress Grand Total Row button sets the
suppressStickyTotalRow
property to'grand'
and prevents the grand total from sticking. - Clicking the Suppress Group Total Row button sets the
suppressStickyTotalRow
property to'group'
and prevents the group total rows from sticking. - Clicking the Suppress All Total Rows button sets the
suppressStickyTotalRow
property totrue
and prevents both group and grand total rows from sticking. - Clicking the Suppress No Total Rows button sets the
suppressStickyTotalRow
property tofalse
and allows both group and grand total rows to stick.
Customising Group Column Total Values
By default, the footer cell in the group column will display the word 'Total' followed by the group key. However, this can be changed using the totalValueGetter
supplied to the Group Cell Renderer params as shown below:
<ag-grid-angular
[autoGroupColumnDef]="autoGroupColumnDef"
/* other grid options ... */ />
this.autoGroupColumnDef = {
cellRendererParams: {
totalValueGetter: params => {
const isRootLevel = params.node.level === -1;
if (isRootLevel) {
return 'Grand Total';
}
return `Sub Total (${params.value})`;
},
}
};
Note in the snippet above that the totalValueGetter
contains special handling to display Subtotals and Grand Totals differently. This is demonstrated in the example below.
Customising Group Total Cells
In most cases Customising Group Column Values is sufficient, however it is also possible to customise the footer cell using the innerCellRenderer
supplied to the Group Cell Renderer params as shown below:
In the example below the innerRenderer
contains special handling to display Grand Total, Subtotal and non-footer cells differently.
It is also possible to customise footer cells using: cellRendererParams.innerRendererSelector
. For more details see the Group Cell Renderer section.
Total Row Limitations
Group footers are a UI concept only in the grid. It is the grids way of showing aggregated data (which belongs to the group) appearing after the group's children. Because the footer is a UI concept only, the following should be noted:
- It is not possible to select footer nodes. Footer rows appear selected when the group is selected.
- When exporting custom footers to Excel/CSV, the processRowGroupCallback function of the export must be used to export the custom values.
- When copying custom footers to the Clipboard, the processCellForClipboard function of the clipboard must be used to export the custom values.
Next Up
Continue to the next section to learn about Other Aggregation Topics.