htmlcssreactjsscrollbarreact-virtualized

How to Combine Header and List into a Single Horizontal Scrollbar in React Virtualized?

I'm struggling to sync the horizontal scrolling between my fixed header and the list in React Virtualized. I have fixed the first and last columns, and I successfully achieved a single scrollbar for the list (rows). However, I can't get the header to scroll in sync with the list while maintaining only one visible horizontal scrollbar.

I've tried different approaches, but the header and list still scroll separately. How can I ensure they scroll together while keeping just one scrollbar?

I've attached a CodeSandbox link https://codesandbox.io/p/sandbox/gifted-sammet-qs5zsf?file=%2Fsrc%2FApp.js%3A22%2C27
https://qs5zsf.csb.app/ for reference. Any guidance would be greatly appreciated!

Solution

  • the code is hard to read and the styles are messy, but I have solved the problem I think,

    I have added

    flexWrap: "wrap"

    and deleted the overflow of the collapsable container

    you can try the solution:

    and I have written

    #### Edit ####

    above each edit I did

    here you are : Result

    and this is the new version that I have made for you : New Version