Fixed row and column with react-virtual module

467 Views Asked by At

When I override the div with a column index of 0 that has position absolute and give it a position sticky with left: 0 the first column style just breaks. Is it possible to have fixed columns or rows with react-virtual?

combineStyles is a function that I wrote to make me able to conditionally add some styles to an element.

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>
</>
);
};
0

There are 0 best solutions below