How can I make a virtualized table with sticky table header, footer and columns?

[JandenMa]

I built a data table with sticky header & footer & columns before, but because some cells should be editable, the performance seems so bad when more than 50 rows. Therefore, I tried virtualization.

At the beginning, I referred to React Example: Virtualized Rows to build a virtualized grid, the virtualization and sticky header & footer work well, but the absolute row layout made the sticky columns broken.

Afterward, I referred to React Example: Table
, this time the virtualization and sticky columns work well, but the sticky header & footer will be scrolled to the top even covered while scrolling to the bottom, since the total-sized container. I tried to add a sticky header and footer to the example above, but it seems to be the same issue.

I have no idea right now, how can I make a virtualized table with sticky table header, footer and columns?

If you have any idea or solution, let me know please. Thanks in advance 🙏🏼