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..

score 1 · Accepted Answer · answered Sep 11 '17 at 08:15

1

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>

answered Sep 11 '17 at 08:15

Infact, I am very much doing the same thing. The issue however is that I do not want to bind `row[key]`. Rather the data is few levels deep, i.e. `row[key][key1][key2]` and when I try to bind it this way, the data simply doesn't show up. – Saurabh Tiwari Sep 11 '17 at 08:43
Then you should simply use a "deepening" function that will return the value you want ! – Sep 11 '17 at 08:43
May be if you can show me how to use the deepening function with p-datatable. Do you mean something like `
{{someFunction(row[key])}}
` – Saurabh Tiwari Sep 11 '17 at 08:45
This is exactly what I mean. To make it work, you need to use 2 params : the first is the object you search in (`row[key]`), and the second the key you search for in this object (or its children). – Sep 11 '17 at 08:48
I created this function in my component (the component containg p-databele>, however the function do not get envoked. Do I have to do something else ? – Saurabh Tiwari Sep 11 '17 at 09:04
The function should return a string, that's all you need to have. And of course be in the same component, otherwise that's all I can think of. To test it, try returning a constant strnig(`Hey it's me`) for instance. If it shows, your function works. – Sep 11 '17 at 09:05
I tried it, but this didn't work. The hardcoded string is not returned. No consoles in the function work. As I mentioned, it seems that the `p-datatable` doesn't recognize the `ng-template` itself. – Saurabh Tiwari Sep 11 '17 at 09:15
Setting the `columns` property to the table reference resets the attached template. There seem to be no way of retaining the template before assigning the column's list. Using the way suggested by @trichetriche , I could make it work. – Saurabh Tiwari Sep 12 '17 at 05:54
Do you mean you made it work ? If so, I'd be happy to see it ! – Sep 12 '17 at 06:51
I did exactly what you mentioned (using *ngFor to set columns)and it worked. The issue was, when I was assigning the `columns` from my TS code, the HTML template was completely overriddden. Using your approach, it started picking up the html – Saurabh Tiwari Sep 12 '17 at 13:05
Great then, if you don't mind posting an answer with your method, I'd be happy to see it – Sep 12 '17 at 13:06

PrimeNg p-datatable is not picking the provided template

1 Answers1

{{someFunction(row[key])}}