td-paging-bar
td-paging-bar
element generates a paging bar.
The (change)
event throws an event with the following interface:
export interface IPageChangeEvent {
page: number;
maxPage: number;
pageSize: number;
total: number;
fromRow: number;
toRow: number;
}
API Summary
Properties:
Name | Type | Description |
---|---|---|
pageSizes? |
number[] |
Array that populates page size menu. Defaults to [50, 100, 200, 500, 1000]. |
pageSize? |
number |
Selected page size for the pagination. Defaults to first element of the [pageSizes] array. |
firstLast? |
boolean |
Shows or hides the first and last page buttons of the paging bar. Defaults to 'false' |
pageSizeAll? |
boolean |
Shows or hides the 'all' menu item in the page size menu. Defaults to 'false' |
total |
number |
Total rows for the pagination. |
change |
function($event: IPageChangeEvent) |
Method to be executed when page size changes or any button is clicked in the paging bar. |
navigateToPage |
function(page: number): boolean |
Navigates to a specific valid page. Returns 'true' if page is valid, else 'false'. |
Setup
Import the [CovalentPagingModule] using the forRoot() method in your NgModule:
import { CovalentPagingModule } from '@covalent/paging';
@NgModule({
imports: [
CovalentPagingModule.forRoot(),
...
],
...
})
export class MyModule {}
Usage
Example for HTML usage:
<td-paging-bar [firstLast]="true|false" [pageSizeAll]="true|false" [pageSizes]="[100,200,500,1000,2000]" [pageSize]="100" [total]="1345" (change)="change($event)">
</td-paging-bar>