bahrus / xtal-vlist

Virtual List Library for Web Components

xtal-vlist

Current Status

The current functionality of xtal-vlist is being transplanted over to laissez-list, as that is a better description of what it does currently.

Another attempt may be made in the future to restore true virtual list functionality to xtal-vlist.

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

Demo 1 -- Simple

Demo 2 -- Tree View

Note that for Demo 2, if you click expand all, and enable Chrome's Web Vitals dev tool (under rendering tab), there is no Cumulative Layout Shift.

This is done by utilizing the intersectional settings:

<xtal-vlist ...
  row-intersectional-settings='{
    "rootClosest": ".scroller",
    "options": {
        "rootMargin": "300px",
        "threshold": 0
    }
}'>
 ...
</xtal-vlist>

API

Example

<xtal-vlist style="height:600px;width:100%;" id="vlist"
    row-transform='{
        "span": "."
    }'
>
    <template slot=row>
        <div>
            <span></span>
        </div>
    </template>
</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

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

or

2. jsDelivr

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

Viewing Your Element Locally

$ npm install
$ npm run serve