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