DataGrid - Footer

Footer

The <ReactDataGrid /> supports showing a grid footer, which can be used to display a summary - using the same reducer strategy being used for group summaries.

See the snippet below for a demo and make sure you read about summary reducers here.

For the footer area, you can have multiple footerRows which allow you to render whathever you decide.

You have to use footerRow.render in order to tell the DataGrid what to render for the cells inside the footer.

The footerRow.render can be an object with keys corresponding to columns, while values can be functions or ReactNode values. Using a function gives you the flexibility to decide what to render at run-time - for example, the first argument will have a summary property which will hold the value computed via the configured summaryReducer.

Using the summary

By using the summary reducer, you have the flexibility of computing all kind of summaries based on the available data.

We introduced the concept of summaryReducer - 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, currentItem) - the reducer function - basically computes the summary from the accumulated value (at first call, this will equal the initialValue) and the current 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

In the snippet below, we display min, max and average values for the population column.

The example above shows the summaries for the population in one cell - see the demo below to display multiple footer rows, one for each summary type.

Customizing the footer

There are multiple ways to customize the footer rows - here are just a few:

Display additional information from the grid computed properties by using footerRow.render function
Use colspan to stretch footer cells across multiple columns
Customize footer cell styling

See the demo below for an example of each of the above.

Footer rows are not limited to the height of grid rows, but they adjust to the natural height of their content.

The code above shows using footerRow.colspan - the value used for the colspan can be an object or a function. In case it's defined as an object, each key should correspond to a column, while the value determines the amount of the colspan. In case it's a function, the first argument has a column property, which you can use to decide how much colspan you want the footer cell to have.

For styling the footer row cells, you can use any of the following:

All of the above are called with the exact same arguments. The first argument is an object containing properties for , columnIndex and summary, while the second argument is the computed grid props.

Row reorder

Locked rows

e: contact@reactdatagrid.io

Top