https://github.com/ghostebony/svelte-virtual
Virtual List and Grid components for Svelte
https://github.com/ghostebony/svelte-virtual
grid list scroll svelte virtual
Last synced: 3 months ago
JSON representation
Virtual List and Grid components for Svelte
- Host: GitHub
- URL: https://github.com/ghostebony/svelte-virtual
- Owner: ghostebony
- License: mit
- Created: 2022-07-21T09:42:54.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-22T03:55:59.000Z (12 months ago)
- Last Synced: 2025-09-13T07:52:48.821Z (4 months ago)
- Topics: grid, list, scroll, svelte, virtual
- Language: Svelte
- Homepage: https://npmjs.com/svelte-virtual
- Size: 563 KB
- Stars: 64
- Watchers: 2
- Forks: 5
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# svelte-virtual
## About
Svelte components for efficiently rendering large lists. Instead of rendering all your data, svelte-virtual renders only what's visible
## Installation
With npm:
```
npm i -D svelte-virtual@next
```
With yarn:
```
yarn add -D svelte-virtual@next
```
With pnpm:
```
pnpm add -D svelte-virtual@next
```
## Usage
### Vertical List [default] ([demo](https://svelte.dev/repl/70b159e914024f869180c28b8e7eb92d))
```svelte
import { List } from "svelte-virtual";
let items = [...Array(100000).keys()];
{#snippet item({ index, style })}
{items[index]}
{/snippet}
```
### Horizontal List ([demo](https://svelte.dev/repl/160a5bf2e2a8484c8ffd03b219f5eb27))
```svelte
import { List } from "svelte-virtual";
let items = [...Array(100000).keys()];
{#snippet item({ index, style })}
{items[index]}
{/snippet}
```
### Grid ([demo](https://svelte.dev/repl/8e2b877da06c4532ae50482236abbcac))
```svelte
import { Grid } from "svelte-virtual";
let items = [...Array(100000).keys()];
{#snippet item({ index, style })}
{items[index]}
{/snippet}
```
### Grid [using rows and columns] ([demo](https://svelte.dev/repl/1b2b8cdcb6674f2c8a9e434009f6df3b))
```svelte
import { Grid } from "svelte-virtual";
let itemCount = 100000;
let columnCount = 5;
let items = Array.from({ length: itemCount }, (_, l) =>
Array.from({ length: columnCount }, (_, c) => `${l}-${c}`),
);
{#snippet item({ rowIndex, columnIndex, style })}
{items[rowIndex][columnIndex]}
{/snippet}
```
## Props
### List
| Property | Type | Default | Required? |
| :-------------- | :--------------------------------------- | :------------------------- | :-------: |
| itemCount | `number` | | ✓ |
| itemSize | `number` | | ✓ |
| height | `number \| string` | `"100%"` | |
| width | `number \| string` | `"100%"` | |
| stickyIndices | `number[]` | `[]` | |
| overScan | `number` | `1` | |
| marginLeft | `number` | `0` | |
| marginTop | `number` | `0` | |
| layout | `"vertical" \| "horizontal"` | `"vertical"` | |
| scrollPosition | `number` | `0` | |
| scrollAlignment | `"auto" \| "start" \| "center" \| "end"` | `"auto"` | |
| scrollBehavior | `"auto" \| "smooth"` | `"auto"` | |
| getKey | `(index: number) => unknown` | `(index: number) => index` | |
### Grid
| Property | Type | Default | Required? |
| :------------- | :--------------------------- | :------------------------- | :-------: |
| itemCount | `number` | | ✓ |
| itemHeight | `number` | | ✓ |
| itemWidth | `number` | | ✓ |
| height | `number` | | ✓ |
| width | `string` | `"100%"` | |
| overScan | `number` | `1` | |
| marginLeft | `number` | `0` | |
| marginTop | `number` | `0` | |
| scrollPosition | `number` | `0` | |
| scrollBehavior | `"auto" \| "smooth"` | `"auto"` | |
| getKey | `(index: number) => unknown` | `(index: number) => index` | |
| columnCount | `number` | `undefined` | |
## Methods ([demo](https://svelte.dev/repl/8efc42f67dc5493aabe465c589af62e7))
Method
Argument
Type
Default
Required?
scrollToIndex
index
number
✓
alignment
"auto" | "start" | "center" | "end"
scrollAlignment
behavior
"auto" | "smooth"
scrollBehavior
scrollToPosition
position
number
✓
behavior
"auto" | "smooth"
scrollBehavior
## Snippets
- `item` - Snippet for each item
- Props:
- Shared:
- `index: number` - Item index
- `style: string` - Item style must be applied to the first child element of the snippet (look above for example)
- Only for `` ([demo](#grid-using-rows-and-columns-demo)):
- `rowIndex: number` - Item row index
- `columnIndex: number` - Item column index
- `placeholder` (optional) - Snippet for each item (when scrolling fast, replaces `item` snippet. if not present, `item` snippet is used)
- Props:
- Shared:
- `index: number` - Item index
- `style: string` - Item style must be applied to the first child element of the snippet (look above for example)
- Only for `` ([demo](#grid-using-rows-and-columns-demo)):
- `rowIndex: number` - Item row index
- `columnIndex: number` - Item column index
- `header` (optional) - Snippet for the elements that should appear at the top of the component
- `footer` (optional) - Snippet for the elements that should appear at the bottom of the component
## License
[MIT](./LICENSE)