React Data Grid Column virtualization
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 turned on by default and can be turned off only for rows, not columns.
Configuring 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.
Proceed with caution, as it will affect the overall performance of the grid.
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).
Related API reference
- Configuration options: