I'm currently working on a React application where I want to create a huge table-like structure with multiple columns that are fixed and a single (or multiple) columns that can be scrolled synchronously to display many different values.
Here is a picture of what the table should look like:
In this case, the columns "Name", "Type" and "Group" should only be able to scroll up and down, while the column(s) in the middle should also be able to scroll from left to right simultaneously, using the scrollbars at the right and bottom.
And due to the size of the data I want to display with this structure, I also want the rows and columns to be virtualized. For example by using "@tanstack/react-virtual".
I've tried using a single scrollable column in each row and updating all of them with events at the same time, but this results in a very jittery movement of the columns.
Does anyone have any ideas on how to achieve this?
Thanks, Ypselon.