Custom range filter

import { DestroyRef, effect, inject, signal } from '@angular/core';
import DataTable from 'datatables.net';
import { type Api } from 'ngx-datatables-net';

min = signal<number | null>(null);
max = signal<number | null>(null);
private api?: Api;

// A custom row predicate. ext.search is global, so scope it to this table and remove it on destroy.
private predicate = (settings: any, rowData: string[]) => {
  if (settings.nTable !== this.api?.table().node()) return true;
  const salary = Number(String(rowData[2]).replace(/[^0-9.-]/g, '')) || 0;
  if (this.min() !== null && salary < this.min()!) return false;
  if (this.max() !== null && salary > this.max()!) return false;
  return true;
};

constructor() {
  DataTable.ext.search.push(this.predicate);
  inject(DestroyRef).onDestroy(() => {
    const i = DataTable.ext.search.indexOf(this.predicate);
    if (i >= 0) DataTable.ext.search.splice(i, 1);
  });
  effect(() => { this.min(); this.max(); this.api?.draw(); });
}

onInit(api: Api) { this.api = api; }