Svelte Virtual List

https://github.com/sveltejs/svelte-virtual-list
Admin
Svelte Virtual List is a component that renders only visible items in a list, optimizing performance...
Tokens:3,296
Snippets:27
Trust Score:9.8
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Track Visible Range with start and end Bindings

Source: https://context7.com/sveltejs/svelte-virtual-list/llms.txt

Demonstrates how to bind to the 'start' and 'end' properties of the VirtualList component to monitor the current viewport range. This is useful for displaying progress indicators or implementing data-loading logic based on scroll position.

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

  const items = Array.from({ length: 100000 }, (_, i) => ({
    id: i,
    title: `Record #${i + 1}`,
    timestamp: new Date(Date.now() - i * 60000).toISOString()
  }));

  let start = 0;
  let end = 0;

  $: progress = items.length > 0 ? ((end / items.length) * 100).toFixed(1) : 0;
</script>

<div class="container">
  <header>
    Showing items {start + 1} - {end} of {items.length.toLocaleString()}
    <progress value={end} max={items.length}></progress>
    <span>{progress}% scrolled</span>
  </header>

  <VirtualList
    height="400px"
    items={items}
    bind:start
    bind:end
    let:item
  >
    <div class="record">
      <span class="id">#{item.id}</span>
      <span class="title">{item.title}</span>
      <span class="time">{item.timestamp}</span>
    </div>
  </VirtualList>
</div>
```

--------------------------------

### Install Svelte Virtual List

Source: https://github.com/sveltejs/svelte-virtual-list/blob/master/README.md

Install the package using the yarn package manager to include it in your Svelte project dependencies.

```bash
yarn add @sveltejs/svelte-virtual-list
```

--------------------------------

### Install Svelte Virtual List package

Source: https://context7.com/sveltejs/svelte-virtual-list/llms.txt

Commands to add the virtual list component to a Svelte project using npm or yarn package managers.

```bash
yarn add @sveltejs/svelte-virtual-list
# or
npm install @sveltejs/svelte-virtual-list
```

--------------------------------

### Track Visible Range

Source: https://github.com/sveltejs/svelte-virtual-list/blob/master/README.md

Bind the start and end properties to track which rows are currently visible in the viewport. This is useful for displaying status information or implementing lazy loading.

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

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

--------------------------------

### Implement basic VirtualList with items array

Source: https://context7.com/sveltejs/svelte-virtual-list/llms.txt

Demonstrates how to import the component and use the let:item directive to render a large dataset efficiently.

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

  const things = Array.from({ length: 10000 }, (_, i) => ({
    name: `Item ${i + 1}`,
    number: i + 1,
    description: `This is the description for item number ${i + 1}`
  }));
</script>

<VirtualList items={things} let:item>
  <div class="row">
    <strong>{item.number}:</strong> {item.name}
    <p>{item.description}</p>
  </div>
</VirtualList>

<style>
  .row {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
</style>
```

--------------------------------

### Implement VirtualList Component

Source: https://context7.com/sveltejs/svelte-virtual-list/llms.txt

Demonstrates the usage of the VirtualList component, including required props and bindable values for tracking the visible range. It utilizes the slot system to render custom row content for each item in the dataset.

```svelte
<script>
  import VirtualList from '@sveltejs/svelte-virtual-list';
  const data = [];
  let visibleStart = 0;
  let visibleEnd = 0;
</script>

<VirtualList
  items={data}
  height="100%"
  itemHeight={undefined}
  bind:start={visibleStart}
  bind:end={visibleEnd}
  let:item
>
  <div>{item}</div>
</VirtualList>
```

--------------------------------

### Implement VirtualList in Svelte

Source: https://github.com/sveltejs/svelte-virtual-list/blob/master/README.md

Basic usage of the VirtualList component. It accepts an array of items and uses a scoped slot to render each visible item.

```html
<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>
  <p>{item.number}: {item.name}</p>
</VirtualList>
```

--------------------------------

### Render Custom Row Components

Source: https://context7.com/sveltejs/svelte-virtual-list/llms.txt

Shows how to pass item data into a custom Svelte component within the VirtualList scope. This allows for complex UI rendering while maintaining the performance benefits of virtualization.

```svelte
<!-- UserCard.svelte -->
<script>
  export let user;
  export let onSelect;
</script>

<div class="card" on:click={() => onSelect(user)}>
  <img src={user.avatar} alt={user.name} />
  <div class="info">
    <h4>{user.name}</h4>
    <p>{user.email}</p>
    <span class="role">{user.role}</span>
  </div>
</div>

<!-- App.svelte -->
<script>
  import VirtualList from '@sveltejs/svelte-virtual-list';
  import UserCard from './UserCard.svelte';

  const users = Array.from({ length: 5000 }, (_, i) => ({
    id: i,
    name: `User ${i + 1}`,
    email: `user${i + 1}@company.com`,
    avatar: `https://api.dicebear.com/7.x/avatars/svg?seed=${i}`,
    role: ['Admin', 'Editor', 'Viewer'][i % 3]
  }));

  let selectedUser = null;

  function handleSelect(user) {
    selectedUser = user;
  }
</script>

<VirtualList height="600px" items={users} let:item>
  <UserCard user={item} onSelect={handleSelect} />
</VirtualList>
```

--------------------------------

### Optimize rendering with itemHeight

Source: https://context7.com/sveltejs/svelte-virtual-list/llms.txt

Provides a fixed itemHeight prop to improve performance by skipping DOM measurements for lists with uniform row heights.

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

  const ROW_HEIGHT = 48;

  const products = Array.from({ length: 50000 }, (_, i) => ({
    sku: `SKU-${String(i).padStart(6, '0')}`,
    name: `Product ${i + 1}`,
    price: (Math.random() * 100).toFixed(2)
  }));
</script>

<VirtualList
  height="500px"
  items={products}
  itemHeight={ROW_HEIGHT}
  let:item
>
  <div class="product-row" style="height: {ROW_HEIGHT}px;">
    <span class="sku">{item.sku}</span>
    <span class="name">{item.name}</span>
    <span class="price">${item.price}</span>
  </div>
</VirtualList>

<style>
  .product-row {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #ddd;
  }
  .sku { width: 120px; font-family: monospace; }
  .name { flex: 1; }
  .price { width: 80px; text-align: right; }
</style>
```

--------------------------------

### Configure VirtualList container height

Source: https://context7.com/sveltejs/svelte-virtual-list/llms.txt

Shows how to constrain the virtual list container size using the height prop with CSS units like pixels or viewport height.

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

  const users = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' },
    { id: 3, name: 'Charlie', email: 'charlie@example.com' }
  ];
</script>

<VirtualList height="400px" items={users} let:item>
  <div class="user-card">
    <h3>{item.name}</h3>
    <span>{item.email}</span>
  </div>
</VirtualList>

<VirtualList height="50vh" items={users} let:item>
  <div class="user-card">
    <h3>{item.name}</h3>
    <span>{item.email}</span>
  </div>
</VirtualList>
```

--------------------------------

### Configure Component Dimensions

Source: https://github.com/sveltejs/svelte-virtual-list/blob/master/README.md

Customize the VirtualList container height and optimize scrolling performance by providing a fixed item height in pixels.

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

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

--------------------------------

### Handle Variable Height Rows

Source: https://context7.com/sveltejs/svelte-virtual-list/llms.txt

Explains how the VirtualList component automatically measures and adapts to rows with varying heights. This is ideal for content-heavy lists like message feeds where row height is not uniform.

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

  const messages = Array.from({ length: 10000 }, (_, i) => {
    const paragraphs = Math.floor(Math.random() * 4) + 1;
    return {
      id: i,
      sender: `User ${(i % 50) + 1}`,
      content: Array(paragraphs).fill('Lorem ipsum dolor sit amet.').join(' '),
      time: new Date()
    };
  });
</script>

<VirtualList height="500px" items={messages} let:item>
  <article class="message">
    <strong>{item.sender}</strong>
    <p>{item.content}</p>
  </article>
</VirtualList>
```

--------------------------------

### Configure Webpack for Svelte Virtual List

Source: https://context7.com/sveltejs/svelte-virtual-list/llms.txt

This configuration ensures that Webpack correctly resolves Svelte components by prioritizing the 'svelte' main field. It also sets up the svelte-loader to process .svelte files, enabling features like hot reloading and CSS extraction.

```javascript
module.exports = {
  resolve: {
    mainFields: ['svelte', 'browser', 'module', 'main'],
    extensions: ['.mjs', '.js', '.svelte'],
    alias: {
      svelte: path.resolve('node_modules', 'svelte')
    }
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            compilerOptions: {
              dev: !prod
            },
            emitCss: prod,
            hotReload: !prod
          }
        }
      }
    ]
  }
};
```
Tokens:
Raw