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:
Returns whether pivot mode is currently active. |
Get the columns which the grid is pivoting on. |
Set the columns for the grid to pivot on. |
Add columns for the grid to pivot on. |
Stops the grid from pivoting on the provided columns. |
Returns the pivot result column for the given pivotKeys and valueColId . |
Set explicit pivot column definitions yourself. Used for advanced use cases only. |
Returns the grid's pivot result columns. |
Next Up
Continue to the next section to learn about how to customise Pivot Result Columns.