ATTENTION THIS IS A WORK IN PROGRESS FORK

FROM RICHARD'S OWN VIRTUAL-LIST LIBRARY (he is not maintaining it currently)
It has some undocumented new functionalities that can be seen from the commit list

svelte-virtual-list-enhanced (demo)

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 @lionixevolve/svelte-virtual-list-enhanced
`
Or npm
`bash
npm i --save @lionixevolve/svelte-virtual-list-enhanced
`

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}



`

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