Primeng 4.3: Datatable column value 'S', 'N' to 'Yes' 'No'

Question

I've these cols:

this.cols = [
   { field: 'acronym', header: 'Acrònim', sortable: true },
   { field: 'name', header: 'Nom', sortable: true },
   { field: 'commonUserName', header: 'Credencial', sortable: true },
   { field: 'scope', header: 'Àmbit', sortable: true },
   { field: 'transversal', header: 'Transversal', sortable: true },
   { field: 'startDate', header: 'Data Inici', sortable: true },
   { field: 'suspendDate', header: 'Data Suspensió', sortable: true },
];

Html p-dataTable is:

<div style="margin-bottom: 1.54em" *ngIf="!apps.error">
    <p-dataTable #appsTable [value]="apps.content"...>
        <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [sortable]="col.sortable">
        </p-column>
    </p-dataTable>
</div>

And table looks like:

As you can see, values are S|N, I'd like to show "Yes" when value is "S" and "No" when value is "N".

Data is an array of:

export interface ApplicationUser {
    acronym: string;
    code: string;
    commonUserName: string;
    description: string;
    name: string;
    transversal: string;
}

Any ideas?

What is apps.content? Doesn't that determine data that will be displayed in each row? If so, I think you should be able to use ng-template with a Pipe for example, to convert S and N to Yes and No — miselking

Eliseo Eliseo · Accepted Answer · 2019-08-29T12:56:35

use the template columns to defined the columns

<p-column *ngFor="let col of cols" field="col.field" header="col.header">
    <ng-template let-col let-data="rowData" let-ri="rowIndex" pTemplate="body">
        <span>{{col.field=='transversal'?data[col.field]=='S'?'Yes':'No':data[col.field]}}</span>
    </ng-template>
</p-column>

Primeng 4.3: Datatable column value 'S', 'N' to 'Yes' 'No'

1 Answers