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
Set row heights to a number
Set row heights with an array
Set row heights with a function
Adjust row heights manually
Related API reference

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.

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['A1', 'B1', 'C1', 'D1', 'E1'],
        ['A2', 'B2', 'C2', 'D2', 'E2'],
        ['A3', 'B3', 'C3', 'D3', 'E3'],
        ['A4', 'B4', 'C4', 'D4', 'E4'],
      ]}
      height="auto"
      colHeaders={true}
      rowHeaders={true}
      rowHeights={40}
      manualRowResize={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.3/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.3/scripts/fixer.js"></script>

<div id="example1" class="hot "></div>

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.

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['A1', 'B1', 'C1', 'D1', 'E1'],
        ['A2', 'B2', 'C2', 'D2', 'E2'],
        ['A3', 'B3', 'C3', 'D3', 'E3'],
        ['A4', 'B4', 'C4', 'D4', 'E4'],
      ]}
      width="100%"
      height="auto"
      colHeaders={true}
      rowHeaders={true}
      rowHeights={[40, 40, 40, 40]}
      manualRowResize={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.3/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.3/scripts/fixer.js"></script>

<div id="example2" class="hot "></div>

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.

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['A1', 'B1', 'C1', 'D1', 'E1'],
        ['A2', 'B2', 'C2', 'D2', 'E2'],
        ['A3', 'B3', 'C3', 'D3', 'E3'],
      ]}
      width="100%"
      height="auto"
      colHeaders={true}
      rowHeaders={true}
      rowHeights={function(index) {
        return (index + 1) * 20;
      }}
      manualRowResize={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.3/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.3/scripts/fixer.js"></script>

<div id="example3" class="hot "></div>

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.

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['A1', 'B1', 'C1', 'D1', 'E1'],
        ['A2', 'B2', 'C2', 'D2', 'E2'],
        ['A3', 'B3', 'C3', 'D3', 'E3'],
        ['A4', 'B4', 'C4', 'D4', 'E4'],
        ['A5', 'B5', 'C5', 'D5', 'E5'],
      ]}
      height="auto"
      colHeaders={true}
      rowHeaders={true}
      rowHeights={40}
      manualRowResize={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example4'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.3/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.3/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.3/scripts/fixer.js"></script>

<div id="example4" class="hot "></div>

Configuration options:
Core methods:
- getRowHeight()
Hooks:
Plugins:
- AutoRowSize
- ManualRowResize

← Row freezing Row virtualization →