React Data Grid Column virtualization

Render hundreds of columns without freezing the browser, using column virtualization.

In this article

• Overview
• Configure the column virtualization
• Known limitations
• Related articles
  • Related guides
  • Related API reference

Overview

To process a large number of columns in a browser Handsontable utilizes the virtualization process to display only the visible part of the grid with a small offset for a better scrolling experience.

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

Configure the column virtualization

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

To make the grid scrollable, set the constant width and height to same as the container holding Handsontable and height 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 browser

The demo below presents a data grid displaying one 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} autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation" />; }; ReactDOM.render(<ExampleComponent />, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@14.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.1/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@14.1/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/14.1/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} autoWrapRow={true}
    autoWrapCol={true}
    licenseKey="non-commercial-and-evaluation" />;
};

Known limitations

Using column virtualization has the following side effects:

• The browser's native search will work only for the visible part of the grid.
• Screen readers may announce the wrong total number of columns. Read more in the Accessibility guide.

Related articles

Related guides

• Row virtualization
• Performance

Related API reference

• Configuration options:
  • viewportColumnRenderingOffset