svelte-virtual

About

Svelte components for efficiently rendering large lists. Instead of rendering all your data, svelte-virtual renders only what's visible

⚠️ New releases

New versions were released under the next release tag. Install it for new features and bug fixes.

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

@next docs

v0.6.3 Usage

Vertical List [default] (demo)

<script>
	import { List } from "svelte-virtual";

	let items = [...Array(100000).keys()];
</script>

<List itemCount={items.length} itemSize={20} height={500}>
	<div slot="item" let:index let:style {style}>
		{items[index]}
	</div>
</List>

Horizontal List (demo)

<script>
	import { List } from "svelte-virtual";

	let items = [...Array(100000).keys()];
</script>

<List itemCount={items.length} itemSize={60} height={40} layout="horizontal">
	<div slot="item" let:index let:style {style}>
		{items[index]}
	</div>
</List>

Grid (demo)

<script>
	import { Grid } from "svelte-virtual";

	let items = [...Array(100000).keys()];
</script>

<Grid itemCount={items.length} itemHeight={50} itemWidth={60} height={500}>
	<div slot="item" let:index let:style {style}>
		{items[index]}
	</div>
</Grid>

Props

List

| Property | Type | Default | Required? | | :--------------- | :--------------------------- | :----------- | :-------: | | itemCount | number | | ✓ | | itemSize | number | | ✓ | | height | number | | ✓ | | width | string | "100%" | | | overScan | number | 1 | | | marginLeft | number | 0 | | | marginTop | number | 0 | | | layout | "vertical" \| "horizontal" | "vertical" | | | scrollToIndex | number \| undefined | undefined | | | scrollToPosition | number \| undefined | undefined | | | scrollToBehavior | "auto" \| "smooth" | "auto" | |

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 | | | scrollToIndex | number \| undefined | undefined | | | scrollToPosition | number \| undefined | undefined | | | scrollToBehavior | "auto" \| "smooth" | "auto" | |

Methods (demo)

| Property | Arguments | | :---------------- | :----------------- | | scrollTo.index | index: number | | scrollTo.position | position: number |

Slots

• item - Slot for each item
  • Props:
    • index: number - Item index
    • scrollPosition: number - Item scroll position in the list
    • style: string - Item style, must be applied to the slot (look above for example)
• header - Slot for the elements that should appear at the top of the component
• footer - Slot for the elements that should appear at the bottom of the component

License

MIT