https://github.com/bahrus/xtal-vlist
Virtual List Library for Web Components
https://github.com/bahrus/xtal-vlist
Last synced: about 2 months ago
JSON representation
Virtual List Library for Web Components
- Host: GitHub
- URL: https://github.com/bahrus/xtal-vlist
- Owner: bahrus
- License: mit
- Created: 2019-06-02T13:51:56.000Z (almost 6 years ago)
- Default Branch: baseline
- Last Pushed: 2023-05-01T06:35:08.000Z (about 2 years ago)
- Last Synced: 2025-03-26T08:51:39.102Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.11 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
[](https://github.com/bahrus/xtal-vlist/actions?query=workflow%3ACI)
xtal-vlist provides a declarative "infinite scrolling" virtual list web component.
[Demo 1 -- Simple](https://codepen.io/bahrus/pen/yLPjMER)
[Demo 2 -- Tree View](https://codepen.io/bahrus/pen/GROLwBV)
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:
```html
...
```
## [API](https://cf-sw.bahrus.workers.dev/?href=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fxtal-vlist%2Fcustom-elements.json&stylesheet=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwc-info%2Fsimple-ce-style.css&embedded=false&tags=&ts=2022-03-05T11%3A08%3A36.018Z&tocXSLT=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwc-info%2Ftoc.xsl)
## Example
```html
const list = [];
for (let i = 0; i < 100000; i++) {
list.push(i);
}
vlist.list = list;
```
The row-transform syntax is based on css-like [Declarative Trans-Render syntax (DTR)](https://github.com/bahrus/trans-render#declarative-trans-render-syntax-via-plugins).
## Installation
1. npm instal xtal-vlist
1. In JS, import 'xtal-vlist/xtal-vlist.js';
or
2. jsDelivr
```html
import 'https://esm.run/xtal-vlist/xtal-vlist.js';
```
## Viewing Your Element Locally
```
$ npm install
$ npm run serve
```