How to use a template in <p-datatable>

I have a very simple question that I cannot answer myself because most of the links to http://www.primefaces.org/primeng no longer work. I also tried to register on their forum, but their activation letter never arrives.

I am using Angular2 and I have a data table with two columns: file name and status. The status column I want to change. Now it contains a number from 1 to 4, and I want to show a glyphicon depending on the status.

Now I have this that works:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single" sortField="Status" [sortOrder]="-1"> <p-column field="FileName" header="Naam" sortable="true"></p-column> <p-column field="Status" header="Status" sortable="true"></p-column> </p-dataTable> 

I tried this just to test the template, but nothing changes:

 <p-dataTable [hidden]="loading" [value]="files" selectionMode="single" sortField="Status" [sortOrder]="-1"> <p-column field="FileName" header="Naam" sortable="true"></p-column> <p-column field="Status" header="Status" sortable="true"> <template let-file="rowData"> {{file.Status == 1 ? "Yes" : "No"}} </template> </p-column> </p-dataTable> 

Therefore save to conclude that I am not using it properly.

We are using PrimeNG 1.0.0-beta.16

+8
source share
1 answer

Each p-column can have two templates - body and header , you must specify which one it is. This is not necessary, because body is the default, I think, and this is what you need in this case, but it is good practice. You also need to add pTemplate to the template so that p-column uses it, so p-column will not display the template you provided. So your code should look like this:

 <p-dataTable [hidden]="loading" [value]="files" selectionMode="single" sortField="Status" [sortOrder]="-1"> <p-column field="FileName" header="Naam" sortable="true"></p-column> <p-column field="Status" header="Status" sortable="true"> <ng-template let-file="rowData" pTemplate type="body"> {{file.Status == 1 ? "Yes" : "No"}} </ng-template> </p-column> </p-dataTable> 
+18
source

Source: https://habr.com/ru/post/1259230/


All Articles