Usages Custom Filter Editor

Custom Filter Editor

/ 266
Id
Name
Gender
Amount
Enrolled
Verified
1 Abagail Kingscote Female 9,339.72 Wed, 26 Apr 2023 Yes
2 Nicolina Coit Male 3,744.95 Wed, 1 Nov 2023 No
3 Sarene Greim Male 4,397.68 Tue, 3 Jan 2023 Yes
4 Blair Millbank Female 3,334.58 Sat, 1 Jul 2023 No
5 Kliment Sprowle Male 6,459.93 Mon, 25 Dec 2023 Yes
6 Winifred Dikle Female 9,833.93 Sun, 6 Aug 2023 No
7 Chadd Nacci Male 4,383.54 Tue, 3 Jan 2023 Yes
8 Matthiew Morland Female 9,727.90 Sun, 22 Oct 2023 No
9 Perceval Glasheen Male 7,201.29 Sun, 23 Jul 2023 Yes
10 Fenelia Oblein Male 3,654.03 Fri, 13 Oct 2023 No
11 Lisette Ornells Female 6,775.49 Fri, 27 Oct 2023 Yes
12 Mellie Anthill Male 7,474.30 Tue, 31 Jan 2023 No
13 Charles Simkovitz Male 7,871.40 Sun, 15 Oct 2023 Yes
14 Brett Hew Female 6,925.89 Thu, 2 Mar 2023 No
15 Netti Treend Female 6,569.53 Sun, 12 Mar 2023 Yes
16 Donetta Scotland Female 7,647.54 Sat, 17 Jun 2023 No
17 Larry Candish Female 8,287.03 Mon, 18 Sep 2023 Yes
18 Ianthe Nijssen Male 3,230.41 Mon, 3 Jul 2023 No
19 Rivalee Heavyside Male 5,557.91 Thu, 18 May 2023 Yes
20 Ekaterina Heyburn Female 5,916.96 Mon, 30 Oct 2023 No
21 Cynthia Garrard Female 3,155.08 Fri, 15 Sep 2023 Yes
22 Bruis Henryson Male 4,079.36 Tue, 27 Jun 2023 No
23 Brittani Swaby Female 7,766.85 Sat, 2 Sep 2023 Yes
24 Johnna von Hagt Male 7,231.27 Tue, 3 Jan 2023 No
25 Brooks Kalberer Female 3,130.28 Thu, 12 Oct 2023 Yes
26 Osmond Beevens Female 5,242.18 Mon, 14 Aug 2023 No
27 Stephi Forsdicke Male 3,027.02 Sat, 7 Jan 2023 Yes
28 Kristan Collingworth Male 6,649.44 Fri, 31 Mar 2023 No
29 Bord Petkov Male 6,362.19 Mon, 10 Apr 2023 Yes
30 Nara Boorne Female 6,527.11 Mon, 24 Jul 2023 No
31 Ransell Bullingham Male 8,855.43 Tue, 5 Sep 2023 Yes
32 Kerr Eastcott Female 5,105.78 Sat, 28 Jan 2023 No
33 Victor Hallgalley Male 3,361.66 Mon, 24 Jul 2023 Yes
34 Delia Rosendale Female 4,381.41 Wed, 21 Jun 2023 No
35 Mickey Belding Female 8,716.32 Mon, 24 Apr 2023 Yes
36 Pippo MacColl Female 6,428.34 Tue, 12 Dec 2023 No
37 Radcliffe Castellet Male 6,133.15 Tue, 28 Mar 2023 Yes
38 Arvie Maxweell Female 7,053.02 Sun, 21 May 2023 No
39 Darnell Valler Male 4,982.23 Fri, 23 Jun 2023 Yes
40 Mirilla Ziems Female 6,263.73 Sun, 8 Jan 2023 No
41 Werner Dorin Female 3,215.49 Wed, 1 Feb 2023 Yes
42 Dael Lesek Male 4,099.27 Sun, 13 Aug 2023 No
43 Diarmid Dmytryk Male 3,144.37 Sat, 15 Jul 2023 Yes
44 Eunice Reily Male 3,477.99 Wed, 15 Nov 2023 No
45 Matty Duddle Male 5,296.22 Sat, 25 Mar 2023 Yes
46 Luciano Godilington Male 4,139.65 Mon, 7 Aug 2023 No
47 Stacie Vassie Male 8,122.35 Sun, 29 Oct 2023 Yes
48 Aharon Samter Female 4,361.33 Fri, 10 Mar 2023 No
49 Hillery Canedo Female 9,719.70 Sun, 9 Jul 2023 Yes
50 Jacquelin Crowcombe Female 7,359.53 Thu, 15 Jun 2023 No
51 Allayne Bachelor Male 3,332.50 Wed, 19 Apr 2023 Yes
52 Lindie Bodley Male 3,413.69 Fri, 14 Apr 2023 No
53 Sharia Roskelly Female 8,705.67 Fri, 24 Feb 2023 Yes
54 Saul Ubsdale Male 7,604.27 Thu, 8 Jun 2023 No
55 Nate Churms Female 7,457.68 Tue, 11 Jul 2023 Yes
56 Tracey Bucknall Male 9,351.93 Mon, 13 Feb 2023 No
57 Carole Sparrow Female 6,366.73 Tue, 3 Jan 2023 Yes
58 Jennica Pashba Female 4,825.08 Sun, 5 Mar 2023 No
59 Carlotta Turvey Female 6,191.06 Tue, 7 Mar 2023 Yes
60 Drucill Roaf Female 4,394.57 Thu, 26 Jan 2023 No
61 Lucien Steuart Female 5,225.22 Fri, 10 Nov 2023 Yes
62 Daryl Slimon Male 6,995.50 Sun, 17 Dec 2023 No
63 Sheelah Laydon Male 7,313.91 Tue, 18 Jul 2023 Yes
64 Bertie Brewood Male 9,912.11 Mon, 27 Nov 2023 No
65 Louise Rosin Male 8,218.10 Sun, 11 Jun 2023 Yes
66 Ara Gaskins Female 5,960.34 Mon, 6 Feb 2023 No
67 Roshelle Tollemache Female 5,319.58 Wed, 10 May 2023 Yes
68 Mabelle Schwanden Female 6,830.94 Mon, 10 Jul 2023 No
69 Fayina Parsonson Male 5,845.86 Sat, 2 Sep 2023 Yes
70 Chancey Blackway Female 6,252.95 Thu, 28 Sep 2023 No
71 Josee Dasent Male 7,682.65 Fri, 3 Mar 2023 Yes
72 Larisa Dillway Female 5,202.31 Mon, 23 Oct 2023 No
73 Oby Woolard Female 5,111.98 Sat, 12 Aug 2023 Yes
74 Marylou Lebang Male 7,076.70 Sun, 27 Aug 2023 No
75 Nollie Rillett Female 9,177.99 Sun, 10 Dec 2023 Yes
76 Jillayne Geal Female 8,314.71 Thu, 22 Jun 2023 No
77 Andreas Marling Female 8,927.05 Sat, 1 Apr 2023 Yes
78 Edwin Kilmister Female 4,888.32 Fri, 17 Mar 2023 No
79 Hershel Cornelis Male 4,712.07 Sat, 25 Mar 2023 Yes
80 Nancy Tomanek Female 8,979.17 Sat, 13 May 2023 No
81 Kikelia Hawgood Male 8,688.32 Sat, 1 Apr 2023 Yes
82 Cele Thridgould Male 4,559.98 Fri, 30 Jun 2023 No
83 Petronella Fairbank Male 7,322.40 Tue, 13 Jun 2023 Yes
84 Thorn Maruszewski Male 5,074.47 Fri, 2 Jun 2023 No
85 Jodi Tall Female 8,097.92 Sat, 20 May 2023 Yes
86 Bail Ehlerding Female 8,739.09 Fri, 3 Feb 2023 No
87 Natal Thorald Male 7,632.75 Fri, 29 Sep 2023 Yes
88 Krishna Burwood Male 4,722.89 Mon, 29 May 2023 No
89 Zarah Mousdall Female 8,195.89 Thu, 1 Jun 2023 Yes
90 Torre Moss Female 3,262.70 Wed, 10 May 2023 No
91 Merry Paridge Male 8,407.38 Mon, 13 Mar 2023 Yes
92 Laurene Lucius Female 4,604.98 Wed, 6 Dec 2023 No
93 Isa Braine Male 4,844.65 Fri, 8 Sep 2023 Yes
94 Leisha Tompsett Male 6,575.16 Tue, 8 Aug 2023 No
95 Florry O'Doireidh Male 4,294.56 Wed, 4 Jan 2023 Yes
96 Sophi Roberti Male 3,185.59 Fri, 9 Jun 2023 No
97 Leanora Nester Male 7,958.93 Sat, 10 Jun 2023 Yes
98 Giacopo Stallion Male 8,455.91 Fri, 13 Oct 2023 No
99 Euell Yanshonok Female 5,455.26 Thu, 27 Jul 2023 Yes
100 Cyrillus Gilstoun Female 5,418.84 Sun, 5 Nov 2023 No

The Verified column in that example uses custom filter as follow:

boolean-filter.component.ts
boolean-filter.component.html
import { Component, Input, OnInit, WritableSignal } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatSlideToggle } from '@angular/material/slide-toggle';
import { BaseColumn, FilterEditor, TableCriteria } from 'ngx-panemu-table';

@Component({
  standalone: true,
  imports: [MatSlideToggle, ReactiveFormsModule],
  templateUrl: './boolean-filter.component.html',
})
export class BooleanFilterComponent implements OnInit, FilterEditor {
  column!: BaseColumn<any>;
  filter!: TableCriteria;
  value!: WritableSignal<string | null | undefined>;

  txt = new FormControl('');

  ngOnInit(): void {
    this.txt.valueChanges.subscribe({
      next: val => {
        console.log(`slide ${val} `, typeof val);
        this.value.set(val)
      }
    })
    this.txt.setValue(this.filter.value || false)
  }
}