data · Normal DOM only

VirtualList

@tanstack/react-virtual list — render thousands of rows without dropping frames.

Use VirtualList when the dataset is large enough that React can't mount it directly (≥ several hundred rows). It mounts only the visible window + a small overscan; scroll feels smooth even at 10k rows.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { VirtualList } from '@8maverik8/twenty-design';

Examples

1,000 rows

tsx
<VirtualList items={[…1000]} estimateSize={36} height={240} renderItem={(_, i) => <Row i={i} />} />

Guidelines

✓

Pass a stable estimateSize close to the real average row height.Wildly wrong estimates make the scrollbar jump as rows hydrate.

Use VirtualList for variable-height collapsible rows.Item resize after mount breaks scroll position. Use a measured-list variant if needed.