PrimeNg p-datatable is not picking the provided template

Question

I have a use case wherein I have varying number of rows and columns for my table. I also do not have any information about the header names.

I am trying to use the following implementation:

I fetch the reference for the table using @ViewChild('tableref ') tableref ; I then call a service to fetch the columns list and assign it as: tableref .columns = colArray;

This colArray contains objects having field and headers property which automatically get assigned to the table. (This is working fine and I can see the header name in table)

I am then preparing an array of objects data, where the objects have a property name same as the field name picked from colArray.

Finally in my html I have:

<div class="col-sm-12 kill-padding table">
    <p-dataTable #tableref [value]="data" rowHover="true">
        <p-column>
            <ng-template pTemplate="body" let-col let-row="rowData">
              <div [pTooltip]="row[col.field]" tooltipPosition="bottom">
                <h2>{{row[col.field]}}</h2>
              </div>
            </ng-template>
        </p-column>
    </p-dataTable>
  </div>

In the template above as far as row[col.field] is assigned to a string, it gets displayed. However if row[col.field] is an object the template simply doesn't bind. I believe the template is not at all picked, because when I inspect the html I can't even see the custom tags.

I want to bind some data at following level: <h2>{{row[col.field]['someProperty']['finalProperty']}}</h2>

I have also used it in following way: <h2>{{row[col.field].someProperty.finalProperty]}}</h2>

In each of above case an object is bound to table and the table shows [Object object]

Is it not possible to bind the data in the following manner. Am I doing something wrong here. Kindly suggest..

Unknown Unknown · Accepted Answer · 2017-09-11T08:15:04

What I would do, is transform the data you receive to make it "readable" by the datatable.

First, you should have your data :

let data = [
    {name: 'Ziggity', surname: 'Zwooty', age: 16}, 
    {name: 'Bippity', surname: 'Bopitty', age: 18}, 
];

From the data you got, you should get the properties of that data :

let keys = Object.keys(data[0]); // ['name', 'surname', 'age']

Now, in your HTML, you can simply repeat the primeNG component for each key :

    <div class="col-sm-12 kill-padding table">
    <p-dataTable [value]="data" rowHover="true">
        <p-column *ngFor="let key of keys">
            <ng-template pTemplate="body" let-row="rowData">
              <div [pTooltip]="row[key]" tooltipPosition="bottom">
                <h2>{{row[key]}}</h2>
              </div>
            </ng-template>
        </p-column>
    </p-dataTable>
  </div>

PrimeNg p-datatable is not picking the provided template

1 Answers