Pagination divides Grid content into pages. It is generated when paging input is set to true, or by setting up paging config.

interface GuiPaging {

	enabled?: boolean;

	page?: number;

	pageSize?: number;

	pageSizes?: Array<number>;

	pagerTop?: boolean;

	pagerBottom?: boolean;

	display?: GuiPagingDisplay



  • Creates previous and next buttons
  • Indicates number of items on the page
  • Creates a page size selector
  • Lets you choose a starting page
  • Generates paging at the top and / or at the bottom of the grid
  • Two options for paging display
Change paging display:
Items per page:
1 - 10 of 50
Real name
import { Component, OnInit } from '@angular/core';

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

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

	selector: 'paging-example',
	template: `
		<gui-grid [columns]="columns"
	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() {
			.subscribe(heroes => this.source = heroes);


Pagination - Inputs

enabled boolean false Turn on / off paging.
page number1 Starting page
pageSize number10 Starting page size
pageSizes?: Array<number>; Array<number>[10, 25, 50] Page sizes used in paging
pagerTop booleanfalse Shows pager at the top of grid.
pagerBottom booleantrue Shows pager at the bottom of grid.
display GuiPagingDisplayGuiPagingDisplay.BASIC Switches between two paging views: BASIC and ADVANCED

Pagination - Outputs

pageChanged number When selected page changes, grid emits value of currently selected page.
pageSizeChanged number When pageSize changes, grid emits value of currently selected pageSize.

Related articles: