CODEWITHSUNDEEP
angularprimeng
William
William

Reputation: 33

prime-ng datatable: how to use Globalfilter with ng-template tag in p-column

CONTEXT

I use Prime-ng Datatable module in my Angular project. I have 7 columns like shown below in my datatable. The data shows very well in browser

PROBLEM

I can't use [globalFilter]. When I try to do a search, the result in my datatable is always displayed as "No records found". It's like the Global filter can't reach the data in my <ng-template>.

APP.COMPONENT.HTML

<!-- language: lang-html -->

<div>
    <input #gb type="text" pInputText size="50" placeholder="Global Filter">
</div>

<p-dataTable [value]="reviewTasksList" [rows]="5" [paginator]="true" [globalFilter]="gb" [pageLinks]="3" [responsive]="true" [stacked]="stacked">
 <p-column field="name" header="Name">
   <ng-template let-col let-file="rowData" pTemplate="body">
       <a [routerLink]="[file.id]" href="#">{{ file.category.name }}</a>
   </ng-template>
 </p-column>
</p-dataTable>

Upvotes: 1

Views: 1288

Answers (1)

BlackHoleGalaxy
BlackHoleGalaxy

Reputation: 9662

I think you should ensure field is set properly.

For example, if you model correspond to this:

reviewTaskList = {
  category: {
    name: "Category Name"
  }
}

Then you'd have to use it like this:

<p-dataTable [value]="reviewTasksList" [rows]="5" [paginator]="true" [globalFilter]="gb" [pageLinks]="3" [responsive]="true" [stacked]="stacked">
 <p-column field="reviewTasksList.category.name" header="Name"></p-column>
</p-dataTable>

Upvotes: 1

Related Questions