https://github.com/sveltejs/svelte-virtual-list

A virtual list component for Svelte apps
https://github.com/sveltejs/svelte-virtual-list

Last synced: about 1 month ago
JSON representation

A virtual list component for Svelte apps

• Host: GitHub
• URL: https://github.com/sveltejs/svelte-virtual-list
• Owner: sveltejs
• License: other
• Created: 2018-04-03T17:16:47.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T16:00:46.000Z (over 1 year ago)
• Last Synced: 2024-04-14T16:06:24.572Z (7 months ago)
• Language: JavaScript
• Homepage: https://svelte.dev/repl/f78ddd84a1a540a9a40512df39ef751b
• Size: 63.5 KB
• Stars: 659
• Watchers: 22
• Forks: 59
• Open Issues: 38
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-virtual-list ([demo](https://svelte.dev/repl/f78ddd84a1a540a9a40512df39ef751b))

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.

## Installation

```bash

yarn add @sveltejs/svelte-virtual-list

```

## Usage

```html

  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 }

  ];

  

  
{item.number}: {item.name}


```

## `start` and `end`

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

```html

  
{item.number}: {item.name}


showing {start}-{end} of {things.length} rows

```


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

## `height`

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


```

## `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.

```html

  
{item.number}: {item.name}


```

## Configuring webpack

If you're using webpack with [svelte-loader](https://github.com/sveltejs/svelte-loader), make sure that you add `"svelte"` to [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#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](https://github.com/rollup/rollup-plugin-svelte), this will happen automatically.

## License

[LIL](LICENSE)