svelte-virtual

About

Svelte components for efficiently rendering large lists. Instead of rendering all your data, svelte-virtual renders only what's visible

Installation

With npm:

npm i -D svelte-virtual@next

With yarn:

yarn add -D svelte-virtual@next

With pnpm:

pnpm add -D svelte-virtual@next

Usage

Vertical List [default] (demo)

<script>
    import { List } from "svelte-virtual";

    let items = [...Array(100000).keys()];
</script>

<List itemCount={items.length} itemSize={20} height={500}>
    {#snippet item({ index, style })}
        <div {style}>
            {items[index]}
        </div>
    {/snippet}
</List>

Horizontal List (demo)

<script>
    import { List } from "svelte-virtual";

    let items = [...Array(100000).keys()];
</script>

<List itemCount={items.length} itemSize={60} height={40} layout="horizontal">
    {#snippet item({ index, style })}
        <div {style}>
            {items[index]}
        </div>
    {/snippet}
</List>

Grid (demo)

<script>
    import { Grid } from "svelte-virtual";

    let items = [...Array(100000).keys()];
</script>

<Grid itemCount={items.length} itemHeight={50} itemWidth={60} height={500}>
    {#snippet item({ index, style })}
        <div {style}>
            {items[index]}
        </div>
    {/snippet}
</Grid>

Grid [using rows and columns] (demo)

<script>
    import { Grid } from "svelte-virtual";

    let itemCount = 100000;
    let columnCount = 5;

    let items = Array.from({ length: itemCount }, (_, l) =>
        Array.from({ length: columnCount }, (_, c) => `${l}-${c}`),
    );
</script>

<Grid itemCount={itemCount * columnCount} itemHeight={50} itemWidth={65} height={500} {columnCount}>
    {#snippet item({ rowIndex, columnIndex, style })}
        <div {style}>
            {items[rowIndex][columnIndex]}
        </div>
    {/snippet}
</Grid>

Props

List

Grid

Methods (demo)

Snippets

• item - Snippet for each item
  • Props:
    • Shared:
      • index: number - Item index
      • style: string - Item style must be applied to the first child element of the snippet (look above for example)
    • Only for <Grid/> (demo):
      • rowIndex: number - Item row index
      • columnIndex: number - Item column index
• placeholder (optional) - Snippet for each item (when scrolling fast, replaces item snippet. if not present, item snippet is used)
  • Props:
    • Shared:
      • index: number - Item index
      • style: string - Item style must be applied to the first child element of the snippet (look above for example)
    • Only for <Grid/> (demo):
      • rowIndex: number - Item row index
      • columnIndex: number - Item column index
• header (optional) - Snippet for the elements that should appear at the top of the component
• footer (optional) - Snippet for the elements that should appear at the bottom of the component

License

MIT