Vue Data GridRow Grouping - Group Footers

ReactAngularVueJavascript

Enterprise

This section shows how to add group footers to show group level totals.

Enabling Group Footers

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-vue
    :groupIncludeFooter="groupIncludeFooter"
    :groupIncludeTotalFooter="groupIncludeTotalFooter"
    /* other grid options ... */>
</ag-grid-vue>

// 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:

• Expanding groups reveals subtotal footers as groupIncludeFooter = true.
• A grand total footer is shown as the groupIncludeTotalFooter = true.
• The medal totals are aggregated via the aggFunc: 'sum' column property.

Dynamic Group Footers

If you want a group footer to only be enabled for certain groups but not others, you can dynamically specify which groups to add footers for through passing a custom callback function to the property groupIncludeFooter instead of a boolean.

For example, to enable group footers for the second level of groups and groups with name 'France':

<ag-grid-vue
    :groupIncludeFooter="groupIncludeFooter"
    /* other grid options ... */>
</ag-grid-vue>

// adds a group footer to the second level of groups and groups with name 'France'
this.groupIncludeFooter = (params) => {
    const node = params.node;
    if (node && node.level === 1) return true;
    if (node && node.key === 'France') return true;
    return false;
};

The following example demonstrates a custom group footer enablement. Note the following:

• Group Footer is shown for the second level of groups
• Group Footer is shown for the group called France
• No Group Footers are shown for any other groups.

Example: Group Column Footers

To enable group footer for a particular row group column, you could do the following:

<ag-grid-vue
    :groupIncludeFooter="groupIncludeFooter"
    /* other grid options ... */>
</ag-grid-vue>

// adds a group footer to rows grouped by the country column
this.groupIncludeFooter = (params) => params.node.rowGroupColumn.getId() === 'country';

The following example demonstrates a custom group footer enablement for rows grouped by a country column. Note the following:

• Group Footer is shown for rows grouped by the country column.
• Group Footer are not shown for any other groups

Customising Footer Values

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-vue
    :autoGroupColumnDef="autoGroupColumnDef"
    /* other grid options ... */>
</ag-grid-vue>

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.

Customising Footer Cells

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.

Group Footer 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 Opening Groups.