How to Create a Yes/No Filter for Query Criteria in PrimeNG v11

Question

I'm working with PrimeNG v11 in my Angular application and need to implement a binary (yes/no) filter to add query criteria when checked. This filter is not associated with a boolean column but serves as an additional query parameter.

The standard PrimeNG boolean filter displays three values: a check for true, an X for false, and an empty state for null. However, I'm looking for a simplified binary filter that displays "Yes" when checked and "No" when unchecked, without any representation for null.

I've attempted to build a custom filter, but I encountered difficulties, especially with resetting the filter to its default state. I prefer to use a solution that follows PrimeNG best practices and is supported.

Is there a recommended approach or a supported way to create this binary (yes/no) filter for query criteria in PrimeNG v11 while ensuring proper reset functionality?

Any guidance or insights into achieving this binary filter behavior for query criteria would be greatly appreciated. Thank you.

<p-table #body
  (onLazyLoad)="loadCustomers($event)"
  [(first)]="first"
  [autoLayout]="true"
  [lazy]="true"
  [loading]="loading"
  [pageLinks]="7"
  [paginator]="true"
  [rowsPerPageOptions]="[10,25,50,100,500]"
  [rows]="showRows"
  [showCurrentPageReport]="totalRecords > 0"
  [sortField]="sortField"
  [sortOrder]="sortOrder"
  [totalRecords]="totalRecords"
  [value]="customers"
  currentPageReportTemplate="Page {currentPage} of {totalPages}"
  paginatorPosition="both"
  resetPageOnSort="true"
  scrollHeight="flex"
  scrollable="true">

  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="name">
        Customer Name
        <p-sortIcon field="name"></p-sortIcon>
      </th>
      <th>
        Email
      </th>
      <th>
        Status
      </th>
      <th>
        Address
      </th>
      <th>
        Phone
      </th>
      <th pSortableColumn="lastPurchaseDate">
        Last Purchase Date
        <p-sortIcon field="lastPurchaseDate"></p-sortIcon>
      </th>
      <th>
      </th>
    </tr>
    <tr>
      <th>
        <p-columnFilter
          filterable="false"
          [matchModeOptions]="matchModeOptions"
          field="customerName"
          matchMode="contains"
          placeholder="Customer Name"
          type="text">
        </p-columnFilter>
      </th>
      <th>
      </th>
      <th>
        <p-dropdown
          (onChange)="body.filter($event.value, 'customerStatus', 'equals')"
          [(ngModel)]="selectedCustomerStatus"
          [options]="customerStatuses"
          [showClear]="true"
          appendTo="body"
          id="selectedCustomerStatus"
          name="selectedCustomerStatus"
          optionLabel="status"
          placeholder="Customer Status">
        </p-dropdown>
      </th>
      <th>
        <p-columnFilter
          [matchModeOptions]="matchModeOptions"
          field="customerAddress"
          matchMode="contains"
          placeholder="Address"
          type="text">
        </p-columnFilter>
      </th>
      <th>
        <p-columnFilter
          [matchModeOptions]="matchModeOptions"
          field="customerPhone"
          matchMode="contains"
          placeholder="Phone"
          type="text">
        </p-columnFilter>
      </th>
      <th>
      </th>
      <th>
        <button (click)="clear()" class="p-button-outlined" icon="pi pi-filter-slash" label="Clear" pButton></button>
      </th>
    </tr>
    <tr>
      <th colspan="3">
        <!-- Need Yes/No Filter Here -->
        <p-columnFilter
          type="boolean"
          field="isPreferred">
        </p-columnFilter>
      </th>
      <th colspan="2"></th>
      <th colspan="2"></th>
    </tr>
  </ng-template>
  <ng-template let-customer pTemplate="body">
    <tr>
      <td>
        <a [routerLink]="[routeService.getCustomerDetailsUrl(customer.name)]"
           title="Click to view details of this customer.">{{customer.name}}</a>
        <i *ngIf="customer.additionalInfo" class="pi pi-info-circle" style="color:#2196F3;"
           title="Additional info available for this customer."></i>
      </td>
      <td>{{customer.email}}</td>
      <td>{{customer.customerStatus}}</td>
      <td>{{customer.customerAddress}}</td>
      <td>{{customer.customerPhone}}</td>
      <td>{{customer.lastPurchaseDate | date: 'short'}}</td>
      <td>
        <i (click)="showEditModal(customer)" class="pi pi-pencil" title="Click to edit customer details"></i>
      </td>
    </tr>
  </ng-template>
</p-table>

@Component({
  selector: 'app-customer-table',
  templateUrl: './customer-table.component.html',
})
export class CustomerTableComponent {
  customers: any[] = [];
  loading: boolean = false;
  first: number = 0;
  showRows: number = 10;
  sortField: string = 'name';
  sortOrder: number = 1;

  selectedCustomerStatus: string | null = null;
  customerStatuses: any[] = [];

  @ViewChild('body') table: Table;

  constructor(private customerService: CustomerService) {}

  loadCustomers(event: any) {
    this.loading = true;
    this.customerService.getCustomers().subscribe((data) => {
      this.customers = data;
      this.loading = false;
    });
  }

  clear() {
    this.selectedCustomerStatus = null;
    this.table.clear();
  }

  showEditModal(customer: any) {
    // Left out
  }
}