React Data Grid

Row Height

react logo

By default, the grid will display rows with a height of 25px. You can change this for each row individually to give each row a different height.

You cannot use variable row height when using either the Viewport Row Model or Infinite Row Model. This is because this row model needs to work out the position of rows that are not loaded and hence needs to assume the row height is fixed.

rowHeight Property

To change the row height for the whole grid, set the property rowHeight to a positive number. For example, to set the height to 50px, do the following:

const rowHeight = 50;

<AgGridReact rowHeight={rowHeight} />

Changing the property will set a new row height for all rows, including pinned rows top and bottom.

getRowHeight Callback