Vue Data GridPivot Totals

Pivot totals can be inserted into the grid to display the total aggregations of rows.

Column Group Totals

When pivoting by multiple columns, the grid automatically inserts a column for each active aggregation representing that group's total. These columns are by default only displayed when the column group is closed.

The example below demonstrates that when collapsed, group totals are displayed for each sport. When expanded, these are hidden and instead display the break-down per year.

Row Totals

It is possible to include the grand total value (equivalent to if pivoting was disabled) for each aggregation in each row by setting the grid option pivotRowTotals to 'before' or 'after' (determining the inserted total columns position in the grid).

The example above demonstrates the following configuration for adding an additional Gold row total at the start of the grid:

<ag-grid-vue
    :columnDefs="columnDefs"
    :pivotMode="pivotMode"
    :pivotRowTotals="pivotRowTotals"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    // ...other column defs
    { field: 'gold', aggFunc: 'sum' },
];
this.pivotMode = true;
this.pivotRowTotals = 'before';

Next Up

Continue to the next section to learn about Tree Data.