material-react-table 0.26.6 → 0.29.0

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

@@ -1,9 +1,9 @@
 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 { useVirtual } from 'react-virtual';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -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',
@@ -175,7 +184,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
   }, iconButtonProps, {
     sx: _extends({
       height: density === 'compact' ? '1.75rem' : '2.25rem',
-      width: density === 'compact' ? '1.75rem' : '2.25rem'
+      width: density === 'compact' ? '1.75rem' : '2.25rem',
+      mt: density !== 'compact' ? '-0.25rem' : undefined
     }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
   }), React.createElement(KeyboardDoubleArrowDownIcon, {
     style: {
@@ -231,8 +241,81 @@ 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$enabledCol;
+  var _columnDef$columnFilt;
 
   var anchorEl = _ref.anchorEl,
       header = _ref.header,
@@ -242,7 +325,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var getState = table.getState,
       _table$options = table.options,
       enabledGlobalFilterOptions = _table$options.enabledGlobalFilterOptions,
-      enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
+      columnFilterModeOptions = _table$options.columnFilterModeOptions,
       localization = _table$options.localization,
       setCurrentFilterFns = table.setCurrentFilterFns,
       setCurrentGlobalFilterFn = table.setCurrentGlobalFilterFn;
@@ -258,80 +341,10 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var _ref3 = column != null ? column : {},
       columnDef = _ref3.columnDef;
 
-  var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
+  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);
     });
   }, []);
 
@@ -698,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)) {
@@ -729,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;
@@ -980,7 +1001,7 @@ var commonListItemStyles = {
   alignItems: 'center'
 };
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
-  var _columnDef$enabledCol, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
+  var _columnDef$columnFilt, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
 
   var anchorEl = _ref.anchorEl,
       header = _ref.header,
@@ -997,7 +1018,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       enableHiding = _table$options.enableHiding,
       enablePinning = _table$options.enablePinning,
       enableSorting = _table$options.enableSorting,
-      enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
+      columnFilterModeOptions = _table$options.columnFilterModeOptions,
       _table$options$icons = _table$options.icons,
       ArrowRightIcon = _table$options$icons.ArrowRightIcon,
       ClearAllIcon = _table$options$icons.ClearAllIcon,
@@ -1098,7 +1119,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   };
 
   var isSelectFilter = !!columnDef.filterSelectOptions;
-  var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
+  var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
   var showFilterModeSubMenu = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
   return React.createElement(Menu, {
     anchorEl: anchorEl,
@@ -1445,9 +1466,9 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   }, checkboxProps, {
     sx: function sx(theme) {
       return _extends({
-        height: density === 'compact' ? '1.5rem' : '2rem',
-        width: density === 'compact' ? '1.5rem' : '2rem',
-        m: '-1re.m'
+        height: density === 'compact' ? '1.75rem' : '2.5rem',
+        width: density === 'compact' ? '1.75rem' : '2.5rem',
+        m: density !== 'compact' ? '-0.4rem' : undefined
       }, (checkboxProps == null ? void 0 : checkboxProps.sx) instanceof Function ? checkboxProps.sx(theme) : checkboxProps == null ? void 0 : checkboxProps.sx);
     }
   })));
@@ -2113,15 +2134,15 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _currentFilterOption$, _localization$filterB, _columnDef$enabledCol, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
+  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,
       enableColumnFilterChangeMode = _table$options.enableColumnFilterChangeMode,
-      enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
+      columnFilterModeOptions = _table$options.columnFilterModeOptions,
       _table$options$icons = _table$options.icons,
       FilterListIcon = _table$options$icons.FilterListIcon,
       CloseIcon = _table$options$icons.CloseIcon,
@@ -2135,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];
@@ -2161,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) {
@@ -2205,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,
@@ -2212,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$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
-  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,
@@ -2243,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, {
@@ -2266,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, {
@@ -2286,31 +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({
-        m: '-0.25rem',
         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,
@@ -2623,7 +2686,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
         overflow: 'visible',
         opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
-        p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
+        p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
         pb: columnDefType === 'display' ? 0 : undefined,
         position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
         pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
@@ -2924,6 +2987,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       enableClickToCopy = _table$options.enableClickToCopy,
       enableColumnOrdering = _table$options.enableColumnOrdering,
       enableEditing = _table$options.enableEditing,
+      enablePagination = _table$options.enablePagination,
       enableRowNumbers = _table$options.enableRowNumbers,
       muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
@@ -2998,7 +3062,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var draggingBorders = draggingBorder ? {
     borderLeft: draggingBorder,
     borderRight: draggingBorder,
-    borderBottom: row.index === table.getRowModel().rows.length - 1 ? draggingBorder : undefined
+    borderBottom: row.index === (enablePagination ? table.getRowModel() : table.getPrePaginationRowModel()).rows.length - 1 ? draggingBorder : undefined
   } : undefined;
   return React.createElement(TableCell, Object.assign({
     onDoubleClick: handleDoubleClick,
@@ -3201,19 +3265,23 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 
     return enablePagination ? getRowModel().rows : getPrePaginationRowModel().rows;
   }, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getRowModel().rows, globalFilter]);
-  var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
-    // estimateSize: () => (density === 'compact' ? 25 : 50),
+  var rowVirtualizer = enableRowVirtualization ? useVirtualizer(_extends({
+    estimateSize: function estimateSize() {
+      return density === 'compact' ? 25 : 50;
+    },
     overscan: density === 'compact' ? 30 : 10,
-    parentRef: tableContainerRef,
-    size: rows.length
+    getScrollElement: function getScrollElement() {
+      return tableContainerRef.current;
+    },
+    count: rows.length
   }, virtualizerProps)) : {};
-  var virtualRows = enableRowVirtualization ? rowVirtualizer.virtualItems : [];
+  var virtualRows = enableRowVirtualization ? rowVirtualizer.getVirtualItems() : [];
   var paddingTop = 0;
   var paddingBottom = 0;
 
   if (enableRowVirtualization) {
-    paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
-    paddingBottom = virtualRows.length > 0 ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end : 0;
+    paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
+    paddingBottom = !!virtualRows.length ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
   }
 
   return React.createElement(TableBody, Object.assign({}, tableBodyProps), enableRowVirtualization && paddingTop > 0 && React.createElement("tr", null, React.createElement("td", {
@@ -3539,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],
@@ -3726,7 +3794,7 @@ var MaterialReactTable = (function (_ref) {
       _ref$enableColumnActi = _ref.enableColumnActions,
       enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
       _ref$enableColumnFilt = _ref.enableColumnFilterChangeMode,
-      enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? false : _ref$enableColumnFilt,
       _ref$enableColumnFilt2 = _ref.enableColumnFilters,
       enableColumnFilters = _ref$enableColumnFilt2 === void 0 ? true : _ref$enableColumnFilt2,
       _ref$enableColumnOrde = _ref.enableColumnOrdering,
@@ -3744,7 +3812,7 @@ var MaterialReactTable = (function (_ref) {
       _ref$enableGlobalFilt = _ref.enableGlobalFilter,
       enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
       _ref$enableGlobalFilt2 = _ref.enableGlobalFilterChangeMode,
-      enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? true : _ref$enableGlobalFilt2,
+      enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? false : _ref$enableGlobalFilt2,
       _ref$enableGlobalFilt3 = _ref.enableGlobalFilterRankedResults,
       enableGlobalFilterRankedResults = _ref$enableGlobalFilt3 === void 0 ? true : _ref$enableGlobalFilt3,
       _ref$enableGrouping = _ref.enableGrouping,