TanStackT
TanStack•4y ago•
39 replies
ordinary-sapphire

How to use rangeExtractor properly for horizontal column virtualization with pinned or sticky column

I have got column and row virtualization working pretty well using TanStack Virtual v3 beta.31. The only remaining issue I cannot figure out is how to properly use the rangeExtractor function properly to not lose pinned columns as the user scrolls.

Here is my live example: https://www.material-react-table.dev/?path=/story/features-virtualization--max-virtualization

Here is my code for the virtualizer:

const columnVirtualizer = useVirtualizer({
  count: table.getRowModel().rows[0].getVisibleCells().length,
  estimateSize: () => averageColumnWidth,
  getScrollElement: () => tableContainerRef.current,
  horizontal: true,
  measureElement: (element) => element?.getBoundingClientRect().width,
  overscan: 3,
  rangeExtractor: useCallback(
    (range) =>
      [
        ...new Set([...pinnedColumnIndexes, ...defaultRangeExtractor(range)]),
      ].sort((a, b) => a - b),
    [pinnedColumnIndexes],
  ),
});


The problem is that as soon as I add a new number into the range with pinnedColumnIndexes, scrolling horizontally will no longer bring in new columns. It is like the virtualizer does not adjust anymore.

But it works perfectly fine without any pinned columns.

Also the sticky example on the docs seems to not have the correct dependencies installed? https://tanstack.com/virtual/v3/docs/examples/react/sticky
React Virtual Sticky Example | TanStack Virtual Docs
An example showing how to implement Sticky in React Virtual
React Virtual Sticky Example | TanStack Virtual Docs
Was this page helpful?