VirtualList

Windowed list — only renders visible rows + overscan. Uses ResizeObserver for dynamic container height. Generic over item type.

Preview

Usage

import { VirtualList } from '@ramtt/ui'

<VirtualList
  items={items}
  itemHeight={32}
  height={400}
  renderItem={(item) => <Row item={item} />}
/>

Props

Prop	Type	Default	Description
items*	`readonly T[]`	—	All items in the list
itemHeight*	`number`	—	Fixed row height in px
renderItem*	`(item: T, index: number) => ReactNode`	—	Row renderer
overscan	`number`	5	Extra rows above/below viewport
height	`number`	—	Container height (else uses ResizeObserver)
getKey	`(item: T, index: number) => string \| number`	—	Key extractor (default: index)
className	`string`	—	Additional Tailwind classes