svelte-virtual-list-ce (demo)
Community-Edition fork of svelte-virtual-list
A virtual list component for Svelte apps. Instead of rendering all your data, <VirtualList> just renders the bits that are visible, keeping your page nice and light.
yarn add svelte-virtual-list-ce<script>
import VirtualList from 'svelte-virtual-list-ce';
const things = [
// these can be any values you like
{ name: 'one', number: 1 },
{ name: 'two', number: 2 },
{ name: 'three', number: 3 },
// ...
{ name: 'six thousand and ninety-two', number: 6092 }
];
</script>
<VirtualList items={things} let:item>
<!-- this will be rendered for each currently visible item -->
<p>{item.number}: {item.name}</p>
</VirtualList>You can track which rows are visible at any given by binding to the start and end values:
<VirtualList items={things} bind:start bind:end>
<p>{item.number}: {item.name}</p>
</VirtualList>
<p>showing {start}-{end} of {things.length} rows</p>You can rename them with e.g. bind:start={a} bind:end={b}.
By default, the <VirtualList> component will fill the vertical space of its container. You can specify a different height by passing any CSS length:
<VirtualList height="500px" items={things} let:item>
<p>{item.number}: {item.name}</p>
</VirtualList>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.
<VirtualList itemHeight={48} items={things} let:item>
<p>{item.number}: {item.name}</p>
</VirtualList>You can jump to anywhere in the list, by calling scrollToIndex with one of the list items index.
<script>
let scrollToIndex;
function handleButtonClick (event) {
// ... define your index variable here
scrollToIndex(index);
};
</script>
<VirtualList bind:scrollToIndex items={things}>
<p>{item.number}: {item.name}</p>
</VirtualList>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:
<!-- InnerComponent.svelte -->
<script>
export let scrollToIndex = undefined;
</script>
<!-- OuterComponent.svelte -->
<script>
let scrollToIndex;
function someLogic () {
scrollToIndex(index);
};
</script>
<InnerComponent bind:scrollToIndex></InnerComponent>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.