I feel like I've googled the heck out of this, can't seem to find anything useful. Situation is I have a react app using Ag-grid. The grid has multiple pinned top and bottom rows and regular rows between them.

In my use case there can be up to 100 columns in the grid. It seems I can only horizontally scroll the grid while hovering over regular rows. Here is a plunker example that can show the behavior. https://plnkr.co/edit/D7LwlwOljzy0hUoQ

(Example is straight from ag-grid docs)

The reason for this by the way is that, when a certain variable is toggled I have to remove the pinned bottom rows and rowData so only pinned top rows are left. At this point I would also like to reduce the grid height so it only takes the space it needs. But after doing this, I can no longer scroll the grid horizontally.

I have thought about moving the pinnedTopRowData to rowData and style them to look like pinned rows. Trying to avoid this because the data flow in the app is quite complex.

Hopefully someone can help!