VirtualList

VirtualList renders only the rows currently in view (powered by TanStack Virtual), so it stays fast with thousands of items. Provide a renderItem function and a fixed viewport height; tune estimateSize to your row height for smoother scrolling before measurement. Reach for it when a plain mapped list would mount too many DOM nodes.

Example

Preview

import { VirtualList } from '@officina/ui';

function BigList() {
  const items = Array.from({ length: 10000 }, (_, i) => `Row ${i + 1}`);
  return (
    <VirtualList
      items={items}
      height={360}
      estimateSize={44}
      renderItem={(item) => <div className="px-3 py-2">{item}</div>}
    />
  );
}

API

Prop	Type	Default	Description
items*	T[]	—	Items to virtualize; only the visible window is rendered.
renderItem*	(item: T, index: number) => ReactNode	—	Renders a single item for the given index.
className	string	—	Extra classes for the scroll container.
estimateSize	number	44	Estimated row height in px, used before measurement. Defaults to `44`.
height	string \| number	360	Height of the scroll viewport (px or CSS length).

Example

API

On this page