Back

Big data example

This example demonstrates how Generic UI grid handles big sets of data. The 'Data size' select element lets you change the source size. Just click on it and it will generate selected data size and put it in the grid. The grid can be as big as 1 000 000 entries.

It is all possible because of, virtualScroll input, which is enabled in this example. It makes the grid run smoothly without loss of the performance, even with massive data in it. You can learn more about virtual scroll in our guide section.

The source code at the bottom of this page portraits how easy is to construct the grid and enable virtualScrolling function.



Data size:
5 000

Source code

Below you can look at the source code of big data example. Keep in mind, that in order for virtual scroll to works the grid has to have fixed height.

app.component.html
app.component.ts
<div class="gw-example-bigdata">

	<div class="gw-example-bigdata-data-size">
		Data size:
		<gui-select
			[options]="sizeOptions"
			[selected]="selectedSize"
			(optionChanged)="sizeSelected($event)">
		</gui-select>
	</div>

	<gui-grid [virtualScroll]="true"
			  [maxHeight]="600"
			  [sorting]="true"
			  [columns]="columns"
			  [source]="source"
			  [infoPanel]="true">
	</gui-grid>
</div>

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';

import { GuiColumn, GuiDataType } from '@generic-ui/ngx-grid';
import { take } from 'rxjs/operators';

import { BigDataGenerator } from '../big-data.generator';

@Component({
	selector: 'gw-example-bigdata-grid',
	templateUrl: './example-bigdata-grid.component.html',
	styleUrls: ['./example-bigdata-grid.component.css']
})
export class ExampleBigdataGridComponent implements OnInit {

	columns: Array<GuiColumn> = [{
		header: 'Index',
		field: 'index',
		type: GuiDataType.NUMBER,
		width: 75
	}, {
		header: 'First Name',
		field: 'first',
		type: GuiDataType.STRING
	}, {
		header: 'Last Name',
		field: 'last',
		type: GuiDataType.STRING
	}, {
		header: 'Country',
		field: (item: any) => item.country.name,
		type: GuiDataType.STRING
	}, {
		header: 'Positions',
		field: 'position',
		type: GuiDataType.STRING,
		view: GuiCellView.ITALIC
	}, {
		header: 'Experience (years)',
		field: 'yearsOfExp',
		type: GuiDataType.NUMBER,
		width: 70
	}, {
		header: 'Company',
		field: 'company',
		type: GuiDataType.STRING
	}];

	source = [];

	sizeOptions: Array<string> = ['5 000', '25 000', '50 000', '100 000', '200 000', '1 000 000'];

	selectedSize: number = this.sizeOptions[0];

	constructor(private bigDataGenerator: BigDataGenerator,
				private changeDetectorRef: ChangeDetectorRef) {
	}

	ngOnInit() {
		this.generateSource(this.selectedSize);
	}

	generateSource(selectedSize: string): void {

		const size = +(selectedSize.split(' ').join(''));

		this.bigDataGenerator
			.generateData(size)
			.pipe(
				take(1)
			)
			.subscribe((source) => {
				this.source = source;
				this.changeDetectorRef.detectChanges();
			});
	}

	sizeSelected(selectedSize: string): void {
		this.generateSource(selectedSize);
	}
}