Primeng: Turbotable global filtering does not work

Created on 18 Jan 2018  路  3Comments  路  Source: primefaces/primeng

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
I am trying to use global filter with the new TurbTable but the data disappear as I type the first letter. Even if I clear the filter data are not there

<p-table #dt [ngClass]="(dataService.isLoading === true) ? 'not-visible' : 'visible'" [value]="dataService.data"
    [rows]="10" [paginator]="true" [rowsPerPageOptions]="[5,10,20,50,100]">

    <ng-template pTemplate="caption">
        <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
        <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')"
            style="width:auto">
    </ng-template>

    <ng-template pTemplate="header">
        <tr>
            <th>Client</th>
            <th>Amount</th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-item>
        <tr>
            <td>{{item.Name}}</td>
            <td>{{item.Amount | numberOverride:'1.2-2':'-'}}</td>                        
        </tr>
    </ng-template>

    <ng-template pTemplate="footer" let-item>
        <tr>
            <td>Totals</td>
            <td>{{totalsService.Amount}}</td>                        
        </tr>
    </ng-template>

</p-table>

All 3 comments

I was having this issue yesterday, you need the columns variable set to a dictionary of columns llike the example. The global filter uses this.columns to apply filtering.

This is very ugly. I cant use columns due to the fact that I cannot customize my headers (th) using Directives

Was this page helpful?
0 / 5 - 0 ratings