React Data GridPivot Result Columns

The grid generates pivot result columns to display the aggregated values for each unique permutation of pivot values.

Column Definitions

Pivot Result Columns inherit Column Definitions from the value column that they were created from. It is also possible to extend this definition further to specifically customise pivot result columns using the processPivotResultColDef grid option.

In the example below, the Gold column has cellStyle: { backgroundColor: '#f2e2879e' } applied, this is then inherited by the pivot result columns, causing all of the sum(Gold) columns to have a gold background. Note that the Silver column does not have this background so neither do the sum(Silver) columns.

The grid option processPivotResultColDef is then also used, which sets the text colour of all the pivot result columns to '#696FA2'.

This uses the following configuration to both inherit and modify column definitions on the pivot result columns:

const [columnDefs, setColumnDefs] = useState([
    // ...other column definitions
    { field: 'gold', aggFunc: 'sum', cellStyle: { backgroundColor: '#f2e2879e' } },
    { field: 'silver', aggFunc: 'sum', cellStyle: {} },
]);
const pivotMode = true;
const processPivotResultColDef = (colDef) => {
    colDef.cellStyle.color = '#696FA2'; // the params are mutated directly, not returned
};

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

Filtering

When pivot mode is enabled, you can Filter on the pivot result columns by setting the filter attribute on your value column.

As pivot values are all aggregates, filtering out rows will not re-aggregate the parent rows. Refer to Filtering Aggregated Values for more information.

Best Practices

Limiting Column Generation

When pivoting, changes in data, aggregation or pivot columns can cause the number of generated columns to scale exponentially. This can cause performance issues such as long delays in rendering, and often the resulting view would be unmanageable for the user.

To prevent this from happening, you can set the pivotMaxGeneratedColumns option. When the grid generates a number of pivot columns exceeding this value, it halts column generation, clears the view, and fires the onPivotMaxColumnsExceeded event to allow your application to intervene.

In the example above, pivoting by the Athlete column will instead trigger the pivotMaxColumnsExceeded event, which logs an error in the browser console.

The example above demonstrates the following configuration:

const pivotMode = true;
const pivotMaxGeneratedColumns = 1000;
const onPivotMaxColumnsExceeded = () => {
    console.error(
        'The limit of 1000 generated columns has been exceeded. Either remove pivot or aggregations from some columns or increase the limit.'
    );
};

<AgGridReact
    pivotMode={pivotMode}
    pivotMaxGeneratedColumns={pivotMaxGeneratedColumns}
    onPivotMaxColumnsExceeded={onPivotMaxColumnsExceeded}
/>

Next Up

Continue to the next section to learn Pivot Column Groups.