material-react-table 0.28.0 → 0.29.0

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,6 +1,101 @@
 import React, { FC, useMemo } from 'react';
 import { Box, Menu, MenuItem } from '@mui/material';
 import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
+import { MRT_Localization } from '../localization';
+
+export const internalFilterOptions = (
+  localization: MRT_Localization,
+): {
+  option: string;
+  symbol: string;
+  label: string;
+  divider: boolean;
+}[] => [
+  {
+    option: 'fuzzy',
+    symbol: '≈',
+    label: localization.filterFuzzy,
+    divider: false,
+  },
+  {
+    option: 'contains',
+    symbol: '*',
+    label: localization.filterContains,
+    divider: false,
+  },
+  {
+    option: 'startsWith',
+    symbol: 'a',
+    label: localization.filterStartsWith,
+    divider: false,
+  },
+  {
+    option: 'endsWith',
+    symbol: 'z',
+    label: localization.filterEndsWith,
+    divider: true,
+  },
+  {
+    option: 'equals',
+    symbol: '=',
+    label: localization.filterEquals,
+    divider: false,
+  },
+  {
+    option: 'notEquals',
+    symbol: '≠',
+    label: localization.filterNotEquals,
+    divider: true,
+  },
+  {
+    option: 'between',
+    symbol: '⇿',
+    label: localization.filterBetween,
+    divider: false,
+  },
+  {
+    option: 'betweenInclusive',
+    symbol: '⬌',
+    label: localization.filterBetweenInclusive,
+    divider: true,
+  },
+  {
+    option: 'greaterThan',
+    symbol: '>',
+    label: localization.filterGreaterThan,
+    divider: false,
+  },
+  {
+    option: 'greaterThanOrEqualTo',
+    symbol: '≥',
+    label: localization.filterGreaterThanOrEqualTo,
+    divider: false,
+  },
+  {
+    option: 'lessThan',
+    symbol: '<',
+    label: localization.filterLessThan,
+    divider: false,
+  },
+  {
+    option: 'lessThanOrEqualTo',
+    symbol: '≤',
+    label: localization.filterLessThanOrEqualTo,
+    divider: true,
+  },
+  {
+    option: 'empty',
+    symbol: '∅',
+    label: localization.filterEmpty,
+    divider: false,
+  },
+  {
+    option: 'notEmpty',
+    symbol: '!∅',
+    label: localization.filterNotEmpty,
+    divider: false,
+  },
+];
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -36,106 +131,13 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
 
   const filterOptions = useMemo(
     () =>
-      (
-        [
-          {
-            option: 'fuzzy',
-            symbol: '≈',
-            label: localization.filterFuzzy,
-            divider: false,
-          },
-          {
-            option: 'contains',
-            symbol: '*',
-            label: localization.filterContains,
-            divider: false,
-          },
-          {
-            option: 'startsWith',
-            symbol: 'a',
-            label: localization.filterStartsWith,
-            divider: false,
-          },
-          {
-            option: 'endsWith',
-            symbol: 'z',
-            label: localization.filterEndsWith,
-            divider: true,
-          },
-          {
-            option: 'equals',
-            symbol: '=',
-            label: localization.filterEquals,
-            divider: false,
-          },
-          {
-            option: 'notEquals',
-            symbol: '≠',
-            label: localization.filterNotEquals,
-            divider: true,
-          },
-          {
-            option: 'between',
-            symbol: '⇿',
-            label: localization.filterBetween,
-            divider: false,
-          },
-          {
-            option: 'betweenInclusive',
-            symbol: '⬌',
-            label: localization.filterBetweenInclusive,
-            divider: true,
-          },
-          {
-            option: 'greaterThan',
-            symbol: '>',
-            label: localization.filterGreaterThan,
-            divider: false,
-          },
-          {
-            option: 'greaterThanOrEqualTo',
-            symbol: '≥',
-            label: localization.filterGreaterThanOrEqualTo,
-            divider: false,
-          },
-          {
-            option: 'lessThan',
-            symbol: '<',
-            label: localization.filterLessThan,
-            divider: false,
-          },
-          {
-            option: 'lessThanOrEqualTo',
-            symbol: '≤',
-            label: localization.filterLessThanOrEqualTo,
-            divider: true,
-          },
-          {
-            option: 'empty',
-            symbol: '∅',
-            label: localization.filterEmpty,
-            divider: false,
-          },
-          {
-            option: 'notEmpty',
-            symbol: '!∅',
-            label: localization.filterNotEmpty,
-            divider: false,
-          },
-        ] as Array<{
-          divider: boolean;
-          fn: Function;
-          label: string;
-          option: MRT_FilterOption;
-          symbol?: string;
-        }>
-      ).filter((filterType) =>
+      internalFilterOptions(localization).filter((filterOption) =>
         columnDef
           ? allowedColumnFilterOptions === undefined ||
-            allowedColumnFilterOptions?.includes(filterType.option)
+            allowedColumnFilterOptions?.includes(filterOption.option)
           : (!enabledGlobalFilterOptions ||
-              enabledGlobalFilterOptions.includes(filterType.option)) &&
-            ['fuzzy', 'contains'].includes(filterType.option),
+              enabledGlobalFilterOptions.includes(filterOption.option)) &&
+            ['fuzzy', 'contains'].includes(filterOption.option),
       ),
     [],
   );
@@ -146,7 +148,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         ...prev,
         [header.id]: option,
       }));
-      if (['empty', 'notEmpty'].includes(option)) {
+      if (['empty', 'notEmpty'].includes(option as string)) {
         column.setFilterValue(' ');
       } else if (option === 'between') {
         column.setFilterValue(['', '']);
@@ -178,7 +180,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         <MenuItem
           divider={divider}
           key={index}
-          onClick={() => handleSelectFilterType(option)}
+          onClick={() => handleSelectFilterType(option as MRT_FilterOption)}
           selected={option === filterOption}
           sx={{
             py: '6px',

package/src/table/MRT_TableRoot.tsx

@@ -20,6 +20,7 @@ import {
   prepareColumns,
   getAllLeafColumnDefs,
   getDefaultColumnOrderIds,
+  getDefaultColumnFilterFn,
 } from '../column.utils';
 import { MRT_FilterFns } from '../filtersFns';
 import type {
@@ -114,7 +115,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
                 initialState?.currentFilterFns?.[
                   col.id?.toString() ?? col.accessorKey?.toString() ?? ''
                 ] ??
-                (!!col.filterSelectOptions?.length ? 'equals' : 'fuzzy'),
+                getDefaultColumnFilterFn(col),
         }),
       ),
     ),