sveltejs/svelte-virtual-list

Name: svelte-virtual-list

Owner: Svelte

Description: A virtual list component for Svelte apps

Created: 2018-04-03 17:16:47.0

Updated: 2018-05-21 21:20:29.0

Pushed: 2018-05-08 01:09:41.0

Homepage: https://svelte.technology/repl?version=2&gist=f5a127d9c21f529016d434dcbe405c3f

Size: 47

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

svelte-virtual-list (demo)

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.

Installation

 add @sveltejs/svelte-virtual-list

Usage

tualList items={things} component={RowComponent} />

ipt>
port VirtualList from '@sveltejs/svelte-virtual-list';
port RowComponent from './RowComponent.html';

port default {
components: { VirtualList },

data() {
  return {
    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 }
    ],
    RowComponent
  };
}

ript>

The component constructor you supply to <VirtualList> will be instantiated for each visible member of items:

 RowComponent.html -->
>
trong>{number}</strong>
pan>{name}</span>
v>

start and end

You can track which rows are visible at any given by binding to the start and end values:

tualList items={things} component={RowComponent} bind:start bind:end />

howing {start}-{end} of {things.length} rows</p>

You can rename them with e.g. bind:start=a bind:end=b.

itemHeight

You can optimize initial display and scrolling when the height of items is known in advance.

tualList items={things} component={RowComponent} itemHeight={48} />

Additional properties

You can add arbitrary properties to <VirtualList> and they will be forwarded to the rows:

tualList class="funky" answer={42} items={things} component={RowComponent} />

tml
 RowComponent.html -->
 class="{number === answer ? 'the-answer' : ''}">
trong>{number}</strong>
pan>{name}</span>
v>

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