Pagination

Data can be paginated withing the table to avoid rendering all the data rows in a single view. Use of pagination will improve the client side performance.

The Pagination controls are displayed in the table footer section.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
60WebGolf ShopPersonal AccessoriesEyewear129351990.39374952
65WebGolf ShopPersonal AccessoriesKnives866.2710.59836066
70TelephoneGolf ShopGolf EquipmentIrons16025.28320.44535634
75WebGolf ShopGolf EquipmentWoods53082.54620.44845066
80MailGolf ShopGolf EquipmentGolf Accessories5911.054920.50059634
85WebDepartment StoreCamping EquipmentCooking Gear21434.7361340.75675458
90WebDepartment StoreCamping EquipmentCooking Gear11394.396090.46552646
95MailDepartment StoreCamping EquipmentSleeping Bags50892.686010.29145017
100MailDepartment StoreCamping EquipmentSleeping Bags150163.0915290.33560737
105TelephoneDepartment StoreCamping EquipmentPacks26806.923880.40396584
Results: 11-20of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-pagination-usage',
  templateUrl: './pagination-usage.component.html'
})
export class PaginationUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}

Basic Usage

Depends on offset (starting index value) and limit values Pagination can be enable by binding true into pageable property.

  <ng-data-table
    ...
    [pageable]="true">
  </ng-data-table>  

In default, pageable property is configured to false therefore, data table doesn't paginate it’s contents, even pageable depended properties are defined. Those properties will be discuss on next section.

Useful Properties

There are other useful additional properties where the behaviour of the pagination controls can be controlled. These properties are applicable in global level of data table configuration when pageable is enabled.

Page

page: number  
Default Value: 1

Using the page property user can define the page number which the table should display/focus by default. From the declared ‘page’ users can paginate into different data views with in the declared page Limit. It is recommended not to set offset explicitly if the ‘page’ property is in use.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
60WebGolf ShopPersonal AccessoriesEyewear129351990.39374952
65WebGolf ShopPersonal AccessoriesKnives866.2710.59836066
70TelephoneGolf ShopGolf EquipmentIrons16025.28320.44535634
75WebGolf ShopGolf EquipmentWoods53082.54620.44845066
80MailGolf ShopGolf EquipmentGolf Accessories5911.054920.50059634
85WebDepartment StoreCamping EquipmentCooking Gear21434.7361340.75675458
90WebDepartment StoreCamping EquipmentCooking Gear11394.396090.46552646
95MailDepartment StoreCamping EquipmentSleeping Bags50892.686010.29145017
100MailDepartment StoreCamping EquipmentSleeping Bags150163.0915290.33560737
105TelephoneDepartment StoreCamping EquipmentPacks26806.923880.40396584
Results: 11-20of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-page-usage',
  templateUrl: './page-usage.component.html'
})
export class PageUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}

Limit

limit: number  
Default Value: 10

Using the limit property user can define how many rows should be displayed per page. If the limit property has not been provided, default value will be applied.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of20
/ 4
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-limit-usage',
  templateUrl: './limit-usage.component.html'
})
export class LimitUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}
Translations
No Records Template
Column Filtering
API Doc for Data Table Pagination