使用react-table<VariableSizeList>与react-window无法同时实现虚拟化和粘性列

你当前遇到的核心矛盾是：VariableSizeList 依赖容器的 overflow: auto 实现虚拟化，但这个属性会导致CSS position: sticky 失效；改成 overflow: unset 后粘性生效，却破坏了虚拟化的可视区域渲染逻辑。

要同时实现行索引列粘性和列表虚拟化，可以采用「双虚拟化列表同步滚动」的方案，具体实现如下：

实现思路 #

• 将行索引列与主数据列拆分为两个独立的虚拟化列表（均用VariableSizeList实现），并排布局
• 监听其中一个列表的滚动事件，同步另一个列表的滚动位置，确保行对齐
• 行索引列的容器固定在左侧，通过虚拟化只渲染可视区域的索引项，避免性能问题

代码示例 #

组件实现（React + react-window） #

import { useRef } from 'react';
import { VariableSizeList } from 'react-window';

const VirtualStickyIndexTable = ({ data }) => {
  const mainListRef = useRef(null);
  const indexListRef = useRef(null);

  // 同步两个列表的滚动位置
  const syncScroll = ({ scrollTop }) => {
    if (indexListRef.current) indexListRef.current.scrollTo({ scrollTop });
  };

  // 计算行高（根据业务逻辑调整，这里假设数据中包含height字段）
  const getRowHeight = (index) => data[index]?.height || 50;

  // 渲染主数据行
  const renderMainRow = ({ index, style }) => {
    const item = data[index];
    return (
      <div style={style} className="main-row">
        <div className="cell">{item.name}</div>
        <div className="cell">{item.category}</div>
        <div className="cell">{item.value}</div>
      </div>
    );
  };

  // 渲染行索引项
  const renderIndexRow = ({ index, style }) => (
    <div style={style} className="index-row">
      <div className="index-cell">{index + 1}</div>
    </div>
  );

  return (
    <div className="table-wrapper">
      {/* 行索引虚拟化列表 */}
      <VariableSizeList
        ref={indexListRef}
        height={500}
        width={60}
        itemCount={data.length}
        itemSize={getRowHeight}
        onScroll={syncScroll}
        className="index-list"
      >
        {renderIndexRow}
      </VariableSizeList>

      {/* 主数据虚拟化列表 */}
      <VariableSizeList
        ref={mainListRef}
        height={500}
        width={800}
        itemCount={data.length}
        itemSize={getRowHeight}
        onScroll={syncScroll}
        className="main-list"
      >
        {renderMainRow}
      </VariableSizeList>
    </div>
  );
};

样式配置 #

.table-wrapper {
  display: flex;
  overflow: hidden; /* 避免外层出现滚动条 */
  border: 1px solid #e0e0e0;
}

.index-list, .main-list {
  overflow: auto;
}

.index-row, .main-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.index-cell {
  width: 60px;
  padding: 0 12px;
  background-color: #f5f5f5;
  text-align: center;
}

.cell {
  width: 260px;
  padding: 12px 16px;
}

关键注意事项 #

• 两个列表的itemCount和itemSize必须完全一致，否则滚动时行无法对齐
• 如果是固定行高，建议改用FixedSizeList，性能会更优
• 异步加载数据时，要同步更新两个列表的数据源，避免索引与数据不匹配

内容的提问来源于stack exchange，提问作者Ajinkya Desai