React Data GridTotal Rows

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.

// adds subtotals to the bottom of each row group
const grandTotalRow = 'bottom';

<AgGridReact grandTotalRow={grandTotalRow} />

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.

// adds subtotals to the bottom of each row group
const groupTotalRow = 'bottom';

<AgGridReact groupTotalRow={groupTotalRow} />

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:

// adds a group total row at the bottom of the second level of groups, and groups with name 'France'
const groupTotalRow = (params) => {
   const node = params.node;
   if (node && node.level === 1) return 'bottom';
   if (node && node.key === 'United States') return 'bottom';
   return undefined;
;

<AgGridReact groupTotalRow={groupTotalRow} />

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.

const groupSuppressBlankHeader = true;

<AgGridReact groupSuppressBlankHeader={groupSuppressBlankHeader} />

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 to true and prevents both group and grand total rows from sticking.
• Clicking the Suppress No Total Rows button sets the suppressStickyTotalRow property to false 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:

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

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />

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.

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.