Table Filter row by numeric & text should fir on type ?

[ashikjs]

Anyone Can help me to clear about my doubt ⁠PrimeNg Table Filter row by numeric & text
it only filter when we Press Enter. Is it feature or bugs.

It should fir onkey change or user type ?

[ThoSap]

@ashikjs the PrimeNG Table Filter Row by default only filters by pressing Enter, so this is no bug.

But there exists a numeric input property called filterDelay (example [filterDelay]="500") you can pass to the <p-table> instance,
which automatically triggers filtering when the user stops typing after the specified milliseconds (e.g. 500 ms in this case),
but I could not get it working in a StackBlitz example right now.

I'm using this feature in production with Angular v14.3.0 and PrimeNG v14.1.2, there this filterDelay works for sure.

Unrelated to this, but if you decide to use the <p-columnFilter> with display="menu" instead of row, you can automatically close the open filter menu on Enter using this workaround.
Add onFilter emitter (onFilter)="onFilter($event)" to your <p-table> to apply this workaround and the following code:

import { Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';

// Domain
import { FilterMetadata } from 'primeng/api/filtermetadata';
import { FilterMatchMode, FilterOperator} from 'primeng/api';
import { TableLazyLoadEvent } from 'primeng/table';

// Components
import { ColumnFilter } from 'primeng/table';

@Component({
    selector: 'app-example-table',
    templateUrl: './panorama-table.component.html',
    styleUrls: ['./panorama-table.component.scss'],
})
export class ExampleTableComponent implements OnInit, OnDestroy {

  // To get all <p-columnFilter> elements
  @ViewChildren(ColumnFilter)
  columnFilters!: QueryList<ColumnFilter>;

  ngOnInit(): void {
    // Your code here
  }

  /* Relevant code start */
  onFilter(event: TableFilterEvent): void {
    // Automatically hide the column filter menu if enter was pressed in the menu
    this.columnFilters.forEach(filter => {
      if (filter.display === 'menu' && filter.overlayVisible) {
        filter.hide();
      }
    });
  }
  /* Relevant code end */

  ngOnDestroy(): void {
    // Your code here
  }

}