Row Height

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

Changing the row height is only supported in the Client-side row model. You cannot use variable row height when using virtual paging, viewport or Server-side row models. This is because these row models need to work out the position of rows that are not loaded and hence need 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:

gridOptions.rowHeight = 50;

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

getRowHeight Callback

To change the row height so that each row can have a different height, implement the getRowHeight() callback. For example, to set the height to 50px for all non-pinned rows and 25px for pinned rows, do the following:

gridOptions.getRowHeight = function(params) { if (params.node.floating) { return 25; } else { return 50; } }

The params object passed to the callback has the following values:

The example below hows dynamic row height, specifying a different row height for each row. It uses the getRowHeight() callback to achieve this.

Row Height More Complex Example

Below shows a more complex example, where the row height is changed based on contents of the 'Latin Text' column. The column definition has CSS style so that the cell does not have its contents clipped. The algorithm used to work out how tall the row should be is far from perfect, however it demonstrates that you can change your row height based on the contents of the cell.

Auto Row Height

It is possible to set the row height based on the contents of the cells. To do this, set autoHeight=true on each column where height should be calculated from. For example, if one column is showing description text over multiple lines, then you may choose to select only that column to determine the line height.

If multiple columns are marked with autoHeight=true then the the height of the largest column is used.

The height is calculated once when the data is first given to the grid. If the data changes, or the width of a column changes, then you may require the grid to calculate the height again by calling api.resetRowHeights().

The example below shows auto height in actions. The following can be noted:

  • Columns Auto A, Auto B and Auto C have autoHeight=true, so the height of each row is such that it fits all contents form these three columns.
  • All columns with auto-size have CSS white-space: normal to wrap the text.
  • When a column is resized, the grid re-calculated the row heights after the resize is finished.

Auto height works by the grid creating an off-screen temporary row with all the auto height columns rendered into it. The grid then measures the height of the temporary row. Because DOM interaction is required for each row this can be an intensive process. For this reason be careful of the following:

  • Only apply auto height to columns where it makes sense. For example if you have many columns that do not require a variable height, then do not set them to auto-height.
  • Do not recalculate auto height to often. In the example above the code checks the columns resize event event.finished so that the height is only calculated when the resize is complete, rather than re-calculating the height continually during the column resizing.
  • For large data grids (eg 10,000+ rows) the time taken to calculate the heights may take to long and you may decide not to use the feature in these circumstances. The row limit depends on your browser choice, computer speed and data so you will need to decide for yourself how much data is to much for this feature.

Changing Row Height

Setting the row height is done once for each row. Once set, the grid will not ask you for the row height again. You can change the row height after it is initially set using a combination of api.resetRowHeights(), rowNode.setRowHeight() and api.onRowHeightChanged().

api.resetRowHeights()

Call this API to have the grid clear all the row heights and work them all out again from scratch - if you provide a getRowHeight() callback, it will be called again for each row. The grid will then resize and reposition all rows again. This is the shotgun approach.

rowNode.setRowHeight(height) and api.onRowHeightChanged()

You can call rowNode.setRowHeight(height) directly on the rowNode to set its height. The grid will resize the row but will NOT reposition the rows (ie if you make a row shorter, a space will appear between it and the next row, the next rows will not be moved up). When you have set the row height (potentially on many rows) you need to call api.onRowHeightChanged() to tell the grid to reposition the rows. It is intended that you can call rowNode.setRowHeight(height) many times and then call api.onRowHeightChanged() once at the end.

When calling rowNode.setRowHeight(height), you can either pass in a new height or null or undefined. If you pass a height, that height will be used for the row. If you pass in null or undefined, the grid will then calculate the row height in the usual way, either use the provided rowHeight property or getRowHeight() callback.

Example Changing Row Height

The example below changes the row height in the different ways described above.

  • Top Level Groups: The row height for the groups is changed by calling api.resetRowHeights(). This gets the grid to call api.getRowHeight() again for each row.
  • Swimming Leaf Rows: Same technique is used here as above above. You will need to expand a group with swimming (eg America) and the grid works out all row heights again.
  • Zimbabwe Leaf Rows: The row height is set directly on the rowNode. Then the grid is told to reposition all rows again via calling api.onRowHeightChanged().

Note that this example uses ag-Grid Enterprise as it uses grouping. Setting the row height is an ag-Grid free feature, we just demonstrate it against groups and normal rows below.

Height for Pinned Rows

Row height for pinned rows works exactly as per normal rows with one difference - it is not possible to dynamically change the height once set. However this is easily got around by just setting the pinned row data again which resets the row heights. Setting the data again is not a problem for pinned rows as it doesn't impact scroll position, filtering, sorting or group open / closed positions as it would with normal rows if the data was reset.