React Data GridPivoting

Pivoting breaks down data in an additional dimension.

Pivoting can be configured in the grid column definitions or can be applied using the grid API. Users can also configure pivoting through the UI using either the Side Bar or the Pivot Panel, as shown below:

Enabling Pivoting

To enable pivoting, set pivotMode: true in the gridOptions and enable the pivot column property on the desired column as shown below:

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

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

In the snippet above, the rows are Grouped on the Country column and Aggregated to total the number of Gold medals won by each country. You must provide at least one aggregation column as only aggregated rows are shown when pivoting.

Pivoting is then applied to the Sport column values which generates a Pivot Result Column showing the total number of Gold medals won by each country in each sport, as seen in this example:

Configuring via the UI

Pivoting is often controlled by end users rather than configured by developers. The grid provides some UI options for users to control these settings.

Using the Side Bar

The Side Bar is the most common control for pivoting as it allows users to toggle pivot mode (equivalent to setting the grid option pivotMode), as well as setting the Row Grouped, Aggregated and pivoted columns via right click context menus or drag and drop.

In the example above, the Sport column is configured with enablePivot: true. This enables users to pivot by the column using UI controls, for example when right clicking the column in the side bar, the option to add Sport to labels becomes available.

const [columnDefs, setColumnDefs] = useState([
    // ...other column definitions
    { field: 'sport', enablePivot: true },
]);
const sideBar = useMemo(() => { 
	return 'columns';
}, []);
const pivotMode = true;

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

Refer to the Column Tool Panel documentation for more information on configuring the Side Bar.

Enabling the Pivot Panel

The pivot panel is an alternative UI control for allowing users to control pivot columns. It is a panel attached to the top of the grid similar to the Row Group Panel allowing users to reorder, remove, or add pivot columns via drag and drop.

The example below demonstrates the pivot panel alongside a Column Tool Panel which has been configured to increase the available space in the Side Bar by hiding the pivoting section.

This uses the following configuration to only show the pivot panel while pivoting is active:

const [columnDefs, setColumnDefs] = useState([
    // ...other column definitions
    { field: 'sport', pivot: true, enablePivot: true },
    { field: 'year', pivot: true, enablePivot: true },
]);
const pivotMode = true;
const pivotPanelShow = 'onlyWhenPivoting';

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

API Reference

Pivoting can be controlled using the following grid API methods:

Next Up

Continue to the next section to learn about how to customise Pivot Result Columns.