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>

Virtual scroll - 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:

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