material-react-table 0.28.0 → 0.29.0

package/dist/MaterialReactTable.d.ts

@@ -130,6 +130,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         text: string;
         value: string;
     })[];
+    filterVariant?: 'text' | 'select' | 'multiSelect' | 'range';
     /**
      * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
      */
@@ -172,9 +173,10 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => IconButtonProps);
-    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
+    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, rangeFilterIndex, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
     }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | (({ table, column, }: {
         table: MRT_TableInstance<TData>;
@@ -194,6 +196,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
 };
 export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
     id: string;
+    _filterFn: MRT_FilterOption;
 };
 export declare type MRT_Column<TData extends Record<string, any> = {}> = Omit<Column<TData, unknown>, 'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'> & {
     columnDef: MRT_DefinedColumnDef<TData>;
@@ -343,9 +346,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => IconButtonProps);
-    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
+    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, rangeFilterIndex, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
     }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | (({ table, column, }: {
         table: MRT_TableInstance<TData>;

package/dist/column.utils.d.ts

@@ -8,3 +8,4 @@ export declare const reorderColumn: <TData extends Record<string, any> = {}>(dra
 export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
 export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
+export declare const getDefaultColumnFilterFn: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => MRT_FilterOption;

package/dist/inputs/MRT_FilterTextField.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import type { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     header: MRT_Header;
-    inputIndex?: number;
+    rangeFilterIndex?: number;
     table: MRT_TableInstance;
 }
 export declare const MRT_FilterTextField: FC<Props>;

package/dist/localization.d.ts

@@ -13,6 +13,9 @@ export interface MRT_Localization {
     edit: string;
     expand: string;
     expandAll: string;
+    filterArrIncludes: string;
+    filterArrIncludesAll: string;
+    filterArrIncludesSome: string;
     filterBetween: string;
     filterBetweenInclusive: string;
     filterByColumn: string;
@@ -20,15 +23,20 @@ export interface MRT_Localization {
     filterEmpty: string;
     filterEndsWith: string;
     filterEquals: string;
+    filterEqualsString: string;
     filterFuzzy: string;
     filterGreaterThan: string;
     filterGreaterThanOrEqualTo: string;
+    filterInNumberRange: string;
+    filterIncludesString: string;
+    filterIncludesStringSensitive: string;
     filterLessThan: string;
     filterLessThanOrEqualTo: string;
     filterMode: string;
     filterNotEmpty: string;
     filterNotEquals: string;
     filterStartsWith: string;
+    filterWeakEquals: string;
     filteringByColumn: string;
     grab: string;
     groupByColumn: string;
@@ -38,6 +46,7 @@ export interface MRT_Localization {
     max: string;
     min: string;
     move: string;
+    or: string;
     pinToLeft: string;
     pinToRight: string;
     resetColumnSize: string;

package/dist/material-react-table.cjs.development.js

@@ -59,6 +59,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}',
@@ -66,15 +69,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}',
@@ -84,6 +92,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',
@@ -239,6 +248,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;
 
@@ -268,78 +350,8 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
 
   var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
   var filterOptions = React.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);
     });
   }, []);
 
@@ -706,7 +718,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)) {
@@ -737,6 +751,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;
@@ -2124,7 +2144,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,
@@ -2143,25 +2163,39 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var _getState = getState(),
       currentFilterFns = _getState.currentFilterFns;
 
-  var _useState = React.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 = React.useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
   var _useState2 = React.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];
@@ -2169,41 +2203,40 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var handleChangeDebounced = React.useCallback(material.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) {
@@ -2213,6 +2246,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     });
   };
 
+  var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
   if (columnDef.Filter) {
     return React__default.createElement(React__default.Fragment, null, columnDef.Filter == null ? void 0 : columnDef.Filter({
       header: header,
@@ -2220,14 +2257,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__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -2251,13 +2280,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__default.createElement(material.InputAdornment, {
@@ -2274,14 +2303,13 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
           width: '1.75rem'
         }
       }, React__default.createElement(FilterListIcon, null)))), filterChipLabel && React__default.createElement(material.Chip, {
-        onDelete: handleClearFilterChip,
+        onDelete: handleClearEmptyFilterChip,
         label: filterChipLabel
       })) : React__default.createElement(FilterListIcon, null),
       endAdornment: !filterChipLabel && React__default.createElement(material.InputAdornment, {
         position: "end"
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
-        disableHoverListener: isSelectFilter,
         placement: "right",
         title: (_localization$clearFi = localization.clearFilter) != null ? _localization$clearFi : ''
       }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
@@ -2294,30 +2322,59 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
           width: '1.75rem'
         }
       }, React__default.createElement(CloseIcon, null)))))
+    },
+    SelectProps: {
+      displayEmpty: true,
+      multiple: isMultiSelectFilter,
+      renderValue: isMultiSelectFilter ? function (selected) {
+        return !(selected != null && selected.length) ? React__default.createElement(material.Box, {
+          sx: {
+            opacity: 0.5
+          }
+        }, filterPlaceholder) : React__default.createElement(material.Box, {
+          sx: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '2px'
+          }
+        }, selected == null ? void 0 : selected.map(function (value) {
+          return React__default.createElement(material.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__default.createElement(material.MenuItem, {
+  }), (isSelectFilter || isMultiSelectFilter) && React__default.createElement(material.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__default.createElement(material.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;
     }
@@ -2325,7 +2382,12 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     return React__default.createElement(material.MenuItem, {
       key: value,
       value: value
-    }, text);
+    }, isMultiSelectFilter && React__default.createElement(material.Checkbox, {
+      checked: ((_column$getFilterValu3 = column.getFilterValue()) != null ? _column$getFilterValu3 : []).includes(value),
+      sx: {
+        mr: '0.5rem'
+      }
+    }), React__default.createElement(material.ListItemText, null, text));
   })), React__default.createElement(MRT_FilterOptionMenu, {
     anchorEl: anchorEl,
     header: header,
@@ -2345,11 +2407,11 @@ var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
     }
   }, React__default.createElement(MRT_FilterTextField, {
     header: header,
-    inputIndex: 0,
+    rangeFilterIndex: 0,
     table: table
   }), React__default.createElement(MRT_FilterTextField, {
     header: header,
-    inputIndex: 1,
+    rangeFilterIndex: 1,
     table: table
   }));
 };
@@ -2368,7 +2430,7 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
     "in": showColumnFilters,
     mountOnEnter: true,
     unmountOnExit: true
-  }, currentFilterFns[column.id] === 'between' ? React__default.createElement(MRT_FilterRangeFields, {
+  }, ['between', 'betweenInclusive', 'inNumberRange'].includes(currentFilterFns[column.id]) ? React__default.createElement(MRT_FilterRangeFields, {
     header: header,
     table: table
   }) : React__default.createElement(MRT_FilterTextField, {
@@ -2392,12 +2454,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__default.createElement(material.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__default.createElement("span", null, React__default.createElement(material.Tooltip, {
     arrow: true,
@@ -3551,9 +3614,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
   var _useState14 = React.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],