# 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

{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)

	Stars	Issues	Version	Updated	Created
@sveltejs/svelte-virtual-list			3.0.1	5 years ago	6 years ago
angular			1.8.3	2 years ago	12 years ago
react	223,053	877	18.3.1	22 days ago	13 years ago
vue	44,936	1,052	3.4.27	11 days ago	10 years ago

@sveltejs/svelte-virtual-list vs angular vs react vs vue

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past