I am using @tanstack/react-virtual (useVirtualizer) to optimize rendering for a large dataset. My data consists of reports for 200 employees over 365 days, displayed in a CSS Grid.

Requirements: Sticky Header: The top row contains headings (not part of the employee data) and should remain fixed when scrolling vertically.

Sticky Sidebar: The first column contains employee names and should remain fixed when scrolling horizontally. This sidebar is wider than the other columns.

Performance Optimization: Since rendering such a large dataset is costly, I want to implement virtualization while maintaining the sticky header and sidebar.

Issues Encountered: How should I structure my layout to efficiently use @tanstack/react-virtual while keeping the header and sidebar sticky?

Should I use multiple virtualizers (one for rows, one for columns)?

What is the best approach to sync scrolling between the main data grid and the sticky elements?

What would be the best way to approach this? Any guidance or code examples would be greatly appreciated!

here is the image example i currently have using css grid