material-react-table 0.6.9 → 0.6.10

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -4,11 +4,12 @@ import { useMRT } from '../useMRT';
 import type { MRT_FilterType, MRT_HeaderGroup } from '..';
 import { MRT_FILTER_TYPE } from '../enums';
 import {
+  bestMatch,
+  bestMatchFirst,
   contains,
   empty,
   endsWith,
   equals,
-  fuzzy,
   greaterThan,
   lessThan,
   notEmpty,
@@ -24,7 +25,7 @@ const commonMenuItemStyles = {
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: MRT_HeaderGroup;
+  column?: MRT_HeaderGroup;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   onSelect?: () => void;
 }
@@ -35,7 +36,13 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
   onSelect,
   setAnchorEl,
 }) => {
-  const { localization, setCurrentFilterTypes, tableInstance } = useMRT();
+  const {
+    enabledGlobalFilterTypes,
+    localization,
+    setCurrentFilterTypes,
+    setCurrentGlobalFilterType,
+    tableInstance,
+  } = useMRT();
 
   const filterTypes: {
     type: MRT_FILTER_TYPE;
@@ -46,15 +53,21 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
     () =>
       [
         {
-          type: MRT_FILTER_TYPE.FUZZY,
-          label: localization.filterFuzzy,
+          type: MRT_FILTER_TYPE.BEST_MATCH_FIRST,
+          label: localization.filterBestMatchFirst,
           divider: false,
-          fn: fuzzy,
+          fn: bestMatchFirst,
+        },
+        {
+          type: MRT_FILTER_TYPE.BEST_MATCH,
+          label: localization.filterBestMatch,
+          divider: !!column,
+          fn: bestMatch,
         },
         {
           type: MRT_FILTER_TYPE.CONTAINS,
           label: localization.filterContains,
-          divider: true,
+          divider: false,
           fn: contains,
         },
         {
@@ -105,26 +118,39 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
           divider: false,
           fn: notEmpty,
         },
-      ].filter(
-        (filterType) =>
-          !column.filterTypes || column.filterTypes.includes(filterType.type),
+      ].filter((filterType) =>
+        column
+          ? !column.enabledFilterTypes ||
+            column.enabledFilterTypes.includes(filterType.type)
+          : (!enabledGlobalFilterTypes ||
+              enabledGlobalFilterTypes.includes(filterType.type)) &&
+            [
+              MRT_FILTER_TYPE.BEST_MATCH_FIRST,
+              MRT_FILTER_TYPE.BEST_MATCH,
+            ].includes(filterType.type),
       ),
     [],
   );
 
   const handleSelectFilterType = (value: MRT_FILTER_TYPE) => {
-    setAnchorEl(null);
-    setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
-      ...prev,
-      [column.id]: value,
-    }));
-    if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
-      column.setFilter(' ');
+    if (column) {
+      setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
+        ...prev,
+        [column.id]: value,
+      }));
+      if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
+        column.setFilter(' ');
+      }
+    } else {
+      setCurrentGlobalFilterType(value);
     }
+    setAnchorEl(null);
     onSelect?.();
   };
 
-  const filterType = tableInstance.state.currentFilterTypes[column.id];
+  const filterType = column
+    ? tableInstance.state.currentFilterTypes[column.id]
+    : tableInstance.state.currentGlobalFilterType;
 
   return (
     <Menu

package/src/useMRT.tsx

@@ -47,6 +47,7 @@ export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
       [key: string]: MRT_FilterType;
     }>
   >;
+  setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
   setDensePadding: Dispatch<SetStateAction<boolean>>;
   setFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
@@ -98,11 +99,17 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
         [c.accessor as string]:
           c.filter ??
           props?.initialState?.filters?.[c.accessor as any] ??
-          (!!c.filterSelectOptions ? 'equals' : 'fuzzy'),
+          (!!c.filterSelectOptions?.length
+            ? MRT_FILTER_TYPE.EQUALS
+            : MRT_FILTER_TYPE.BEST_MATCH),
       })),
     ),
   );
 
+  const [currentGlobalFilterType, setCurrentGlobalFilterType] = useState<
+    MRT_FilterType | string | undefined
+  >(props.globalFilter);
+
   const applyFiltersToColumns = useCallback(
     (cols: MRT_ColumnInterface[]) =>
       cols.map((column) => {
@@ -146,12 +153,14 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
       // @ts-ignore
       columns,
       data,
+      globalFilter: currentGlobalFilterType,
       useControlledState: (state) =>
         useMemo(
           () => ({
             ...state,
             currentEditingRow,
             currentFilterTypes,
+            currentGlobalFilterType,
             densePadding,
             fullScreen,
             showFilters,
@@ -162,6 +171,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
           [
             currentEditingRow,
             currentFilterTypes,
+            currentGlobalFilterType,
             densePadding,
             fullScreen,
             showFilters,
@@ -196,6 +206,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
         //@ts-ignore
         setCurrentEditingRow,
         setCurrentFilterTypes,
+        setCurrentGlobalFilterType,
         setDensePadding,
         setFullScreen,
         setShowFilters,