material-react-table 1.9.0 → 1.9.2

package/dist/cjs/types/MaterialReactTable.d.ts

@@ -617,7 +617,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
     }) => TableRowProps);
     muiTablePaginationProps?: Partial<Omit<TablePaginationProps, 'rowsPerPage'>> | ((props: {
         table: MRT_TableInstance<TData>;
-    }) => Partial<TablePaginationProps>);
+    }) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>);
     muiTablePaperProps?: PaperProps | ((props: {
         table: MRT_TableInstance<TData>;
     }) => PaperProps);

package/dist/cjs/types/body/MRT_TableBody.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 import type { MRT_TableInstance } from '..';
 interface Props {
     columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;

package/dist/cjs/types/column.utils.d.ts

@@ -1,7 +1,7 @@
-import type { Row } from '@tanstack/react-table';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
+import type { Row } from '@tanstack/react-table';
 import type { TableCellProps } from '@mui/material/TableCell';
 import type { Theme } from '@mui/material/styles';
 import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_ColumnOrderState, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_GroupingState, MRT_Header, MRT_TableInstance } from '.';

package/dist/cjs/types/filterFns.d.ts

@@ -1,5 +1,5 @@
 import { RankingInfo } from '@tanstack/match-sorter-utils';
-import { Row } from '@tanstack/react-table';
+import { type Row } from '@tanstack/react-table';
 export declare const MRT_FilterFns: {
     between: {
         <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValues: [string | number, string | number]): boolean;

package/dist/cjs/types/footer/MRT_TableFooterRow.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { VirtualItem } from '@tanstack/react-virtual';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
 interface Props {
     footerGroup: MRT_HeaderGroup;

package/dist/cjs/types/sortingFns.d.ts

@@ -1,5 +1,5 @@
-import { Row } from '@tanstack/react-table';
-import { MRT_Row } from '.';
+import { type Row } from '@tanstack/react-table';
+import type { MRT_Row } from '.';
 export declare const MRT_SortingFns: {
     fuzzy: <TData extends Record<string, any> = {}>(rowA: Row<TData>, rowB: Row<TData>, columnId: string) => number;
     alphanumeric: import("@tanstack/react-table").SortingFn<any>;
@@ -17,11 +17,14 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
     index: number;
     original: TData;
     depth: number;
+    parentId?: string | undefined;
     _uniqueValuesCache: Record<string, unknown>;
     getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
     getLeafRows: () => Row<TData>[];
     originalSubRows?: TData[] | undefined;
     _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+    getParentRow: () => Row<TData> | undefined;
+    getParentRows: () => Row<TData>[];
     _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
@@ -52,7 +55,48 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
         getIsPlaceholder: () => boolean;
         getIsAggregated: () => boolean;
         column: import("./MaterialReactTable").MRT_Column<TData>;
-        row: any;
+        row: {
+            getValue: <TValue>(columnId: string) => TValue;
+            renderValue: <TValue_1>(columnId: string) => TValue_1;
+            id: string;
+            columnFilters: Record<string, boolean>;
+            index: number;
+            original: TData;
+            depth: number;
+            parentId?: string | undefined;
+            _uniqueValuesCache: Record<string, unknown>;
+            getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+            getLeafRows: () => Row<TData>[];
+            originalSubRows?: TData[] | undefined;
+            _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+            getParentRow: () => Row<TData> | undefined;
+            getParentRows: () => Row<TData>[];
+            _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+            groupingColumnId?: string | undefined;
+            groupingValue?: unknown;
+            getIsGrouped: () => boolean;
+            _groupingValuesCache: Record<string, any>;
+            getIsSelected: () => boolean;
+            getIsSomeSelected: () => boolean;
+            getIsAllSubRowsSelected: () => boolean;
+            getCanSelect: () => boolean;
+            getCanMultiSelect: () => boolean;
+            getCanSelectSubRows: () => boolean;
+            toggleSelected: (value?: boolean | undefined) => void;
+            getToggleSelectedHandler: () => (event: unknown) => void;
+            toggleExpanded: (expanded?: boolean | undefined) => void;
+            getIsExpanded: () => boolean;
+            getCanExpand: () => boolean;
+            getToggleExpandedHandler: () => () => void;
+            getAllCells: any;
+            getVisibleCells: () => any[];
+            subRows?: any[] | undefined;
+            _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+        };
     }[];
     getVisibleCells: () => {
         getValue: import("@tanstack/react-table").Getter<unknown>;
@@ -63,9 +107,111 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
         getIsPlaceholder: () => boolean;
         getIsAggregated: () => boolean;
         column: import("./MaterialReactTable").MRT_Column<TData>;
-        row: any;
+        row: {
+            getValue: <TValue>(columnId: string) => TValue;
+            renderValue: <TValue_1>(columnId: string) => TValue_1;
+            id: string;
+            columnFilters: Record<string, boolean>;
+            index: number;
+            original: TData;
+            depth: number;
+            parentId?: string | undefined;
+            _uniqueValuesCache: Record<string, unknown>;
+            getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+            getLeafRows: () => Row<TData>[];
+            originalSubRows?: TData[] | undefined;
+            _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+            getParentRow: () => Row<TData> | undefined;
+            getParentRows: () => Row<TData>[];
+            _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+            groupingColumnId?: string | undefined;
+            groupingValue?: unknown;
+            getIsGrouped: () => boolean;
+            _groupingValuesCache: Record<string, any>;
+            getIsSelected: () => boolean;
+            getIsSomeSelected: () => boolean;
+            getIsAllSubRowsSelected: () => boolean;
+            getCanSelect: () => boolean;
+            getCanMultiSelect: () => boolean;
+            getCanSelectSubRows: () => boolean;
+            toggleSelected: (value?: boolean | undefined) => void;
+            getToggleSelectedHandler: () => (event: unknown) => void;
+            toggleExpanded: (expanded?: boolean | undefined) => void;
+            getIsExpanded: () => boolean;
+            getCanExpand: () => boolean;
+            getToggleExpandedHandler: () => () => void;
+            getAllCells: () => any[];
+            getVisibleCells: any;
+            subRows?: any[] | undefined;
+            _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+        };
     }[];
-    subRows?: any[] | undefined;
+    subRows?: {
+        getValue: <TValue>(columnId: string) => TValue;
+        renderValue: <TValue_1>(columnId: string) => TValue_1;
+        id: string;
+        columnFilters: Record<string, boolean>;
+        index: number;
+        original: TData;
+        depth: number;
+        parentId?: string | undefined;
+        _uniqueValuesCache: Record<string, unknown>;
+        getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+        getLeafRows: () => Row<TData>[];
+        originalSubRows?: TData[] | undefined;
+        _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+        getParentRow: () => Row<TData> | undefined;
+        getParentRows: () => Row<TData>[];
+        _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+        groupingColumnId?: string | undefined;
+        groupingValue?: unknown;
+        getIsGrouped: () => boolean;
+        _groupingValuesCache: Record<string, any>;
+        getIsSelected: () => boolean;
+        getIsSomeSelected: () => boolean;
+        getIsAllSubRowsSelected: () => boolean;
+        getCanSelect: () => boolean;
+        getCanMultiSelect: () => boolean;
+        getCanSelectSubRows: () => boolean;
+        toggleSelected: (value?: boolean | undefined) => void;
+        getToggleSelectedHandler: () => (event: unknown) => void;
+        toggleExpanded: (expanded?: boolean | undefined) => void;
+        getIsExpanded: () => boolean;
+        getCanExpand: () => boolean;
+        getToggleExpandedHandler: () => () => void;
+        getAllCells: () => {
+            getValue: import("@tanstack/react-table").Getter<unknown>;
+            renderValue: import("@tanstack/react-table").Getter<unknown>;
+            id: string;
+            getContext: () => import("@tanstack/react-table").CellContext<TData, unknown>;
+            getIsGrouped: () => boolean;
+            getIsPlaceholder: () => boolean;
+            getIsAggregated: () => boolean;
+            column: import("./MaterialReactTable").MRT_Column<TData>;
+            row: any;
+        }[];
+        getVisibleCells: () => {
+            getValue: import("@tanstack/react-table").Getter<unknown>;
+            renderValue: import("@tanstack/react-table").Getter<unknown>;
+            id: string;
+            getContext: () => import("@tanstack/react-table").CellContext<TData, unknown>;
+            getIsGrouped: () => boolean;
+            getIsPlaceholder: () => boolean;
+            getIsAggregated: () => boolean;
+            column: import("./MaterialReactTable").MRT_Column<TData>;
+            row: any;
+        }[];
+        subRows?: any[] | undefined;
+        _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+    }[] | undefined;
     _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
 }, rowB: {
     getValue: <TValue>(columnId: string) => TValue;
@@ -75,11 +221,14 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
     index: number;
     original: TData;
     depth: number;
+    parentId?: string | undefined;
     _uniqueValuesCache: Record<string, unknown>;
     getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
     getLeafRows: () => Row<TData>[];
     originalSubRows?: TData[] | undefined;
     _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+    getParentRow: () => Row<TData> | undefined;
+    getParentRows: () => Row<TData>[];
     _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
@@ -110,7 +259,48 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
         getIsPlaceholder: () => boolean;
         getIsAggregated: () => boolean;
         column: import("./MaterialReactTable").MRT_Column<TData>;
-        row: any;
+        row: {
+            getValue: <TValue>(columnId: string) => TValue;
+            renderValue: <TValue_1>(columnId: string) => TValue_1;
+            id: string;
+            columnFilters: Record<string, boolean>;
+            index: number;
+            original: TData;
+            depth: number;
+            parentId?: string | undefined;
+            _uniqueValuesCache: Record<string, unknown>;
+            getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+            getLeafRows: () => Row<TData>[];
+            originalSubRows?: TData[] | undefined;
+            _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+            getParentRow: () => Row<TData> | undefined;
+            getParentRows: () => Row<TData>[];
+            _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+            groupingColumnId?: string | undefined;
+            groupingValue?: unknown;
+            getIsGrouped: () => boolean;
+            _groupingValuesCache: Record<string, any>;
+            getIsSelected: () => boolean;
+            getIsSomeSelected: () => boolean;
+            getIsAllSubRowsSelected: () => boolean;
+            getCanSelect: () => boolean;
+            getCanMultiSelect: () => boolean;
+            getCanSelectSubRows: () => boolean;
+            toggleSelected: (value?: boolean | undefined) => void;
+            getToggleSelectedHandler: () => (event: unknown) => void;
+            toggleExpanded: (expanded?: boolean | undefined) => void;
+            getIsExpanded: () => boolean;
+            getCanExpand: () => boolean;
+            getToggleExpandedHandler: () => () => void;
+            getAllCells: any;
+            getVisibleCells: () => any[];
+            subRows?: any[] | undefined;
+            _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+        };
     }[];
     getVisibleCells: () => {
         getValue: import("@tanstack/react-table").Getter<unknown>;
@@ -121,8 +311,110 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
         getIsPlaceholder: () => boolean;
         getIsAggregated: () => boolean;
         column: import("./MaterialReactTable").MRT_Column<TData>;
-        row: any;
+        row: {
+            getValue: <TValue>(columnId: string) => TValue;
+            renderValue: <TValue_1>(columnId: string) => TValue_1;
+            id: string;
+            columnFilters: Record<string, boolean>;
+            index: number;
+            original: TData;
+            depth: number;
+            parentId?: string | undefined;
+            _uniqueValuesCache: Record<string, unknown>;
+            getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+            getLeafRows: () => Row<TData>[];
+            originalSubRows?: TData[] | undefined;
+            _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+            getParentRow: () => Row<TData> | undefined;
+            getParentRows: () => Row<TData>[];
+            _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+            groupingColumnId?: string | undefined;
+            groupingValue?: unknown;
+            getIsGrouped: () => boolean;
+            _groupingValuesCache: Record<string, any>;
+            getIsSelected: () => boolean;
+            getIsSomeSelected: () => boolean;
+            getIsAllSubRowsSelected: () => boolean;
+            getCanSelect: () => boolean;
+            getCanMultiSelect: () => boolean;
+            getCanSelectSubRows: () => boolean;
+            toggleSelected: (value?: boolean | undefined) => void;
+            getToggleSelectedHandler: () => (event: unknown) => void;
+            toggleExpanded: (expanded?: boolean | undefined) => void;
+            getIsExpanded: () => boolean;
+            getCanExpand: () => boolean;
+            getToggleExpandedHandler: () => () => void;
+            getAllCells: () => any[];
+            getVisibleCells: any;
+            subRows?: any[] | undefined;
+            _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+        };
     }[];
-    subRows?: any[] | undefined;
+    subRows?: {
+        getValue: <TValue>(columnId: string) => TValue;
+        renderValue: <TValue_1>(columnId: string) => TValue_1;
+        id: string;
+        columnFilters: Record<string, boolean>;
+        index: number;
+        original: TData;
+        depth: number;
+        parentId?: string | undefined;
+        _uniqueValuesCache: Record<string, unknown>;
+        getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+        getLeafRows: () => Row<TData>[];
+        originalSubRows?: TData[] | undefined;
+        _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+        getParentRow: () => Row<TData> | undefined;
+        getParentRows: () => Row<TData>[];
+        _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+        groupingColumnId?: string | undefined;
+        groupingValue?: unknown;
+        getIsGrouped: () => boolean;
+        _groupingValuesCache: Record<string, any>;
+        getIsSelected: () => boolean;
+        getIsSomeSelected: () => boolean;
+        getIsAllSubRowsSelected: () => boolean;
+        getCanSelect: () => boolean;
+        getCanMultiSelect: () => boolean;
+        getCanSelectSubRows: () => boolean;
+        toggleSelected: (value?: boolean | undefined) => void;
+        getToggleSelectedHandler: () => (event: unknown) => void;
+        toggleExpanded: (expanded?: boolean | undefined) => void;
+        getIsExpanded: () => boolean;
+        getCanExpand: () => boolean;
+        getToggleExpandedHandler: () => () => void;
+        getAllCells: () => {
+            getValue: import("@tanstack/react-table").Getter<unknown>;
+            renderValue: import("@tanstack/react-table").Getter<unknown>;
+            id: string;
+            getContext: () => import("@tanstack/react-table").CellContext<TData, unknown>;
+            getIsGrouped: () => boolean;
+            getIsPlaceholder: () => boolean;
+            getIsAggregated: () => boolean;
+            column: import("./MaterialReactTable").MRT_Column<TData>;
+            row: any;
+        }[];
+        getVisibleCells: () => {
+            getValue: import("@tanstack/react-table").Getter<unknown>;
+            renderValue: import("@tanstack/react-table").Getter<unknown>;
+            id: string;
+            getContext: () => import("@tanstack/react-table").CellContext<TData, unknown>;
+            getIsGrouped: () => boolean;
+            getIsPlaceholder: () => boolean;
+            getIsAggregated: () => boolean;
+            column: import("./MaterialReactTable").MRT_Column<TData>;
+            row: any;
+        }[];
+        subRows?: any[] | undefined;
+        _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+    }[] | undefined;
     _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
 }) => number;

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

@@ -553,6 +553,9 @@ const mrtFilterOptions = (localization) => [
         divider: false,
     },
 ];
+const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
+const emptyModes = ['empty', 'notEmpty'];
+const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
 const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }) => {
     var _a, _b, _c, _d;
     const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
@@ -568,36 +571,62 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
             globalFilterModeOptions.includes(filterOption.option)) &&
             ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option)), []);
     const handleSelectFilterMode = (option) => {
-        if (header && column) {
+        var _a;
+        const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
+        if (!header || !column) {
+            // global filter mode
+            setGlobalFilterFn(option);
+        }
+        else if (option !== prevFilterMode) {
+            // column filter mode
             setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
-            if (['empty', 'notEmpty'].includes(option)) {
-                column.setFilterValue(' ');
+            // reset filter value and/or perform new filter render
+            if (emptyModes.includes(option)) {
+                // will now be empty/notEmpty filter mode
+                if (currentFilterValue !== ' ' &&
+                    !emptyModes.includes(prevFilterMode)) {
+                    column.setFilterValue(' ');
+                }
+                else if (currentFilterValue) {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
             }
             else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
-                ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
+                arrModes.includes(option)) {
+                // will now be array filter mode
                 if (currentFilterValue instanceof String ||
                     (currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length)) {
                     column.setFilterValue([]);
                     setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
                 }
+                else if (currentFilterValue) {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
             }
             else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
-                ['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
-                if (!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === ''))) {
+                rangeModes.includes(option)) {
+                // will now be range filter mode
+                if (!Array.isArray(currentFilterValue) ||
+                    (!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === '')) &&
+                        !rangeModes.includes(prevFilterMode))) {
                     column.setFilterValue(['', '']);
                     setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
                 }
+                else {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
             }
             else {
-                if (!['', undefined].includes(currentFilterValue)) {
+                // will now be single value filter mode
+                if (Array.isArray(currentFilterValue)) {
                     column.setFilterValue('');
                     setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
                 }
+                else {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
             }
         }
-        else {
-            setGlobalFilterFn(option);
-        }
         setAnchorEl(null);
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
@@ -1566,7 +1595,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         else if (isRangeFilter) {
             setFilterValue('');
             column.setFilterValue((old) => {
-                const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
+                const newFilterValues = (Array.isArray(old) && old) || ['', ''];
                 newFilterValues[rangeFilterIndex] = undefined;
                 return newFilterValues;
             });
@@ -2186,11 +2215,11 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
 
 const allowedTypes = ['string', 'number'];
 const MRT_TableBodyCellValue = ({ cell, table }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { getState, options: { enableFilterMatchHighlighting }, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
-    const { globalFilter } = getState();
+    const { globalFilter, globalFilterFn } = getState();
     const filterValue = column.getFilterValue();
     let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
         ? columnDef.AggregatedCell({
@@ -2220,13 +2249,16 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
         ((filterValue &&
             allowedTypes.includes(typeof filterValue) &&
             columnDef.filterVariant === 'text') ||
-            (globalFilter && allowedTypes.includes(typeof globalFilter)))) {
+            (globalFilter &&
+                allowedTypes.includes(typeof globalFilter) &&
+                column.getCanGlobalFilter()))) {
         const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
             text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
-            query: ((_b = (_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : globalFilter) !== null && _b !== void 0 ? _b : '').toString(),
+            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
+            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
         });
-        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_c = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _c === void 0 ? void 0 : _c.match)) {
-            renderedCellValue = (React.createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_d = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React.createElement(Box, { "aria-hidden": "true", component: "span", key: key, sx: match
+        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
+            renderedCellValue = (React.createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React.createElement(Box, { "aria-hidden": "true", component: "span", key: key, sx: match
                     ? {
                         backgroundColor: (theme) => theme.palette.mode === 'dark'
                             ? darken(theme.palette.warning.dark, 0.25)
@@ -2235,7 +2267,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
                         color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
                         padding: '2px 1px',
                     }
-                    : undefined }, text)))) !== null && _d !== void 0 ? _d : renderedCellValue));
+                    : undefined }, text)))) !== null && _c !== void 0 ? _c : renderedCellValue));
         }
     }
     if (columnDef.Cell && !isGroupedValue) {
@@ -2445,9 +2477,11 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
                     : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
-                        ? theme.palette.mode === 'dark'
-                            ? `${lighten(theme.palette.background.default, 0.12)}`
-                            : `${darken(theme.palette.background.default, 0.05)}`
+                        ? row.getIsSelected()
+                            ? `${alpha(theme.palette.primary.main, 0.2)}`
+                            : theme.palette.mode === 'dark'
+                                ? `${lighten(theme.palette.background.default, 0.12)}`
+                                : `${darken(theme.palette.background.default, 0.05)}`
                         : undefined,
                 } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
                 ? tableRowProps.sx(theme)