@svuick/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.

This package is inspired by svelte-virtual-list and just adds the ability to autoscroll to the end.

Installation

npm i @svuick/virtual-list

Example

Instead of rendering all your data, <VirtualList> just renders the bits that are visible, keeping your page nice and light.

showing items 0-0 / 1000

Usage

<script>
    import VirtualList from '@sveltejs/svelte-virtual-list';

    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 }
    ];
</>

<VirtualList items={things} let:item>
    <!-- this will be rendered for each currently visible item -->
    <p>{item.number}: {item.name}</p>
</VirtualList>

start end end

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}.

height

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>

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.

<VirtualList itemHeight={48} items={things} let:item>
    <p>{item.number}: {item.name}</p>
</VirtualList>