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. |