Pagination
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
}
Features:
- 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:
10
1 - 10 of 50
Index
Character
Real name
Abilities
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);
}
}
Pagination - Inputs
Input | Type | Default | Description |
---|---|---|---|
enabled | boolean | false | Turn on / off paging. |
page | number | 1 | Starting page |
pageSize | number | 10 | Starting page size |
pageSizes?: Array<number>; | Array<number> | [10, 25, 50] | Page sizes used in paging |
pagerTop | boolean | false | Shows pager at the top of grid. |
pagerBottom | boolean | true | Shows pager at the bottom of grid. |
display | GuiPagingDisplay | GuiPagingDisplay.BASIC | Switches between two paging views: BASIC and ADVANCED |
Pagination - Outputs
Output | Type | Description |
---|---|---|
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. |