This section shows how to add group footers to show group level totals.
If you want to include a footer with each group, set the property groupIncludeFooter
to true. It is also possible to
include a 'grand' total footer for all groups using the property groupIncludeTotalFooter
.
<ag-grid-angular
[groupIncludeFooter]="groupIncludeFooter"
[groupIncludeTotalFooter]="groupIncludeTotalFooter"
/* other grid options ... */>
</ag-grid-angular>
// adds subtotals
this.groupIncludeFooter = true;
// includes grand total
this.groupIncludeTotalFooter = true;
Note that these properties can be used together to produce totals across all group levels.
The following example demonstrates these properties. Note the following:
groupIncludeFooter = true
.groupIncludeTotalFooter = true
.aggFunc: 'sum'
column property.By default, the footer will display the word 'Total' followed by the group key. However, this can be changed using the
footerValueGetter
supplied to the Group Cell Renderer params as shown below:
<ag-grid-angular
[autoGroupColumnDef]="autoGroupColumnDef"
/* other grid options ... */>
</ag-grid-angular>
this.autoGroupColumnDef = {
cellRendererParams: {
footerValueGetter: params => {
const isRootLevel = params.node.level === -1;
if (isRootLevel) {
return 'Grand Total';
}
return `Sub Total (${params.value})`;
},
}
};
Note in the snippet above that the footerValueGetter
contains special handling to display Subtotals and Grand Totals
differently. This is demonstrated in the example below.
In most cases Customising Footer 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.
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:
Continue to the next section to learn about Opening Groups.