React Data GridSSRM Row Height

Enterprise

Learn how to set Row Height when using the Server-Side Row Model.

Dynamic Row Height Copy Link

To enable Dynamic Row Height when using the Server-Side Row Model you need to provide an implementation for the getRowHeight Grid Options property. This is demonstrated in the example below:

getRowHeightCopy Link
Function
Callback version of property rowHeight to set height for each row individually. Function should return a positive number of pixels, or return null/undefined to use the default row height.

Ensure maxBlocksInCache is not set when using dynamic row height.

Auto Row Height Copy Link

To have the grid calculate the row height based on the cell contents, set autoHeight=true on columns that require variable height. The grid will calculate the height once when the data is loaded into the grid.

In the example below, Column A & B have autoHeight=true and wrapText=true. See Row Height for details on these properties.

Ensure maxBlocksInCache is not set when using auto row height.

Setting and restoring Row Height Copy Link

To dynamically set or restore row heights in the Server-Side Row Model, use setRowHeight() to apply custom heights to specific rows and resetRowHeights() to revert all rows to the values calculated by the getRowHeight() in Grid Options. See Changing Row Height for more.

The following example demonstrates how to set and reset row heights:

Note the following:

  • getRowHeight() defines a function to dynamically calculate row heights based on data or conditions.
  • resetRowHeights() resets all rows to their original heights, as determined by getRowHeight or default values.
  • onRowClicked() and other table interactions can be set up to trigger height adjustments via setRowHeight() or resets.

Next Up Copy Link

Continue to the next section to learn how to work with Tree Data.