material-react-table 0.14.5 → 0.15.1

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>>;
 };
@@ -21,7 +20,7 @@ export interface MRT_RowModel<D extends Record<string, any> = {}> {
 }
 export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<TableInstance<Overwrite<Partial<TableGenerics>, {
     Row: D;
-}>>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getCenterLeafColumns' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
+}>>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getCenterLeafColumns' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
     getAllColumns: () => MRT_Column<D>[];
     getAllFlatColumns: () => MRT_Column<D>[];
     getAllLeafColumns: () => MRT_Column<D>[];
@@ -31,6 +30,7 @@ export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit
     getFlatHeaders: () => MRT_Header<D>[];
     getLeftLeafColumns: () => MRT_Column<D>[];
     getPaginationRowModel: () => MRT_RowModel<D>;
+    getPreFilteredRowModel: () => MRT_RowModel<D>;
     getPrePaginationRowModel: () => MRT_RowModel<D>;
     getRightLeafColumns: () => MRT_Column<D>[];
     getRowModel: () => MRT_RowModel<D>;
@@ -65,7 +65,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 +96,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 +156,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 +181,22 @@ 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;
+    enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
     enablePersistentState?: boolean;
     enableRowActions?: boolean;
@@ -451,5 +458,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     tableId?: string;
     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, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, 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/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

@@ -173,7 +173,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.expandAll
-  }, React__default.createElement(material.IconButton, Object.assign({
+  }, React__default.createElement("span", null, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.expandAll,
     disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
     onClick: function onClick() {
@@ -189,7 +189,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       transform: "rotate(" + (getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  })));
+  }))));
 };
 
 var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
@@ -225,7 +225,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.expand
-  }, React__default.createElement(material.IconButton, Object.assign({
+  }, React__default.createElement("span", null, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.expand,
     disabled: !row.getCanExpand() && !renderDetailPanel,
     onClick: handleToggleExpand
@@ -239,7 +239,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  })));
+  }))));
 };
 
 var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
@@ -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'
       }
@@ -7284,6 +7289,28 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_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 rankGlobalFuzzy = function rankGlobalFuzzy(rowA, rowB) {
+  return Math.max.apply(Math, Object.values(rowB.columnFiltersMeta).map(function (v) {
+    return v.rank;
+  })) - Math.max.apply(Math, Object.values(rowA.columnFiltersMeta).map(function (v) {
+    return v.rank;
+  }));
+};
+
 var MRT_TableBody = function MRT_TableBody(_ref) {
   var instance = _ref.instance,
       tableContainerRef = _ref.tableContainerRef;
@@ -7291,20 +7318,43 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       getPrePaginationRowModel = instance.getPrePaginationRowModel,
       getState = instance.getState,
       _instance$options = instance.options,
+      enableGlobalFilterRankedResults = _instance$options.enableGlobalFilterRankedResults,
       enablePagination = _instance$options.enablePagination,
       enableRowVirtualization = _instance$options.enableRowVirtualization,
       muiTableBodyProps = _instance$options.muiTableBodyProps,
       virtualizerProps = _instance$options.virtualizerProps;
 
   var _getState = getState(),
-      density = _getState.density;
+      density = _getState.density,
+      globalFilter = _getState.globalFilter,
+      pagination = _getState.pagination,
+      sorting = _getState.sorting;
 
   var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
     instance: instance
   }) : muiTableBodyProps;
-  var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
+
+  var getIsSomeColumnsSorted = function getIsSomeColumnsSorted() {
+    return Object.values(sorting).some(Boolean);
+  };
+
+  var rows = React.useMemo(function () {
+    if (enableGlobalFilterRankedResults && globalFilter && !getIsSomeColumnsSorted()) {
+      var rankedRows = getPrePaginationRowModel().rows.sort(function (a, b) {
+        return rankGlobalFuzzy(a, b);
+      });
+
+      if (enablePagination) {
+        return rankedRows.slice(0, pagination.pageSize);
+      }
+
+      return rankedRows;
+    }
+
+    return enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
+  }, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getPaginationRowModel().rows, globalFilter]);
   var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
-    overscan: density === 'compact' ? 15 : 5,
+    overscan: density === 'compact' ? 20 : 10,
     size: rows.length,
     parentRef: tableContainerRef
   }, virtualizerProps)) : {};
@@ -7633,8 +7683,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(),
@@ -7642,10 +7691,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)
       })
     );
   }, []);
@@ -7742,6 +7788,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,
@@ -7755,7 +7804,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,
@@ -7807,7 +7857,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", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "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,
@@ -7823,8 +7873,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,
@@ -7839,12 +7891,18 @@ 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$enableGlobalFilt3 = _ref.enableGlobalFilterRankedResults,
+      enableGlobalFilterRankedResults = _ref$enableGlobalFilt3 === void 0 ? true : _ref$enableGlobalFilt3,
       _ref$enableGrouping = _ref.enableGrouping,
       enableGrouping = _ref$enableGrouping === void 0 ? false : _ref$enableGrouping,
       _ref$enableHiding = _ref.enableHiding,
       enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
       _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
       enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? true : _ref$enableMultiRowSe,
+      _ref$enableMultiSort = _ref.enableMultiSort,
+      enableMultiSort = _ref$enableMultiSort === void 0 ? true : _ref$enableMultiSort,
       _ref$enablePagination = _ref.enablePagination,
       enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
       _ref$enablePinning = _ref.enablePinning,
@@ -7891,6 +7949,7 @@ var MaterialReactTable = (function (_ref) {
     defaultColumn: defaultColumn,
     editingMode: editingMode,
     enableColumnActions: enableColumnActions,
+    enableColumnFilterChangeMode: enableColumnFilterChangeMode,
     enableColumnFilters: enableColumnFilters,
     enableColumnOrdering: enableColumnOrdering,
     enableColumnResizing: enableColumnResizing,
@@ -7899,9 +7958,12 @@ var MaterialReactTable = (function (_ref) {
     enableFilters: enableFilters,
     enableFullScreenToggle: enableFullScreenToggle,
     enableGlobalFilter: enableGlobalFilter,
+    enableGlobalFilterChangeMode: enableGlobalFilterChangeMode,
+    enableGlobalFilterRankedResults: enableGlobalFilterRankedResults,
     enableGrouping: enableGrouping,
     enableHiding: enableHiding,
     enableMultiRowSelection: enableMultiRowSelection,
+    enableMultiSort: enableMultiSort,
     enablePagination: enablePagination,
     enablePinning: enablePinning,
     enableRowSelection: enableRowSelection,