CODEWITHSUNDEEP
angularprimeng
kipris
kipris

Reputation: 3039

PrimeNG datatable: customize filter input

I need to toggle visibility of filter inputs placed in table header. I tried to do it this way: 

<input type="text"
       class="ui-column-filter ui-inputtext ui-widget ui-state-default ui-corner-all"
       [value]="dt.filters[col.field] ? dt.filters[col.field].value : ''"             
       (keyup)="dt.onFilterKeyup($event.value,col.field,col.filterMatchMode)"
       *ngIf="filterIsShown"/>

https://plnkr.co/edit/o2wLmXHMb1uI5EvBmucr?p=preview

But I have an error ERROR TypeError: Cannot read property 'filters' of undefined

So where I should get dt.filters object?

------UPDATED-------

Thanks PierreDuc for answer, but filter still doesn't work :(

I used all parameters accordingly to template I found here https://github.com/primefaces/primeng/blob/master/src/app/components/datatable/datatable.ts

Here's updated plunker
http://plnkr.co/edit/2MWxw0rfcLsDxmuIYRv9?p=preview

Upvotes: 3

Views: 10171

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71961

You should add #dt as a variable to your <p-dataTable>. This creates a template variable linking to your DataTable instance:

plunkr

<p-dataTable ... #dt>

And you have to change your keyup method to pass the right value:

(keyup)="dt.onFilterKeyup($event.target.value, col.field, col.filterMatchMode)"

plunkr

You have to, however, type in the entire word (Apple) for it to work. But I leave that to you to fix :)

Upvotes: 5

Related Questions