svelte-virtual
TypeScript icon, indicating that this package has built-in type declarations

0.6.3 • Public • Published

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

Package Sidebar

Install

npm i svelte-virtual

Weekly Downloads

132

Version

0.6.3

License

MIT

Unpacked Size

17.6 kB

Total Files

9

Last publish

Collaborators

  • ghostebony