material-react-table 0.28.0 → 0.29.0

package/dist/material-react-table.esm.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useCallback, Fragment, useRef, useLayoutEffect, useEffect } from 'react';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, useMediaQuery, Toolbar, lighten, alpha, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
@@ -52,6 +52,9 @@ var MRT_DefaultLocalization_EN = {
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',
+  filterArrIncludes: 'Includes',
+  filterArrIncludesAll: 'Includes all',
+  filterArrIncludesSome: 'Includes',
   filterBetween: 'Between',
   filterBetweenInclusive: 'Between Inclusive',
   filterByColumn: 'Filter by {column}',
@@ -59,15 +62,20 @@ var MRT_DefaultLocalization_EN = {
   filterEmpty: 'Empty',
   filterEndsWith: 'Ends With',
   filterEquals: 'Equals',
+  filterEqualsString: 'Equals',
   filterFuzzy: 'Fuzzy',
   filterGreaterThan: 'Greater Than',
   filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
+  filterInNumberRange: 'Between',
+  filterIncludesString: 'Contains',
+  filterIncludesStringSensitive: 'Contains',
   filterLessThan: 'Less Than',
   filterLessThanOrEqualTo: 'Less Than Or Equal To',
   filterMode: 'Filter Mode: {filterType}',
   filterNotEmpty: 'Not Empty',
   filterNotEquals: 'Not Equals',
   filterStartsWith: 'Starts With',
+  filterWeakEquals: 'Equals',
   filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
   grab: 'Grab',
   groupByColumn: 'Group by {column}',
@@ -77,6 +85,7 @@ var MRT_DefaultLocalization_EN = {
   max: 'Max',
   min: 'Min',
   move: 'Move',
+  or: 'or',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',
@@ -232,6 +241,79 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   }))));
 };
 
+var internalFilterOptions = function internalFilterOptions(localization) {
+  return [{
+    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
+  }];
+};
 var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var _columnDef$columnFilt;
 
@@ -261,78 +343,8 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
 
   var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
   var filterOptions = useMemo(function () {
-    return [{
-      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
-    }].filter(function (filterType) {
-      return columnDef ? allowedColumnFilterOptions === undefined || (allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.includes(filterType.option)) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.option)) && ['fuzzy', 'contains'].includes(filterType.option);
+    return internalFilterOptions(localization).filter(function (filterOption) {
+      return columnDef ? allowedColumnFilterOptions === undefined || (allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.includes(filterOption.option)) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterOption.option)) && ['fuzzy', 'contains'].includes(filterOption.option);
     });
   }, []);
 
@@ -699,7 +711,9 @@ var prepareColumns = function prepareColumns(columnDefs, currentFilterFns) {
       if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
         var _MRT_FilterFns$curren;
 
-        columnDef.filterFn = (_MRT_FilterFns$curren = MRT_FilterFns[currentFilterFns[columnDef.id]]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy;
+        columnDef.filterFn = (_MRT_FilterFns$curren = MRT_FilterFns[currentFilterFns[columnDef.id]]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy; //@ts-ignore
+
+        columnDef._filterFn = currentFilterFns[columnDef.id];
       }
 
       if (Object.keys(MRT_SortingFns).includes(columnDef.sortingFn)) {
@@ -730,6 +744,12 @@ var getDefaultColumnOrderIds = function getDefaultColumnOrderIds(props) {
     return getColumnId(columnDef);
   }), getTrailingDisplayColumnIds(props)).filter(Boolean);
 };
+var getDefaultColumnFilterFn = function getDefaultColumnFilterFn(columnDef) {
+  if (columnDef.filterVariant === 'multiSelect') return 'arrIncludesSome';
+  if (columnDef.filterVariant === 'select') return 'equals';
+  if (columnDef.filterVariant === 'range') return 'betweenInclusive';
+  return 'fuzzy';
+};
 
 var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
@@ -2117,7 +2137,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var _currentFilterOption$, _localization$filterB, _columnDef$columnFilt, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
-      inputIndex = _ref.inputIndex,
+      rangeFilterIndex = _ref.rangeFilterIndex,
       table = _ref.table;
   var getState = table.getState,
       _table$options = table.options,
@@ -2136,25 +2156,39 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var _getState = getState(),
       currentFilterFns = _getState.currentFilterFns;
 
-  var _useState = useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
-
   var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps({
     column: column,
-    table: table
+    table: table,
+    rangeFilterIndex: rangeFilterIndex
   }) : muiTableHeadCellFilterTextFieldProps;
   var mcTableHeadCellFilterTextFieldProps = columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function ? columnDef.muiTableHeadCellFilterTextFieldProps({
     column: column,
-    table: table
+    table: table,
+    rangeFilterIndex: rangeFilterIndex
   }) : columnDef.muiTableHeadCellFilterTextFieldProps;
 
   var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
 
+  var isRangeFilter = columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
+  var isSelectFilter = columnDef.filterVariant === 'select';
+  var isMultiSelectFilter = columnDef.filterVariant === 'multiSelect';
+  var isTextboxFilter = !isSelectFilter && !isMultiSelectFilter;
+  var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
+  var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (rangeFilterIndex != null ? rangeFilterIndex : '');
+  var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
+  localization["filter" + ((currentFilterOption == null ? void 0 : currentFilterOption.charAt == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
+  var filterPlaceholder = !isRangeFilter ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : rangeFilterIndex === 0 ? localization.min : rangeFilterIndex === 1 ? localization.max : '';
+  var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
+  var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !rangeFilterIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
   var _useState2 = useState(function () {
-    var _column$getFilterValu, _column$getFilterValu2, _column$getFilterValu3;
+    var _column$getFilterValu, _column$getFilterValu2;
 
-    return inputIndex !== undefined ? (_column$getFilterValu = (_column$getFilterValu2 = column.getFilterValue()) == null ? void 0 : _column$getFilterValu2[inputIndex]) != null ? _column$getFilterValu : '' : (_column$getFilterValu3 = column.getFilterValue()) != null ? _column$getFilterValu3 : '';
+    return isMultiSelectFilter ? column.getFilterValue() || [] : isRangeFilter ? ((_column$getFilterValu = column.getFilterValue()) == null ? void 0 : _column$getFilterValu[rangeFilterIndex]) || [] : (_column$getFilterValu2 = column.getFilterValue()) != null ? _column$getFilterValu2 : '';
   }),
       filterValue = _useState2[0],
       setFilterValue = _useState2[1];
@@ -2162,41 +2196,40 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var handleChangeDebounced = useCallback(debounce(function (event) {
     var value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value;
 
-    if (inputIndex !== undefined) {
+    if (isRangeFilter) {
       column.setFilterValue(function (old) {
         var newFilterValues = old != null ? old : ['', ''];
-        newFilterValues[inputIndex] = value;
+        newFilterValues[rangeFilterIndex] = value;
         return newFilterValues;
       });
     } else {
       column.setFilterValue(value != null ? value : undefined);
     }
-  }, 200), []);
+  }, isTextboxFilter ? 200 : 1), []);
 
   var handleChange = function handleChange(event) {
     setFilterValue(event.target.value);
     handleChangeDebounced(event);
   };
 
-  var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
-    setAnchorEl(event.currentTarget);
-  };
-
   var handleClear = function handleClear() {
-    setFilterValue('');
-
-    if (inputIndex !== undefined) {
+    if (isMultiSelectFilter) {
+      setFilterValue([]);
+      column.setFilterValue([]);
+    } else if (isRangeFilter) {
+      setFilterValue('');
       column.setFilterValue(function (old) {
         var newFilterValues = old != null ? old : ['', ''];
-        newFilterValues[inputIndex] = undefined;
+        newFilterValues[rangeFilterIndex] = undefined;
         return newFilterValues;
       });
     } else {
+      setFilterValue('');
       column.setFilterValue(undefined);
     }
   };
 
-  var handleClearFilterChip = function handleClearFilterChip() {
+  var handleClearEmptyFilterChip = function handleClearEmptyFilterChip() {
     setFilterValue('');
     column.setFilterValue(undefined);
     setCurrentFilterFns(function (prev) {
@@ -2206,6 +2239,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     });
   };
 
+  var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
   if (columnDef.Filter) {
     return React.createElement(React.Fragment, null, columnDef.Filter == null ? void 0 : columnDef.Filter({
       header: header,
@@ -2213,14 +2250,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     }));
   }
 
-  var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (inputIndex != null ? inputIndex : '');
-  var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
-  var isSelectFilter = !!columnDef.filterSelectOptions;
-  var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
-  localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
-  var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
-  var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
-  var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -2244,13 +2273,13 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       }
     },
     margin: "none",
-    placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
+    placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter ? undefined : filterPlaceholder,
     onChange: handleChange,
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
-    select: isSelectFilter,
-    value: filterValue != null ? filterValue : '',
+    select: isSelectFilter || isMultiSelectFilter,
+    value: filterValue,
     variant: "standard",
     InputProps: {
       startAdornment: showChangeModeButton ? React.createElement(InputAdornment, {
@@ -2267,14 +2296,13 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
           width: '1.75rem'
         }
       }, React.createElement(FilterListIcon, null)))), filterChipLabel && React.createElement(Chip, {
-        onDelete: handleClearFilterChip,
+        onDelete: handleClearEmptyFilterChip,
         label: filterChipLabel
       })) : React.createElement(FilterListIcon, null),
       endAdornment: !filterChipLabel && React.createElement(InputAdornment, {
         position: "end"
       }, React.createElement(Tooltip, {
         arrow: true,
-        disableHoverListener: isSelectFilter,
         placement: "right",
         title: (_localization$clearFi = localization.clearFilter) != null ? _localization$clearFi : ''
       }, React.createElement("span", null, React.createElement(IconButton, {
@@ -2287,30 +2315,59 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
           width: '1.75rem'
         }
       }, React.createElement(CloseIcon, null)))))
+    },
+    SelectProps: {
+      displayEmpty: true,
+      multiple: isMultiSelectFilter,
+      renderValue: isMultiSelectFilter ? function (selected) {
+        return !(selected != null && selected.length) ? React.createElement(Box, {
+          sx: {
+            opacity: 0.5
+          }
+        }, filterPlaceholder) : React.createElement(Box, {
+          sx: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '2px'
+          }
+        }, selected == null ? void 0 : selected.map(function (value) {
+          return React.createElement(Chip, {
+            key: value,
+            label: value
+          });
+        }));
+      } : undefined
     }
   }, textFieldProps, {
     sx: function sx(theme) {
       return _extends({
         p: 0,
-        minWidth: !filterChipLabel ? '8rem' : 'auto',
+        minWidth: !filterChipLabel ? '6rem' : 'auto',
         width: 'calc(100% + 0.5rem)',
         '&	.MuiSelect-icon': {
           mr: '1.5rem'
         }
       }, (textFieldProps == null ? void 0 : textFieldProps.sx) instanceof Function ? textFieldProps.sx(theme) : textFieldProps == null ? void 0 : textFieldProps.sx);
     }
-  }), isSelectFilter && React.createElement(MenuItem, {
+  }), (isSelectFilter || isMultiSelectFilter) && React.createElement(MenuItem, {
     divider: true,
-    disabled: !filterValue,
+    disabled: true,
+    hidden: true,
     value: ""
-  }, localization.clearFilter), columnDef == null ? void 0 : (_columnDef$filterSele = columnDef.filterSelectOptions) == null ? void 0 : _columnDef$filterSele.map(function (option) {
+  }, React.createElement(Box, {
+    sx: {
+      opacity: 0.5
+    }
+  }, filterPlaceholder)), columnDef == null ? void 0 : (_columnDef$filterSele = columnDef.filterSelectOptions) == null ? void 0 : _columnDef$filterSele.map(function (option) {
+    var _column$getFilterValu3;
+
     var value;
     var text;
 
-    if (typeof option === 'string') {
+    if (typeof option !== 'object') {
       value = option;
       text = option;
-    } else if (typeof option === 'object') {
+    } else {
       value = option.value;
       text = option.text;
     }
@@ -2318,7 +2375,12 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     return React.createElement(MenuItem, {
       key: value,
       value: value
-    }, text);
+    }, isMultiSelectFilter && React.createElement(Checkbox, {
+      checked: ((_column$getFilterValu3 = column.getFilterValue()) != null ? _column$getFilterValu3 : []).includes(value),
+      sx: {
+        mr: '0.5rem'
+      }
+    }), React.createElement(ListItemText, null, text));
   })), React.createElement(MRT_FilterOptionMenu, {
     anchorEl: anchorEl,
     header: header,
@@ -2338,11 +2400,11 @@ var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
     }
   }, React.createElement(MRT_FilterTextField, {
     header: header,
-    inputIndex: 0,
+    rangeFilterIndex: 0,
     table: table
   }), React.createElement(MRT_FilterTextField, {
     header: header,
-    inputIndex: 1,
+    rangeFilterIndex: 1,
     table: table
   }));
 };
@@ -2361,7 +2423,7 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
     "in": showColumnFilters,
     mountOnEnter: true,
     unmountOnExit: true
-  }, currentFilterFns[column.id] === 'between' ? React.createElement(MRT_FilterRangeFields, {
+  }, ['between', 'betweenInclusive', 'inNumberRange'].includes(currentFilterFns[column.id]) ? React.createElement(MRT_FilterRangeFields, {
     header: header,
     table: table
   }) : React.createElement(MRT_FilterTextField, {
@@ -2385,12 +2447,13 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
 
   var column = header.column;
   var columnDef = column.columnDef;
+  var isRangeFilter = ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
   var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
   var filterTooltip = localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', // @ts-ignore
-  localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
+  localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + (isRangeFilter ? localization.and : localization.or) + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
   return React.createElement(Grow, {
     unmountOnExit: true,
-    "in": !!column.getFilterValue() && currentFilterOption !== 'between' || currentFilterOption === 'between' && ( // @ts-ignore
+    "in": !!column.getFilterValue() && isRangeFilter || !isRangeFilter && ( // @ts-ignore
     !!((_column$getFilterValu = column.getFilterValue()) != null && _column$getFilterValu[0]) || !!((_column$getFilterValu2 = column.getFilterValue()) != null && _column$getFilterValu2[1]))
   }, React.createElement("span", null, React.createElement(Tooltip, {
     arrow: true,
@@ -3544,9 +3607,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
   var _useState14 = useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
-      var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current7, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _col$filterSelectOpti, _ref4;
+      var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current7, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _ref4;
 
-      return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current7 = initialState.currentFilterFns) == null ? void 0 : _initialState$current7[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : !!((_col$filterSelectOpti = col.filterSelectOptions) != null && _col$filterSelectOpti.length) ? 'equals' : 'fuzzy', _ref4;
+      return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current7 = initialState.currentFilterFns) == null ? void 0 : _initialState$current7[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : getDefaultColumnFilterFn(col), _ref4;
     })));
   }),
       currentFilterFns = _useState14[0],