Prepared Docs

VirtualizedList maps items through renderItem with measured heights from estimateSize. It uses @tanstack/react-virtual with overscan, optional getItemKey, imperative scrollToIndex / scrollToOffset via ref, onScrollEnd for infinite loading, emptyContent when no rows, and scrollableProps forwarded to Scrollable (loading, error, scrollbar options).

Props

Name	Type	Default	Description
`estimateSize`	`(index: number) => number`	—	Returns the estimated height (in px) of the item at the given index.
`items`	`T[]`	—	The full array of data items to virtualize.
`renderItem`	`(item: T, index: number, virtualItem: VirtualItem) => ReactNode`	—	Render function called for each visible item.
`className`	`string`	—	Additional CSS class applied to the virtual container.
`emptyContent`	`ReactNode`	—	Content rendered when the items array is empty.
`getItemKey`	`((index: number) => Key)`	—	Returns a stable key for the item at the given index.
`onScrollEnd`	`(() => void)`	—	Fires when the user scrolls near the end of the list.
`overscan`	`number`	`5`	Number of items to render beyond the visible area.
`paddingEnd`	`number`	`0`	Virtual padding after the last item, in pixels.
`paddingStart`	`number`	`0`	Virtual padding before the first item, in pixels.
`ref`	`Ref<VirtualizedListHandle>`	—	Imperative handle for programmatic scroll control.
`scrollableProps`	`{ smallScrollbar?: boolean; insetShadow?: boolean; scrollReverse?: boolean \| undefined; disableHorizontal?: boolean \| undefined; scrollThreshold?: ScrollThreshold \| undefined; loading?: boolean \| undefined; loadingMessage?: string \| undefined; error?: string \| undefined; onRetry?: (() => void...`	—	Props forwarded to the underlying Scrollable container.
`viewportRef`	`((element: HTMLDivElement \| null) => void)`	—	Receives the scroll viewport element (or `null` on unmount).

Storybook

Interactive examples and edge cases for this component are in Storybook.

Basic list

Variable row heights

Small scrollbar

Empty list

Scroll to index

Infinite scroll

Virtualized List / Usage

Virtualized List / Accessibility

Props

Name	Type	Default	Description
`estimateSize`	`(index: number) => number`	—	Returns the estimated height (in px) of the item at the given index.
`items`	`T[]`	—	The full array of data items to virtualize.
`renderItem`	`(item: T, index: number, virtualItem: VirtualItem) => ReactNode`	—	Render function called for each visible item.
`className`	`string`	—	Additional CSS class applied to the virtual container.
`emptyContent`	`ReactNode`	—	Content rendered when the items array is empty.
`getItemKey`	`((index: number) => Key)`	—	Returns a stable key for the item at the given index.
`onScrollEnd`	`(() => void)`	—	Fires when the user scrolls near the end of the list.
`overscan`	`number`	`5`	Number of items to render beyond the visible area.
`paddingEnd`	`number`	`0`	Virtual padding after the last item, in pixels.
`paddingStart`	`number`	`0`	Virtual padding before the first item, in pixels.
`ref`	`Ref<VirtualizedListHandle>`	—	Imperative handle for programmatic scroll control.
`scrollableProps`	`{ smallScrollbar?: boolean; insetShadow?: boolean; scrollReverse?: boolean \| undefined; disableHorizontal?: boolean \| undefined; scrollThreshold?: ScrollThreshold \| undefined; loading?: boolean \| undefined; loadingMessage?: string \| undefined; error?: string \| undefined; onRetry?: (() => void...`	—	Props forwarded to the underlying Scrollable container.
`viewportRef`	`((element: HTMLDivElement \| null) => void)`	—	Receives the scroll viewport element (or `null` on unmount).