Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

JavaScript Data Grid: Row Grouping - Group Footers

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.

const gridOptions = {
    // adds subtotals
    groupIncludeFooter: true,
    // includes grand total
    groupIncludeTotalFooter: true,

    // other grid options ...
}

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

const gridOptions = {
    autoGroupColumnDef: { 
        cellRendererParams: {
            footerValueGetter: params =>  {
                const isRootLevel = params.node.level === -1;
                if (isRootLevel) {
                    return 'Grand Total';
                }
                return `Sub Total (${params.value})`;
            },
        }
    },

    // other grid options ...
}

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:

const gridOptions = {
    autoGroupColumnDef: { 
        cellRendererParams: {
            innerRenderer: params => {
                if (params.node.footer) {
                    const isRootLevel = params.node.level === -1;
                    if (isRootLevel) {
                        // Grand Total Cells
                        return `<span style="color:navy; font-weight:bold">Grand Total</span>`;
                    }
                    // Subtotal Cells
                    return `<span style="color:navy">Sub Total ${params.value}</span>`;
                }
                // Non-Footer Group Cells
                return params.value;
            }
        }
    },

    // other grid options ...
}

Note in the snippet above that the innerRenderer contains special handling to display Grand Total, Subtotal and non-footer cells differently. This is demonstrated in the example below.

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:

  • It is not possible to select footer nodes. Footer rows appear selected when the group is selected.
  • Footer rows are not part of the iterated set when the api method api.forEachNode() is called.
  • Footer nodes are not exported to CSV or Excel.
  • If a Footer cell is copied to the clipboard, the word "Total" will not be included. Eg where the group for "Sales" would say "Total Sales", only "Sales" will go to the clipboard. This is because the word "Total" is not actually part of the data, it's something the grid rendering puts in.

Next Up

Continue to the next section to learn about Opening Groups.