Server side pagination using NG Prime data table in Angular
By: Coding In Depth
Tags: Datatables, Angular, Server Side Rendering, Pagination, Primeng

Most of the project in web technology stack uses client side pagination. In most of the Angular, React portal application uses client side pagination, filter and sorting. Meaning one call and get all the data on the client side and then play around with the data. However there are many scenarios where data are in millions and beyond. In these scenarios getting a local copy of data is very expensive. Current clouds giants i.e. AWS, Azure charges data based on the number of hits, records and data volumes. So creating local copy is expensive in terms of server side implementations.

From Graphical user interface(GUI) prospective it is very difficult to manage large data with millions of rows. It may hang browser or consume much resource. This will lead to slowness and less responsive user interface.

NG prime provides very good user interface. It provide both client side responsive data table as well as server side responsive data tables. Scope of this article is to implement server side data. Well client side data table is pretty straight forward.

Install dependencies:

npm i primeng

Check the package.json file for prime ng components are installed properly or not.

Now construct the interface in product.ts file. Product interface contains id, product name, code, description of product and start rating. Now in product.ts put some dummy data of array of product list. I am hard coding the product details however we can replace same code with API or with ngmocks. NGMock provided to fake API calls.

2. Now define the p-table html in component template. Set [value]=”productList”, for every API calls productList will be updated. Now to enable server side pagination set lazy attribute to true. Once lazy attribute is set to true enable callback onLazyLoad which is set to nextPage with $event as parameter. $event consist of following properties:

event.first = First row offset event.rows = Number of rows per page event.sortField = Field name to sort with event.sortOrder = Sort order as number, 1 for asc and -1 for dec filters: FilterMetadata object having field as key and filter value, filter matchMode as value

The other attributes are straight forward i.e. rows number of rows per page. loading is boolean value to set loading true and false. Now loop the columns using ngFor. columns must be defined in component.ts file. Check component.ts file for more details.

3. In component declare dataSource and Product of type Product array. totalRecords as nu,ber, columns any array. Now call initializeDT method in ngOninit.

In intializeDT initialize columns, total number of records. Once component loads it render initial skeleton of the page including header as well as data. It looks similar to below screen

Once clicked next, filter or sorting method nextPage will be called. Below is next page in action call:

4. Caveat of using column in loop is if you want to show header with some image you cannot do it. For that purpose define columns in th in html. Below is the example:

<ng-template pTemplate=”header”>

<tr>

<th>Product ID <i class="fa fa-id-card" aria-hidden="true"></i> </th>

<th>Product Name</th>

<th>Description</th>

<th>Ratings</th>

</tr>

</ng-template>

In case you want to implement checkboxes in header and select All features. you may design column like this:

<input type=”checkbox” [checked]=”selectAll” (change)=”selectAll = !selectAll”> <label class=”form-check-label” for=”selectAll”> <span class=”fa fa-exclamation-triangle” style=”color:#FF4E00;”></span></label> </th>

5. You can customize filter also. Once filter is applied nextPage(event: LazyLoadEvent) is called. nextPage accept event as parameter and it will have event.filter object. I used bunch of filter I am giving snippet here.

<tr> <th> </th> <th> <input pInputText type="text" placeholder="Contains" style="width: 100%;[(ngModel)]="productName" (focusout)="focusOutFunction(productName)"> </th> <th> <p-dropdown [options]="starRating" [showClear]="true" [style]="{'width':'100%'}" placeholder="Select Product Status" (onChange)="dt.filter($event.value, col.value, 'equals')"> <ng-template let-item pTemplate="selectedItem"> {{item.label}} </ng-template> <ng-template let-tnStatus pTemplate="item"> {{starRating.label}} <div class="ui-helper-clearfix" style="position: relative;height: 25px;"> {{starRating.label}} <div style="font-size:14px;float:right;margin-top:4px">{{starRating.label}}</div> </div> </ng-template> </p-dropdown> </th> <th> </th> <th> </th> </tr>

and define the starRating array in component. Star rating array should contain label and value to render as template.

Wrapping up quickly: We have covered server side pagination using ngPrime table. We have also seen how to create sorting and filtering the data using same callback. There are many themes available for the ngPrime table. Some themes are paid but you can use free themes they are very good. You may also override css using Angular ViewEncapsulation feature.