I am working with a p-table from primeng and attempting to synchronize the selection from the dropdown menu with the filter method of the table, but I have not been successful in achieving this. Could you please help me identify the issue?
<p-table
#customTable
id="customTable"
[value]="allCustomConfig$ | async"
[paginator]="(allCustomConfig$ | async)?.length > 10"
[rows]="10"
[rowsPerPageOptions]="[10, 25, 50]"
selectionMode="single"
[scrollable]="true">
<ng-template pTemplate="header">
<tr class="tr-head-title">
<th scope="col" class="th-title-actions">
{{ 'features.masters.analytics_config.table.actions' | translate }}
</th>
<th scope="col" class="th-title-custom">
{{ 'features.masters.analytics_config.table.analytics' | translate }}
<!-- <p-sortIcon field="analytics"></p-sortIcon> -->
</th>
<th scope="col" pSortableColumn="translation" class="th-title-translation">
{{ 'features.masters.analytics_config.table.translation' | translate }}
<p-sortIcon field="translation"></p-sortIcon>
</th>
</tr>
<tr>
<th scope="col"></th>
<th scope="col">
<p-dropdown
(onClear)="filterTable()"
(onHide)="filterTable()"
[(ngModel)]="CustomConfigSelect"
[options]="customDropdown"
optionLabel="analytics"
[placeholder]="'features.masters.analytics_config.modal.analytics_placeholder' | translate"
[showClear]="true"
filterMode="contains">
</p-dropdown>
</th>
<th scope="col"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-config>
<tr class="tr-body">
<td class="td-buttons">
<button
(click)="editCustomConfigModal(config)"
class="p-button-rounded p-button-outlined p-button-warning btn"
icon="pi pi-pencil"
pButton
type="button"></button>
<button
(click)="deleteCustomConfig(config)"
class="p-button-rounded p-button-outlined p-button-danger btn"
style="margin-left: 10px"
icon="pi pi-trash"
pButton
type="button"></button>
</td>
<td>
{{ config?.featureFaultDescription?.analytics }}
</td>
<td>
{{ config?.translation }}
</td>
</tr>
</ng-template>
<!-- Empty Message -->
<ng-template pTemplate="emptymessage">
<tr>
<!-- <td colspan="6">No custom configurations found.</td> -->
</tr>
</ng-template>
</p-table>
</p-card>
and this method in my class component
public customDropdown: FeatureFaultDescription[] = [
{ analytics: 'string a', featureFaultDescriptionId: 1 },
{ analytics: 'string b', featureFaultDescriptionId: 2 },
{ analytics: 'string c', featureFaultDescriptionId: 3 },
{ analytics: 'string e', featureFaultDescriptionId: 4 }
];
public CustomConfigSelect: FeatureFaultDescription;
public filterTable(): void {
if (this.CustomConfigSelect) {
this.table?.filter(
this.CustomConfigSelect,
'CustomConfigSelect',
'contains'
);
} else {
this.table.reset();
}
}
Can you see where the problem lies? I am trying to match the selection from the dropdown within the <ng-template pTemplate="header"> so that only the selected item is displayed in the table.