Customize turbotable cell content

[jefhu]

I have used p-datatable for long time. Now, there is turbo-table.

Is it possible to provide code example showing how to customize column and cell content.

Like data-table sample https://www.primefaces.org/primeng/#/da ... templating, it is easy to follow.

Basically, I want to customize columns and cell content conditionally

Something like:
if column.name="id" apply template-a
combine column.firstname and column.lastname in one cell.
select a row background color based on business logic.

..
Thank!

[tengel92]

This was something that took me a little while to determine too. Below is my code of my table. I'm assuming you're asking about *ngIf statement customization and adding pipes etc. This still works with filter, sort etc.

Primary part you'll be interested in.

Code: Select all

<ng-template pTemplate="body" let-rowData let-columns="columns">
                    <tr [pSelectableRow]="rowData">
                        <td>{{rowData.DataChangePrimaryID}}</td>
                        <td *ngIf="rowData.ClientStatusID=='0'">Not yet acknowledged</td>
                        <td *ngIf="rowData.ClientStatusID=='1'">Success</td>
                        <td *ngIf="rowData.ClientStatusID=='2'">Error</td>


                        <td *ngIf="rowData.AcknowledgementStatusID=='1'">Requires Acknowledgement</td>
                        <td *ngIf="rowData.AcknowledgementStatusID=='2'">Awaiting Acknowledgement</td>
                        <td *ngIf="rowData.AcknowledgementStatusID=='3'">Success</td>
                        <td *ngIf="rowData.AcknowledgementStatusID=='7'">Max Error</td>

                        <td *ngIf="rowData.BizType=='B '">Brokered</td>
                        <td *ngIf="rowData.BizType=='Scale'">ScaleConnect</td>

                        <td>{{rowData.AcknowledgedDate | date}}</td>
                        <td>{{rowData.ClientComment}}</td>
                        <td>{{rowData.SupplimentData}}</td>

                    </tr>
                </ng-template>

Whole table

Code: Select all

<p-table #dt [loading]="loading" [columns]="cols" [value]="acknowledgements" [paginator]="true" [rows]="25" [rowsPerPageOptions]="[25,50,100]" selectionMode="single" [(selection)]="selectedAcknowledgement" (onRowSelect)="onRowSelect($event)" exportFilename="{{acknowledgement.DataChangeTypeName}}Acknowledgements"
                sortField="DataChangePrimaryID" sortOrder="-1">
                <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>
                    <tr>
                        <th *ngFor="let col of columns" [ngSwitch]="col.field">
                            <input *ngSwitchCase="'DataChangePrimaryID'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')" style="width:auto">
                            <p-multiSelect *ngSwitchCase="'ClientStatusID'" [options]="statusID" [(ngModel)]="selectedClientStatusID" defaultLabel="All Client Status IDs" (onChange)="dt.filter($event.value=selectedClientStatusID,col.field,'in')" styleClass="ui-column-filter" [style]="{'width':'100%'}"></p-multiSelect>
                            <p-multiSelect *ngSwitchCase="'AcknowledgementStatusID'" [options]="ackStatusID" [(ngModel)]="selectedAckStatusID" defaultLabel="All Ack Status IDs" (onChange)="dt.filter($event.value=selectedAckStatusID,col.field,'in')" styleClass="ui-column-filter"
                                [style]="{'width':'100%'}"></p-multiSelect>
                            <p-multiSelect *ngSwitchCase="'BizType'" [options]="bizType" [(ngModel)]="selectedBizType" defaultLabel="All Biz Types" (onChange)="dt.filter($event.value=selectedBizType,col.field,'in')" styleClass="ui-column-filter" [style]="{'width':'100%'}"></p-multiSelect>
                            <p-calendar *ngSwitchCase="'AcknowledgedDate'" [(ngModel)]="dateFilter" placeholder="Select Date" showIcon="true" dateFormat="yy-mm-dd" dataType="string" (onSelect)="dt.filter($event.value=dateFilter,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-calendar>
                            <input *ngSwitchCase="'ClientComment'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')" [style]="{'width':'100%'}">
                            <input *ngSwitchCase="'SupplimentData'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')" [style]="{'width':'100%'}">
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-columns="columns">
                    <tr [pSelectableRow]="rowData">
                        <td>{{rowData.DataChangePrimaryID}}</td>
                        <td *ngIf="rowData.ClientStatusID=='0'">Not yet acknowledged</td>
                        <td *ngIf="rowData.ClientStatusID=='1'">Success</td>
                        <td *ngIf="rowData.ClientStatusID=='2'">Error</td>


                        <td *ngIf="rowData.AcknowledgementStatusID=='1'">Requires Acknowledgement</td>
                        <td *ngIf="rowData.AcknowledgementStatusID=='2'">Awaiting Acknowledgement</td>
                        <td *ngIf="rowData.AcknowledgementStatusID=='3'">Success</td>
                        <td *ngIf="rowData.AcknowledgementStatusID=='7'">Max Error</td>

                        <td *ngIf="rowData.BizType=='B '">Brokered</td>
                        <td *ngIf="rowData.BizType=='Scale'">ScaleConnect</td>

                        <td>{{rowData.AcknowledgedDate | date}}</td>
                        <td>{{rowData.ClientComment}}</td>
                        <td>{{rowData.SupplimentData}}</td>

                    </tr>
                </ng-template>
                <ng-template pTemplate="summary" let-acknowledgement let-rowData let-columns="columns">
                    <span *ngIf="acknowledgements?.length> 1">
                      There are {{acknowledgements?.length}}
                      <span *ngFor="let acknowledgement of acknowledgements; let firstItem = first;let col of columns">
                        <span *ngIf="firstItem">{{acknowledgement?.DataChangeTypeName}}s</span>
                    </span>
                    </span>
                    <span *ngIf="acknowledgements?.length == 1">
                      There is {{acknowledgements?.length}}
                      <span *ngFor="let acknowledgement of acknowledgements; let firstItem = first;let col of columns">
                          <span *ngIf="firstItem">{{acknowledgement?.DataChangeTypeName}}</span>
                    </span>
                    </span>
                </ng-template>
                <ng-template pTemplate="emptymessage" let-columns>
                    <tr>
                        <td [attr.colspan]="columns.length">
                            No records found
                        </td>
                    </tr>
                </ng-template>
            </p-table>

[jefhu]

Thank you very much for answering my question.

Your sample code does help!

In addition, I found sample code how to add extra column turbo table. It is in https://www.primefaces.org/primeng/#/table/selection (column select case. There is a column hosting search button.)

Sincerely

Jefhu

[cagatay.civici]

I'd use ngSwitch for cases like these.