= (props) => {
dispatch,
format
} = props;
-
- let headerFilterValues = data?.map((item) => {
- const value = getValueByColumn(item, column);
-
- const formattedValue =
- (format && format({ column, value, rowData: item }))
- || value?.toString();
- return formattedValue;
- });
-
- headerFilterValues = Array.from(new Set(headerFilterValues));
+ let headerFilterValues: any[] | undefined;
+ if (column?.headerFilterListItems){
+ headerFilterValues = column?.headerFilterListItems({ data });
+ } else {
+ headerFilterValues = data?.map((item) => {
+ const value = getValueByColumn(item, column);
+
+ const formattedValue =
+ (format && format({ column, value, rowData: item }))
+ || value?.toString();
+ return formattedValue;
+ });
+ headerFilterValues = Array.from(new Set(headerFilterValues));
+ }
const { elementAttributes, content } = getElementCustomization({
className: `${defaultOptions.css.popupContent}`
}, props, childComponents?.popupContent
);
-
return (
{content ||
diff --git a/src/lib/Components/PopupContentItem/PopupContentItem.tsx b/src/lib/Components/PopupContentItem/PopupContentItem.tsx
index b00100b9..a5528f88 100644
--- a/src/lib/Components/PopupContentItem/PopupContentItem.tsx
+++ b/src/lib/Components/PopupContentItem/PopupContentItem.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
-import { updateHeaderFilterValues } from '../../actionCreators';
-import defaultOptions from '../../defaultOptions';
import { IPopupContentItemProps } from '../../props';
+import PopupContentItemText from '../PopupContentItemText/PopupContentItemText';
+import defaultOptions from '../../defaultOptions';
import { getElementCustomization } from '../../Utils/ComponentUtils';
+import { updateHeaderFilterValues } from '../../actionCreators';
const PopupContentItem: React.FC = (props) => {
const {
@@ -35,9 +36,7 @@ const PopupContentItem: React.FC = (props) => {
onChange={handleChange}
/>
-
- {item}
-
+
)}
diff --git a/src/lib/Components/PopupContentItemText/PopupContentItemText.test.tsx b/src/lib/Components/PopupContentItemText/PopupContentItemText.test.tsx
new file mode 100644
index 00000000..3de2ba23
--- /dev/null
+++ b/src/lib/Components/PopupContentItemText/PopupContentItemText.test.tsx
@@ -0,0 +1,17 @@
+import PopupContentItemText from './PopupContentItemText';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+const props: any = {
+ column: {key: 'field'},
+ childComponents: {},
+ dispatch: () => {},
+ item: ''
+};
+
+it('renders without crashing', () => {
+ const div = document.createElement('div');
+ const root = createRoot(div!);
+ root.render();
+ root.unmount();
+});
diff --git a/src/lib/Components/PopupContentItemText/PopupContentItemText.tsx b/src/lib/Components/PopupContentItemText/PopupContentItemText.tsx
new file mode 100644
index 00000000..88b43b9b
--- /dev/null
+++ b/src/lib/Components/PopupContentItemText/PopupContentItemText.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { IPopupContentItemProps } from '../../props';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
+
+const PopupContentItemText: React.FC = (props) => {
+ const {
+ childComponents,
+ item
+ } = props;
+
+ const { elementAttributes, content } = getElementCustomization({
+ className: 'ka-popup-content-item-value'
+ }, props, childComponents?.popupContentItemText);
+
+ return (
+
+ {content || item.toString()}
+
+ )
+}
+
+export default PopupContentItemText;
diff --git a/src/lib/Models/ChildComponents.ts b/src/lib/Models/ChildComponents.ts
index 496dd0ef..66d022ab 100644
--- a/src/lib/Models/ChildComponents.ts
+++ b/src/lib/Models/ChildComponents.ts
@@ -64,6 +64,7 @@ export class ChildComponents {
public pagingSizes?: ChildComponent;
public popupContent?: ChildComponent;
public popupContentItem?: ChildComponent;
+ public popupContentItemText?: ChildComponent;
public rootDiv?: ChildComponent;
public sortIcon?: ChildComponent;
public summaryCell?: ChildComponent;
diff --git a/src/lib/Models/Column.ts b/src/lib/Models/Column.ts
index 553c8c17..cf097fc8 100644
--- a/src/lib/Models/Column.ts
+++ b/src/lib/Models/Column.ts
@@ -11,6 +11,8 @@ export class Column {
public filterRowValue?: any;
public headerFilterValues?: any[];
public headerFilterPopupPosition?: PopupPosition;
+ public headerFilterListItems?: (props: { data?: any[] }) => any[];
+ public filter?: (value: any, filterValue: any, rowData?: any) => boolean;
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..c53a62c8 100644
--- a/src/lib/Utils/FilterUtils.ts
+++ b/src/lib/Utils/FilterUtils.ts
@@ -59,7 +59,7 @@ export const filterAndSearchData = (props: ITableProps) => {
const getCompare = (column: Column) => {
const filterRowOperator = column.filterRowOperator
- || getDefaultOperatorForType(column.dataType || defaultOptions.columnDataType);
+ || getDefaultOperatorForType(column.dataType || defaultOptions.columnDataType);
const filterOperator = predefinedFilterOperators.find((fo) => filterRowOperator === fo.name);
if (!filterOperator) {
throw new Error(`'${column.filterRowOperator}' has not found in predefinedFilterOperators array, available operators: ${predefinedFilterOperators.map((o) => o.name).join(', ')}`);
@@ -71,12 +71,12 @@ export const filterData = (data: any[], columns: Column[], filter?: FilterFunc):
return columns.reduce((initialData, column) => {
if (
isEmpty(column.filterRowValue)
- && column.filterRowOperator !== FilterOperatorName.IsEmpty
- && column.filterRowOperator !== FilterOperatorName.IsNotEmpty
+ && column.filterRowOperator !== FilterOperatorName.IsEmpty
+ && column.filterRowOperator !== FilterOperatorName.IsNotEmpty
) {
return initialData;
}
- const customFilter = filter?.({ column });
+ const customFilter = column.filter || filter?.({ column });
const compare = customFilter || getCompare(column);
return initialData.filter((d: any) => {
@@ -136,16 +136,19 @@ export const filterByHeaderFilter = (data: any[], columns: Column[], format?: Fo
return columns.reduce((initialData, column) => {
if (
isEmpty(column.headerFilterValues)
- && column.filterRowOperator !== FilterOperatorName.IsEmpty
- && column.filterRowOperator !== FilterOperatorName.IsNotEmpty
+ && column.filterRowOperator !== FilterOperatorName.IsEmpty
+ && column.filterRowOperator !== FilterOperatorName.IsNotEmpty
) {
return initialData;
}
return initialData.filter((item: any) => {
const value: any = getValueByColumn(item, column);
+ if (column?.filter) {
+ return column.filter(value, column.headerFilterValues, item);
+ }
const fieldValue =
- (format && format({ column, value, rowData: item }))
- || value?.toString();
+ (format && format({ column, value, rowData: item }))
+ || value?.toString();
return column.headerFilterValues?.includes(fieldValue);
});
}, data);
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 {