diff --git a/src/Demos/FilterRowCustomLogicDemo/FilterRowCustomLogicDemo.tsx b/src/Demos/FilterRowCustomLogicDemo/FilterRowCustomLogicDemo.tsx index 64eff5be..73deb258 100644 --- 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 index 553c8c17..6db49805 100644 --- 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 index cba390ba..5246cb2a 100644 --- 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 index 66cb5886..87ee0357 100644 --- 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 index 08b2872b..058f0a93 100644 --- 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 {