Virtual List

Basic virtual list example demonstrating core behavior.

Package: @solidiom/virtual-list
Version: 0.0.1-next.0
Status: stable

Examples

import * as VirtualList from "@solidiom/virtual-list"
import { For } from "solid-js"

const TOTAL_ITEMS = 10_000
const ITEM_HEIGHT = 40

;<VirtualList.Root totalCount={TOTAL_ITEMS} itemSize={ITEM_HEIGHT} height="400px">
  {(virtualItems) => (
    <For each={virtualItems()}>
      {(item) => (
        <VirtualList.Item item={item}>
          <div
            style={{
              padding: "0 12px",
              display: "flex",
              alignItems: "center",
              height: `${item.size}px`,
            }}
          >
            Item {item.index + 1}
          </div>
        </VirtualList.Item>
      )}
    </For>
  )}
</VirtualList.Root>

The render function receives an accessor of visible virtual items. Each VirtualList.Item is positioned absolutely within the scroll container. Only items within the viewport (plus overscan) are rendered, making it efficient for large datasets. Use createVirtualizer() for standalone usage outside the component tree.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

View source

        /**
 * @solidiom/virtual-list — Headless viewport-windowed list primitive.
 *
 * Parts: Root (scroll container), Item (positioned child).
 * Also exports createVirtualizer() for standalone usage.
 */

export {
  Root,
  Item,
  createVirtualizer,
  type VirtualListRootProps,
  type VirtualListItemProps,
  type CreateVirtualizerOptions,
  type VirtualizerState,
} from "./virtual-list"

export {
  type VirtualConfig,
  type VirtualItem,
  type VirtualizationPort,
  type VirtualListContextValue,
} from "./virtual-list-context"