Virtualized List

A web component for virtualized lists that render list items from data only while they are in view.

A list that renders list items from an array, only while they are near the viewport, so it scrolls through thousands.

Installation

npm install @3mo/virtualized-list

import '@3mo/virtualized-list'

Usage

<mo-virtualized-list style='height: 500px'
	.data=${Array.from({ length: 1000 }, (_, index) => `Item ${index + 1}`)}
	.getItemTemplate=${(item: string) => html`<mo-list-item>${item}</mo-list-item>`}
></mo-virtualized-list>

Examples

• Selection — Only the items near the viewport are rendered, and they are recycled as it scrolls, so state such as the selection lives outside them - select a few, scroll away and back.

API

mo-virtualized-list

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | data | data | T[] | "new Array<T>()" | The items, one list item each. | | getItemTemplate | getItemTemplate | GetItemTemplate<T> | "(() => html.nothing)" | A function that returns the list item of an item. |

Events

| Name | Detail | Description | | --- | --- | --- | | itemsChange | HTMLElement[] | Dispatched when the list items change |

Slots

| Name | Description | | --- | --- | | (default) | The list items. |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH