Search code examples
angularprimengprimeng-treetable

how to add filter function in primeng treetable


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!


Solution

  • 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.