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

@@ -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

__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>

src/components/MTableFilterRow/index.js

@@ -98,7 +98,7 @@ export function MTableFilterRow({
     );
   }
 
-  columns
+  propColumns
     .filter((columnDef) => columnDef.tableData.groupOrder > -1)
     .forEach((columnDef) => {
       columns.splice(

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(

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([

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,

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;