Usage no npm install needed!

<script type="module">
  import xtalVlist from 'https://cdn.skypack.dev/xtal-vlist';
</script>

README

xtal-vlist

xtal-vlist provides a declarative "infinite scrolling" virtual list web component.

Demo

It is a web component wrapper around this library.

Example

<xtal-vlist id="vlist"
    row-transform='{
        "span": "."
    }'
>
    <div slot=row>
        <span></span>
    </div>
</xtal-vlist>
<script>
    const list = [];
    for (let i = 0; i < 100000; i++) {
        list.push(i);
    }
    vlist.list = list;
</script>

The row-transform syntax is based on css-like Declarative Trans-Render syntax (DTR).

Installation

npm instal xtal-vlist
1. In JS, import 'xtal-vlist/xtal-vlist.js';

jsDelivr

<script type=module>
    import 'https://esm.run/xtal-vlist/xtal-vlist.js';
</script>

Viewing Your Element Locally

$ npm install
$ npm run serve