!ci

aurelia-ui-virtualization

This library is part of the Aurelia platform and contains a plugin that provides a virtualized repeater and other virtualization services. This plugin enables "virtualization" of list through a new virtual-repeat.for. When used, the list "virtually" as tens or hundreds of thousands of rows, but the DOM only actually has rows for what is visible. It could be only tens of items. This allows rendering of massive lists of data with amazing performance. It works like repeat.for, it just creates a scrolling area and manages the list using UI virtualization techniques.

> To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter. If you have questions look around our Discourse forums, chat in our community on Discord or use stack overflow. Documentation can be found in our developer hub.

Installation

Install via npm

``javascript
npm install aurelia-ui-virtualization
`

Load the plugin

`javascript
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-ui-virtualization'); // Add this line to load the plugin

aurelia.start().then(a => a.setRoot());
}
`

Use the plugin

Simply bind an array to virtual-repeat like you would with the standard repeat. The repeated rows need to have equal height throughout the list, and one items per row.

#### div
`html

`

#### unordered list
`html

`

#### table
`html

`

`javascript
export class MyVirtualList {
items = ['Foo', 'Bar', 'Baz'];
}
`

With a surrounding fixed height container with overflow scroll. Note that overflow: scroll styling is inlined on the elemenet. It can also be applied from CSS.

`html

`

If you are running the plugin in the skeleton-naviagion project, make sure to remove overflow-x: hidden; and overflow-y: auto; from .page-host in styles.css.

#### infinite scroll
`html

`
`javascript
export class MyVirtualList {
items = ['Foo', 'Bar', 'Baz'];
getMore(topIndex, isAtBottom, isAtTop) {
for(let i = 0; i < 100; ++i) {
this.items.push('item' + i);
}
}
}
`

Or to use an expression, use .call as shown below.
`html

`
`javascript
export class MyVirtualList {
items = ['Foo', 'Bar', 'Baz'];
getMore(scrollContext) {
for(let i = 0; i < 100; ++i) {
this.items.push('item' + i);
}
}
}
`

The infinite-scroll-next attribute can accept a function, a promise, or a function that returns a promise.
The bound function will be called when the scroll container has reached a point where there are no more items to move into the DOM (i.e. when it reaches the end of a list, either from the top or the bottom).

There are three parameters that are passed to the function (getMore(topIndex, isAtBottom, isAtTop)) which helps determine the behavior or amount of items to get during scrolling.
1. topIndex - A integer value that represents the current item that exists at the top of the rendered items in the DOM.
2. isAtBottom - A boolean value that indicates whether the list has been scrolled to the bottom of the items list.
3. isAtTop - A boolean value that indicates whether the list has been scrolled to the top of the items list.

Caveats

1.