DOCSEARCHbyAlgolia
Submit Docs

svelte-virtual-list

repository·master·Indexed 21 days ago

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

A Svelte component for rendering large lists efficiently by only rendering items currently visible in the viewport. It supports dynamic or fixed item heights via the itemHeight prop, viewport height configuration, and provides start and end bindings to track visible row indices.

Tokens
1.3K
Snippets
7
Records
8
Agent score
23%

What's inside @sveltejs/svelte-virtual-list

  2. Configure webpack for svelte-loader

    master

    If using webpack with svelte-loader, add "svelte" to the resolve.mainFields configuration in your webpack config. This ensures webpack imports the uncompiled component (src/index.html) instead of the compiled version (index.mjs), which is more efficient.

    Note: If you are using Rollup with rollup-plugin-svelte, this configuration is handled automatically.

  3. Basic usage of VirtualList

    master

    The <VirtualList> component renders only the visible items from a provided array, improving performance for large datasets. Use the items prop to pass your data and the let:item directive to access the individual item within the slot.

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

  const things = [
    { 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>

  4. Track visible rows with `start` and `end`

    master

    You can monitor which items are currently visible by binding to the start and end props. start represents the index of the first visible row, and end represents the index of the last visible row. You can rename these bindings if necessary using bind:start={variableName}.

    <script>
  let start, end;
  const things = [...];
</script>

<VirtualList items={things} bind:start bind:end>
  <p>{item.number}: {item.name}</p>
</VirtualList>

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

  5. Optimize scrolling with `itemHeight`

    master

    If the height of your items is known in advance, provide a numeric pixel value to the itemHeight prop. This optimizes initial rendering and scrolling performance.

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

  6. Set the list `height`

    master

    By default, <VirtualList> fills the vertical space of its container. To specify a fixed height, pass a CSS length string (e.g., '500px') to the height prop.

    <VirtualList height="500px" items={things} let:item>
  <p>{item.number}: {item.name}</p>
</VirtualList>

  7. Use the VirtualList component

    master

    The VirtualList component renders a window of items from a large list based on the current scroll position. It uses a slot to allow you to define how each item should be rendered. You can bind to the start and end props to know which indices are currently visible in the viewport.

    Props

    • items: The array of data to be virtualized.
    • height: The height of the viewport container (defaults to '100%').
    • itemHeight: An optional fixed height for items. If provided, it bypasses dynamic height calculation. If omitted, the component calculates heights based on the actual DOM elements.

    Bindable Properties

    • start: The index of the first visible item.
    • end: The index of the last visible item.

    Slot API

    The component provides a scoped slot named item. You access the current item's data via let:item.

    <script>
  import VirtualList from './VirtualList.svelte';
  let myItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  let start, end;
</script>

<VirtualList items={myItems} bind:start bind:end let:item>
  <div>Item index: {item}</div>
</VirtualList>

  8. Configure itemHeight in VirtualList

    master

    By default, VirtualList attempts to calculate the height of each row dynamically using offsetHeight. If you know the height of your items in advance, providing the itemHeight prop improves performance and stability by skipping DOM measurements for every row.

    If itemHeight is provided, the component uses this value for all calculations. If it is undefined, the component measures the svelte-virtual-list-row elements.

    <VirtualList {items} itemHeight={50} />