Vue Data GridAggregation - Total Rows

This section shows how to include group and grand total rows in the grid.

Enabling a Grand Total Row

A grand total row can be included in the grid by setting the grandTotalRow grid option to either "top" or "bottom". The provided value determines whether the grand total row will be included as the first or last row in the grid.

The following configuration shows how grand total rows can be included at the bottom of the grid:

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

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

Enabling Group Total Rows

A total row can be included in every group when using Row Grouping or Tree Data by setting the groupTotalRow grid option to either "top" or "bottom". The provided value determines whether the total row will be included as the first or last row in the group.

The following configuration shows how group total rows can be included at the bottom of every group:

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

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

Selectively Display Group Total Rows

Total rows can be applied to certain groups selectively by providing a callback to the groupTotalRow grid option. This callback should return "top", "bottom" or undefined and will be called for each row group to determine whether the group should display a total row.

The example above demonstrates the following configuration to display total rows for the "United States" group, and the rows grouped by the "year" field:

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

this.groupTotalRow = (params) => {
    const node = params.node;
    if (node && node.level === 1) return 'bottom';
    if (node && node.key === 'United States') return 'bottom';
    return undefined;
};

Keeping Group Row Values

When a total row is visible, the group row values are hidden. This behaviour can be prevented by setting the groupSuppressBlankHeader grid option to true.

The configuration below demonstrates the configuration for preventing the hiding of group row values:

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

this.groupSuppressBlankHeader = true;

Group Column Cell Values

When using Row Grouping or Tree Data with group columns, the group cell will display "Total" by default in the footer rows.

The default agGroupCellRenderer.cellRendererParams can be provided with a totalValueGetter to configure the value displayed in this cell.

The example above demonstrates using the following configuration to display custom group column values for grand total and group total rows:

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

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

Suppress Sticky Rows

All total rows stick to the top or bottom of the viewport when scrolling. This behaviour can be configured by using the suppressStickyTotalRow grid option.

The following configuration demonstrates how to suppress sticky behaviour for both grand and group total rows:

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

this.suppressStickyTotalRow = true;

Next Up

Continue to the next section to learn about Filtering with Aggregations.