Chapter 13: Example: Padding

Core Idea

The padding example adds virtual content space before and after rows, columns, and a grid. It also uses explicit index attributes and imperative scrolling.

Code Example

const rowVirtualizer = useVirtualizer({
  count: rows.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 50,
  paddingStart: 100,
  paddingEnd: 100,
})

<div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>
  {rowVirtualizer.getVirtualItems().map((virtualRow) => (
    <div
      key={virtualRow.key}
      data-index={virtualRow.index}
      ref={rowVirtualizer.measureElement}
      style={{
        position: 'absolute',
        transform: `translateY(${virtualRow.start}px)`,
      }}
    >
      Row {virtualRow.index}
    </div>
  ))}
</div>

• What it demonstrates: Padding is part of virtual geometry, so total size and item starts include it.

Key Takeaways

1. Use paddingStart and paddingEnd for virtual content space.
2. Apply the same pattern on the horizontal axis with horizontal: true.
3. The source also applies custom indexAttribute names in the grid.

Connects To

• Ch 014: Scroll padding solves a related but distinct header-visibility problem.
• Ch 007: Both options belong to Virtualizer geometry.