React Data Grid三联动固定表格的粘性表头实现求助

核心方向：统一滚动容器+共享表头+状态同步 #

针对三个独立React Data Grid的联动与表头粘性需求，核心是打破表格独立性，通过统一滚动容器、抽离共享表头和状态同步来实现效果。

1. 重构布局：分离表头与表格主体 #

• 抽离三个表格的表头，合并到独立的顶部容器sticky-header中，给容器设置CSS：

  .sticky-header {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
    display: flex;
  }
  

• 三个表格仅保留主体内容，放在表头下方的统一滚动容器内，滚动容器设置：

  .scroll-container {
    overflow-y: auto;
    height: calc(100vh - 80px); /* 按需调整高度 */
  }
  

2. 垂直滚动联动与表头粘性 #

• 给滚动容器添加滚动监听，通过ref获取三个表格主体的DOM元素，同步它们的scrollTop值，实现垂直滚动联动：

  const scrollContainerRef = useRef(null);
  const table1Ref = useRef(null);
  const table2Ref = useRef(null);
  const table3Ref = useRef(null);
  
  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = scrollContainerRef.current.scrollTop;
      if (table1Ref.current) table1Ref.current.scrollTop = scrollTop;
      if (table2Ref.current) table2Ref.current.scrollTop = scrollTop;
      if (table3Ref.current) table3Ref.current.scrollTop = scrollTop;
    };
    scrollContainerRef.current?.addEventListener('scroll', handleScroll);
    return () => scrollContainerRef.current?.removeEventListener('scroll', handleScroll);
  }, []);
  

• 表头容器的sticky定位会随滚动容器的滚动自动固定在顶部，无需额外处理表头跟随逻辑。

3. 中间表格横向滚动同步 #

• 给中间表格的主体和对应表头添加ref，监听中间表格主体的横向滚动事件，同步表头的scrollLeft值：

  const middleTableBodyRef = useRef(null);
  const middleHeaderRef = useRef(null);
  
  useEffect(() => {
    const handleHorizontalScroll = () => {
      const scrollLeft = middleTableBodyRef.current.scrollLeft;
      if (middleHeaderRef.current) middleHeaderRef.current.scrollLeft = scrollLeft;
    };
    middleTableBodyRef.current?.addEventListener('scroll', handleHorizontalScroll);
    return () => middleTableBodyRef.current?.removeEventListener('scroll', handleHorizontalScroll);
  }, []);
  

• 确保中间表头的列宽与表格主体列宽严格对齐，可通过React Data Grid的getColumnDefinitions或getColumnWidths方法动态获取列宽，设置表头列宽度。

4. 利用组件内置能力优化 #

• 检查React Data Grid是否自带表头粘性配置（如stickyHeader属性），若支持，可直接给单个表格开启该属性，再通过滚动同步让三个表格的表头同时保持粘顶状态。
• 若组件支持自定义表头，可直接在自定义表头中设置sticky样式，减少布局重构工作量。

内容的提问来源于stack exchange，提问作者Tim Launders