<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.
lockedRow.renderin order to tell the
DataGridwhat to render for the cells inside the corresponding locked row.
lockedRow.rendercan be an object with keys corresponding to columns, while values can be functions or
ReactNodevalues. Using a function gives you the flexibility to decide what to render at run-time - for example, the first argument will have a
summaryproperty which will hold the value computed via the configured
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
averagevalues for the population column.
locked row cell styling
lockedRowswill have the height as normal grid rows, since
useRowHeightForLockedRows=falsewill make the
lockedRowsnot limited to the height of grid rows, but they will adjust to the natural height of their content.
lockedRow.colspan- the value used for the
colspancan 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
columnproperty, which you can use to decide how much colspan you want the footer cell to have.
summary, while the second argument is the computed grid props.