PrimeNG v5.2.4 p-table global filter not working

Question

I used p-datatable previously and the global filter worked. However when I changed to p-table, the global filter template displayed nicely but the input box is not clickable.

Here's the code

<p-table #dt 
[value]="sensorLocationList" 
[columns]="cols" 
[(selection)]="selectedSl" 
sortMode="multiple" [paginator]="true" 
[rows]="20" 
[globalFilterFields]="['dummy1','dummy2','dummy3','dummy4']"
>

<ng-template pTemplate="caption">
        <div style="text-align: left">        
            <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">
        </div>
</ng-template>

Header:

<ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width: 2.25em"></th>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
        <tr>
            <th style="width: 2.25em">
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th *ngFor="let col of columns" [ngSwitch]="col.field">
                <input *ngSwitchCase="'dummy1'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
                <input *ngSwitchCase="'dummy2'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
                <input *ngSwitchCase="'dummy3'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
                <input *ngSwitchCase="'dummy4'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
            </th>
     </ng-template>

And one sample of body:

<ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                    <td [pEditableColumn]="rowData" [pEditableColumnField]="'dummy1'" [ngStyle]="cellEdit(rowData)">
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="rowData.dummy1">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{rowData.dummy1}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
             </tr>
</ng-template>
</p-table>

Everything works fine including the column filter. I've searched everywhere for the solution and found most of the problem is because the PrimeNG version was not up-to-date, but my version is updated. Any idea?

jefscar jefscar · Accepted Answer · 2018-09-19T22:53:45

Add [pSortableColumnDisabled]="!col.sortable" to the table header tag:

<th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">

PrimeNG v5.2.4 p-table global filter not working

2 Answers