feat: add the option to change the filter operator (#816)

Author: cococov

__tests__/demo/demo-components/index.js

@@ -1,6 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react';
 
-import { Box, Input, InputAdornment } from '@mui/material';
+import {
+  Box,
+  Input,
+  InputAdornment,
+  TextField,
+  Select,
+  MenuItem
+} from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 
 // root of this project
@@ -1467,3 +1474,122 @@ export function LocalizationWithCustomComponents() {
     />
   );
 }
+
+function CustomFilterWithOperatorSelection({ columnDef, onFilterChanged }) {
+  const [operator, setOperator] = React.useState('=');
+  const [value, setValue] = React.useState(undefined);
+  const operatorRef = React.useRef(operator);
+  const valueRef = React.useRef(value);
+
+  React.useEffect(() => {
+    if (operatorRef.current !== operator || valueRef.current !== value) {
+      onFilterChanged(columnDef.tableData.id, value, operator);
+      operatorRef.current = operator;
+      valueRef.current = value;
+    }
+  }, [operator, value]);
+
+  return (
+    <span>
+      <Select
+        labelId="demo-simple-select-label"
+        id="demo-simple-select"
+        variant="standard"
+        value={operator}
+        onChange={(e) => setOperator(e.target.value)}
+      >
+        <MenuItem value={'='}>=</MenuItem>
+        <MenuItem value={'>'}>&gt;</MenuItem>
+        <MenuItem value={'<'}>&lt;</MenuItem>
+      </Select>
+      <TextField
+        variant="standard"
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </span>
+  );
+}
+
+const columns_with_custom_filter = [
+  { title: 'Name', field: 'name', filtering: true },
+  {
+    title: 'Some Number',
+    field: 'some_number',
+    filtering: true,
+    filterComponent: ({ columnDef, onFilterChanged }) => (
+      <CustomFilterWithOperatorSelection
+        columnDef={columnDef}
+        onFilterChanged={onFilterChanged}
+      />
+    )
+  }
+];
+
+const data_with_custom_filter = [
+  { name: 'Juan', some_number: 1 },
+  { name: 'John', some_number: 4 },
+  { name: 'Pedro', some_number: 8 },
+  { name: 'Mary', some_number: 12 },
+  { name: 'Oliver', some_number: 2 },
+  { name: 'Ignacio', some_number: 4 }
+];
+
+export function FilterWithOperatorSelection() {
+  return (
+    <MaterialTable
+      data={(query) =>
+        new Promise((resolve, _reject) => {
+          if (query.filters.length > 0) {
+            query.filters.forEach((filter) => {
+              if (
+                filter.value !== undefined &&
+                filter.value !== null &&
+                filter.value !== ''
+              ) {
+                switch (filter.operator) {
+                  case '=':
+                    resolve({
+                      data: data_with_custom_filter.filter(
+                        (row) => row[filter.column.field] == filter.value
+                      ),
+                      page: 1,
+                      totalCount: data_with_custom_filter.length
+                    });
+                    break;
+                  case '>':
+                    resolve({
+                      data: data_with_custom_filter.filter(
+                        (row) => row[filter.column.field] > filter.value
+                      ),
+                      page: 1,
+                      totalCount: data_with_custom_filter.length
+                    });
+                    break;
+                  case '<':
+                    resolve({
+                      data: data_with_custom_filter.filter(
+                        (row) => row[filter.column.field] < filter.value
+                      ),
+                      page: 1,
+                      totalCount: data_with_custom_filter.length
+                    });
+                    break;
+                }
+              }
+            });
+          }
+          resolve({
+            data: data_with_custom_filter,
+            page: 1,
+            totalCount: data_with_custom_filter.length
+          });
+        })
+      }
+      columns={columns_with_custom_filter}
+      options={{
+        search: false,
+        filtering: true
+      }}
+    />
+  );
+}

__tests__/demo/demo.js

@@ -48,6 +48,7 @@ import {
   TableWithSummary,
   TableWithNumberOfPagesAround,
   FixedColumnWithEdit,
+  FilterWithOperatorSelection,
   TableMultiSorting,
   LocalizationWithCustomComponents
 } from './demo-components';
@@ -154,6 +155,8 @@ function Demo() {
           <FixedColumnWithEdit />
           <h1>Localization with Custom Components</h1>
           <LocalizationWithCustomComponents />
+          <h1>Filter with operator selection</h1>
+          <FilterWithOperatorSelection />
           <h1>Remote Data Related</h1>
           <ol>
             <li>

src/material-table.js

@@ -788,8 +788,9 @@ export default class MaterialTable extends React.Component {
     }
   }, this.props.options.debounceInterval);
 
-  onFilterChange = (columnId, value) => {
+  onFilterChange = (columnId, value, operator = '=') => {
     this.dataManager.changeFilterValue(columnId, value);
+    this.dataManager.changeFilterOperator(columnId, operator);
     this.setState({}, this.onFilterChangeDebounce);
   };
 
@@ -801,7 +802,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
         }));
 
@@ -815,7 +816,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
             }));
           this.props.onFilterChange(appliedFilters);

src/utils/data-manager.js

@@ -273,6 +273,13 @@ export default class DataManager {
     this.filtered = false;
   }
 
+  changeFilterOperator(columnId, operator) {
+    const column = this.columns.find((c) => c.tableData.id === columnId);
+
+    column.tableData.filterOperator = operator;
+    this.filtered = false;
+  }
+
   changeRowSelected(checked, path) {
     const rowData = this.findDataByPath(this.sortedData, path);
     rowData.tableData.checked = checked;