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 13 TF ๐Ÿ‡น๐Ÿ‡ซ French Southern and Antarctic Lands Port-aux-Franรงais Antarctic 7747 14 AG ๐Ÿ‡ฆ๐Ÿ‡ฌ Antigua and Barbuda Saint John's Americas Caribbean 442 15 AU ๐Ÿ‡ฆ๐Ÿ‡บ Australia Canberra Oceania Australia and New Zealand 7692024

Showing 250 items

Info

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

InputDescription
virtualScroll: boolean 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:

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.