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๐Ÿ‡ฆ๐Ÿ‡ผArubaOranjestadAmericasCaribbean180 2 AF๐Ÿ‡ฆ๐Ÿ‡ซAfghanistanKabulAsiaSouthern Asia652230 3 AO๐Ÿ‡ฆ๐Ÿ‡ดAngolaLuandaAfricaMiddle Africa1246700 4 AI๐Ÿ‡ฆ๐Ÿ‡ฎAnguillaThe ValleyAmericasCaribbean91 5 AX๐Ÿ‡ฆ๐Ÿ‡ฝร…land IslandsMariehamnEuropeNorthern Europe1580 6 AL๐Ÿ‡ฆ๐Ÿ‡ฑAlbaniaTiranaEuropeSouthern Europe28748 7 AD๐Ÿ‡ฆ๐Ÿ‡ฉAndorraAndorra la VellaEuropeSouthern Europe468 8 AE๐Ÿ‡ฆ๐Ÿ‡ชUnited Arab EmiratesAbu DhabiAsiaWestern Asia83600 9 AR๐Ÿ‡ฆ๐Ÿ‡ทArgentinaBuenos AiresAmericasSouth America2780400 10 AM๐Ÿ‡ฆ๐Ÿ‡ฒArmeniaYerevanAsiaWestern Asia29743 11 AS๐Ÿ‡ฆ๐Ÿ‡ธAmerican SamoaPago PagoOceaniaPolynesia199
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.