@solid-primitives/virtual

A basic virtualized list component for improving performance when rendering very large lists

Installation

npm install @solid-primitives/virtual
# or
yarn add @solid-primitives/virtual
# or
pnpm add @solid-primitives/virtual

How to use it

<VirtualList
  // the list of items (of course, to for this component to be useful, the list would need to be much bigger than shown here)
  each={[0, 1, 2, 3, 4, 5, 6, 7]}
  // the number of elements to render both before and after the visible section of the list, so passing 5 will render 5 items before the list, and 5 items after. Defaults to 1, cannot be set to zero. This is necessary to hide the blank space around list items when scrolling
  overscanCount={5}
  // the height of the root element of the virtualizedList itself
  rootHeight={20}
  // the height of individual rows in the virtualizedList
  rowHeight={10}
  // the class applied to the root element of the virtualizedList
  class={"my-class-name"}
>
  {
    // the flowComponent that will be used to transform the items into rows in the list
    item => <div>{item}</div>
  }
</VirtualList>

The tests describe the component's exact behavior and how overscanCount handles the start/end of the list in more detail. Note that the component only handles vertical lists where the number of items is known and the height of an individual item is fixed.

Demo

You can see the VirtualizedList in action in the following sandbox: https://primitives.solidjs.community/playground/virtual

Changelog

See CHANGELOG.md