如何用@tanstack/react-virtual实现带粘性表头与侧边栏的虚拟化？

背景 #

我正在使用@tanstack/react-virtual的useVirtualizer优化大型数据集渲染，数据为200名员工全年365天的报表，当前采用CSS Grid展示。

需求 #

• 粘性表头：顶部的表头行（不属于员工数据行）需在垂直滚动时保持固定
• 粘性侧边栏：首列的员工姓名需在水平滚动时保持固定，且该列宽度大于其他列
• 性能优化：在保留粘性元素的同时实现虚拟化，降低大数据集的渲染成本

遇到的问题 #

• 如何设计布局，既能高效利用@tanstack/react-virtual，又能保留粘性表头和侧边栏？
• 是否需要使用多个虚拟化器（一个处理行，一个处理列）？
• 如何同步主数据网格与粘性元素的滚动？

当前实现参考 #

当前CSS Grid实现的报表效果如下：

寻求最佳实现方案、指导或代码示例。

内容的提问来源于stack exchange，提问作者Muaz Kassm