Pagination

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

import { GuiColumn, GuiPaging } from '@generic-ui/ngx-grid';

import { PagingExampleService } from './dc-data.service';

@Component({
	selector: 'paging-example',
	template: `
		<gui-grid [columns]="columns"
				  [source]="source"
				  [paging]="paging">
		</gui-grid>
	`,
	providers: [PagingExampleService]
})
export class PagingExampleComponent implements OnInit {

	columns: Array<GuiColumn> = [{
		header: 'Index',
		field: 'index',
		width: 60
	}, {
		header: 'Character',
		field: 'character'
	}, {
		header: 'Real name',
		field: 'name'
	}, {
		header: 'Abilities',
		field: 'abilities'
	}];

	source: Array<any>;

	paging: GuiPaging = {
		enabled: true,
		page: 1,
		pageSize: 10,
		pageSizes: [10, 25, 50],
		pagerTop: true,
		pagerBottom: true,
		display: GuiPagingDisplay.BASIC
	};

	constructor(private dcDataService: PagingExampleService) {
	}

	ngOnInit() {
		this.dcDataService.getHeroes()
			.subscribe(heroes => this.source = heroes);
	}

}