Blog>
Snippets

Dynamic Row Heights with TanStack Virtual

Explain how to implement a list with dynamic row heights using TanStack Virtual, focusing on handling variability in content size.
import { useVirtualizer } from '@tanstack/react-virtual';
import { useRef } from 'react';
Import the necessary hooks from TanStack Virtual and React.
const parentRef = useRef();
Create a ref for the parent container.
const rowVirtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => parentRef.current,
  estimateSize: useCallback((index) => getItemHeight(index), []),
  overscan: 5,
});
Initialize the virtualizer with the count of items, a method to get the scrollable element, an estimation function for item heights, and an overscan count.
const getItemHeight = index => {
  // Implement logic to estimate the row's height
};
Define a function to estimate the height of each row based on its index.
<div ref={parentRef} style={{ overflow: 'auto', height: '100vh' }}>
  <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, width: '100%', position: 'relative' }}>
    {rowVirtualizer.getVirtualItems().map(virtualRow => (
      <div
        key={virtualRow.key}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          transform: `translateY(${virtualRow.start}px)`,
          height: `${virtualRow.size}px`,
        }}
      >
        {items[virtualRow.index]}
      </div>
    ))}
  </div>
</div>
Render the virtualized list inside the parent div. Each row is absolutely positioned within a relatively positioned container based on the virtualizer's calculations.