A basic virtualized list component for improving performance when rendering very large lists
npm install @solid-primitives/virtual
# or
yarn add @solid-primitives/virtual
# or
pnpm add @solid-primitives/virtual<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.
You can see the VirtualizedList in action in the following sandbox: https://primitives.solidjs.community/playground/virtual
See CHANGELOG.md