From 93e61ea4bf3cf0e2b57dd16ae5a9730c3dd6e1e4 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Mon, 5 Feb 2024 13:36:00 -0500
Subject: [PATCH] Fix #3325: Datatable custom filter demo (#5902)

---
 components/doc/datatable/filter/customdoc.js | 706 +++++++++++++++++++
 pages/datatable/index.js                     |   6 +
 2 files changed, 712 insertions(+)
 create mode 100644 components/doc/datatable/filter/customdoc.js

diff --git a/components/doc/datatable/filter/customdoc.js b/components/doc/datatable/filter/customdoc.js
new file mode 100644
index 0000000000..1581286bba
--- /dev/null
+++ b/components/doc/datatable/filter/customdoc.js
@@ -0,0 +1,706 @@
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FilterMatchMode, FilterService } from '@/components/lib/api/Api';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { Tag } from '@/components/lib/tag/Tag';
+import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+
+// The rule argument should be a string in the format "custom_[field]".
+FilterService.register('custom_activity', (value, filters) => {
+    const [from, to] = filters ?? [null, null];
+
+    if (from === null && to === null) return true;
+    if (from !== null && to === null) return from <= value;
+    if (from === null && to !== null) return value <= to;
+
+    return from <= value && value <= to;
+});
+
+export function CustomFilterDoc(props) {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        // For using custom filters, you must set FilterMatchMode.CUSTOM to matchMode.
+        activity: { value: null, matchMode: FilterMatchMode.CUSTOM },
+        status: { value: null, matchMode: FilterMatchMode.EQUALS },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    });
+    const [loading, setLoading] = useState(true);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+    };
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <span className="p-input-icon-left">
+                    <i className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </span>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${representative.image}`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${option.image}`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const verifiedBodyTemplate = (rowData) => {
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })}></i>;
+    };
+
+    const representativeRowFilterTemplate = (options) => {
+        return (
+            <MultiSelect
+                value={options.value}
+                options={representatives}
+                itemTemplate={representativesItemTemplate}
+                onChange={(e) => options.filterApplyCallback(e.value)}
+                optionLabel="name"
+                placeholder="Any"
+                className="p-column-filter"
+                maxSelectedLabels={1}
+                style={{ minWidth: '14rem' }}
+            />
+        );
+    };
+
+    const statusRowFilterTemplate = (options) => {
+        return (
+            <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear style={{ minWidth: '12rem' }} />
+        );
+    };
+
+    const verifiedRowFilterTemplate = (options) => {
+        return <TriStateCheckbox value={options.value} onChange={(e) => options.filterApplyCallback(e.value)} />;
+    };
+
+    const activityRowFilterTemplate = (options) => {
+        const [from, to] = options.value ?? [null, null];
+
+        return (
+            <div className="flex gap-1">
+                <InputNumber value={from} onChange={(e) => options.filterApplyCallback([e.value, to])} className="w-full" placeholder="from" />
+                <InputNumber value={to} onChange={(e) => options.filterApplyCallback([from, e.value])} className="w-full" placeholder="to" />
+            </div>
+        );
+    };
+
+    const header = renderHeader();
+
+    const code = {
+        basic: `
+// The rule argument should be a string in the format "custom_[field]".
+FilterService.register('custom_activity', (value, filters) => {
+  const [from, to] = filters ?? [null, null];
+  if (from === null && to === null) return true;
+  if (from !== null && to === null) return from <= value;
+  if (from === null && to !== null) return value <= to;
+  return from <= value && value <= to;
+});
+
+<DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
+        globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
+    <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+    <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+    <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+        body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
+    <Column header="Activity(Custom Filter)" field="activity" showFilterMenu={false} showClearButton={false} style={{ minWidth: '14rem' }} filter filterElement={activityRowFilterTemplate} />
+    <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+    <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { FilterMatchMode, FilterService } from 'primereact/api';
+import { DataTable, DataTableFilterMeta } from 'primereact/datatable';
+import { Column, ColumnFilterElementTemplateOptions } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { Tag } from 'primereact/tag';
+import { TriStateCheckbox, TriStateCheckboxChangeEvent} from 'primereact/tristatecheckbox';
+import { CustomerService } from './service/CustomerService';
+import { InputNumber } from 'primereact/inputnumber';
+
+// The rule argument should be a string in the format "custom_[field]".
+FilterService.register('custom_activity', (value, filters) => {
+  const [from, to] = filters ?? [null, null];
+  if (from === null && to === null) return true;
+  if (from !== null && to === null) return from <= value;
+  if (from === null && to !== null) return value <= to;
+  return from <= value && value <= to;
+});
+
+export default function CustomFilterDemo() {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        // For using custom filters, you must set FilterMatchMode.CUSTOM to matchMode.
+        activity: { value: null, matchMode: FilterMatchMode.CUSTOM },
+        status: { value: null, matchMode: FilterMatchMode.EQUALS },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    });
+    const [loading, setLoading] = useState(true);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <span className="p-input-icon-left">
+                    <i className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </span>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const verifiedBodyTemplate = (rowData) => {
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })}></i>;
+    };
+
+    const representativeRowFilterTemplate = (options) => {
+        return (
+            <MultiSelect
+                value={options.value}
+                options={representatives}
+                itemTemplate={representativesItemTemplate}
+                onChange={(e) => options.filterApplyCallback(e.value)}
+                optionLabel="name"
+                placeholder="Any"
+                className="p-column-filter"
+                maxSelectedLabels={1}
+                style={{ minWidth: '14rem' }}
+            />
+        );
+    };
+
+    const statusRowFilterTemplate = (options) => {
+        return (
+            <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear style={{ minWidth: '12rem' }} />
+        );
+    };
+
+    const verifiedRowFilterTemplate = (options) => {
+        return <TriStateCheckbox value={options.value} onChange={(e) => options.filterApplyCallback(e.value)} />;
+    };
+
+    const activityRowFilterTemplate = (options) => {
+        const [from, to] = options.value ?? [null, null];
+
+        return (
+            <div className="flex gap-1">
+                <InputNumber value={from} onChange={(e) => options.filterApplyCallback([e.value, to])} className="w-full" placeholder="from" />
+                <InputNumber value={to} onChange={(e) => options.filterApplyCallback([from, e.value])} className="w-full" placeholder="to" />
+            </div>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
+                    globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
+                <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+                    body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
+                <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+                <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { FilterMatchMode, FilterService } from 'primereact/api';
+import { DataTable, DataTableFilterMeta } from 'primereact/datatable';
+import { Column, ColumnFilterElementTemplateOptions } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { Tag } from 'primereact/tag';
+import { TriStateCheckbox, TriStateCheckboxChangeEvent} from 'primereact/tristatecheckbox';
+import { CustomerService } from './service/CustomerService';
+import { InputNumber } from 'primereact/inputnumber';
+
+interface Representative {
+  name: string;
+  image: string;
+}
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+interface Customer {
+  id: number;
+  name: string;
+  country: Country;
+  company: string;
+  date: string;
+  status: string;
+  verified: boolean;
+  activity: number;
+  representative: Representative;
+  balance: number;
+}
+
+// The rule argument should be a string in the format "custom_[field]".
+FilterService.register('custom_activity', (value, filters) => {
+  const [from, to] = filters ?? [null, null];
+  if (from === null && to === null) return true;
+  if (from !== null && to === null) return from <= value;
+  if (from === null && to !== null) return value <= to;
+  return from <= value && value <= to;
+});
+
+export default function CustomFilterDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [filters, setFilters] = useState<DataTableFilterMeta>({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        // For using custom filters, you must set FilterMatchMode.CUSTOM to matchMode.
+        activity: { value: null, matchMode: FilterMatchMode.CUSTOM },
+        status: { value: null, matchMode: FilterMatchMode.EQUALS },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    });
+    const [loading, setLoading] = useState<boolean>(true);
+    const [globalFilterValue, setGlobalFilterValue] = useState<string>('');
+    const [representatives] = useState<Representative[]>([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState<string[]>(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status: string) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data: Customer[]) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getCustomers = (data: Customer[]) => {
+        return [...(data || [])].map((d) => {
+            // @ts-ignore
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const onGlobalFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        // @ts-ignore
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <span className="p-input-icon-left">
+                    <i className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </span>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData: Customer) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativesItemTemplate = (option: Representative) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Customer) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusItemTemplate = (option: string) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const verifiedBodyTemplate = (rowData: Customer) => {
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })}></i>;
+    };
+
+    const representativeRowFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <MultiSelect
+                value={options.value}
+                options={representatives}
+                itemTemplate={representativesItemTemplate}
+                onChange={(e: MultiSelectChangeEvent) => options.filterApplyCallback(e.value)}
+                optionLabel="name"
+                placeholder="Any"
+                className="p-column-filter"
+                maxSelectedLabels={1}
+                style={{ minWidth: '14rem' }}
+            />
+        );
+    };
+
+    const statusRowFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <Dropdown value={options.value} options={statuses} onChange={(e: DropdownChangeEvent) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear style={{ minWidth: '12rem' }} />
+        );
+    };
+
+    const verifiedRowFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <TriStateCheckbox value={options.value} onChange={(e: TriStateCheckboxChangeEvent) => options.filterApplyCallback(e.value)} />;
+    };
+
+    const activityRowFilterTemplate = (options) => {
+        const [from, to] = options.value ?? [null, null];
+
+        return (
+            <div className="flex gap-1">
+                <InputNumber value={from} onChange={(e) => options.filterApplyCallback([e.value, to])} className="w-full" placeholder="from" />
+                <InputNumber value={to} onChange={(e) => options.filterApplyCallback([from, e.value])} className="w-full" placeholder="to" />
+            </div>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
+                    globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
+                <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+                    body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
+                <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+                <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom filtering is enabled by defining a filter function using <i>FilterService.register</i> where the rule argument must be <i>"custom_[field]"</i>. The "Activity" field in this example allows custom filtering by a range of two
+                    values.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={customers}
+                        paginator
+                        rows={10}
+                        dataKey="id"
+                        filters={filters}
+                        filterDisplay="row"
+                        loading={loading}
+                        globalFilterFields={['name', 'country.name', 'representative.name', 'status']}
+                        header={header}
+                        emptyMessage="No customers found."
+                    >
+                        <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                        <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                        <Column
+                            header="Agent"
+                            filterField="representative"
+                            showFilterMenu={false}
+                            filterMenuStyle={{ width: '14rem' }}
+                            style={{ minWidth: '14rem' }}
+                            body={representativeBodyTemplate}
+                            filter
+                            filterElement={representativeRowFilterTemplate}
+                        />
+                        <Column header="Activity(Custom Filter)" field="activity" showFilterMenu={false} showClearButton={false} style={{ minWidth: '14rem' }} filter filterElement={activityRowFilterTemplate} />
+                        <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+                        <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/pages/datatable/index.js b/pages/datatable/index.js
index 316c7513ca..08b74f26ae 100644
--- a/pages/datatable/index.js
+++ b/pages/datatable/index.js
@@ -18,6 +18,7 @@ import { RowEditDoc } from '@/components/doc/datatable/edit/roweditdoc';
 import { ExportDoc } from '@/components/doc/datatable/exportdoc';
 import { AdvancedFilterDoc } from '@/components/doc/datatable/filter/advanceddoc';
 import { BasicFilterDoc } from '@/components/doc/datatable/filter/basicdoc';
+import { CustomFilterDoc } from '@/components/doc/datatable/filter/customdoc';
 import { GridLinesDoc } from '@/components/doc/datatable/gridlinesdoc';
 import { ImportDoc } from '@/components/doc/datatable/importdoc';
 import { LazyLoadDoc } from '@/components/doc/datatable/lazyloaddoc';
@@ -148,6 +149,11 @@ const DataTableDemo = () => {
                     id: 'advanced_filter',
                     label: 'Advanced',
                     component: AdvancedFilterDoc
+                },
+                {
+                    id: 'custom_filter',
+                    label: 'Custom',
+                    component: CustomFilterDoc
                 }
             ]
         },