PrimeNg Datatable: Bind a dynamic array of objects

Question

I have an array of objects like:

"rows": [
{
  "id": 1,
  "createdAt": "2017-07-21T06:05:38.000Z",
  "updatedAt": "2017-07-21T06:05:38.000Z",
  "createdBy": null,
  "modifiedBy": null,
  "name": "ABC",
  "owner": "Dian",
  "age": 23,
  "industry": "abc"
},
{
  "id": 2,
  "createdAt": "2017-07-21T06:05:38.000Z",
  "updatedAt": "2017-07-21T06:05:38.000Z",
  "createdBy": null,
  "modifiedBy": null,
  "name": "ABsC",
  "owner": "Disdan",
  "age": 23,
  "industry": "absdc"
}

]

I want this to bind to my primeng datatable. Going through the this documentation, the datable requires data like,

[
        {field: 'vin', header: 'Vin'},
        {field: 'year', header: 'Year'},
        {field: 'brand', header: 'Brand'},
        {field: 'color', header: 'Color'}
    ];

In my case this data can be dynamic meaning displayName may come instead of name. How do I bind this data into my datatable. Thanks in advance!

score 0 · Answer 1 · answered Jul 27 '17 at 17:57

Fairly simple, actually. Don't provide a field, add a ng-template and use whatever logic you need to determine what to display in the field.

For example:

<p-column header="Whatever You Want Displayed In The Column Header">
    <ng-template let-entry="rowData" pTemplate="body">
        {{ (entry.id === 1 ? entry.displayName : entry.name) }}
    </ng-template>
</p-column>

PrimeNg Datatable: Bind a dynamic array of objects

1 Answers1