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@next";

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

<List itemCount={items.length} itemSize={20} height={500}>
    <div slot="item" let:index let:style {style}>
        {items[index]}
    </div>
</List>

Horizontal List (demo)

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

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

<List itemCount={items.length} itemSize={60} height={40} layout="horizontal">
    <div slot="item" let:index let:style {style}>
        {items[index]}
    </div>
</List>

Grid (demo)

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

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

<Grid itemCount={items.length} itemHeight={50} itemWidth={60} height={500}>
    <div slot="item" let:index let:style {style}>
        {items[index]}
    </div>
</Grid>

Grid [using rows and columns] (demo)

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

    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}>
    <div slot="item" let:rowIndex let:columnIndex let:style {style}>
        {items[rowIndex][columnIndex]}
    </div>
</Grid>

Props

List

Grid

Methods (demo)

Slots

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

License

MIT