Description
I would like Handsontable to support using an external parent element as its vertical and horizontal scroll container.
Currently, Handsontable manages scrolling through its internal .wtHolder element. This means that when the table overflows, the horizontal and vertical scrollbars are displayed inside the Handsontable container.
For layouts where the entire page or a parent <main> element is intended to be the scroll container, it would be useful to allow Handsontable to delegate scrolling to that parent element.
Example use case
I have a layout like this:
<main id="main">
<div id="grid-container"></div>
</main>
Hi @atharvagajakos92 , welcome to the Handsontable forums!
There are really two scenarios here, and Handsontable currently supports one of them.
1. The whole page/window as the scroll container( supported today)
If you omit both width and height from your config, Handsontable doesn’t create an internal scrollable viewport at all.
For this to work, no ancestor between the grid and the <body> (your <main> included) should have a fixed height with overflow: auto/hidden . Any such ancestor becomes a size constraint instead (see point 3).
There’s also a middle option: height: 'auto' with a fixed width renders all rows at full height (vertical scrolling falls to the page) while horizontal scrolling stays inside the grid.
2. A fixed-height <main> with overflow: auto as the scroll container (not supported currently)
When Handsontable detects a definite-height ancestor, it sizes itself to fit it and manages scrolling in its internal .wtHolder — the parent’s own scrollbar never engages. There’s no configuration option to delegate scroll handling to an arbitrary ancestor element today (preventOverflow is the closest-sounding option, but it does the inverse — it caps the grid to fit the parent). The old workaround of rendering all rows/columns un-virtualized inside a scrollable parent works only for small datasets and has known positioning quirks with editors and menus, so I wouldn’t recommend it.
___
Hope this helps! Please let me know if you have any other questions.