how to add filter function in primeng treetable

Question

I'm trying to add a filter function to the primeng treetable. The following code shows my current situation.

<div class="content-section introduction">
    <div>
        <span class="feature-title">Katerra</span>
        <span>Cost Master</span>
    </div>
</div>

<div class="content-section implementation">
    <p-growl [value]="msgs"></p-growl>

<input [(ngModel)]="searchText" placeholder="search text goes here">
<p-treeTable [value]="files6 | filter:searchText" selectionMode="single" [(selection)]="selectedFile2" [style]="{'margin-top':'50px'}" [contextMenu]="cm">
    <p-header>Context Menu</p-header>
    <p-column field="name" header="Division"></p-column>
    <p-column field="size" header="Code"></p-column>
</p-treeTable>
<p-contextMenu #cm [model]="items"></p-contextMenu>

As you can see that I try to add

<input [(ngModel)]="searchText" placeholder="search text goes here">

and also use [value]="files6 | filter:searchText". The code is successfully compiled but here is an error printed in the chrome console.

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'filter' could not be found ("

<input [(ngModel)]="searchText" placeholder="search text goes here">
<p-treeTable [ERROR ->][value]="files6 | filter:searchText" selectionMode="single" [(selection)]="selectedFile2" [style]="{'"): ng:///TreeTableDemoModule/TreeTableDemo.html@11:13
Error: Template parse errors:
The pipe 'filter' could not be found ("

Any suggestions would be great!

The new version has a build-in filter functionality: https://www.primefaces.org/primeng/#/treetable/filter — Manoj De Mel, Mar 08 '19 at 01:00

score 2 · Accepted Answer · answered Feb 11 '18 at 05:39

as of now there is no filter functionality in tree table there is issue register on GitHub profile and will implement it soon you can check status here

so basically you are trying to use the filter on primeNG attribute which will obviously throw an error. because for that attribute filter is not known property.

you can use normal ng-repat to show table and you can use filter option on that or else you need to wait till this functionality is live.

score 0 · Answer 2 · answered Feb 11 '18 at 01:19

0

That means basically that you didn't define your pipe filter. To create a pipe run the following command: $ ng g pipe filter NOw add this code to your generated pipe if you want to do a basic filter:

// I am unsure of the name of the generated pipe change it if needed 
export class FilterPipe implements PipeTransform {
    transform(items: any[], searchText: string): any {
        return items.filter(item => item.indexOf(searchText) !== -1);
    }
}

answered Feb 11 '18 at 01:19

Melchia

22,578
22
103
117

Hi Melchia, Thank you for reply. I created a filter followed by your suggestion, but the error is still there. – Alex Feb 11 '18 at 02:09

how to add filter function in primeng treetable

2 Answers2