Tutorial: Scrolling

Scrolling


Edit this page

To make the grid scrollable, set constant width and height to the container holding Handsontable and set the overflow property to hidden in the container's stylesheet. Then, if the table contains enough rows or columns, you can scroll through it.

Note, that Handsontable renders only the visible part of the table plus a fixed amount of rows and columns. You can experiment with the viewportColumnRenderingOffset and viewportRowRenderingOffset config options, which define this behavior, to improve the performance of your app.

The overall scrolling performance depends mainly on these three factors:

  • the amount of cells,
  • the number of features in use,
  • the end-user's machine and browser performance.

This demo below shows a table of 1 million cells (1000x1000). To turn off the virtual rendering and compare the performance just set renderAllRows: true.