svelte-virtual v0.6.3

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

<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

Grid

Methods (demo)

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