ng2-infinity-grid

An implementation of infinity grid at Angular2 [4.x compatible].

Demo

This is a demo

Description

The solution based on virtual scroll technique and use most large possible height value of html element.

Installation

First you need to install the npm module:

npm install ng2-infinity-grid --save

Usage

<button type="button" (click)="loadData()">Load</button>&nbsp;
<button type="button" (click)="clearData()">Clear</button>
...
<InfinityGrid [pageData]="pageData"
              [preventLoadPageAfterViewInit]="true"
              (fetchPage)="onFetchPage($event)">
</InfinityGrid>

import {
	InfinityPage,
	InfinityPageData,
} from "ng2-infinity-grid/index";

@Component({...})
export class HomeComponent {

	private dataProvider: DataProvider;
	private pageData: InfinityPageData<string>;

	constructor() {
		this.dataProvider = new DataProvider();  // Inject your data provider here
	}

	private clearData() {
		// Case #1 - initial state
		// Flux action should be started here. Local pageData object should be updated during Flux-lifecycle
		this.pageData = null;
	}

	private loadData() {
		// Case #2
		// Flux action should be started here. Local pageData object should be updated during Flux-lifecycle
		this.pageData = {};
	}

	private onFetchPage(page: InfinityPage) {
		// Case #3
		// Flux action should be started here. Local pageData object should be updated during Flux-lifecycle
		// When long asynchronous request has been started so we should show loading rows in grid
		this.pageData = {
			startIndex: page.startIndex,
			endIndex: page.endIndex
		};

		if (!page.isReady) {
			this.dataProvider.fetch(page)
				.then((pageData: InfinityPageData<string>) => {
					if (pageData.startIndex === this.pageData.startIndex) {

						// Case #4
						// The promise is not cancellable [https://github.com/tc39/proposal-cancelable-promises]
						// We should check the current index
						this.pageData = pageData;
					}
				});
		}
	}
}

class DataProvider {

	private buffer: string[] = [];

	constructor() {
		for (let i = 0; i < 1000000; i++) {
			this.buffer[i] = 'test-' + i;
		}
	}

	public fetch(page: InfinityPage): Promise<InfinityPageData<string>> {
		return new Promise<InfinityPageData<string>>((resolve) => {
			setTimeout(() => {
				resolve({
					startIndex: page.startIndex,
					rawData: this.buffer.slice(page.startIndex, page.endIndex + 1),
					totalLength: this.buffer.length
				});
			}, 1000);
		});
	}
}

Publish

npm run deploy

License

Licensed under MIT.