PrimeNg DataTable
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.
1 2 3 4 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
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
Hello there,
My name is Aly and I would like to know if you would have any interest to have your website here at codingfaster.com promoted as a resource on our blog alychidesign.com ?
We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
.
If you may be interested please in being included as a resource on our blog, please let me know.
Thanks,
Aly
how to get the numRowCount which is in the HTML to the TS File
which is selected by the user.