From 6efc8187741d43ce0e74e1747c20eddfc1ee70e3 Mon Sep 17 00:00:00 2001
From: Juan Carlos Lamas <contact@juanlamas.dev>
Date: Tue, 21 May 2024 12:56:55 -0400
Subject: [PATCH] Add the option of a default filter operator and fix filters
 (#849)

* fix: broken filters by wrong rename in refactor

* feat: add default filter operator
---
 __tests__/demo/demo-components/index.js | 32 +++++++++++++++++++++----
 __tests__/demo/demo.js                  |  2 ++
 src/components/MTableFilterRow/index.js |  2 +-
 src/material-table.js                   |  2 +-
 src/prop-types.js                       |  1 +
 src/utils/data-manager.js               |  1 +
 types/index.d.ts                        |  1 +
 7 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
index a0e5ced3..5b585240 100644
--- a/__tests__/demo/demo-components/index.js
+++ b/__tests__/demo/demo-components/index.js
@@ -1476,8 +1476,10 @@ export function LocalizationWithCustomComponents() {
 }
 
 function CustomFilterWithOperatorSelection({ columnDef, onFilterChanged }) {
-  const [operator, setOperator] = React.useState('=');
-  const [value, setValue] = React.useState(undefined);
+  const [operator, setOperator] = React.useState(
+    columnDef.tableData.filterOperator
+  );
+  const [value, setValue] = React.useState(columnDef.defaultFilter);
   const operatorRef = React.useRef(operator);
   const valueRef = React.useRef(value);
 
@@ -1504,6 +1506,7 @@ function CustomFilterWithOperatorSelection({ columnDef, onFilterChanged }) {
       </Select>
       <TextField
         variant="standard"
+        value={value}
         onChange={(e) => setValue(e.target.value)}
       />
     </span>
@@ -1525,6 +1528,23 @@ const columns_with_custom_filter = [
   }
 ];
 
+const columns_with_custom_filter_and_default_filter = [
+  { title: 'Name', field: 'name', filtering: true },
+  {
+    title: 'Some Number',
+    field: 'some_number',
+    filtering: true,
+    defaultFilter: '4',
+    defaultFilterOperator: '>',
+    filterComponent: ({ columnDef, onFilterChanged }) => (
+      <CustomFilterWithOperatorSelection
+        columnDef={columnDef}
+        onFilterChanged={onFilterChanged}
+      />
+    )
+  }
+];
+
 const data_with_custom_filter = [
   { name: 'Juan', some_number: 1 },
   { name: 'John', some_number: 4 },
@@ -1534,7 +1554,7 @@ const data_with_custom_filter = [
   { name: 'Ignacio', some_number: 4 }
 ];
 
-export function FilterWithOperatorSelection() {
+export function FilterWithOperatorSelection({ withDefaultFilter = false }) {
   return (
     <MaterialTable
       data={(query) =>
@@ -1585,7 +1605,11 @@ export function FilterWithOperatorSelection() {
           });
         })
       }
-      columns={columns_with_custom_filter}
+      columns={
+        withDefaultFilter
+          ? columns_with_custom_filter_and_default_filter
+          : columns_with_custom_filter
+      }
       options={{
         search: false,
         filtering: true
diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js
index 8f8eb8d4..64113f1a 100644
--- a/__tests__/demo/demo.js
+++ b/__tests__/demo/demo.js
@@ -157,6 +157,8 @@ function Demo() {
           <LocalizationWithCustomComponents />
           <h1>Filter with operator selection</h1>
           <FilterWithOperatorSelection />
+          <h1>Filter with operator selection and default operator</h1>
+          <FilterWithOperatorSelection withDefaultFilter />
           <h1>Remote Data Related</h1>
           <ol>
             <li>
diff --git a/src/components/MTableFilterRow/index.js b/src/components/MTableFilterRow/index.js
index c5ea1937..e7025a6c 100644
--- a/src/components/MTableFilterRow/index.js
+++ b/src/components/MTableFilterRow/index.js
@@ -98,7 +98,7 @@ export function MTableFilterRow({
     );
   }
 
-  columns
+  propColumns
     .filter((columnDef) => columnDef.tableData.groupOrder > -1)
     .forEach((columnDef) => {
       columns.splice(
diff --git a/src/material-table.js b/src/material-table.js
index 0f3a3bb5..57b56645 100644
--- a/src/material-table.js
+++ b/src/material-table.js
@@ -37,7 +37,7 @@ export default class MaterialTable extends React.Component {
           .filter((a) => a.tableData.filterValue)
           .map((a) => ({
             column: a,
-            operator: '=',
+            operator: a.tableData.filterOperator,
             value: a.tableData.filterValue
           })),
         orderBy: renderState.columns.find(
diff --git a/src/prop-types.js b/src/prop-types.js
index df18fda2..27e9c97a 100644
--- a/src/prop-types.js
+++ b/src/prop-types.js
@@ -67,6 +67,7 @@ export const propTypes = {
       customSort: PropTypes.func,
       customExport: PropTypes.func,
       defaultFilter: PropTypes.any,
+      defaultFilterOperator: PropTypes.string,
       defaultSort: PropTypes.oneOf(['asc', 'desc']),
       editComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
       emptyValue: PropTypes.oneOfType([
diff --git a/src/utils/data-manager.js b/src/utils/data-manager.js
index ba22326d..28816a02 100644
--- a/src/utils/data-manager.js
+++ b/src/utils/data-manager.js
@@ -137,6 +137,7 @@ export default class DataManager {
       const tableData = {
         columnOrder: index,
         filterValue: columnDef.defaultFilter,
+        filterOperator: columnDef.defaultFilterOperator || '=',
         groupOrder: columnDef.defaultGroupOrder,
         groupSort: columnDef.defaultGroupSort || 'asc',
         width,
diff --git a/types/index.d.ts b/types/index.d.ts
index 8a67b7a0..7ece81c6 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -226,6 +226,7 @@ export interface Column<RowData extends object> {
   //customExport prop handle flattening of data at column level before passing data to exporter. Note exportMenu.exportFunc is an alternative to handle data change at exporter level
   customExport?: (rowData: RowData) => unknown;
   defaultFilter?: any;
+  defaultFilterOperator?: string;
   filterOnItemSelect?: boolean;
   defaultGroupOrder?: number;
   id?: unknown;