Goal:
Vertically Scroll multiple tables (AG-Grid) with a "global" scroll-bar on the main window.
Problem:
I have 4 child elements (AG-Grid Tables) within a Window, these children can be up to 3 times the with of the main Window. Now the children would need to be scrolled separately and a scroll bar would be displayed in the rather slim child elements.
The goal is to display a horizontal scrollbar on the main window itself (if the children need scrolling), and this main scrollbar scrolls one of the child windows (AG-Grid offers the functionality to synchronize the scrolling of one table to another).
All 4 children always have the same width as the width is determined by the columns shown within the AG-Grid tables.
The application is written in React using AG-Grid for displaying/virtualizing these tables. So if someone has a solution specific to AG-Grid this would still be helpful.
Thanks for any input!
Edit for clarity: It is already possible to scroll the grids separately / the second thing working is to give the window the full with and scroll the window itself instead of the grids (This is unfortunately not a solution as the first column of the grid should be pinned to the left side of the screen so rows can still be identified when scrolled to the right)
Edit: Screenshot for clarity
