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.
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:
Changing the property will set a new row height for all rows, including pinned rows top and bottom.
To change the row height so that each row can have a different height,
getRowHeight() callback. For example, to set the height
to 50px for all non-pinned rows and 25px for pinned rows, do the following:
The params object passed to the callback has the following values:
- node: The rowNode in question.
- data: The data for the row.
- api: The grid API.
- context: The grid context.
The example below shows dynamic row height, specifying a different row height for each row.
It uses the
getRowHeight() callback to achieve this.
If you want text to wrap inside cells rather than truncating, add the flag
the Column Definition.
The example below has
wrapText=true set on the Latin Text column.
Behind the scenes, this results in the CSS property
being applied to the cell, which causes the text to wrap.
wrapTextis intended to be used when you are not using a custom Cell Renderer.
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.
autoHeight is typically used with
wrapText is not set, and no custom
Cell Renderer Component
is used, then the cell will display all it's contents on one line. This is probably not
the intention if using Auto Row Height.
If multiple columns are marked with
autoHeight=true then 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
The example below shows auto height in action. The following can be noted:
All columns have
autoHeight=true, so the height of each row is such that it fits all contents from all columns.
The example listens for the grid event
onColumnResized. When a column is resized, the grid re-calculates the row heights after the resize is finished.
The example listens for the grid event
onColumnVisible. When a column is shown or hidden, the grid re-calculates the row heights after the resize is finished.
Lazy Height Calculation
Auto height works by the grid creating an off-screen (not visible to the user) 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 the grid only calculates the height of the row when it is needed - e.g. rows not yet visible due to vertical scrolling do not have their heights calculated, similarly child rows of groups where the group is not open do not have their heights calculated until the group is opened and the child rows are visible.
Because the heights of rows are changing as you scroll rows into view, the vertical scrollbar and the row positions change as the grid is scrolling vertically. This leads to the following behaviours:
- The vertical scroll range (how much you can scroll over) will change dynamically to fit the rows. If scrolling by dragging the scroll thumb with the mouse, the scroll thumb will not follow the mouse. It will either lag behind or jump ahead, depending on whether the row height calculations are increasing or decreasing the vertical scroll range.
- If scrolling up and showing rows for the first time (e.g. the user jumps to the bottom scroll position and then starts slowly scrolling up), then the row positions will jump as the rows coming into view at the top will get resized and the new height will impact the position of all rows beneath it. For example if the row gets resized to be 10 pixels taller, rows below it will get pushed down by 10 rows. If scrolling down this isn't observed as rows below are not in view.
The above are results of Lazy Height Calculation. It is not possible to avoid these effects.
Auto Height Performance Consideration
Because auto-height is a DOM intensive operation, consideration should be given for when and how to use it. 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.
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
Call this API to have the grid clear all the row
heights and work them all out again from scratch - if you provide a
callback, it will be called again for each row. The grid will then resize and
reposition all rows again. This is the shotgun approach.
You can call
on the rowNode to set its height. The grid will resize the row but will NOT
reposition the rows (i.e. if you make a row shorter, a space will appear between
it and the next row - the next row will not be moved up). When you have set the
row height (potentially on many rows) you need to call
to tell the grid to reposition the rows. It is intended that you can call
rowNode.setRowHeight(height) many times and then call
once at the end.
rowNode.setRowHeight(height), you can either pass in a new height
undefined. If you pass a height, that height will be used for the row.
If you pass in
undefined, the grid will then calculate the row height in the
usual way, either using the provided
rowHeight property or
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
gridOptions.getRowHeight()again for each row.
- Swimming Leaf Rows: Same technique is used here as above. You will need to expand a group with swimming (e.g. United States) and the grid works out all row heights again.
- Russia Leaf Rows: The row height is set directly on the
rowNode, and then the grid is told to reposition all rows again by calling
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 for normal rows with one difference: it is not possible to dynamically change the height once set. However this is easily solved 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.