SolidJs Virtualized List

A lightweight, highly efficient virtualized list component for SolidJs that supports both horizontal and vertical rows, allowing you to efficiently render large datasets with ease.

#### Features

1. Supports both horizontal and vertical rows.
2. Efficiently handles large datasets by rendering only the visible elements.
3. Provides a scrollTo function to programmatically scroll to a specific item.

``
npm i solidjs-virtualizedlist
`

##### Usage Example

`jsx
import { createSignal } from "solid-js";
import { render } from "solid-js/web";
import { VirtualizedList } from "./virtualized-list.jsx";

const root = document.getElementById("root");

// Generate data for the list
let data = Array.from({ length: 1000000 }).map((v, i) => i + 1);

let scrollTo; // Declare a variable to hold the scrollTo function

const [scrollToKey, setScrollToKey] = createSignal(0); // Create a signal for the scroll target index

render(
() => (

options={{
containerSize: 500, // Height of the visible container
dataLength: data.length, // Total length of the dataset
cellHeightWidth: 20, // Height of each item in the list
overscan: 10, // Number of extra items to render above and below the visible area
direction: "y", // Direction of the list (vertical in this case)
scrollTo: (cb) => (scrollTo = cb), // Callback to set the scrollTo function
onScroll: (e) => {
console.log(e); // Event handler for scroll events
},
}}
parentContainerProps={{
style: {
width: "250px",
},
}}
scrollContainerProps={{}}
>
{({ index }) => {
return data[index] ? (

!{data[index]}

// Rendered item in the list
) : null;
}}

type="number"
placeholder="Index"
onChange={(e) => setScrollToKey(() => e.target.value)}
/>
scrollTo(+scrollToKey())}>Scroll // Button
to trigger scroll

),
root
);
`

| Property | Type | Description |
| ---------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| children | ({ index }: { index: number }) => JSX.Element | Function that takes an index and returns a React element to be rendered. |
| options | VirtualizedListOptions | Configuration options for the virtualized list. |
| parentContainerProps | React.DetailedHTMLProps, HTMLDivElement> (optional) | HTML attributes for the parent container element. |
| scrollContainerProps | React.DetailedHTMLProps, HTMLDivElement> (optional) | HTML attributes for the scroll container element. |

$3

| Property | Type | Description |
| ----------------- | -------------------------------------------------- | ----------------------------------------------------------------- |
| containerSize | number | Height of the visible container. |
| overscan | number (optional) | Number of extra items to render above and below the visible area. |
| dataLength | number | Total length of the dataset. |
| cellHeightWidth | number | Height or Width of each item in the list. |
| direction | "x" \| "y" (optional, default: "y") | Direction of the list (horizontal or vertical). |
| scrollTo | (cb: (index: number) => void) => void (optional) | Callback to set the scrollTo function. |
| debounce | number (optional) | Debounce value for scroll events (milliseconds). |
| onScroll | (event: Event) => void` (optional) | Event handler for scroll events. |