svelte-virtual-list-ce (demo)

_Community-Edition fork of svelte-virtual-list_

!logo.svg

A virtual list component for Svelte apps. Instead of rendering all your data, just renders the bits that are visible, keeping your page nice and light.

Installation

``bash
yarn add svelte-virtual-list-ce
`




Usage

`html






{item.number}: {item.name}



`

start and end

You can track which rows are visible at any given by binding to the start and end values:

`html



{item.number}: {item.name}

showing {start}-{end} of {things.length} rows

`

You can rename them with e.g. bind:start={a} bind:end={b}.




height

By default, the component will fill the vertical space of its container. You can specify a different height by passing any CSS length:

`html



{item.number}: {item.name}



`

itemHeight

You can optimize initial display and scrolling when the height of items is known in advance. This should be a number representing a pixel value.

`html



{item.number}: {item.name}



`

scrollToIndex()

You can jump to anywhere in the list, by calling scrollToIndex with one of the list items index.

`html





{item.number}: {item.name}



`

You can also export let scrollToIndex to call it from outside. In this case it should be initialized with undefined, to prevent warnings in the logs:

`html







`




Configuring webpack

If you're using webpack with svelte-loader, make sure that you add "svelte" to resolve.mainFields in your webpack config. This ensures that webpack imports the uncompiled component (src/index.html) rather than the compiled version (index.mjs`) — this is more efficient.

If you're using Rollup with rollup-plugin-svelte, this will happen automatically.

License

LIL