svelte-window

Svelte components for efficiently rendering large, scrollable lists and tabular data. Port of react-window to Svelte.

Svelte window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:

1. It reduces the amount of work (and time) required to render the initial view and to process updates.
2. It reduces the memory footprint by avoiding over-allocation of DOM nodes.

Install

1npm install --save-dev svelte-window

Usage

This library is a port of react-window, here are some examples: react-window.now.sh.

This is how to render a basic list:

1<script>
2    import { FixedSizeList as List, styleString as sty } from 'svelte-window';
3</script>
4<List
5height={150}
6itemCount={1000}
7itemSize={35}
8width={300}
9let:items>
10    {#each items as it (it.key)}
11        <div style={sty(it.style)}>Row {it.index}</div>        
12    {/each}
13</List>

Here is another example with a fixed size grid with a scroll-to button, scrolling indicators:

1<script>
2    import { FixedSizeGrid as Grid , styleString as sty} from 'svelte-window';
3 
4    let grid;
5  
6    const click = () => {
7        if (grid){
8            grid.scrollToItem({
9                align: "start",
10                columnIndex: 150,
11                rowIndex: 300
12            });    
13        }
14    }
15
16</script> 
17
18<Grid
19bind:this={grid}
20columnCount={1000}
21columnWidth={100}
22height={150}
23rowCount={1000}
24rowHeight={35}
25width={300}
26useIsScrolling
27let:items
28>
29   {#each items as it (it.key)}
30        <div style={sty(it.style)}>
31            {
32                isScrolling ? 
33                'Scrolling' : 
34                `Row ${rowIndex} - Col ${columnIndex}`
35            }
36        <div>
37    {/each}
38</Grid>
39<button on:click={click}>
40    To row 300, column 150
41</button>

Differences to the React library

1. Grids and lists don't actively render the children. Instead, an array of item information is passed down via item props. You can use the let:item to access it and render with the each block.
2. Styles are passed down as objects, like in the React library, but Svelte only accepts strings for style. A helper function styleString is exported from svelte-window, to convert the style object to string
3. Variable sized variants have utilities to reset the cache, when row/cell sizes change. These are not directly added to the class, but to a member called instance. Eg. instead of

1list.resetAfterIndex(...)

use

1list.instance.resetAfterIndex(...)

Affected functions:

VariableSizeList:

• resetAfterIndex

VariableSizeGrid:

• resetAfterIndices
• resetAfterColumnIndex
• resetAfterRowIndex

Related libraries

• svelte-virtualized-auto-sizer: HOC that grows to fit all of the available space and passes the width and height values to its child.

More information

Here is a blog post about how the library was ported from React to Svelte.