material-react-table 0.6.9 → 0.6.10

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

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo, useContext, createContext, Fragment, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
-import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, ListItemIcon, TableCell, TableSortLabel, Collapse, Skeleton, Checkbox, TableRow, TableHead, TableBody, TableFooter, Table, TablePagination, useMediaQuery, Alert, LinearProgress, Toolbar, alpha, TableContainer, Paper } from '@mui/material';
+import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, ListItemIcon, TableCell, TableSortLabel, Collapse, Checkbox, TableRow, TableHead, Skeleton, TableBody, TableFooter, Table, TablePagination, useMediaQuery, Alert, LinearProgress, Toolbar, alpha, TableContainer, Paper } from '@mui/material';
 import { matchSorter } from 'match-sorter';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -99,6 +99,22 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var MRT_FILTER_TYPE;
+
+(function (MRT_FILTER_TYPE) {
+  MRT_FILTER_TYPE["BEST_MATCH"] = "bestMatch";
+  MRT_FILTER_TYPE["BEST_MATCH_FIRST"] = "bestMatchFirst";
+  MRT_FILTER_TYPE["CONTAINS"] = "contains";
+  MRT_FILTER_TYPE["EMPTY"] = "empty";
+  MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
+  MRT_FILTER_TYPE["EQUALS"] = "equals";
+  MRT_FILTER_TYPE["GREATER_THAN"] = "greaterThan";
+  MRT_FILTER_TYPE["LESS_THAN"] = "lessThan";
+  MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
+  MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
+  MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
+})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
+
 var findLowestLevelCols = function findLowestLevelCols(columns) {
   var lowestLevelColumns = columns;
   var currentCols = columns;
@@ -160,14 +176,18 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
 
   var _useState6 = useState(function () {
     return Object.assign.apply(Object, [{}].concat(findLowestLevelCols(props.columns).map(function (c) {
-      var _ref, _c$filter, _props$initialState5, _props$initialState5$, _ref2;
+      var _ref, _c$filter, _props$initialState5, _props$initialState5$, _c$filterSelectOption, _ref2;
 
-      return _ref2 = {}, _ref2[c.accessor] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.filters) == null ? void 0 : _props$initialState5$[c.accessor]) != null ? _ref : !!c.filterSelectOptions ? 'equals' : 'fuzzy', _ref2;
+      return _ref2 = {}, _ref2[c.accessor] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.filters) == null ? void 0 : _props$initialState5$[c.accessor]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
     })));
   }),
       currentFilterTypes = _useState6[0],
       setCurrentFilterTypes = _useState6[1];
 
+  var _useState7 = useState(props.globalFilter),
+      currentGlobalFilterType = _useState7[0],
+      setCurrentGlobalFilterType = _useState7[1];
+
   var applyFiltersToColumns = useCallback(function (cols) {
     return cols.map(function (column) {
       if (column.columns) {
@@ -198,17 +218,19 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
     // @ts-ignore
     columns: columns,
     data: data,
+    globalFilter: currentGlobalFilterType,
     useControlledState: function useControlledState(state) {
       return useMemo(function () {
         return _extends({}, state, {
           currentEditingRow: currentEditingRow,
           currentFilterTypes: currentFilterTypes,
+          currentGlobalFilterType: currentGlobalFilterType,
           densePadding: densePadding,
           fullScreen: fullScreen,
           showFilters: showFilters,
           showSearch: showSearch
         }, props == null ? void 0 : props.useControlledState == null ? void 0 : props.useControlledState(state));
-      }, [currentEditingRow, currentFilterTypes, densePadding, fullScreen, showFilters, showSearch, state]);
+      }, [currentEditingRow, currentFilterTypes, currentGlobalFilterType, densePadding, fullScreen, showFilters, showSearch, state]);
     }
   })].concat(hooks));
   var idPrefix = useMemo(function () {
@@ -234,6 +256,7 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       //@ts-ignore
       setCurrentEditingRow: setCurrentEditingRow,
       setCurrentFilterTypes: setCurrentFilterTypes,
+      setCurrentGlobalFilterType: setCurrentGlobalFilterType,
       setDensePadding: setDensePadding,
       setFullScreen: setFullScreen,
       setShowFilters: setShowFilters,
@@ -247,22 +270,19 @@ var useMRT = function useMRT() {
   return useContext(MaterialReactTableContext);
 };
 
-var MRT_FILTER_TYPE;
+var bestMatchFirst = function bestMatchFirst(rows, columnIds, filterValue) {
+  return matchSorter(rows, filterValue.toString().trim(), {
+    keys: Array.isArray(columnIds) ? columnIds.map(function (c) {
+      return "values." + c;
+    }) : ["values." + columnIds]
+  });
+};
 
-(function (MRT_FILTER_TYPE) {
-  MRT_FILTER_TYPE["CONTAINS"] = "contains";
-  MRT_FILTER_TYPE["EMPTY"] = "empty";
-  MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
-  MRT_FILTER_TYPE["EQUALS"] = "equals";
-  MRT_FILTER_TYPE["FUZZY"] = "fuzzy";
-  MRT_FILTER_TYPE["GREATER_THAN"] = "greaterThan";
-  MRT_FILTER_TYPE["LESS_THAN"] = "lessThan";
-  MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
-  MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
-  MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
-})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
+bestMatchFirst.autoRemove = function (val) {
+  return !val;
+};
 
-var fuzzy = function fuzzy(rows, columnIds, filterValue) {
+var bestMatch = function bestMatch(rows, columnIds, filterValue) {
   return matchSorter(rows, filterValue.toString().trim(), {
     keys: Array.isArray(columnIds) ? columnIds.map(function (c) {
       return "values." + c;
@@ -273,7 +293,7 @@ var fuzzy = function fuzzy(rows, columnIds, filterValue) {
   });
 };
 
-fuzzy.autoRemove = function (val) {
+bestMatch.autoRemove = function (val) {
   return !val;
 };
 
@@ -368,11 +388,12 @@ notEmpty.autoRemove = function (val) {
 };
 
 var defaultFilterFNs = {
+  bestMatch: bestMatch,
+  bestMatchFirst: bestMatchFirst,
   contains: contains,
   empty: empty,
   endsWith: endsWith,
   equals: equals,
-  fuzzy: fuzzy,
   greaterThan: greaterThan,
   lessThan: lessThan,
   notEmpty: notEmpty,
@@ -392,20 +413,27 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       setAnchorEl = _ref.setAnchorEl;
 
   var _useMRT = useMRT(),
+      enabledGlobalFilterTypes = _useMRT.enabledGlobalFilterTypes,
       localization = _useMRT.localization,
       setCurrentFilterTypes = _useMRT.setCurrentFilterTypes,
+      setCurrentGlobalFilterType = _useMRT.setCurrentGlobalFilterType,
       tableInstance = _useMRT.tableInstance;
 
   var filterTypes = useMemo(function () {
     return [{
-      type: MRT_FILTER_TYPE.FUZZY,
-      label: localization.filterFuzzy,
+      type: MRT_FILTER_TYPE.BEST_MATCH_FIRST,
+      label: localization.filterBestMatchFirst,
       divider: false,
-      fn: fuzzy
+      fn: bestMatchFirst
+    }, {
+      type: MRT_FILTER_TYPE.BEST_MATCH,
+      label: localization.filterBestMatch,
+      divider: !!column,
+      fn: bestMatch
     }, {
       type: MRT_FILTER_TYPE.CONTAINS,
       label: localization.filterContains,
-      divider: true,
+      divider: false,
       fn: contains
     }, {
       type: MRT_FILTER_TYPE.STARTS_WITH,
@@ -448,26 +476,30 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       divider: false,
       fn: notEmpty
     }].filter(function (filterType) {
-      return !column.filterTypes || column.filterTypes.includes(filterType.type);
+      return column ? !column.enabledFilterTypes || column.enabledFilterTypes.includes(filterType.type) : (!enabledGlobalFilterTypes || enabledGlobalFilterTypes.includes(filterType.type)) && [MRT_FILTER_TYPE.BEST_MATCH_FIRST, MRT_FILTER_TYPE.BEST_MATCH].includes(filterType.type);
     });
   }, []);
 
   var handleSelectFilterType = function handleSelectFilterType(value) {
-    setAnchorEl(null);
-    setCurrentFilterTypes(function (prev) {
-      var _extends2;
+    if (column) {
+      setCurrentFilterTypes(function (prev) {
+        var _extends2;
 
-      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = value, _extends2));
-    });
+        return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = value, _extends2));
+      });
 
-    if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
-      column.setFilter(' ');
+      if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
+        column.setFilter(' ');
+      }
+    } else {
+      setCurrentGlobalFilterType(value);
     }
 
+    setAnchorEl(null);
     onSelect == null ? void 0 : onSelect();
   };
 
-  var filterType = tableInstance.state.currentFilterTypes[column.id];
+  var filterType = column ? tableInstance.state.currentFilterTypes[column.id] : tableInstance.state.currentGlobalFilterType;
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     anchorOrigin: {
@@ -546,7 +578,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     setCurrentFilterTypes(function (prev) {
       var _extends2;
 
-      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = MRT_FILTER_TYPE.FUZZY, _extends2));
+      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = MRT_FILTER_TYPE.BEST_MATCH, _extends2));
     });
   };
 
@@ -585,13 +617,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       }
     },
     label: isSelectFilter && !filterValue ? filterPlaceholder : undefined,
-    InputLabelProps: {
-      shrink: false,
-      sx: {
-        maxWidth: 'calc(100% - 2.5rem)'
-      },
-      title: filterPlaceholder
-    },
     margin: "none",
     placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
     onChange: function onChange(e) {
@@ -1076,7 +1101,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var sortTooltip = column.isSorted ? column.isSortedDesc ? localization.clearSort : (_localization$sortByC = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC.replace('{column}', column.Header) : (_localization$sortByC2 = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC2.replace('{column}', column.Header);
   var filterType = tableInstance.state.currentFilterTypes[column.id];
   var filterTooltip = !!column.filterValue ? localization.filteringByColumn.replace('{column}', String(column.Header)).replace('{filterType}', filterType instanceof Function ? '' : // @ts-ignore
-  localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]).replace('{filterValue}', column.filterValue) : localization.showHideFilters;
+  localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]).replace('{filterValue}', column.filterValue).replace('" "', '') : localization.showHideFilters;
   var columnHeader = column.render('Header');
   return React.createElement(TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
@@ -1161,142 +1186,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   })));
 };
 
-var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
-  var cell = _ref.cell;
-
-  var _useMRT = useMRT(),
-      muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
-      currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
-
-  var handleChange = function handleChange(event) {
-    if (currentEditingRow) {
-      cell.row.values[cell.column.id] = event.target.value;
-      setCurrentEditingRow(_extends({}, currentEditingRow));
-    }
-
-    cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
-  };
-
-  var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
-  var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
-
-  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
-
-  if (!cell.column.disableEditing && cell.column.Edit) {
-    return React.createElement(React.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
-      cell: cell
-    })));
-  }
-
-  return React.createElement(TextField, Object.assign({
-    margin: "dense",
-    onChange: handleChange,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    placeholder: cell.column.Header,
-    value: cell.value,
-    variant: "standard"
-  }, textFieldProps));
-};
-
-var MRT_CopyButton = function MRT_CopyButton(_ref) {
-  var cell = _ref.cell;
-
-  var _useMRT = useMRT(),
-      localization = _useMRT.localization;
-
-  var _useState = useState(false),
-      copied = _useState[0],
-      setCopied = _useState[1];
-
-  var handleCopy = function handleCopy(text) {
-    navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(function () {
-      return setCopied(false);
-    }, 4000);
-  };
-
-  return React.createElement(Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    placement: "top",
-    title: copied ? localization.copiedToClipboard : localization.clickToCopy
-  }, React.createElement(Button, {
-    "aria-label": localization.clickToCopy,
-    onClick: function onClick() {
-      return handleCopy(cell.value);
-    },
-    size: "small",
-    sx: {
-      backgroundColor: 'transparent',
-      color: 'inherit',
-      letterSpacing: 'inherit',
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      m: '-0.25rem',
-      textTransform: 'inherit',
-      textAlign: 'inherit',
-      minWidth: 'unset'
-    },
-    variant: "text"
-  }, cell.render('Cell')));
-};
-
-var commonTableBodyCellStyles = function commonTableBodyCellStyles(densePadding) {
-  return {
-    p: densePadding ? '0.5rem' : '1rem',
-    transition: 'all 0.2s ease-in-out',
-    whiteSpace: densePadding ? 'nowrap' : 'normal'
-  };
-};
-var commonTableBodyButtonCellStyles = function commonTableBodyButtonCellStyles(densePadding) {
-  return {
-    p: densePadding ? '1px' : '0.6rem',
-    textAlign: 'center',
-    transition: 'all 0.2s ease-in-out'
-  };
-};
-var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var cell = _ref.cell;
-
-  var _useMRT = useMRT(),
-      enableClickToCopy = _useMRT.enableClickToCopy,
-      isLoading = _useMRT.isLoading,
-      muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
-      muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
-      onCellClick = _useMRT.onCellClick,
-      _useMRT$tableInstance = _useMRT.tableInstance.state,
-      currentEditingRow = _useMRT$tableInstance.currentEditingRow,
-      densePadding = _useMRT$tableInstance.densePadding;
-
-  var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
-  var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
-
-  var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps, cell.getCellProps(), {
-    style: _extends({}, cell.getCellProps().style, mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style, mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style)
-  });
-
-  return React.createElement(TableCell, Object.assign({
-    onClick: function onClick(event) {
-      return onCellClick == null ? void 0 : onCellClick(event, cell);
-    }
-  }, tableCellProps, {
-    sx: _extends({}, commonTableBodyCellStyles(densePadding), tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), isLoading ? React.createElement(Skeleton, Object.assign({
-    animation: "wave",
-    height: 20,
-    width: Math.random() * (120 - 60) + 60
-  }, muiTableBodyCellSkeletonProps)) : !cell.column.disableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
-    cell: cell
-  }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : enableClickToCopy && !cell.column.disableClickToCopy ? React.createElement(MRT_CopyButton, {
-    cell: cell
-  }) : cell.render('Cell'));
-};
-
 var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var row = _ref.row,
       selectAll = _ref.selectAll;
@@ -1355,11 +1244,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
       localization = _useMRT.localization,
       tableInstance = _useMRT.tableInstance;
 
-  return React.createElement(TableCell, Object.assign({
-    size: "small"
-  }, tableInstance.getToggleAllRowsExpandedProps(), {
-    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
-  }), React.createElement(IconButton, {
+  return React.createElement(IconButton, {
     "aria-label": localization.expandAll,
     title: localization.expandAll
   }, React.createElement(DoubleArrowDownIcon, {
@@ -1367,7 +1252,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
       transform: "rotate(" + (tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  })));
+  }));
 };
 
 var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
@@ -1430,20 +1315,32 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     style: _extends({}, headerGroup.getHeaderGroupProps().style, mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style)
   });
 
-  return React.createElement(TableRow, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(TableCell, {
-    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding))
-  }, "#")), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
+  return React.createElement(TableRow, Object.assign({}, tableRowProps), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(TableCell, Object.assign({
+    size: "small"
+  }, tableInstance.getToggleAllRowsExpandedProps(), {
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding), {
+      width: '3rem',
+      maxWidth: '3rem',
+      textAlign: 'center'
+    })
+  }), React.createElement(MRT_ExpandAllButton, null)) : React.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   }) : null, enableSelection ? !isParentHeader && !disableSelectAll ? React.createElement(TableCell, {
-    sx: _extends({}, commonTableBodyButtonCellStyles(tableInstance.state.densePadding), {
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding), {
       maxWidth: '3rem',
-      width: '3rem'
+      width: '3rem',
+      textAlign: 'center'
     })
   }, React.createElement(MRT_SelectCheckbox, {
     selectAll: true
   })) : React.createElement(MRT_TableSpacerCell, {
     width: "1rem"
-  }) : null, headerGroup.headers.map(function (column) {
+  }) : null, enableRowNumbers && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(TableCell, {
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding), {
+      width: '2rem',
+      maxWidth: '2rem'
+    })
+  }, "#")), headerGroup.headers.map(function (column) {
     return React.createElement(MRT_TableHeadCell, {
       key: column.getHeaderProps().key,
       column: column
@@ -1465,6 +1362,153 @@ var MRT_TableHead = function MRT_TableHead() {
   }));
 };
 
+var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
+  var cell = _ref.cell;
+
+  var _useMRT = useMRT(),
+      muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
+      currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
+
+  var handleChange = function handleChange(event) {
+    if (currentEditingRow) {
+      cell.row.values[cell.column.id] = event.target.value;
+      setCurrentEditingRow(_extends({}, currentEditingRow));
+    }
+
+    cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
+  };
+
+  var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
+  var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
+
+  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
+
+  if (!cell.column.disableEditing && cell.column.Edit) {
+    return React.createElement(React.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
+      cell: cell
+    })));
+  }
+
+  return React.createElement(TextField, Object.assign({
+    margin: "dense",
+    onChange: handleChange,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    placeholder: cell.column.Header,
+    value: cell.value,
+    variant: "standard"
+  }, textFieldProps));
+};
+
+var MRT_CopyButton = function MRT_CopyButton(_ref) {
+  var cell = _ref.cell,
+      children = _ref.children;
+
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization,
+      muiTableBodyCellCopyButtonProps = _useMRT.muiTableBodyCellCopyButtonProps;
+
+  var _useState = useState(false),
+      copied = _useState[0],
+      setCopied = _useState[1];
+
+  var handleCopy = function handleCopy(text) {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(function () {
+      return setCopied(false);
+    }, 4000);
+  };
+
+  var mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function ? muiTableBodyCellCopyButtonProps(cell) : muiTableBodyCellCopyButtonProps;
+  var mcTableBodyCellCopyButtonProps = cell.column.muiTableBodyCellCopyButtonProps instanceof Function ? cell.column.muiTableBodyCellCopyButtonProps(cell) : cell.column.muiTableBodyCellCopyButtonProps;
+
+  var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement: "top",
+    title: copied ? localization.copiedToClipboard : localization.clickToCopy
+  }, React.createElement(Button, Object.assign({
+    "aria-label": localization.clickToCopy,
+    onClick: function onClick() {
+      return handleCopy(cell.value);
+    },
+    size: "small"
+  }, buttonProps, {
+    sx: _extends({
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: 'inherit',
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      letterSpacing: 'inherit',
+      m: '-0.25rem',
+      minWidth: 'unset',
+      textAlign: 'inherit',
+      textTransform: 'inherit'
+    }, buttonProps == null ? void 0 : buttonProps.sx),
+    variant: "text"
+  }), children));
+};
+
+var commonTableBodyCellStyles = function commonTableBodyCellStyles(densePadding) {
+  return {
+    p: densePadding ? '0.5rem' : '1rem',
+    transition: 'all 0.2s ease-in-out',
+    whiteSpace: densePadding ? 'nowrap' : 'normal'
+  };
+};
+var commonTableBodyButtonCellStyles = function commonTableBodyButtonCellStyles(densePadding) {
+  return {
+    p: densePadding ? '1px' : '0.6rem',
+    textAlign: 'center',
+    transition: 'all 0.2s ease-in-out'
+  };
+};
+var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
+  var cell = _ref.cell;
+
+  var _useMRT = useMRT(),
+      enableClickToCopy = _useMRT.enableClickToCopy,
+      isLoading = _useMRT.isLoading,
+      muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
+      muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
+      onCellClick = _useMRT.onCellClick,
+      _useMRT$tableInstance = _useMRT.tableInstance.state,
+      currentEditingRow = _useMRT$tableInstance.currentEditingRow,
+      densePadding = _useMRT$tableInstance.densePadding;
+
+  var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
+  var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
+
+  var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps, cell.getCellProps(), {
+    style: _extends({}, cell.getCellProps().style, mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style, mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style)
+  });
+
+  return React.createElement(TableCell, Object.assign({
+    onClick: function onClick(event) {
+      return onCellClick == null ? void 0 : onCellClick(event, cell);
+    }
+  }, tableCellProps, {
+    sx: _extends({}, commonTableBodyCellStyles(densePadding), tableCellProps == null ? void 0 : tableCellProps.sx)
+  }), isLoading ? React.createElement(Skeleton, Object.assign({
+    animation: "wave",
+    height: 20,
+    width: Math.random() * (120 - 60) + 60
+  }, muiTableBodyCellSkeletonProps)) : !cell.column.disableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
+    cell: cell
+  }) : cell.isPlaceholder ? null : cell.isAggregated ? enableClickToCopy && !cell.column.disableClickToCopy ? React.createElement(MRT_CopyButton, {
+    cell: cell
+  }, cell.render('Aggregated')) : cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : enableClickToCopy && !cell.column.disableClickToCopy ? React.createElement(MRT_CopyButton, {
+    cell: cell
+  }, cell.render('Cell')) : cell.render('Cell'));
+};
+
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   var row = _ref.row;
 
@@ -1501,8 +1545,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       ExpandMoreIcon = _useMRT.icons.ExpandMoreIcon,
       localization = _useMRT.localization,
       onRowExpandChange = _useMRT.onRowExpandChange,
-      renderDetailPanel = _useMRT.renderDetailPanel,
-      densePadding = _useMRT.tableInstance.state.densePadding;
+      renderDetailPanel = _useMRT.renderDetailPanel;
 
   var handleToggleExpand = function handleToggleExpand(event) {
     var _row$getToggleRowExpa;
@@ -1512,13 +1555,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     onRowExpandChange == null ? void 0 : onRowExpandChange(event, row);
   };
 
-  return React.createElement(TableCell, {
-    size: "small",
-    sx: _extends({}, commonTableBodyButtonCellStyles(densePadding), {
-      pl: row.depth + 0.5 + "rem",
-      textAlign: 'left'
-    })
-  }, React.createElement(IconButton, Object.assign({
+  return React.createElement(IconButton, Object.assign({
     "aria-label": localization.expand,
     disabled: !row.canExpand && !renderDetailPanel,
     title: localization.expand
@@ -1529,7 +1566,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       transform: "rotate(" + (!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  })));
+  }));
 };
 
 var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
@@ -2487,20 +2524,26 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
     },
     selected: row.isSelected
-  }, tableRowProps), enableRowNumbers && React.createElement(TableCell, {
-    sx: _extends({}, commonTableBodyCellStyles(densePadding))
-  }, row.index + 1), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
+  }, tableRowProps), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React.createElement(MRT_ToggleRowActionMenuButton, {
     row: row
-  }), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_ExpandButton, {
+  }), (anyRowsCanExpand || renderDetailPanel) && React.createElement(TableCell, {
+    size: "small",
+    sx: _extends({}, commonTableBodyButtonCellStyles(densePadding), {
+      pl: row.depth + 0.5 + "rem",
+      textAlign: 'left'
+    })
+  }, React.createElement(MRT_ExpandButton, {
     row: row
-  }), enableSelection && React.createElement(TableCell, {
+  })), enableSelection && React.createElement(TableCell, {
     sx: _extends({}, commonTableBodyButtonCellStyles(tableInstance.state.densePadding), {
       maxWidth: '3rem',
       width: '3rem'
     })
   }, React.createElement(MRT_SelectCheckbox, {
     row: row
-  })), row.cells.map(function (cell) {
+  })), enableRowNumbers && React.createElement(TableCell, {
+    sx: _extends({}, commonTableBodyCellStyles(densePadding))
+  }, row.index + 1), row.cells.map(function (cell) {
     return React.createElement(MRT_TableBodyCell, {
       key: cell.getCellProps().key,
       cell: cell
@@ -2645,9 +2688,13 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
       onGlobalFilterChange = _useMRT.onGlobalFilterChange,
       tableInstance = _useMRT.tableInstance;
 
-  var _useState = useState(''),
-      searchValue = _useState[0],
-      setSearchValue = _useState[1];
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var _useState2 = useState(''),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
 
   var handleChange = useAsyncDebounce(function (event) {
     var _event$target$value;
@@ -2656,6 +2703,10 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     onGlobalFilterChange == null ? void 0 : onGlobalFilterChange(event);
   }, 200);
 
+  var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
   var handleClear = function handleClear() {
     setSearchValue('');
     tableInstance.setGlobalFilter(undefined);
@@ -2676,9 +2727,20 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     InputProps: {
       startAdornment: React.createElement(InputAdornment, {
         position: "start"
+      }, React.createElement(Tooltip, {
+        arrow: true,
+        title: localization.changeSearchMode
+      }, React.createElement("span", null, React.createElement(IconButton, {
+        "aria-label": localization.changeSearchMode,
+        onClick: handleGlobalFilterMenuOpen,
+        size: "small",
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
       }, React.createElement(SearchIcon, {
         fontSize: "small"
-      })),
+      }))))),
       endAdornment: React.createElement(InputAdornment, {
         position: "end"
       }, React.createElement(IconButton, {
@@ -2695,7 +2757,10 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     sx: _extends({
       justifySelf: 'end'
     }, muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.sx)
-  })));
+  })), React.createElement(MRT_FilterTypeMenu, {
+    anchorEl: anchorEl,
+    setAnchorEl: setAnchorEl
+  }));
 };
 
 var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
@@ -3091,6 +3156,7 @@ var MRT_DefaultLocalization_EN = {
   actions: 'Actions',
   cancel: 'Cancel',
   changeFilterMode: 'Change filter mode',
+  changeSearchMode: 'Change search mode',
   clearFilter: 'Clear filter',
   clearSearch: 'Clear search',
   clearSort: 'Clear sort',
@@ -3100,12 +3166,13 @@ var MRT_DefaultLocalization_EN = {
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',
+  filterBestMatch: 'Best Match',
+  filterBestMatchFirst: 'Best Match First',
   filterByColumn: 'Filter by {column}',
-  filterContains: 'Contains Exact',
+  filterContains: 'Contains',
   filterEmpty: 'Empty',
   filterEndsWith: 'Ends With',
   filterEquals: 'Equals',
-  filterFuzzy: 'Fuzzy Match',
   filterGreaterThan: 'Greater Than',
   filterLessThan: 'Less Than',
   filterMode: 'Filter Mode: {filterType}',
@@ -3175,7 +3242,7 @@ var MaterialReactTable = (function (_ref) {
   } : _ref$defaultColumn,
       filterTypes = _ref.filterTypes,
       _ref$globalFilter = _ref.globalFilter,
-      globalFilter = _ref$globalFilter === void 0 ? 'fuzzy' : _ref$globalFilter,
+      globalFilter = _ref$globalFilter === void 0 ? MRT_FILTER_TYPE.BEST_MATCH_FIRST : _ref$globalFilter,
       icons = _ref.icons,
       localization = _ref.localization,
       _ref$positionActionsC = _ref.positionActionsColumn,