DataGrid - PivotGrid


Another enterprise-grade feature of the <ReactDataGrid /> is the pivoting functionality, which allows you to take values and turn them into columns. In the simple example below, we demo how you can pivot on sport to make columns for footbal and swimming.
Pivoting is controlled via the pivot array prop, which determines if the pivot mode is enabled, and which column values should be used for pivoting.
Just like groupBy, the pivot is an array of column names (it can also be an array of objects, where each should have a name property - the name or the id of the columns to be used for pivoting).
To enable pivot mode, specify pivot=[] or specify the list of columns to pivot by (eg: pivot=["sport","category"]).
In order for a column to be displayed when pivot is enabled, the column needs to specify a column.groupSummaryReducer prop, so it can aggregate values, in order to display them in the pivoted cells.

Pivoting, group summaries and pivot summary columns

When using pivot, you can also use groupSummaryReducer which is very useful to compute a summary for all records in a pivoted group - the reducer function specified by groupSummaryReducer is basically called for every item in the pivoted group, while an optional complete function is called at the end of the summary, thus giving you the flexibility to compute things like average values (where you actually need access to the full array of the grouped items).
In the example below, we use a grid-level groupSummaryReducer to compute how many items there are in a pivoted group, and a grandTotal value to be displayed in the last summary column - the pivotGrandSummaryColumn (will only be displayed when showPivotSummaryColumns=true) .
In addition to grid-level groupSummaryReducer, you cal also use a column-level column.groupSummaryReducer. In the example, we use it to compute a total for the Q1, Q2, Q3 and Q4 columns.
Although we don't have an explicit property in the dataset for quarter info, it's a derived information which can be computed based on the date property.
As a result, by specifying a column.groupSummaryReducer prop, we make quarter columns participate in the pivoting grid with useful information.
In a pivoted grid, the default render value for a column with a group summary reducer is the value computed by column.groupSummaryReducer. In addition, like shown in the example below, it can be formatted via the column render function.
In order to be able to display pivot summary columns, the corresponding pivot field needs to be an object with a name and a summaryReducer - the summaryReducerfunction will compute the value to be displayed in the column (and follows the same patterns as the groupSummaryReducer, which you are already used to).
Beyond that, you can also have a pivot.summaryColumn specified for the pivot item, which should be a column configuration and determines how the corresponding pivot summary column will behave.
In order to show pivot summary columns, theshowPivotSummaryColumns prop needs to be set to true.
If you don't need a summary column for a pivot field, you can simply specify the pivot as a string or an object with {name: <pivot_field>} (without a groupSummaryReducer)
The example above also uses footer in order to display the sum of all values in the corresponding column.
Since some of the columns (like the pivot summary columns) are generated, we specify footerRow.render as a function, which has access to the currently rendered column. Based on properties of the column, we know if it's the group column (column.groupColumn === true), the pivot grand summary column (column.pivotGrandSummaryColumn === true), another pivot summary column (column.pivotSummaryPath is an array) or a normal pivoted column, where column.pivotColumnPath is an array of the pivot path for the corresponding column (eg: ['2013','q2']). In this case, we use the summary passed into the footer render function, in order to display the correct value for the footer cell.