material-react-table 1.13.1 → 1.15.0

package/README.md

@@ -59,7 +59,7 @@ _All features can easily be enabled/disabled_
 
 _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
 
-- [x] < 45kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [x] < 47kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Aggregation and Grouping (Sum, Average, Count, etc.)
 - [x] Click To Copy Cell Values
@@ -73,6 +73,7 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 - [x] Data Editing (4 different editing modes)
 - [x] Density Toggle
 - [x] Detail Panels (Expansion)
+- [x] Faceted Value Generation for Filter Options
 - [x] Filtering (supports client-side and server-side)
 - [x] Filter Match Highlighting
 - [x] Full Screen Mode

package/dist/cjs/index.js

@@ -69,7 +69,9 @@ var Table = require('@mui/material/Table');
 var TableHead = require('@mui/material/TableHead');
 var TableRow = require('@mui/material/TableRow');
 var TableCell = require('@mui/material/TableCell');
-var material = require('@mui/material');
+var Slider = require('@mui/material/Slider');
+var Stack = require('@mui/material/Stack');
+var FormHelperText = require('@mui/material/FormHelperText');
 var Badge = require('@mui/material/Badge');
 var TableSortLabel = require('@mui/material/TableSortLabel');
 var TableBody = require('@mui/material/TableBody');
@@ -79,7 +81,6 @@ var TableFooter = require('@mui/material/TableFooter');
 var DialogActions = require('@mui/material/DialogActions');
 var DialogContent = require('@mui/material/DialogContent');
 var DialogTitle = require('@mui/material/DialogTitle');
-var Stack = require('@mui/material/Stack');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -143,6 +144,9 @@ var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
 var TableHead__default = /*#__PURE__*/_interopDefaultLegacy(TableHead);
 var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow);
 var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell);
+var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
+var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
+var FormHelperText__default = /*#__PURE__*/_interopDefaultLegacy(FormHelperText);
 var Badge__default = /*#__PURE__*/_interopDefaultLegacy(Badge);
 var TableSortLabel__default = /*#__PURE__*/_interopDefaultLegacy(TableSortLabel);
 var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
@@ -152,7 +156,6 @@ var TableFooter__default = /*#__PURE__*/_interopDefaultLegacy(TableFooter);
 var DialogActions__default = /*#__PURE__*/_interopDefaultLegacy(DialogActions);
 var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
 var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
-var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -176,6 +179,10 @@ function __rest(s, e) {
   }
   return t;
 }
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
 
@@ -861,6 +868,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
+    const columnFilterValue = column.getFilterValue();
     const [filterMenuAnchorEl, setFilterMenuAnchorEl] = react.useState(null);
     const handleClearSort = () => {
         column.clearSorting();
@@ -916,46 +924,63 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         !isSelectFilter &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
-    return (jsxRuntime.jsxs(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
-            dense: density === 'compact',
-        }, children: [(_d = (_c = (_b = columnDef.renderColumnActionsMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
-                closeMenu: () => setAnchorEl(null),
-                column,
-                table,
-            })) !== null && _c !== void 0 ? _c : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
-                closeMenu: () => setAnchorEl(null),
-                column,
-                table,
-            })) !== null && _d !== void 0 ? _d : (enableSorting &&
-                column.getCanSort() &&
-                [
-                    enableSortingRemoval !== false && (jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
-                    jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }) }, 1),
-                    jsxRuntime.jsx(MenuItem__default["default"], { divider: enableColumnFilters || enableGrouping || enableHiding, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, {}) }), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 2),
-                ].filter(Boolean)), enableColumnFilters &&
-                column.getCanFilter() &&
-                [
-                    jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getFilterValue(), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 0),
-                    jsxRuntime.jsxs(MenuItem__default["default"], { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
-                            ? handleOpenFilterModeMenu
-                            : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListIcon, {}) }), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] }, 1),
-                    showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 2)),
-                ].filter(Boolean), enableGrouping &&
-                column.getCanGroup() && [
-                jsxRuntime.jsx(MenuItem__default["default"], { divider: enablePinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(DynamicFeedIcon, {}) }), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] }) }, 0),
-            ], enablePinning &&
-                column.getCanPin() && [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 0),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 1),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, {}) }), localization.unpin] }) }, 2),
-            ], enableColumnResizing &&
-                column.getCanResize() && [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(RestartAltIcon, {}) }), localization.resetColumnSize] }) }, 0),
-            ], enableHiding && [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(VisibilityOffIcon, {}) }), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 : _j.replace('{column}', String(columnDef.header))] }) }, 0),
+    const internalColumnMenuItems = [
+        ...(enableSorting && column.getCanSort()
+            ? [
+                enableSortingRemoval !== false && (jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
+                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_b = localization.sortByColumnAsc) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))] }) }, 1),
+                jsxRuntime.jsx(MenuItem__default["default"], { divider: enableColumnFilters || enableGrouping || enableHiding, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, {}) }), (_c = localization.sortByColumnDesc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 2),
+            ]
+            : []),
+        ...(enableColumnFilters && column.getCanFilter()
+            ? [
+                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !columnFilterValue ||
+                        (Array.isArray(columnFilterValue) &&
+                            !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
+                jsxRuntime.jsxs(MenuItem__default["default"], { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
+                        ? handleOpenFilterModeMenu
+                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListIcon, {}) }), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] }, 4),
+                showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
+            ]
+            : []),
+        ...(enableGrouping && column.getCanGroup()
+            ? [
+                jsxRuntime.jsx(MenuItem__default["default"], { divider: enablePinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(DynamicFeedIcon, {}) }), (_e = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }) }, 6),
+            ]
+            : []),
+        ...(enablePinning && column.getCanPin()
+            ? [
+                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 7),
+                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 8),
+                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, {}) }), localization.unpin] }) }, 9),
+            ]
+            : []),
+        ...(enableColumnResizing && column.getCanResize()
+            ? [
+                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(RestartAltIcon, {}) }), localization.resetColumnSize] }) }, 10),
+            ]
+            : []),
+        ...(enableHiding
+            ? [
+                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(VisibilityOffIcon, {}) }), (_f = localization.hideColumn) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 11),
                 jsxRuntime.jsx(MenuItem__default["default"], { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
-                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ViewColumnIcon, {}) }), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 : _k.replace('{column}', String(columnDef.header))] }) }, 1),
-            ]] }));
+                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ViewColumnIcon, {}) }), (_g = localization.showAllColumns) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }) }, 12),
+            ]
+            : []),
+    ].filter(Boolean);
+    return (jsxRuntime.jsx(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+            dense: density === 'compact',
+        }, children: (_k = (_j = (_h = columnDef.renderColumnActionsMenuItems) === null || _h === void 0 ? void 0 : _h.call(columnDef, {
+            closeMenu: () => setAnchorEl(null),
+            column,
+            internalColumnMenuItems,
+            table,
+        })) !== null && _j !== void 0 ? _j : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
+            closeMenu: () => setAnchorEl(null),
+            column,
+            internalColumnMenuItems,
+            table,
+        })) !== null && _k !== void 0 ? _k : internalColumnMenuItems }));
 };
 
 const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
@@ -1730,6 +1755,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     ? textFieldProps.sx(theme)
                     : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))), children: [(isSelectFilter || isMultiSelectFilter) && (jsxRuntime.jsx(MenuItem__default["default"], { divider: true, disabled: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.map((option) => {
                         var _a;
+                        if (!option)
+                            return '';
                         let value;
                         let text;
                         if (typeof option !== 'object') {
@@ -1812,16 +1839,16 @@ const MRT_FilterRangeSlider = ({ header, table }) => {
     const sliderProps = Object.assign(Object.assign({}, mTableHeadCellFilterTextFieldProps), mcTableHeadCellFilterTextFieldProps);
     let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
         ? [sliderProps.min, sliderProps.max]
-        : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [0, 0];
-    // column.getFacetedMinMaxValues() seems to return an array of arrays for the min value
-    // under some conditions, so check for that and take the first array value if that happens.
-    // To be a bit defensive, implement the same check for max, just in case.
-    if (Array.isArray(min)) {
+        : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [0, 1];
+    //fix potential TanStack Table bugs where min or max is an array
+    if (Array.isArray(min))
         min = min[0];
-    }
-    if (Array.isArray(max)) {
+    if (Array.isArray(max))
         max = max[0];
-    }
+    if (min === null)
+        min = 0;
+    if (max === null)
+        max = 1;
     const [filterValues, setFilterValues] = react.useState([min, max]);
     const columnFilterValue = column.getFilterValue();
     const isMounted = react.useRef(false);
@@ -1831,20 +1858,23 @@ const MRT_FilterRangeSlider = ({ header, table }) => {
                 setFilterValues([min, max]);
             }
             else if (Array.isArray(columnFilterValue)) {
-                if (columnFilterValue[0] <= min && columnFilterValue[1] >= max) {
-                    column.setFilterValue(undefined);
-                }
-                else {
-                    setFilterValues(columnFilterValue);
-                }
+                setFilterValues(columnFilterValue);
             }
         }
         isMounted.current = true;
-    }, [column.getFilterValue()]);
-    return (jsxRuntime.jsxs(material.Stack, { children: [jsxRuntime.jsx(material.Slider, Object.assign({ disableSwap: true, min: min, max: max, onChange: (_event, value) => {
-                    setFilterValues(value);
+    }, [columnFilterValue, min, max]);
+    return (jsxRuntime.jsxs(Stack__default["default"], { children: [jsxRuntime.jsx(Slider__default["default"], Object.assign({ disableSwap: true, min: min, max: max, onChange: (_event, values) => {
+                    setFilterValues(values);
                 }, onChangeCommitted: (_event, value) => {
-                    column.setFilterValue(value);
+                    if (Array.isArray(value)) {
+                        if (value[0] <= min && value[1] >= max) {
+                            //if the user has selected the entire range, remove the filter
+                            column.setFilterValue(undefined);
+                        }
+                        else {
+                            column.setFilterValue(value);
+                        }
+                    }
                 }, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
                     input: {
                         ref: (node) => {
@@ -1861,7 +1891,7 @@ const MRT_FilterRangeSlider = ({ header, table }) => {
                     },
                 }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, ((sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx) instanceof Function
                     ? sliderProps.sx(theme)
-                    : sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx))) })), showChangeModeButton ? (jsxRuntime.jsx(material.FormHelperText, { sx: {
+                    : sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx))) })), showChangeModeButton ? (jsxRuntime.jsx(FormHelperText__default["default"], { sx: {
                     m: '-3px -6px',
                     fontSize: '0.75rem',
                     lineHeight: '0.8rem',
@@ -1882,18 +1912,18 @@ const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
 };
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const isRangeFilter = columnDef.filterVariant === 'range' ||
+    const isRangeFilter = ['range', 'ranger-slider'].includes((_a = columnDef.filterVariant) !== null && _a !== void 0 ? _a : '') ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
     const currentFilterOption = columnDef._filterFn;
     const filterTooltip = localization.filteringByColumn
         .replace('{column}', String(columnDef.header))
         .replace('{filterType}', 
     // @ts-ignore
-    localization[`filter${((_a = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _a === void 0 ? void 0 : _a.toUpperCase()) +
+    localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
         (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`])
         .replace('{filterValue}', `"${Array.isArray(column.getFilterValue())
         ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
@@ -1901,7 +1931,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         .replace('" "', '');
     return (jsxRuntime.jsx(Grow__default["default"], { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
             (isRangeFilter && // @ts-ignore
-                (!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))), children: jsxRuntime.jsx(Box__default["default"], { component: "span", sx: { flex: '0 0' }, children: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "top", title: filterTooltip, children: jsxRuntime.jsx(IconButton__default["default"], { disableRipple: true, onClick: (event) => {
+                (!!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[0]) || !!((_d = column.getFilterValue()) === null || _d === void 0 ? void 0 : _d[1]))), children: jsxRuntime.jsx(Box__default["default"], { component: "span", sx: { flex: '0 0' }, children: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "top", title: filterTooltip, children: jsxRuntime.jsx(IconButton__default["default"], { disableRipple: true, onClick: (event) => {
                         setShowColumnFilters(true);
                         queueMicrotask(() => {
                             var _a, _b;
@@ -2491,7 +2521,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
             table,
             theme,
             tableCellProps,
-        })), draggingBorders)), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+        })), draggingBorders)), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : (isLoading || showSkeletons) && cell.getValue() === null ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
                     rowNumberMode === 'static' &&
                     column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsxRuntime.jsx(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
                     (column.id === 'mrt-row-select' ||