React Data GridGrid size

Set the width and height of the grid, using either absolute values or values relative to the parent container.

Set your grid's size
What if the size is not set
Autoresizing
Manual resizing
Related articles

Set your grid's size

You need to define the grid's container as a starting point to initialize it. Usually, the div element becomes this container. This container should have defined dimensions as well as the rest of your layout. Handsontable supports relative units such as %, rem, em, vh, vw, and px.

Define the size in your CSS

Both width and height could be defined as inline styles or as a CSS class property. In this case, it's important to define what should be an overflow parent properly. Handsontable looks for the closest element with overflow: auto or overflow: hidden to use it as a scrollable container. If no such element is found, a window will be used.

TIP

Handsontable doesn't observe CSS changes for containers out of the box. If you'd like to observe it, you can define the dimensions in the configuration object or create your own observer.

Pass the size in the configuration

You can pass width and height values to Handsontable as numbers or possible CSS values for the "width"/"height" properties:

  <HotTable height={100} width={100} />

  <HotTable height="75%" width="75%" />

  <HotTable height="100px" width="100px" />

These dimensions will be set as inline styles in a container element, and overflow: hidden will be added automatically.

If container is a block element, then its parent has to have defined height. By default block element is 0px height, so 100% from 0px is still 0px.

Changes called in updateSettings() will re-render the grid with the new properties.

Troubleshooting with 100% height

When the height option is set to 100%, there are three ways to define the container’s height. Assuming you're creating an Handsontable instance that has 100% height and container is element with id #example.

const container = document.querySelector('#example');

const hot = new Handsontable(container, {
  height: '100%',
  // ...rest of config 
}

Set a fixed height (in pixels) directly on the example element where Handsontable is mounted

<div class="page-wrapper">
  <!-- Other HTML element -->
  <div id="example" style="height: 500px">
    <div class="ht-root-wrapper ht-theme-main">
      <div class="ht-grid">
        <div class="ht-wrapper">
          <!-- Table content -->
        </div>
      </div>
      <!-- Table components -->
    </div>
  </div>
</div>

Set a fixed height on the parent element, and then give the example itself a height of 100%

<div class="page-wrapper" style="height: 500px">
  <!-- Other HTML element -->
  <div id="example" style="height: 100%">
    <div class="ht-root-wrapper ht-theme-main">
      <div class="ht-grid">
        <div class="ht-wrapper">
          <!-- Table content -->
        </div>
      </div>
      <!-- Table components -->
    </div>
  </div>
</div>

Use flexbox on the wrapper element to make the example fill the available space

<div class="page-wrapper" style="display: flex; height: 500px">
  <!-- Other HTML element -->
  <div id="example" style="flex: 1">
    <div class="ht-root-wrapper ht-theme-main">
      <div class="ht-grid">
        <div class="ht-wrapper">
          <!-- Table content -->
        </div>
      </div>
      <!-- Table components -->
    </div>
  </div>
</div>

When using Flexbox, the container automatically expands to fill the available space in the flex container. This is particularly useful when you want the grid to take up all the available space within its parent.

What if the size is not set

If you don't define any dimensions, Handsontable generates as many rows and columns as needed to fill the available space.

If your grid's contents don't fit in the viewport, the browser's native scrollbars are used for scrolling. For this to work properly, Handsontable's layout direction (e.g., layoutDirection: 'rtl') must be the same as your HTML document's layout direction (<html dir='rtl'>). Otherwise, horizontal scrolling doesn't work.

Autoresizing

Handsontable observes window resizing. If the window's dimensions have changed, then we check if Handsontable should resize itself too. Due to the performance issue, we use the debounce method to respond on window resize.

You can easily overwrite this behaviour by returning false in the beforeRefreshDimensions hook.

  <HotTable beforeRefreshDimensions={() => false} />

Manual resizing

The Handsontable instance exposes the refreshDimensions() method, which helps you to resize grid elements properly.

TIP

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference to the HotTable component, and reading its hotInstance property.

For more information, see the Instance methods page.

hot.refreshDimensions();

You can listen for two hooks, beforeRefreshDimensions and afterRefreshDimensions.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^3.0.0",
    "handsontable": "16.2",
    "@handsontable/react-wrapper": "16.2"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root" class=""></div>
  </body>
</html>

#exampleParent {
  height: 157px;
}

#exampleParent > div{
  height: 100%;
}

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { useRef, useState, useEffect } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

// generate an array of arrays with dummy data
const data = new Array(100) // number of rows
  .fill(null)
  .map((_, row) =>
    new Array(50) // number of columns
      .fill(null)
      .map((_, column) => `${row}, ${column}`)
  );

const ExampleComponent = () => {
  const [isContainerExpanded, setIsContainerExpanded] = useState(false);
  const hotRef = useRef(null);
  const triggerBtnClickCallback = () => {
    setIsContainerExpanded(!isContainerExpanded);
  };

  useEffect(() => {
    // simulate layout change outside of React lifecycle
    // @ts-ignore
    document.getElementById('exampleParent').style.height = isContainerExpanded ? '410px' : '157px';
    hotRef.current?.hotInstance?.refreshDimensions();
  });

  return (
    <>
      <div className="controls">
        <button id="triggerBtn" className="button button--primary" onClick={() => triggerBtnClickCallback()}>
          {isContainerExpanded ? 'Collapse container' : 'Expand container'}
        </button>
      </div>
      <div id="exampleParent" className="exampleParent">
        <HotTable
          themeName="ht-theme-main"
          data={data}
          rowHeaders={true}
          colHeaders={true}
          width="100%"
          height="100%"
          colWidths={100}
          autoWrapRow={true}
          autoWrapCol={true}
          licenseKey="non-commercial-and-evaluation"
          ref={hotRef}
        />
      </div>
    </>
  );
};

export default ExampleComponent;

import { useRef, useState, useEffect } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

// generate an array of arrays with dummy data
const data = new Array(100) // number of rows
  .fill(null)
  .map((_, row) =>
    new Array(50) // number of columns
      .fill(null)
      .map((_, column) => `${row}, ${column}`)
  );

const ExampleComponent = () => {
  const [isContainerExpanded, setIsContainerExpanded] = useState(false);
  const hotRef = useRef(null);
  const triggerBtnClickCallback = () => {
    setIsContainerExpanded(!isContainerExpanded);
  };

  useEffect(() => {
    // simulate layout change outside of React lifecycle
    // @ts-ignore
    document.getElementById('exampleParent').style.height = isContainerExpanded ? '410px' : '157px';
    hotRef.current?.hotInstance?.refreshDimensions();
  });

  return (
    <>
      <div className="controls">
        <button id="triggerBtn" className="button button--primary" onClick={() => triggerBtnClickCallback()}>
          {isContainerExpanded ? 'Collapse container' : 'Expand container'}
        </button>
      </div>
      <div id="exampleParent" className="exampleParent">
        <HotTable
          themeName="ht-theme-main"
          data={data}
          rowHeaders={true}
          colHeaders={true}
          width="100%"
          height="100%"
          colWidths={100}
          autoWrapRow={true}
          autoWrapCol={true}
          licenseKey="non-commercial-and-evaluation"
          ref={hotRef}
        />
      </div>
    </>
  );
};



const container = document.getElementById("example");
const root = ReactDOM.createRoot(container);
container._reactRoot = root;
root.render(<ExampleComponent />);

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

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

#exampleParent {
  height: 157px;
}

#exampleParent > div{
  height: 100%;
}

Related API reference

Configuration options:
Core methods:
- refreshDimensions()
- updateSettings()
Hooks: