Framework:Javascript Data GridReact Data GridAngular Data GridVue Data Grid

JavaScript Data Grid: SSRM Row Height

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

Dynamic Row Height

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:

getRowHeight
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.
getRowHeight = (
    params: RowHeightParams<TData>
) => number | undefined | null;

interface RowHeightParams<TData = any> {
  // The data associated with this row from rowData. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The RowNode of the row in question. 
  node: IRowNode<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

Ensure maxBlocksInCache is not set when using dynamic row height.

Auto Row Height

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.

This is different to the Client-Side Row Model where the grid height can be changed. For Server-Side Row Model the row height cannot be changed once it is set.

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.

Next Up

Continue to the next section to learn how to combine Master Detail with the SSRM.