Virtual scroll

Virtual scroll makes it possible to display large quantities of entries without, without any performance issues. Virtual scroll renders only the items visible inside gui-grid boundaries. Therefor, the browser does not have to load all the items at once. This feature is also often called infinite scroll or view port rendering.

Virtual scroll will only work, if the grid has fixed height. Both functions can be set by adding inputs to the gui-grid settings, see the app.component.html code example.

Grid handles huge data sets like 1 million records without any performance issues. You can check it in this example Angular Grid Performance example

Example
app.component.ts
app.component.html
Nr
Code
Flag
Name
Capital
Region
Subregion
Area
1
AW
๐Ÿ‡ฆ๐Ÿ‡ผ
Aruba
Oranjestad
Americas
Caribbean
180
2
AF
๐Ÿ‡ฆ๐Ÿ‡ซ
Afghanistan
Kabul
Asia
Southern Asia
652230
3
AO
๐Ÿ‡ฆ๐Ÿ‡ด
Angola
Luanda
Africa
Middle Africa
1246700
4
AI
๐Ÿ‡ฆ๐Ÿ‡ฎ
Anguilla
The Valley
Americas
Caribbean
91
5
AX
๐Ÿ‡ฆ๐Ÿ‡ฝ
ร…land Islands
Mariehamn
Europe
Northern Europe
1580
6
AL
๐Ÿ‡ฆ๐Ÿ‡ฑ
Albania
Tirana
Europe
Southern Europe
28748
7
AD
๐Ÿ‡ฆ๐Ÿ‡ฉ
Andorra
Andorra la Vella
Europe
Southern Europe
468
8
AE
๐Ÿ‡ฆ๐Ÿ‡ช
United Arab Emirates
Abu Dhabi
Asia
Western Asia
83600
9
AR
๐Ÿ‡ฆ๐Ÿ‡ท
Argentina
Buenos Aires
Americas
South America
2780400
10
AM
๐Ÿ‡ฆ๐Ÿ‡ฒ
Armenia
Yerevan
Asia
Western Asia
29743
11
AS
๐Ÿ‡ฆ๐Ÿ‡ธ
American Samoa
Pago Pago
Oceania
Polynesia
199
12
AQ
๐Ÿ‡ฆ๐Ÿ‡ถ
Antarctica
Antarctic
14000000
Showing 250 items
import { Component } from '@angular/core';

import { GuiColumn, GuiCellView } from '@generic-ui/ngx-grid';

import { CountriesResource } from './data/countries.resource';


@Component({
	selector: 'virtual-scroll-example',
	templateUrl: './virtual-scroll-example.component.html',
	providers: [CountriesResource]
})
export class VirtualScrollExampleComponent {

	columns: Array<GuiColumn> = [{
		header: 'Nr',
		field: 'index',
		width: 25,
		type: GuiDataType.NUMBER
	}, {
		header: 'Code',
		field: 'cca2',
		width: 45
	}, {
		header: 'Flag',
		field: 'flag',
		width: 45
	}, {
		header: 'Name',
		field: (country: any) => country.name.common
	}, {
		header: 'Capital',
		field: 'capital'
	}, {
		header: 'Region',
		width: 80,
		field: 'region'
	}, {
		header: 'Subregion',
		field: 'subregion'
	}, {
		header: 'Area',
		field: 'area'
	}];

	source = this.countriesResource.getCountries();

	constructor(private countriesResource: CountriesResource) {
	}

}
<gui-grid 
	[virtualScroll]="true"
	[maxHeight]="400"
	[columns]="columns"
	[infoPanel]="true"
	[source]="source"> 
</gui-grid>

Inputs

InputTypeDefaultDescription
virtualScroll boolean false Enables virtual scrolling, when set to 'true'.
maxHeight number - Sets max height of gui-grid. This input is required for virtual scroll to work.

Related articles: