PrimeNg DataTable

admin

7 years ago

Now let’s dive into PrimeNg data table component. In this post, we will develope a good PrimeNg dataTable example. It has wonderfull properties such as pagination, sorting, resizing etc. At first we must add components into app.module.ts file as usual. We need BrowserAnimationsModule for paging so we will add it to the project.

import { TableModule } from 'primeng/table';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
..
imports: [ TableModule,BrowserAnimationsModule]

import { TableModule } from 'primeng/table';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

imports: [ TableModule,BrowserAnimationsModule]

We must declare cols parameter to use prime table. Let’s define it in the component.ts file. Also fetch the list of your data from your service.

 cols: any[];
 totalRecords: number;

  public ngOnInit() {
   this.cols = [
      { field: 'FeatureId', header: 'FeatureId' },
      { field: 'name', header: 'Name' },
      { field: 'surname', header: 'Surname' }
    ];
}
this.service.GetData(this.selectedUserKod,this.selectedTabloKod)
      .subscribe( 
        result => {this.dataList = result,
				   this.totalRecords = result.length }

cols: any[];

totalRecords: number;

public ngOnInit() {

this.cols = [

{ field: 'FeatureId', header: 'FeatureId' },

{ field: 'name', header: 'Name' },

{ field: 'surname', header: 'Surname' }

];

}

this.service.GetData(this.selectedUserKod,this.selectedTabloKod)

.subscribe(

result => {this.dataList = result,

this.totalRecords = result.length }

At the end, just write the code below to get the data table. I am using totalRecords variable to display table if data exists. It should be a good example to start using PrimeNg DataTable.

<div class="row" *ngIf="totalRecords > 0" style="margin-left:10px; margin-right:10px;">
        <p-table [columns]="cols" [value]="dataList" [paginator]="true" [rows]="20" (onPage)="paginate($event)" sortMode="multiple"
           [rowsPerPageOptions]="[5,10,20,50]" [totalRecords]="totalRecords" >
                <ng-template pTemplate="header" let-columns>
                    <tr>
                        <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                            {{col.header}}
                            <p-sortIcon [field]="col.field"></p-sortIcon> 
                        </th>
                    </tr>
                </ng-template>

                <ng-template pTemplate="body" let-rowData let-columns="columns">
                        <tr>
                            <td *ngFor="let col of columns">
                                {{rowData[col.field]}}
                            </td>
                        </tr>
                </ng-template>
            </p-table>
  </div>

<div class="row" *ngIf="totalRecords > 0" style="margin-left:10px; margin-right:10px;">

<p-table [columns]="cols" [value]="dataList" [paginator]="true" [rows]="20" (onPage)="paginate($event)" sortMode="multiple"

[rowsPerPageOptions]="[5,10,20,50]" [totalRecords]="totalRecords" >

<ng-template pTemplate="header" let-columns>

<tr>

<p-sortIcon [field]="col.field"></p-sortIcon>

</th>

</tr>

</ng-template>

<ng-template pTemplate="body" let-rowData let-columns="columns">

<tr>

</td>

</tr>

</ng-template>

</p-table>

</div>

You can have a look at my other post about PrimeNg Progress Bar

If you have question do not forget to write from the chat button next to it or from the comment