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.

Overview

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 rowHeights option 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 manualRowResize option to an array, to configure initial row heights and let your users adjust the row heights manually.
  • Enable the AutoRowSize plugin, 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 manualRowResize to 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 rowHeaders to true.

        You can adjust the size of one or multiple rows simultaneously, even if the selected rows are not placed next to each other.