Using PrimeNG DataTables

Question

Trying to setup DataTable from PrimeNG. I get the response back from the API like this

[{"firstName":"Mop","lastName":"Top","eId":"aaa123","tech":"AWS"},{"firstName":"Hey","lastName":"Arnold","eId":"hfg456","tech":"AWS"},{"firstName":"Hom","lastName":"Mom","eId":"abf654","tech":"AWS"}]

It seems I might be using ngFor wrong because it does not load the array to the table ? There is no error in the console so I'm not sure exactly I'm doing wrong.

Link to my code

Yes I know Datatable is deprecated but I could not get TableModule to import :(

@Antoniossss the documentation for datatables shows doing that I believe? — Billy, Apr 28 '18 at 20:28
No, example in docs does not do *ngFor N times in colums section — Antoniossss, Apr 28 '18 at 21:10
What is your `cols` variable? If you use `*ngFor`, you should have only one line. — Quan VO, Apr 28 '18 at 21:25

score 1 · Accepted Answer · answered May 20 '18 at 15:45

You only use *ngFor with p-columns if you want your table's columns to be dynamic. Judging by your code, your columns are not defined in the typescript at all, therefore they should be defined statically in your html:

<p-dataTable [value]="tech">
  <p-column field="firstName" header="First Name"></p-column>
  <p-column field="lastName" header="Last Name"></p-column>
  <p-column field="eId" header="E Id"></p-column>
  <p-column field="tech" header="Tech"></p-column>
</p-dataTable>

In PrimeNG's documentation, this information is under the first "Source" tab, right under "Basic".

Using PrimeNG DataTables

1 Answers1