VirtualList

Renders only visible rows: fixed, measured or externally windowed.

Fixed-height rows; the caller keeps `offset` and updates it from `onScroll`.

VirtualListProps<T> | VariableVirtualListProps<T> | WindowedVirtualListProps<T> generic packages/core/src/virtual-list.ts:584 ↗

Import

import { VirtualList } from "@tarve/core";

Usage

VirtualList.tsx

import { Row, Text, VirtualList } from "@tarve/core";

const records = Array.from({ length: 100_000 }, (_, index) => ({ id: index, name: `Record ${index}` }));
let offset = 0;

<VirtualList
  id="records"
  items={records}
  itemHeight={36}
  height={480}
  offset={offset}
  keyForItem={(record) => record.id}
  onScroll={(next) => {
    offset = next;
  }}
  renderItem={(record) => (
    <Row padding={8}>
      <Text>{record.name}</Text>
    </Row>
  )}
/>

Props

Prop	Type	Default
`height` required	`number`	—
`items` required	`readonly T[]`	—
`offset` required	`number`	—
`onScroll` required	`(offset: number, max: number) => void`	—
`renderItem` required	`(item: T, index: number) => Child`	—
`itemHeight`	`number`	—
`keyForItem`	`(item: T, index: number) => string \| number`	—
`overscan`	`number`	—

Inherited from VariableVirtualListProps 4 props

Prop	Type	Default
`alignment`	`"top" \| "bottom"`	—
`estimatedItemHeight`	`number`	—
`followTail`	`boolean`	—
`id` Stable list id is required so measured heights survive rerenders.	`string`	—

Inherited from WindowedVirtualListProps 2 props

Prop	Type	Default
`itemCount` Total logical row count; `items` contains only the mounted window.	`number`	—
`windowStart` Logical index represented by `items[0]`.	`number`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle