PrimeNG v5.2.4 p-table global filter not working - primeng

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?

Answer 1

Add [pSortableColumnDisabled]="!col.sortable" to the table header tag:
<th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">

Answer 2

Remove "ng-template" from around the GlobalFilter