# xtal-vlist

> xtal-vlist provides a declarative virtual list web component

Latest version **0.0.89** (published 2022-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install xtal-vlist
pnpm add xtal-vlist
yarn add xtal-vlist
bun add xtal-vlist
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.89 |
| Published | 2022-10-19 |
| First published | 2019-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 458.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | bahrus |
| Keywords | web components, web component, custom elements, custom element |

## Links

- npm: https://www.npmjs.com/package/xtal-vlist
- Repository: https://github.com/bahrus/xtal-vlist
- Homepage: https://github.com/bahrus/xtal-vlist#readme
- Issues: https://github.com/bahrus/xtal-vlist/issues
- npm.io page: https://npm.io/package/xtal-vlist

## Dependencies (6)

- [be-lazy](https://npm.io/package/be-lazy.md) 0.0.25
- [be-oosoom](https://npm.io/package/be-oosoom.md) 0.0.9
- [be-repeated](https://npm.io/package/be-repeated.md) 0.0.97
- [be-deslotted](https://npm.io/package/be-deslotted.md) 0.0.41
- [trans-render](https://npm.io/package/trans-render.md) 0.0.628
- [xtal-element](https://npm.io/package/xtal-element.md) 0.0.531

## Recent versions

- 0.0.89 (latest) — 2022-10-19
- 0.0.88 — 2022-10-16
- 0.0.87 — 2022-09-07
- 0.0.86 — 2022-09-04
- 0.0.85 — 2022-09-04
- 0.0.84 — 2022-09-03
- 0.0.83 — 2022-09-03
- 0.0.82 — 2022-09-03
- 0.0.81 — 2022-09-03
- 0.0.80 — 2022-09-03
- 0.0.79 — 2022-09-03
- 0.0.78 — 2022-09-01
- 0.0.77 — 2022-08-28
- 0.0.76 — 2022-08-28
- 0.0.75 — 2022-08-24
- … 75 more at https://npm.io/package/xtal-vlist/versions

## README

# xtal-vlist

<a href="https://nodei.co/npm/xtal-vlist/"><img src="https://nodei.co/npm/xtal-vlist.png"></a>

<img src="https://badgen.net/bundlephobia/minzip/xtal-vlist">

[![Actions Status](https://github.com/bahrus/xtal-vlist/workflows/CI/badge.svg)](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
<xtal-vlist ...
  row-intersectional-settings='{
    "rootClosest": ".scroller",
    "options": {
        "rootMargin": "300px",
        "threshold": 0
    }
}'>
 ...
</xtal-vlist>
```

## [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
<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)](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
<script type=module>
    import 'https://esm.run/xtal-vlist/xtal-vlist.js';
</script>
```


## Viewing Your Element Locally

```
$ npm install
$ npm run serve
```

---
_Source: https://npm.io/package/xtal-vlist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._