I am working on an Angular application using PrimeNG. In particular I am using the PrimeNG p-table component and I am finding some problem with Global Search.
This is the component: https://www.primefaces.org/primeng/showcase/#/table
This is my HTML code related to my table:
<p-table #dtEmployee [value]="employeesList$ | async"
[(selection)]="selectedEmployees" dataKey="id" styleClass="p-datatable-employees" [rowHover]="true"
[rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading"
[paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
<ng-template pTemplate="caption">
<div class="table-header">
Lista impiegati
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dtEmployee.filterGlobal($event.target.value, 'contains')" placeholder="Global Search" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem"></th>
<th pSortableColumn="firstName">Name <p-sortIcon field="firstName"></p-sortIcon></th>
<th pSortableColumn="socialSecurityCode">Codice fiscale <p-sortIcon field="socialSecurityCode"></p-sortIcon></th>
<th pSortableColumn="companyEmail">E-mail aziendale <p-sortIcon field="companyEmail"></p-sortIcon></th>
<th pSortableColumn="companyPhone">Telefono aziendale <p-sortIcon field="companyPhone"></p-sortIcon></th>
<th pSortableColumn="personalEmail">E-mail personale <p-sortIcon field="personalEmail"></p-sortIcon></th>
<th pSortableColumn="personalPhone">Telefono personale <p-sortIcon field="personalPhone"></p-sortIcon></th>
<th style="width: 8rem"></th>
</tr>
<tr>
<th>
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th>
<input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'firstName', 'startsWith')" placeholder="Cerca per nome" class="p-column-filter">
</th>
<th>
<input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'socialSecurityCode', 'startsWith')" placeholder="Cerca per codice fiscale" class="p-column-filter">
</th>
<th>
<input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'companyEmail', 'startsWith')" placeholder="Cerca per e-mail aziendale" class="p-column-filter">
</th>
<th>
<input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'companyPhone', 'startsWith')" placeholder="Cerca per e-mail personale" class="p-column-filter">
</th>
<th>
<input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'personalEmail', 'startsWith')" placeholder="Cerca per telefono aziendale" class="p-column-filter">
</th>
<th>
<input pInputText type="text" (input)="dtEmployee.filter($event.target.value, 'personalPhone', 'startsWith')" placeholder="Cerca per tenefono personale" class="p-column-filter">
</th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-employee>
<tr class="p-selectable-row">
<td>
<p-tableCheckbox [value]="employee"></p-tableCheckbox>
</td>
<td>
<span class="p-column-title">Nome</span>
{{employee.completeName}}
</td>
<td>
<span class="p-column-title">Codice fiscale</span>
<span class="image-text">{{employee.socialSecurityCode}}</span>
</td>
<td>
<span class="p-column-title">E-mail aziendale</span>
<span class="image-text">{{employee.companyEmail}}</span>
</td>
<td>
<span class="p-column-title">Telefono aziendale</span>
<span class="image-text">{{employee.companyPhone}}</span>
</td>
<td>
<span class="p-column-title">E-mail personale</span>
<span class="image-text">{{employee.personalEmail}}</span>
</td>
<td>
<span class="p-column-title">Telefono personale</span>
<span class="image-text">{{employee.personalPhone}}</span>
</td>
<td style="text-align: center">
<button pButton
type="button"
class="p-button-secondary centered-icon"
icon="pi pi-info-circle"
(click)="showEmployeDetailsDialog(employee)">
</button>
<button pButton type="button" class="p-button-secondary centered-icon" icon="pi pi-cog"></button>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="3">Non sono stati trovati impiegati.</td>
</tr>
</ng-template>
</p-table>
It renders this view:
As you can see the table header contains filters for each fields (these search filters works fine) and the highlighted global search filter field. This is not working. Infact if I try to search something I will always obtain an empty table, searching for a value inside a field infact I am obtaining:
I obtain the same behavior searching for information inside other fields.
What is wrong? What am I missing? How can I try to fix it?