The <ReactDataGrid /> can display summaries for row groups - the summaries can be computed for each specific column or can be at group-level - more details in the examples and paragraphs below.
We introduce the concept of
groupSummaryReducer - which are simple objects with the following props:
initialValue - the initial value to be used for the summary computation - generally a number/string/etcreducer(accumulator, currentValue) - the reducer function - basically computes the summary from the accumulated value (at first call, this will equal the initialValue) and the current value for the item at which we are doing the computationcomplete(accumulatedValue, array) - can be used for doing one last computation at the end of the iteration - for example useful for computing the average of a value. The first argument is the accumulated value, while the second is the array on which the summary was computed against
Here's an example - suppose we have a list of world cities, grouped by country - each city will have a
population property, and we want to sum up the total population of a country - so we need to add the population of each city in a country. We would use a
groupSummaryReducer on the population column, that would look like this:
{
name: 'population',
groupSummaryReducer: {
initialValue: 0,
reducer: (acc, population) => acc + population
}
}
However, if we want to compute the average city population, the summary reducer would also need a
complete function.
{
name: 'population',
groupSummaryReducer: {
initialValue: 0,
reducer: (acc, population) => acc + population,
complete: (value, arr) => arr.length ? value/arr.length : 0
}
}
When used for a specific
column the second argument to the
reduce function is the actual value of the corresponding column property for a given dataSource item.
However,
groupSummaryReducer can also be defined as a prop directly on the grid - the resulting summary will be available in custom
render functions defined for columns, when the group rows are being rendered. The computed summary will be available in the
data.groupSummary object inside the
column.render function.
The column group summary will be displayed by default if you use
groupColumn. If you don't use
groupColumn, then you need a custom renderer for the group title - see the example below - or you can use
showGroupSummaryRow documented in the next section below.
When
groupColumn is used, the group summary row is not displayed.
For each group row, the
renderGroupTitle function (and also the column custom
render function, if you want to define one) gives you access to the group summaries via the row data object
groupColumnSummary object - which will have properties for each column that defines a
groupSummaryReducer.
For customizing the values displayed inside the group column, you cannot simply specify a custom render function - since that would not render the expand/collapse group arrow (of course you can do this, but most of the time you don't need to).
Instead, you can specify
groupColumn.renderGroupValue, which will be called for the group column cells - but only for those that are inside group rows!
As the example above shows, in custom
render functions defined for columns, when the group row is being rendered, you have access to the group summaries via the
data.groupColumnSummary object, which has a key for each of the columns that define a
column.groupSummaryReducer.
Also
data.groupSummary is available in the render function in case you have defined
groupSummaryReducer at grid-level - see the example below.