A <VirtualList> component for Svelte apps
npm install @deboxsoft/svelte-virtual-listA 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 @lionixevolve/svelte-virtual-list-enhanced`
Or npmbash`
npm i --save @lionixevolve/svelte-virtual-list-enhanced
`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}
`
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.