Table: Filtering in typescript using the Table filter() breaks the p-columnFilter

[mohammed-b]

Describe the bug

I have a table, with columns and lines.

The table contains some <p-columnFilter> filtering component.

When I filter only on the <p-columnFilter> UI, everything is working fine.

But when I filter from the typescript using the table filter() function, the table is filtered, but the <p-columnFilter> UI is completely broken !

With this error :

ERROR RuntimeError: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe?

Here is the html

<p-columnFilter
              field="name"
              matchMode="in"
              display="menu"
              [showMatchModes]="false"
              [showOperator]="false"
              [showAddButton]="false"
            >
              <ng-template pTemplate="header">
                <div class="px-3 pt-3 pb-0">
                  <span class="font-bold">Name</span>
                </div>
              </ng-template>
              <ng-template
                pTemplate="filter"
                let-value
                let-filter="filterCallback"
              >
                <p-multiSelect
                  [ngModel]="selectedNames"
                  [options]="names"
                  placeholder="Any"
                  (onChange)="filter($event.value)"
                  optionLabel="name"
                >
                  <ng-template let-option pTemplate="item">
                    <div class="inline-block vertical-align-middle">
                      <span class="ml-1 mt-1">{{ option.name }}</span>
                    </div>
                  </ng-template>
                </p-multiSelect>
              </ng-template>
            </p-columnFilter>

This works fine

But when I use the filtering in Typescript side:

  ngAfterViewInit(): void {
    this.selectedNames = [{ name: 'James Butt' }];
    this.table?.filter(this.selectedNames, 'name', 'in');
  }

This breaks the Filtering UI:

With this error:

ERROR RuntimeError: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe?

So the filtering UI is not working anymore ...

Environment

Windows 11
Angular 18
Primeng 17.18.11

(I reused the table code from the Primeng example)

Reproducer

https://stackblitz.com/edit/gsfshm?file=src%2Fapp%2Ftable-filter-advanced-demo.ts

Angular version

18.0.1

PrimeNG version

17.18.11

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.15.0

Browser(s)

Microsoft edge

Steps to reproduce the behavior

• Click on the Filtering icon on the Name Column:
  

• You will see the Filtering UI

• If you want to check the working state; comment the line in the ngAfterViewInit()
  

Expected behavior

The expected behavior is the Filter UI of <p-columnFilter> should remain working even if we did the filter in typescript side

[github-actions]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨