<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
- which are simple objects with the following props:
initialValue - the initial value to be used for the summary computation - generally a number/string/etc
reducer(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 computation
complete(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
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
on the population column, that would look like this:
reducer: (acc, population) => acc + population
However, if we want to compute the average city population, the summary reducer would also need a
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
function is the actual value of the corresponding column property for a given dataSource item.
can also be defined as a prop directly on the grid - the resulting summary will be available in custom
functions defined for columns, when the group rows are being rendered. The computed summary will be available in the
object inside the
The column group summary will be displayed by default if you use
. If you don't use
, then you need a custom renderer for the group title - see the example below - or you can use
documented in the next section below.
is used, the group summary row is not displayed.
For each group row, the
function (and also the column custom
function, if you want to define one) gives you access to the group summaries via the row data object
object - which will have properties for each column that defines a
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
, 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
functions defined for columns, when the group row is being rendered, you have access to the group summaries via the
object, which has a key for each of the columns that define a
is available in the render function in case you have defined
at grid-level - see the example below.