Initial UI (Without filter):
[globalFilterFields]="['name','marketingName','m_id']"
Issue : Other column fields are skipped after match found in first column
Here, we are searching "Model" which is present in first as well as in second column. But, it's not considering second column.
Expectations : first 3 rows should be shown that are Database, Dataset1, Model
Stackblitz : https://stackblitz.com/edit/primeng-treetablefilter-demo-efg4b5?file=src/assets/filesystem.json
Kindly expand module and then search using "Model" in global search.
We have search box to filter rows of p-treeTable by using global filter as shown below :
<input #searchBox type="text" [(ngModel)]="searchText" pInputText class="searchBox"
placeholder="Search"
(input)="tt.filterGlobal($event.target.value, 'contains')" />
Column Definition mapped to TreeTable looks like below:
this.columns = [
{ field: "name", header: "Name", width: '38%' },
{ field: "marketingName", header: "marketingName", width: '19%' },
{ field: "m_id", header: "M ID", width: '16%' },
{ field: "operation", header: "Operation", width: '7%' }
];
TreeTable Code:
<p-treeTable #tt [value]="businessUnit" [columns]="columns" selectionMode="single"
[(selection)]="selectedTreeProgram" dataKey="name" (onNodeSelect)="onNodeSelect(true)"
(onNodeUnselect)="onNodeSelect(false)" [globalFilterFields]="['name','marketingName','m_id']">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" [style.width]="col.width">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" style="display: none">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
<tr class="bu-row" [id]="utils.getId(rowData['name'])">
<td *ngIf="!rowData['m_id']">
<div class="combine name">{{rowData['name']}}</div>
</td>
<td>
//Dummy
</td>
<td>
//Dummy
</td>
<td>
//Dummy
</td>
</tr>
<tr *ngIf="rowData['m_id']" [ttRow]="rowNode" [ttSelectableRow]="rowNode" class="tree-child-row">
<td>
//Icons
<div class="combine name">{{rowData['name']}}</div>
</td>
<td>
<div class="combine">{{rowData['marketingName']}}</div>
</td>
<td>
<div class="combine">{{rowData['m_id']}}</div>
</td>
<td>
//Edit Delete Icon
</td>
</tr>
</ng-template>
</p-treeTable>