reactjs - 使用 react-virtual 模块修复行和列

Question

当我使用具有绝对位置的列索引 0 覆盖 div 并给它一个与 left: 0 保持一致的位置时，第一列样式就会中断。是否可以使用 react-virtual 固定列或行？

combineStyles 是我编写的一个函数，它使我能够有条件地向元素添加一些样式。

const VirtualTable = <T,>({ columns, data }: ITableProps<T>) => {
const parentRef = React.useRef<HTMLDivElement | null>(null);

const rowVirtualizer = useVirtual({
size: data.length,
parentRef,
estimateSize: React.useCallback((i) => 50 as any, []),
overscan: 5,
});

const columnVirtualizer = useVirtual({
horizontal: true,
size: columns.length,
parentRef,
estimateSize: React.useCallback((i) => 100, []),
overscan: 5,
});

return (
<>
  <div
    ref={parentRef}
    className="List"
    style={{
      height: `calc(100vh) - ${shapes.headerHight}px`,
      width: `100%`,
      overflow: "auto",
    }}
  >
    <div
      style={{
        height: `${rowVirtualizer.totalSize}px`,
        width: `${columnVirtualizer.totalSize}px`,
        position: "relative",
      }}
    >
      {rowVirtualizer.virtualItems.map((virtualRow) => (
        <React.Fragment key={virtualRow.index}>
          {columnVirtualizer.virtualItems.map(
            (virtualColumn, columnIndex) => {
              return (
                <div
                  key={virtualColumn.index}
                  style={combineStyles([
                    {
                      position: "absolute",
                      top: 0,
                      left: 0,
                      width: `${virtualColumn.size}px`,
                      height: `${virtualRow.size}px`,
                      transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
                    },
                    columnIndex === 0 &&
                      {
                        position: "sticky",
                      },
                  ])}
                >
                  Cell {virtualRow.index}, {virtualColumn.index}
                </div>
              );
            }
          )}
        </React.Fragment>
      ))}
    </div>
  </div>
</>
);
};