React Data GridPivot Column Groups

The grid generates pivot column groups representing each unique pivoted value.

Customising Group Definitions

Pivot Result Column Group definitions can be configured using the processPivotResultColGroupDef grid option.

In the example below, the processPivotResultColGroupDef callback is used to apply a class to the group header cells, which is subsequently used to style them with a golden background.

This demonstrates the following configuration for applying a class to the group header cells:

const pivotMode = true;
const processPivotResultColGroupDef = (colDef) => {
    colDef.headerClass = 'pivot-gold'; // the params are mutated directly, not returned
};

<AgGridReact
    pivotMode={pivotMode}
    processPivotResultColGroupDef={processPivotResultColGroupDef}
/>

Ordering Groups

The pivot result groups are initially displayed in alphabetical order, however, you can change this by providing a pivotComparator function to the pivoted columns definition.

In the example below, note that a pivotComparator has been supplied to the sport column, and the groups are instead sorted in reversed alphabetical order.

This demonstrates the following configuration for modifying the resulting order of groups:

const [columnDefs, setColumnDefs] = useState([
    // ...other column definitions
    {
        field: 'sport',
        pivot: true,
        pivotComparator: (a, b) => b.localeCompare(a),
    },
]);
const pivotMode = true;

<AgGridReact
    columnDefs={columnDefs}
    pivotMode={pivotMode}
/>

Changing Data, Filters, and Configurations

When changing data, filters, or configurations such as pivotRowTotals the generated column groups and their order is impacted. The grid will add new columns and column groups at the end of their parent groups. This is to maintain any changes the user may have made to their column order.

This behaviour can be toggled to instead reset the column order when the columns are generated by setting the enableStrictPivotColumnOrder grid option to true.

The example below demonstrates a changing data set while in pivot mode. Note that when enableStrictPivotColumnOrder is set to false, new columns are appended. When set to true all columns are re-sorted according to the pivotComparator (or alphanumerically if omitted).

This demonstrates the following configuration for changing the behaviour for new column groups:

const enableStrictPivotColumnOrder = true;

<AgGridReact enableStrictPivotColumnOrder={enableStrictPivotColumnOrder} />

Filtering Pivoted Columns

When pivoting is active, filters can be applied to columns defined within the column definitions by using the Filters Tool Panel and the Filter API.

In the example below, applying a filter to the Sport column (which has been pivoted) impacts the generated pivot column groups, instead of the grid rows or cell values.

Expanded by Default

Pivot Column Groups can be configured to expand by default, down to a given depth. This depth can be configured using the pivotDefaultExpanded grid option.

The example below demonstrates pivotDefaultExpanded being used to expand the first pivot group level by default. Providing -1 will expand all pivot group levels by default.

The example above demonstrates the following configuration for expanding pivot groups by default:

const pivotDefaultExpanded = 1;

<AgGridReact pivotDefaultExpanded={pivotDefaultExpanded} />

Prevent Expanding Groups

When using multiple pivot columns, groups become expandable by default. To prevent this and instead always show all columns, set the grid option suppressExpandablePivotGroups=true.

The example above demonstrates the following configuration:

const pivotMode = true;
const suppressExpandablePivotGroups = true;

<AgGridReact
    pivotMode={pivotMode}
    suppressExpandablePivotGroups={suppressExpandablePivotGroups}
/>

Hide Group with Single Value Column

When pivoting with only one aggregated column, it can simplify the grid to omit the groups with only one child. Enabling the grid option removePivotHeaderRowWhenSingleValueColumn=true, when set to true will instead skip the group and use the pivot keys to label the pivot result column instead.

The example above demonstrates the following configuration:

const [columnDefs, setColumnDefs] = useState([
    { field: 'country', rowGroup: true },
    { field: 'sport', pivot: true },
    { field: 'gold', aggFunc: 'sum' },
]);
const pivotMode = true;
const removePivotHeaderRowWhenSingleValueColumn = true;

<AgGridReact
    columnDefs={columnDefs}
    pivotMode={pivotMode}
    removePivotHeaderRowWhenSingleValueColumn={removePivotHeaderRowWhenSingleValueColumn}
/>

Next Up

Display the total aggregation of rows and columns when pivoting with Pivot Totals.