add filter option to column

komarovalexander · Dec 20, 2023 · fd899c5 · fd899c5
1 parent 0fcb465
commit fd899c5
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 8 deletions.
diff --git a/src/Demos/FilterRowCustomLogicDemo/FilterRowCustomLogicDemo.tsx b/src/Demos/FilterRowCustomLogicDemo/FilterRowCustomLogicDemo.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-
 import { DataType, Table } from '../../lib';
+
 import FilterRowNumber from '../../lib/Components/FilterRowNumber/FilterRowNumber';
 import { FilteringMode } from '../../lib/enums';
+import React from 'react';
 
 const dataArray: any[] = [
     { id: 1, name: 'Mike Wazowski', score: 80, prevScores: [60, 65, 70], passed: true, nextTry: new Date(2021, 10, 9) },
@@ -42,6 +42,7 @@ const FilterRowCustomLogicDemo: React.FC = () => {
                     filterRowValue: 60,
                     key: 'prevScores',
                     style: {width: 120},
+                    filter: (value: number[], filterRowValue: number) => value.includes(Number(filterRowValue)),
                     title: 'Previous Scores',
                 }
             ]}
@@ -51,11 +52,6 @@ const FilterRowCustomLogicDemo: React.FC = () => {
                     return value.join();
                 }
             }}
-            filter= {({ column }) => {
-                if (column.key === 'prevScores') {
-                    return (value: number[], filterRowValue: number) => value.includes(Number(filterRowValue));
-                }
-            }}
             filteringMode={FilteringMode.FilterRow}
             rowKeyField={'id'}
             childComponents={{

diff --git a/src/lib/Models/Column.ts b/src/lib/Models/Column.ts
@@ -11,6 +11,7 @@ export class Column {
     public filterRowValue?: any;
     public headerFilterValues?: any[];
     public headerFilterPopupPosition?: PopupPosition;
+    public filter?: ((value: any, filterValue: any, rowData?: any) => boolean) | void;
     public isHeaderFilterPopupShown?: boolean;
     public isEditable?: boolean;
     public isFilterable?: boolean;

diff --git a/src/lib/Utils/FilterUtils.test.ts b/src/lib/Utils/FilterUtils.test.ts
@@ -133,6 +133,17 @@ describe('FilterUtils', () => {
             }];
             expect(() => filterData(data, columns)).toThrowError('\'unknownOperator\' has not found in predefinedFilterOperators array, available operators: =, >, <, >=, <=, contains');
         });
+
+        it('custom column filter', () => {
+            const columns = [{
+                dataType: DataType.Number,
+                filterRowValue: 45,
+                key: 'score',
+                filter: (value: any, filterValue: any) => value === filterValue,
+            }];
+            const result = filterData(data, columns);
+            expect(result).toMatchSnapshot();
+        });
     });
 
     [{

diff --git a/src/lib/Utils/FilterUtils.ts b/src/lib/Utils/FilterUtils.ts
@@ -76,7 +76,7 @@ export const filterData = (data: any[], columns: Column[], filter?: FilterFunc):
         ) {
             return initialData;
         }
-        const customFilter = filter?.({ column });
+        const customFilter = column.filter || filter?.({ column });
         const compare = customFilter || getCompare(column);
 
         return initialData.filter((d: any) => {

diff --git a/src/lib/Utils/__snapshots__/FilterUtils.test.ts.snap b/src/lib/Utils/__snapshots__/FilterUtils.test.ts.snap
@@ -71,6 +71,18 @@ Array [
 ]
 `;
 
+exports[`FilterUtils filterData custom column filter 1`] = `
+Array [
+  Object {
+    "date": 2021-11-20T13:00:00.000Z,
+    "id": 3,
+    "name": "Tom Williams",
+    "passed": false,
+    "score": 45,
+  },
+]
+`;
+
 exports[`FilterUtils filterData custom filter 1`] = `
 Array [
   Object {