material-react-table 0.14.3 → 0.14.6

package/dist/MaterialReactTable.d.ts

@@ -1,14 +1,13 @@
 import { ChangeEvent, Dispatch, FC, FocusEvent, MouseEvent, ReactNode, SetStateAction } from 'react';
 import { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
-import { Cell, Column, ColumnDef, FilterFn, FilterFnOption, Header, HeaderGroup, OnChangeFn, Overwrite, ReactTableGenerics, Row, TableGenerics, TableInstance, TableState, UseTableInstanceOptions, VisibilityState } from '@tanstack/react-table';
+import { Cell, Column, ColumnDef, FilterFn, FilterFnOption, Header, HeaderGroup, OnChangeFn, Overwrite, ReactTableGenerics, Row, SortingFn, SortingFnOption, TableGenerics, TableInstance, TableState, UseTableInstanceOptions, VisibilityState } from '@tanstack/react-table';
 import { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
-export declare type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<Omit<UseTableInstanceOptions<ReactTableGenerics>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn' | 'filterFns'>> & {
+export declare type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<Omit<UseTableInstanceOptions<ReactTableGenerics>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'>> & {
     columns: MRT_ColumnDef<D>[];
     data: D[];
     expandRowsFn?: (dataRow: D) => D[];
-    filterFns?: MRT_FILTER_OPTION | FilterFn<D> | string | number | symbol;
     initialState?: Partial<MRT_TableState<D>>;
     state?: Partial<MRT_TableState<D>>;
 };
@@ -65,7 +64,7 @@ export declare type MRT_TableState<D extends Record<string, any> = {}> = TableSt
     showProgressBars: boolean;
     showSkeletons: boolean;
 };
-export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'accessorFn' | 'aggregatedCell' | 'header' | 'footer' | 'columns' | 'filterFn' | 'cell'> & {
+export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'accessorFn' | 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'sortingFn'> & {
     AggregatedCell?: ({ cell, instance, }: {
         cell: MRT_Cell<D>;
         instance: MRT_TableInstance<D>;
@@ -96,6 +95,7 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
     enableColumnActions?: boolean;
     enableColumnOrdering?: boolean;
     enableEditing?: boolean;
+    enableColumnFilterChangeMode?: boolean;
     enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
     filterFn?: MRT_FilterFn;
     filterSelectOptions?: (string | {
@@ -155,6 +155,7 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
         filterValue: any;
         instance: MRT_TableInstance<D>;
     }) => void;
+    sortingFn?: MRT_SortingFn;
 };
 export declare type MRT_Column<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns' | 'columnDef'> & {
     columns?: MRT_Column<D>[];
@@ -179,17 +180,21 @@ export declare type MRT_Cell<D extends Record<string, any> = {}> = Omit<Cell<D>,
     column: MRT_Column<D>;
     row: MRT_Row<D>;
 };
+export declare type MRT_SortingOption = SortingFnOption<TableGenerics> | 'fuzzy';
+export declare type MRT_SortingFn = SortingFn<TableGenerics> | MRT_SortingOption;
 export declare type MRT_FILTER_OPTION = 'between' | 'contains' | 'empty' | 'endsWith' | 'equals' | 'fuzzy' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'notEmpty' | 'notEquals' | 'startsWith' | FilterFnOption<TableGenerics>;
-export declare type MRT_FilterFn = FilterFn<TableGenerics> | MRT_FILTER_OPTION | number | string | symbol;
+export declare type MRT_FilterFn = FilterFn<TableGenerics> | MRT_FILTER_OPTION;
 export declare type MaterialReactTableProps<D extends Record<string, any> = {}> = MRT_TableOptions<D> & {
     editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
+    enableColumnFilterChangeMode?: boolean;
     enableColumnOrdering?: boolean;
     enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
+    enableGlobalFilterChangeMode?: boolean;
     enablePagination?: boolean;
     enablePersistentState?: boolean;
     enableRowActions?: boolean;
@@ -449,7 +454,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
-    virtualizerProps?: VirtualizerOptions<HTMLDivElement>;
+    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
 };
-declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
+declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

package/dist/{filtersFNs.d.ts → filtersFns.d.ts}

@@ -44,7 +44,7 @@ export declare const notEmpty: {
     (row: MRT_Row, id: string, _filterValue: string | number): boolean;
     autoRemove(val: any): boolean;
 };
-export declare const defaultFilterFNs: {
+export declare const MRT_FilterFns: {
     between: {
         (row: MRT_Row, id: string, filterValues: [string | number, string | number]): boolean;
         autoRemove(val: any): boolean;

package/dist/head/MRT_TableHeadCell.d.ts

@@ -4,9 +4,9 @@ interface Props {
     dragRef?: Ref<HTMLButtonElement>;
     dropRef?: Ref<HTMLDivElement>;
     header: MRT_Header;
+    instance: MRT_TableInstance;
     isDragging?: boolean;
     previewRef?: Ref<HTMLTableCellElement>;
-    instance: MRT_TableInstance;
 }
 export declare const MRT_TableHeadCell: FC<Props>;
 export {};

package/dist/inputs/{MRT_SearchTextField.d.ts → MRT_GlobalFilterTextField.d.ts}

@@ -3,5 +3,5 @@ import { MRT_TableInstance } from '..';
 interface Props {
     instance: MRT_TableInstance;
 }
-export declare const MRT_SearchTextField: FC<Props>;
+export declare const MRT_GlobalFilterTextField: FC<Props>;
 export {};

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

@@ -334,7 +334,7 @@ notEmpty.autoRemove = function (val) {
   return !val;
 };
 
-var defaultFilterFNs = {
+var MRT_FilterFns = {
   between: between,
   contains: contains,
   empty: empty,
@@ -3397,7 +3397,7 @@ var createDataColumn = function createDataColumn(table, column, currentFilterFns
   return (// @ts-ignore
     table.createDataColumn(column.id, _extends({
       filterFn: currentFilterFns[column.id] instanceof Function ? currentFilterFns[column.id] : // @ts-ignore
-      defaultFilterFNs[currentFilterFns[column.id]]
+      MRT_FilterFns[currentFilterFns[column.id]]
     }, column))
   );
 };
@@ -5291,19 +5291,22 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   }, rest), showGlobalFilter ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
 };
 
-var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
+var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
+  var _localization$clearSe;
+
   var instance = _ref.instance;
   var getState = instance.getState,
       setGlobalFilter = instance.setGlobalFilter,
       _instance$options = instance.options,
+      enableGlobalFilterChangeMode = _instance$options.enableGlobalFilterChangeMode,
       _instance$options$ico = _instance$options.icons,
       SearchIcon = _instance$options$ico.SearchIcon,
       CloseIcon = _instance$options$ico.CloseIcon,
-      tableId = _instance$options.tableId,
       localization = _instance$options.localization,
       muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
       onGlobalFilterValueChanged = _instance$options.onGlobalFilterValueChanged,
-      onGlobalFilterValueChangedDebounced = _instance$options.onGlobalFilterValueChangedDebounced;
+      onGlobalFilterValueChangedDebounced = _instance$options.onGlobalFilterValueChangedDebounced,
+      tableId = _instance$options.tableId;
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
@@ -5358,7 +5361,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     value: searchValue != null ? searchValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: React__default.createElement(material.InputAdornment, {
+      startAdornment: enableGlobalFilterChangeMode ? React__default.createElement(material.InputAdornment, {
         position: "start"
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
@@ -5371,16 +5374,18 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React__default.createElement(SearchIcon, null)))),
+      }, React__default.createElement(SearchIcon, null)))) : React__default.createElement(SearchIcon, null),
       endAdornment: React__default.createElement(material.InputAdornment, {
         position: "end"
-      }, React__default.createElement(material.IconButton, {
+      }, React__default.createElement(material.Tooltip, {
+        arrow: true,
+        title: (_localization$clearSe = localization.clearSearch) != null ? _localization$clearSe : ''
+      }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
         "aria-label": localization.clearSearch,
-        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
+        disabled: !(searchValue != null && searchValue.length),
         onClick: handleClear,
-        size: "small",
-        title: localization.clearSearch
-      }, React__default.createElement(CloseIcon, null)))
+        size: "small"
+      }, React__default.createElement(CloseIcon, null)))))
     }
   }, textFieldProps)), React__default.createElement(MRT_FilterOptionMenu, {
     anchorEl: anchorEl,
@@ -5415,7 +5420,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
     MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
     instance: instance
-  })) != null ? _renderToolbarInterna : React__default.createElement(React__default.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_SearchTextField, {
+  })) != null ? _renderToolbarInterna : React__default.createElement(React__default.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_GlobalFilterTextField, {
     instance: instance
   }), enableFilters && enableGlobalFilter && React__default.createElement(MRT_ToggleGlobalFilterButton, {
     instance: instance
@@ -5641,13 +5646,13 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       top: 0,
       width: '100%'
     }
-  }, enableGlobalFilter && positionGlobalFilter === 'left' && React__default.createElement(MRT_SearchTextField, {
+  }, enableGlobalFilter && positionGlobalFilter === 'left' && React__default.createElement(MRT_GlobalFilterTextField, {
     instance: instance
   }), (_renderToolbarTopCust = renderToolbarTopCustomActions == null ? void 0 : renderToolbarTopCustomActions({
     instance: instance
   })) != null ? _renderToolbarTopCust : React__default.createElement("span", null), enableToolbarInternalActions ? React__default.createElement(MRT_ToolbarInternalButtons, {
     instance: instance
-  }) : enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_SearchTextField, {
+  }) : enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_GlobalFilterTextField, {
     instance: instance
   })), enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
     instance: instance,
@@ -5724,13 +5729,14 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization$, _allowedColumnFilterO2, _localization$clearFi, _columnDef$filterSele;
+  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization$, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
       instance = _ref.instance;
   var getState = instance.getState,
       _instance$options = instance.options,
+      enableColumnFilterChangeMode = _instance$options.enableColumnFilterChangeMode,
       enabledColumnFilterOptions = _instance$options.enabledColumnFilterOptions,
       _instance$options$ico = _instance$options.icons,
       FilterListIcon = _instance$options$ico.FilterListIcon,
@@ -5856,6 +5862,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.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 allowColumnChangeMode = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false;
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -5867,7 +5874,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       },
       title: filterPlaceholder
     },
-    helperText: !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO : 0) > 0) ? React__default.createElement("label", {
+    helperText: allowColumnChangeMode && !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO : 0) > 0) ? React__default.createElement("label", {
       htmlFor: filterId
     }, filterFn instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
     (_localization$ = localization["filter" + (filterFn.name.charAt(0).toUpperCase() + filterFn.name.slice(1))]) != null ? _localization$ : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
@@ -5879,7 +5886,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
         whiteSpace: 'nowrap'
       }
     },
-    label: isSelectFilter && !filterValue ? filterPlaceholder : undefined,
     margin: "none",
     placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
     onChange: handleChange,
@@ -5890,7 +5896,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO2 = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO2 : 0) > 0) && React__default.createElement(material.InputAdornment, {
+      startAdornment: allowColumnChangeMode && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length)) ? React__default.createElement(material.InputAdornment, {
         position: "start"
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
@@ -5906,7 +5912,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       }, React__default.createElement(FilterListIcon, null)))), filterChipLabel && React__default.createElement(material.Chip, {
         onDelete: handleClearFilterChip,
         label: filterChipLabel
-      })),
+      })) : React__default.createElement(FilterListIcon, null),
       endAdornment: !filterChipLabel && React__default.createElement(material.InputAdornment, {
         position: "end"
       }, React__default.createElement(material.Tooltip, {
@@ -5931,7 +5937,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       p: 0,
       minWidth: !filterChipLabel ? '8rem' : 'auto',
       width: 'calc(100% + 0.5rem)',
-      mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
       '&	.MuiSelect-icon': {
         mr: '1.5rem'
       }
@@ -6014,27 +6019,28 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
 };
 
 var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
-  var _getState2, _getState2$currentFil;
+  var _column$getFilterValu, _column$getFilterValu2;
 
   var header = _ref.header,
       instance = _ref.instance;
   var getState = instance.getState,
       _instance$options = instance.options,
-      _instance$options$ico = _instance$options.icons,
-      FilterAltIcon = _instance$options$ico.FilterAltIcon,
-      FilterAltOffIcon = _instance$options$ico.FilterAltOffIcon,
-      localization = _instance$options.localization,
-      setShowFilters = instance.setShowFilters;
+      FilterAltIcon = _instance$options.icons.FilterAltIcon,
+      localization = _instance$options.localization;
 
   var _getState = getState(),
-      showFilters = _getState.showFilters;
+      currentFilterFns = _getState.currentFilterFns;
 
   var column = header.column;
   var columnDef = column.columnDef;
-  var filterFn = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterFns) == null ? void 0 : _getState2$currentFil[header.id];
-  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
-  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '') : localization.showHideFilters;
-  return React__default.createElement(material.Tooltip, {
+  var filterFn = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
+  var filterTooltip = localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
+  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
+  return React__default.createElement(material.Grow, {
+    unmountOnExit: true,
+    "in": !!column.getFilterValue() && filterFn !== 'between' || filterFn === 'between' && ( // @ts-ignore
+    !!((_column$getFilterValu = column.getFilterValue()) != null && _column$getFilterValu[0]) || !!((_column$getFilterValu2 = column.getFilterValue()) != null && _column$getFilterValu2[1]))
+  }, React__default.createElement("span", null, React__default.createElement(material.Tooltip, {
     arrow: true,
     placement: "top",
     title: filterTooltip
@@ -6042,22 +6048,16 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
     disableRipple: true,
     onClick: function onClick(event) {
       event.stopPropagation();
-      setShowFilters(!showFilters);
     },
     size: "small",
     sx: {
       m: 0,
-      opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
+      opacity: 0.8,
       p: '2px',
-      transition: 'all 0.2s ease-in-out',
       transform: 'scale(0.66)',
-      '&:hover': {
-        backgroundColor: 'transparent',
-        opacity: 0.8
-      },
       width: '1.5ch'
     }
-  }, showFilters && !column.getFilterValue() ? React__default.createElement(FilterAltOffIcon, null) : React__default.createElement(FilterAltIcon, null)));
+  }, React__default.createElement(FilterAltIcon, null)))));
 };
 
 var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
@@ -6192,20 +6192,21 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var dragRef = _ref.dragRef,
       dropRef = _ref.dropRef,
       header = _ref.header,
+      instance = _ref.instance,
       isDragging = _ref.isDragging,
-      previewRef = _ref.previewRef,
-      instance = _ref.instance;
+      previewRef = _ref.previewRef;
   var getState = instance.getState,
       _instance$options = instance.options,
       enableColumnActions = _instance$options.enableColumnActions,
-      enableColumnFilters = _instance$options.enableColumnFilters,
       enableColumnOrdering = _instance$options.enableColumnOrdering,
       enableColumnResizing = _instance$options.enableColumnResizing,
       enableGrouping = _instance$options.enableGrouping,
+      enableMultiSort = _instance$options.enableMultiSort,
       muiTableHeadCellProps = _instance$options.muiTableHeadCellProps;
 
   var _getState = getState(),
-      density = _getState.density;
+      density = _getState.density,
+      showFilters = _getState.showFilters;
 
   var column = header.column;
   var columnDef = column.columnDef,
@@ -6260,7 +6261,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         pt: columnDefType !== 'data' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
-        verticalAlign: 'text-top',
+        userSelect: enableMultiSort ? 'none' : undefined,
+        verticalAlign: columnDefType === 'display' && showFilters ? 'center' : 'text-top',
         zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
@@ -6279,9 +6281,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       width: '100%'
     }
   }, React__default.createElement(material.Box, {
-    onClick: function onClick() {
-      return column.toggleSorting();
-    },
+    onClick: column.getToggleSortingHandler(),
     sx: {
       alignItems: 'center',
       cursor: column.getCanSort() && columnDefType !== 'group' ? 'pointer' : undefined,
@@ -6292,7 +6292,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }, headerElement, columnDefType === 'data' && column.getCanSort() && React__default.createElement(MRT_TableHeadCellSortLabel, {
     header: header,
     instance: instance
-  }), columnDefType === 'data' && enableColumnFilters && column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterLabel, {
+  }), columnDefType === 'data' && column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterLabel, {
     header: header,
     instance: instance
   })), React__default.createElement(material.Box, {
@@ -7550,6 +7550,21 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   })));
 };
 
+var fuzzy$1 = function fuzzy(rowA, rowB, columnId) {
+  var dir = 0;
+
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+  } // Provide a fallback for when the item ranks are equal
+
+
+  return dir === 0 ? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId) : dir;
+};
+
+var MRT_SortingFns = {
+  fuzzy: fuzzy$1
+};
+
 var MRT_TableRoot = function MRT_TableRoot(props) {
   var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
 
@@ -7638,8 +7653,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   var table = React.useMemo(function () {
     return (// @ts-ignore
       reactTable.createTable().setOptions({
-        //@ts-ignore
-        filterFns: defaultFilterFNs,
+        filterFns: _extends({}, reactTable.filterFns, MRT_FilterFns, props.filterFns),
         getCoreRowModel: reactTable.getCoreRowModel(),
         getExpandedRowModel: reactTable.getExpandedRowModel(),
         getFacetedRowModel: reactTable.getFacetedRowModel(),
@@ -7647,10 +7661,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         getGroupedRowModel: reactTable.getGroupedRowModel(),
         getPaginationRowModel: reactTable.getPaginationRowModel(),
         getSortedRowModel: reactTable.getSortedRowModel(),
-        getSubRows: function getSubRows(row) {
-          return row == null ? void 0 : row.subRows;
-        },
-        tableId: tableId
+        sortingFns: _extends({}, reactTable.sortingFns, MRT_SortingFns, props.sortingFns)
       })
     );
   }, []);
@@ -7747,6 +7758,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     //@ts-ignore
     columns: columns,
     data: data,
+    getSubRows: function getSubRows(row) {
+      return row == null ? void 0 : row.subRows;
+    },
     //@ts-ignore
     globalFilterFn: currentGlobalFilterFn,
     initialState: initialState,
@@ -7760,7 +7774,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       isFullScreen: isFullScreen,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
-    }, props.state)
+    }, props.state),
+    tableId: tableId
   })), {
     setCurrentEditingCell: (_props$onCurrentEditi = props.onCurrentEditingCellChange) != null ? _props$onCurrentEditi : setCurrentEditingCell,
     setCurrentEditingRow: (_props$onCurrentEditi2 = props.onCurrentEditingRowChange) != null ? _props$onCurrentEditi2 : setCurrentEditingRow,
@@ -7812,7 +7827,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -7828,8 +7843,10 @@ var MaterialReactTable = (function (_ref) {
       editingMode = _ref$editingMode === void 0 ? 'row' : _ref$editingMode,
       _ref$enableColumnActi = _ref.enableColumnActions,
       enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
-      _ref$enableColumnFilt = _ref.enableColumnFilters,
-      enableColumnFilters = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      _ref$enableColumnFilt = _ref.enableColumnFilterChangeMode,
+      enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      _ref$enableColumnFilt2 = _ref.enableColumnFilters,
+      enableColumnFilters = _ref$enableColumnFilt2 === void 0 ? true : _ref$enableColumnFilt2,
       _ref$enableColumnOrde = _ref.enableColumnOrdering,
       enableColumnOrdering = _ref$enableColumnOrde === void 0 ? false : _ref$enableColumnOrde,
       _ref$enableColumnResi = _ref.enableColumnResizing,
@@ -7844,6 +7861,8 @@ var MaterialReactTable = (function (_ref) {
       enableFullScreenToggle = _ref$enableFullScreen === void 0 ? true : _ref$enableFullScreen,
       _ref$enableGlobalFilt = _ref.enableGlobalFilter,
       enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
+      _ref$enableGlobalFilt2 = _ref.enableGlobalFilterChangeMode,
+      enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? true : _ref$enableGlobalFilt2,
       _ref$enableGrouping = _ref.enableGrouping,
       enableGrouping = _ref$enableGrouping === void 0 ? false : _ref$enableGrouping,
       _ref$enableHiding = _ref.enableHiding,
@@ -7896,6 +7915,7 @@ var MaterialReactTable = (function (_ref) {
     defaultColumn: defaultColumn,
     editingMode: editingMode,
     enableColumnActions: enableColumnActions,
+    enableColumnFilterChangeMode: enableColumnFilterChangeMode,
     enableColumnFilters: enableColumnFilters,
     enableColumnOrdering: enableColumnOrdering,
     enableColumnResizing: enableColumnResizing,
@@ -7904,6 +7924,7 @@ var MaterialReactTable = (function (_ref) {
     enableFilters: enableFilters,
     enableFullScreenToggle: enableFullScreenToggle,
     enableGlobalFilter: enableGlobalFilter,
+    enableGlobalFilterChangeMode: enableGlobalFilterChangeMode,
     enableGrouping: enableGrouping,
     enableHiding: enableHiding,
     enableMultiRowSelection: enableMultiRowSelection,