Chapter 10: Example: Variable Size

Core Idea

This example supplies a known size for each row or column, and also shows two-axis grids and four-lane masonry layouts. The sizes come from data rather than DOM measurement.

Code Example

const rowVirtualizer = useVirtualizer({
  count: rows.length,
  getScrollElement: () => parentRef.current,
  estimateSize: (i) => rows[i],
  overscan: 5,
})

const columnVirtualizer = useVirtualizer({
  horizontal: true,
  count: columns.length,
  getScrollElement: () => parentRef.current,
  estimateSize: (i) => columns[i],
  overscan: 5,
})

• What it demonstrates: Independent row and column virtualizers compose a grid, while each axis reads its own known size.

Key Takeaways

1. Use an index-aware estimateSize when sizes are known before render.
2. A grid renders the Cartesian product of visible row and column items.
3. Set lanes: 4 for the example's masonry-style distribution and use each item's lane for placement.

Connects To

• Ch 009: Both fixed and variable examples avoid measurement.
• Ch 019: Tables use the same row-oriented geometry.