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
Nr
Code
Flag
Name
Capital
Region
Subregion
Area
1
2
3
4
5
6
7
8
9
10
11
12
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
| Input | Type | Default | Description |
|---|---|---|---|
| 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. |