Newton's Principia Mathematica
    Wondering what’s next for npm?Check out our public roadmap! »

    @deboxsoft/svelte-window
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

    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.

    NPM license

    Install

    npm 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:

    <script>
        import { FixedSizeList as List, styleString as sty } from 'svelte-window';
    </script>
    <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
    let:items>
        {#each items as it (it.key)}
            <div style={sty(it.style)}>Row {it.index}</div>        
        {/each}
    </List>

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

    <script>
        import { FixedSizeGrid as Grid , styleString as sty} from 'svelte-window';
     
        let grid;
      
        const click = () => {
            if (grid){
                grid.scrollToItem({
                    align: "start",
                    columnIndex: 150,
                    rowIndex: 300
                });    
            }
        }
    
    </script> 
    
    <Grid
    bind:this={grid}
    columnCount={1000}
    columnWidth={100}
    height={150}
    rowCount={1000}
    rowHeight={35}
    width={300}
    useIsScrolling
    let:items
    >
       {#each items as it (it.key)}
            <div style={sty(it.style)}>
                {
                    isScrolling ? 
                    'Scrolling' : 
                    `Row ${rowIndex} - Col ${columnIndex}`
                }
            <div>
        {/each}
    </Grid>
    <button on:click={click}>
        To row 300, column 150
    </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
    list.resetAfterIndex(...)

    use

    list.instance.resetAfterIndex(...)

    Affected functions:

    VariableSizeList:

    • resetAfterIndex

    VariableSizeGrid:

    • resetAfterIndices
    • resetAfterColumnIndex
    • resetAfterRowIndex

    Related libraries

    More information

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

    Install

    npm i @deboxsoft/svelte-window

    DownloadsWeekly Downloads

    26

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    108 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar