A <VirtualList> component for Svelte apps
npm install svelte-virtual-list-ce_Community-Edition fork of svelte-virtual-list_
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.
``bash`
yarn add svelte-virtual-list-ce
`html
{item.number}: {item.name}
`
and endYou can track which rows are visible at any given by binding to the start and end values:
` {item.number}: {item.name}html
showing {start}-{end} of {things.length} rows
You can rename them with e.g.
bind:start={a} bind:end={b}.
heightBy 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}
`itemHeightYou 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.