React Data Grid Row virtualization

Render thousands of rows without freezing the browser by using row virtualization.

In this article

• Overview
• Configuring row virtualization
• Related articles
  • Related guides
  • Related API reference

Overview

Virtualization allows Handsontable to process hundreds of thousands of records without causing the browser to hang. This technique draws only the visible part of the grid, displaying the minimum items physically rendered in the DOM. The elements outside the viewport are rendered when you scroll across the grid. Depending on your configuration, there might be a small offset of columns or rows rendered outside the viewport to make the scrolling performance smoother.

This feature is enabled by default and can be turned off by setting the renderAllRows option to true.

Configuring row virtualization

You can experiment with the viewportRowsRenderingOffset configuration option, which determines the number of rows displayed outside the visible viewport. If the number passed to that option is greater than the total columns in your data set, then the virtualization will be practically turned off.

To make the grid scrollable, set the constant width and height to the same as the container holding Handsontable and set the overflow property to hidden in the container's stylesheet. If the table contains enough rows or columns, it will be scrollable.

The scrolling performance depends mainly on four factors:

• Number of cells - number of rows multiplied by the number of columns
• Amount and complexity of custom renderers in cells
• Number of options enabled in the configuration
• Performance of your setup - physical machine and a browser

The example below presents a data grid displaying 1 million cells (1000 rows x 1000 columns):

import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); // generate an array of arrays with dummy data const data = new Array(1000) // number of rows .fill() .map((_, row) => new Array(1000) // number of columns .fill() .map((_, column) => `${row}, ${column}`) ); export const ExampleComponent = () => { return ( <HotTable data={data} colWidths={100} width="100%" height={320} rowHeaders={true} colHeaders={true} licenseKey="non-commercial-and-evaluation" /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.0/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@13.0/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script> <div id="example1" class="hot "></div>

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

// register Handsontable's modules
registerAllModules();

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

export const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      colWidths={100}
      width="100%"
      height={320}
      rowHeaders={true}
      colHeaders={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

Related articles

Related guides

• Column virtualization
• Performance

Related API reference

• Configuration options:
  • renderAllRows
  • viewportRowsRenderingOffset