DataGrid - Locked rows

Locked rows

The <ReactDataGrid /> supports displaying locked rows - which can be used to display custom data at the start or the end of the normal grid rows - via lockedRow.position property.

When using locked rows it is possible to show 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.

You can have rows locked both at the start and at the end of the viewport, via thelockedRow.position property.

You have to use lockedRow.render in order to tell the DataGrid what to render for the cells inside the corresponding locked row.

The lockedRow.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 locked rows, one for each summary type.

Customizing the locked rows

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

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

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

By default, lockedRows will have the height as normal grid rows, since useRowHeightForLockedRows defaults to true,

Setting useRowHeightForLockedRows=falsewill make the lockedRows not limited to the height of grid rows, but they will adjust to the natural height of their content.

The code above shows using lockedRow.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 locked 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.

Footer

Master detail

e: contact@reactdatagrid.io

Top