Search code examples
angularprimengprimeng-datatableprimeng-turbotable

How may I convert primeng old dataTable to the newTurboTable?


Trying to convert old primeNG dataTable to the new primeNG TurboTable for an old application, it seems we can't use p-column anymore, here is the code that is giving me trouble any help would be appreciate it:

<p-dataTable #dt [value]="myTableData" [rows]="perPage" [pageLinks]="4" [paginator]="true" [responsive]="true" (onLazyLoad)="loadContracts($event)"
[rowsPerPageOptions]="[5,10,20,50]" [totalRecords]="totalRecords" [lazy]="true">

<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [filter]="enableFilter && (col.header===lblSector || col.header===lblPriority || col.header===lblLos || col.header===lblType )" [sortable]="!(col.header==lblSector || col.header==lblPhase || col.header==lblLos || col.header==lblTag || col.header==lblAttorney|| col.header==lblRiskManager || col.header==lblProjectManager || col.header==lblJrAttorney || col.header===lblType || col.header==lblSubAssignee || col.header==lblArea)">

<ng-template *ngIf="col.header!==lblSector || col.header===lblPriority || col.header!==lblLos || col.header!==lblType" let-row="rowData" pTemplate>
<span *ngIf="col.header===lblClientName && !row['hasTPRID']" >

Solution

  • Primeng has now separate templates for header and body: In the p-table tag define the columns:

    <p-table [columns]="cols" ...(all your other properties)>
    

    define template for header:

    <ng-template  pTemplate="header" let-columns>
    <tr>
    <th *ngFor="let col of columns">{{col.header}}</th>
    </tr>
    </ng-template>
    

    define template for body:

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

    primeng table docs here