React Data Grid Row heights
Configure row heights, using a number, an array or a function. Let your users manually change row heights using Handsontable's interface.
The default (and minimum) row height is 23 px (22 px + 1 px of the row's bottom border). Unless configured otherwise, Handsontable assumes that your cell contents fit in this default row height.
If your cell contents require heights greater than the default 23 px (because you use multiline text, or custom renderers, or custom styles), use one of the following configurations to avoid potential layout problems:
- Configure your row heights in advance: set the
rowHeightsoption to a number, or an array, or a function. This requires you to know the heights beforehand, but results in the best runtime performance.
- Set the
manualRowResizeoption to an array, to configure initial row heights and let your users adjust the row heights manually.
- Enable the
AutoRowSizeplugin, by setting
autoRowSize: true. This tells Handsontable to measure the actual row heights in the DOM. It impacts runtime performance but is accurate.
Set row heights to a number
We set the same height of
40px for all rows across the entire grid in this example.
Set row heights with an array
In this example, the height is only set for the first rows. Each additional row would be automatically adjusted to the content.
Set row heights with a function
The row height can be set using a function. In this example, the size of all rows is set using a function that takes a row
index (1, 2 ...) and multiplies it by
20px for each consecutive row.
Adjust row heights manually
Set the option
true to allow users to manually resize the row height by dragging the handle between the adjacent row headers. Don't forget to enable row headers by setting
You can adjust the size of one or multiple rows simultaneously, even if the selected rows are not placed next to each other.
Related API reference
- Configuration options:
- Core methods: