material-react-table 0.5.2 → 0.5.5

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

@@ -1,6 +1,8 @@
 import React, { useState, useMemo, useContext, createContext, Fragment, useRef, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
-import { TextField, Tooltip, InputAdornment, IconButton, Menu, MenuItem, Divider, TableCell, Box, TableSortLabel, Collapse, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Chip, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
+import { matchSorter } from 'match-sorter';
+import { Menu, MenuList, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, ListItemIcon, ListItemText, TableCell, Box, TableSortLabel, Divider, Collapse, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
@@ -11,6 +13,8 @@ import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 import EditIcon from '@mui/icons-material/Edit';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import FilterAltOff from '@mui/icons-material/FilterAltOff';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
@@ -93,6 +97,100 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var fuzzyFilterFN = function fuzzyFilterFN(rows, id, filterValue) {
+  return matchSorter(rows, filterValue.toString().trim(), {
+    keys: ["values." + id],
+    sorter: function sorter(rankedItems) {
+      return rankedItems;
+    }
+  });
+};
+
+fuzzyFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var containsFilterFN = function containsFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
+  });
+};
+
+containsFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var startsWithFilterFN = function startsWithFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
+  });
+};
+
+startsWithFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var endsWithFilterFN = function endsWithFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
+  });
+};
+
+endsWithFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var equalsFilterFN = function equalsFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
+  });
+};
+
+equalsFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var notEqualsFilterFN = function notEqualsFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
+  });
+};
+
+notEqualsFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var emptyFilterFN = function emptyFilterFN(rows, id, _filterValue) {
+  return rows.filter(function (row) {
+    return !row.values[id].toString().toLowerCase().trim();
+  });
+};
+
+emptyFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var notEmptyFilterFN = function notEmptyFilterFN(rows, id, _filterValue) {
+  return rows.filter(function (row) {
+    return !!row.values[id].toString().toLowerCase().trim();
+  });
+};
+
+notEmptyFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var defaultFilterFNs = {
+  contains: containsFilterFN,
+  empty: emptyFilterFN,
+  endsWith: endsWithFilterFN,
+  equals: equalsFilterFN,
+  fuzzy: fuzzyFilterFN,
+  notEmpty: notEmptyFilterFN,
+  notEquals: notEqualsFilterFN,
+  startsWith: startsWithFilterFN
+};
+
 var MaterialReactTableContext = /*#__PURE__*/function () {
   return createContext({});
 }();
@@ -123,19 +221,52 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       showSearch = _useState5[0],
       setShowSearch = _useState5[1];
 
+  var filterTypes = useMemo(function () {
+    return _extends({}, defaultFilterFNs, props.filterTypes);
+  }, [props.filterTypes]);
+
+  var _useState6 = useState(function () {
+    return Object.assign.apply(Object, [{}].concat(props.columns.map(function (c) {
+      var _c$accessor;
+
+      return (_c$accessor = c.accessor) == null ? void 0 : _c$accessor.toString();
+    }).map(function (accessor) {
+      var _props$initialState$f2, _props$initialState5, _props$initialState5$, _ref;
+
+      return _ref = {}, _ref[accessor] = (_props$initialState$f2 = props == null ? void 0 : (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.filters) == null ? void 0 : _props$initialState5$[accessor]) != null ? _props$initialState$f2 : 'fuzzy', _ref;
+    })));
+  }),
+      currentFilterTypes = _useState6[0],
+      setCurrentFilterTypes = _useState6[1];
+
+  var columns = useMemo(function () {
+    return props.columns.map(function (column) {
+      column.filter = filterTypes[currentFilterTypes[column.accessor]];
+      return column;
+    });
+  }, [props.columns, filterTypes, currentFilterTypes]);
   var tableInstance = useTable.apply(void 0, [_extends({}, props, {
+    columns: columns,
+    // @ts-ignore
+    filterTypes: filterTypes,
     useControlledState: function useControlledState(state) {
       return useMemo(function () {
         return _extends({}, state, {
           currentEditingRow: currentEditingRow,
+          currentFilterTypes: currentFilterTypes,
           densePadding: densePadding,
           fullScreen: fullScreen,
           showFilters: showFilters,
           showSearch: showSearch
         }, props == null ? void 0 : props.useControlledState == null ? void 0 : props.useControlledState(state));
-      }, [currentEditingRow, densePadding, fullScreen, showFilters, showSearch, state]);
+      }, [currentEditingRow, currentFilterTypes, densePadding, fullScreen, showFilters, showSearch, state]);
     }
   })].concat(hooks));
+  var idPrefix = useMemo(function () {
+    var _props$idPrefix;
+
+    return (_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9);
+  }, [props.idPrefix]);
   var anyRowsCanExpand = useMemo(function () {
     return tableInstance.rows.some(function (row) {
       return row.canExpand;
@@ -150,7 +281,10 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
     value: _extends({}, props, {
       anyRowsCanExpand: anyRowsCanExpand,
       anyRowsExpanded: anyRowsExpanded,
+      idPrefix: idPrefix,
+      //@ts-ignore
       setCurrentEditingRow: setCurrentEditingRow,
+      setCurrentFilterTypes: setCurrentFilterTypes,
       setDensePadding: setDensePadding,
       setFullScreen: setFullScreen,
       setShowFilters: setShowFilters,
@@ -161,13 +295,103 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
   }, props.children);
 };
 var useMRT = function useMRT() {
-  return (// @ts-ignore
-    useContext(MaterialReactTableContext)
-  );
+  return useContext(MaterialReactTableContext);
+};
+
+var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
+  var anchorEl = _ref.anchorEl,
+      column = _ref.column,
+      onSelect = _ref.onSelect,
+      setAnchorEl = _ref.setAnchorEl;
+
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization,
+      setCurrentFilterTypes = _useMRT.setCurrentFilterTypes,
+      tableInstance = _useMRT.tableInstance;
+
+  var filterTypes = useMemo(function () {
+    return [{
+      type: 'fuzzy',
+      label: localization.filterMenuItemFuzzy,
+      divider: false
+    }, {
+      type: 'contains',
+      label: localization.filterMenuItemContains,
+      divider: true
+    }, {
+      type: 'startsWith',
+      label: localization.filterMenuItemStartsWith,
+      divider: false
+    }, {
+      type: 'endsWith',
+      label: localization.filterMenuItemEndsWith,
+      divider: true
+    }, {
+      type: 'equals',
+      label: localization.filterMenuItemEquals,
+      divider: false
+    }, {
+      type: 'notEquals',
+      label: localization.filterMenuItemNotEquals,
+      divider: true
+    }, {
+      type: 'empty',
+      label: localization.filterMenuItemEmpty,
+      divider: false
+    }, {
+      type: 'notEmpty',
+      label: localization.filterMenuItemNotEmpty,
+      divider: false
+    }];
+  }, []);
+
+  var handleSelectFilterType = function handleSelectFilterType(value) {
+    setAnchorEl(null);
+    setCurrentFilterTypes(function (prev) {
+      var _extends2;
+
+      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = value, _extends2));
+    });
+
+    if (['empty', 'notEmpty'].includes(value)) {
+      column.setFilter(' ');
+    }
+
+    onSelect == null ? void 0 : onSelect();
+  };
+
+  var filterType = tableInstance.state.currentFilterTypes[column.id];
+  return React.createElement(Menu, {
+    anchorEl: anchorEl,
+    anchorOrigin: {
+      vertical: 'center',
+      horizontal: 'right'
+    },
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    open: !!anchorEl
+  }, React.createElement(MenuList, {
+    dense: tableInstance.state.densePadding,
+    disablePadding: true
+  }, filterTypes.map(function (_ref2) {
+    var type = _ref2.type,
+        label = _ref2.label,
+        divider = _ref2.divider;
+    return React.createElement(MenuItem, {
+      divider: divider,
+      key: type,
+      onClick: function onClick() {
+        return handleSelectFilterType(type);
+      },
+      selected: type === filterType,
+      value: type
+    }, label);
+  })));
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterT, _localization$filterT2, _localization$filterT3;
+  var _localization$filterT, _localization$filterT2;
 
   var column = _ref.column;
 
@@ -175,37 +399,72 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       _useMRT$icons = _useMRT.icons,
       FilterListIcon = _useMRT$icons.FilterListIcon,
       CloseIcon = _useMRT$icons.CloseIcon,
-      localization = _useMRT.localization;
+      idPrefix = _useMRT.idPrefix,
+      localization = _useMRT.localization,
+      muiTableHeadCellFilterTextFieldProps = _useMRT.muiTableHeadCellFilterTextFieldProps,
+      setCurrentFilterTypes = _useMRT.setCurrentFilterTypes,
+      tableInstance = _useMRT.tableInstance;
 
-  var _useState = useState(''),
-      filterValue = _useState[0],
-      setFilterValue = _useState[1];
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps(column) : muiTableHeadCellFilterTextFieldProps;
+  var mcTableHeadCellFilterTextFieldProps = column.muiTableHeadCellFilterTextFieldProps instanceof Function ? column.muiTableHeadCellFilterTextFieldProps(column) : column.muiTableHeadCellFilterTextFieldProps;
+
+  var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps, {
+    style: _extends({}, mTableHeadCellFilterTextFieldProps == null ? void 0 : mTableHeadCellFilterTextFieldProps.style, mcTableHeadCellFilterTextFieldProps == null ? void 0 : mcTableHeadCellFilterTextFieldProps.style)
+  });
+
+  var _useState2 = useState(''),
+      filterValue = _useState2[0],
+      setFilterValue = _useState2[1];
 
   var handleChange = useAsyncDebounce(function (value) {
     column.setFilter(value != null ? value : undefined);
   }, 150);
 
+  var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
   var handleClear = function handleClear() {
     setFilterValue('');
     column.setFilter(undefined);
   };
 
+  var handleClearFilterChip = function handleClearFilterChip() {
+    setFilterValue('');
+    column.setFilter(undefined);
+    setCurrentFilterTypes(function (prev) {
+      var _extends2;
+
+      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = 'fuzzy', _extends2));
+    });
+  };
+
   if (column.Filter) {
     return React.createElement(React.Fragment, null, column.Filter == null ? void 0 : column.Filter({
       column: column
     }));
   }
 
-  return React.createElement(TextField, {
+  var filterType = tableInstance.state.currentFilterTypes[column.id];
+  var filterChipLabel = ['empty', 'notEmpty'].includes(filterType);
+  var filterPlaceholder = (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header));
+  return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
-    id: "filter-" + column.id + "-column",
+    id: "mrt-" + idPrefix + "-" + column.id + "-filter-text-field",
     inputProps: {
-      style: {
-        textOverflow: 'ellipsis'
-      }
+      disabled: !!filterChipLabel,
+      sx: {
+        textOverflow: 'ellipsis',
+        width: filterChipLabel ? 0 : 'auto'
+      },
+      title: filterPlaceholder
     },
-    margin: "dense",
-    placeholder: (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)),
+    margin: "none",
+    placeholder: filterChipLabel ? '' : filterPlaceholder,
     onChange: function onChange(e) {
       setFilterValue(e.target.value);
       handleChange(e.target.value);
@@ -216,32 +475,57 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: React.createElement(Tooltip, {
-        arrow: true,
-        title: (_localization$filterT2 = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT2.replace('{column}', String(column.Header))
-      }, React.createElement(InputAdornment, {
+      startAdornment: React.createElement(InputAdornment, {
         position: "start"
-      }, React.createElement(FilterListIcon, null))),
-      endAdornment: React.createElement(InputAdornment, {
+      }, React.createElement(Tooltip, {
+        arrow: true,
+        title: "Change Filter Mode"
+      }, React.createElement(IconButton, {
+        onClick: handleFilterMenuOpen,
+        size: "small",
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
+      }, React.createElement(FilterListIcon, null))), filterChipLabel && React.createElement(Chip, {
+        onDelete: handleClearFilterChip,
+        label: filterType
+      })),
+      endAdornment: !filterChipLabel && React.createElement(InputAdornment, {
         position: "end"
       }, React.createElement(Tooltip, {
         arrow: true,
-        title: (_localization$filterT3 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT3 : ''
+        placement: "right",
+        title: (_localization$filterT2 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT2 : ''
       }, React.createElement("span", null, React.createElement(IconButton, {
         "aria-label": localization.filterTextFieldClearButtonTitle,
         disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
         onClick: handleClear,
-        size: "small"
+        size: "small",
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
       }, React.createElement(CloseIcon, {
         fontSize: "small"
       })))))
     }
-  });
+  }, textFieldProps, {
+    sx: _extends({
+      m: '0 -0.25rem',
+      minWidth: !filterChipLabel ? '5rem' : 'auto',
+      width: 'calc(100% + 0.5rem)'
+    }, textFieldProps == null ? void 0 : textFieldProps.sx)
+  })), React.createElement(MRT_FilterTypeMenu, {
+    anchorEl: anchorEl,
+    column: column,
+    setAnchorEl: setAnchorEl
+  }));
 };
 
 var commonMenuItemStyles = {
   display: 'flex',
-  gap: '0.75rem'
+  alignItems: 'center'
 };
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
@@ -255,14 +539,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       disableFilters = _useMRT.disableFilters,
       disableSortBy = _useMRT.disableSortBy,
       enableColumnGrouping = _useMRT.enableColumnGrouping,
-      localization = _useMRT.localization,
-      setShowFilters = _useMRT.setShowFilters,
       _useMRT$icons = _useMRT.icons,
-      FilterListIcon = _useMRT$icons.FilterListIcon,
-      SortIcon = _useMRT$icons.SortIcon,
+      ArrowRightIcon = _useMRT$icons.ArrowRightIcon,
       ClearAllIcon = _useMRT$icons.ClearAllIcon,
       DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
-      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon;
+      FilterListIcon = _useMRT$icons.FilterListIcon,
+      SortIcon = _useMRT$icons.SortIcon,
+      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon,
+      idPrefix = _useMRT.idPrefix,
+      localization = _useMRT.localization,
+      setShowFilters = _useMRT.setShowFilters,
+      tableInstance = _useMRT.tableInstance;
+
+  var _useState = useState(null),
+      filterMenuAnchorEl = _useState[0],
+      setFilterMenuAnchorEl = _useState[1];
 
   var handleClearSort = function handleClearSort() {
     column.clearSortBy();
@@ -295,55 +586,73 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       var _document$getElementB, _column$muiTableHeadC, _column$muiTableHeadC2;
 
       return (_document$getElementB = document.getElementById( // @ts-ignore
-      (_column$muiTableHeadC = (_column$muiTableHeadC2 = column.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _column$muiTableHeadC2.id) != null ? _column$muiTableHeadC : "filter-" + column.id + "-column")) == null ? void 0 : _document$getElementB.focus();
+      (_column$muiTableHeadC = (_column$muiTableHeadC2 = column.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _column$muiTableHeadC2.id) != null ? _column$muiTableHeadC : "mrt-" + idPrefix + "-" + column.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
     }, 200);
     setAnchorEl(null);
   };
 
+  var handleOpenFilterModeMenu = function handleOpenFilterModeMenu(event) {
+    event.stopPropagation();
+    setFilterMenuAnchorEl(event.currentTarget);
+  };
+
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
     }
+  }, React.createElement(MenuList, {
+    dense: tableInstance.state.densePadding,
+    disablePadding: true
   }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
     key: 1,
     disabled: !column.isSorted,
     onClick: handleClearSort,
     sx: commonMenuItemStyles
-  }, React.createElement(ClearAllIcon, null), " ", localization.columnActionMenuItemClearSort), React.createElement(MenuItem, {
-    key: 2,
+  }, React.createElement(ListItemIcon, null, React.createElement(ClearAllIcon, null)), React.createElement(ListItemText, null, localization.columnActionMenuItemClearSort)), React.createElement(MenuItem, {
     disabled: column.isSorted && !column.isSortedDesc,
+    key: 2,
     onClick: handleSortAsc,
     sx: commonMenuItemStyles
-  }, React.createElement(SortIcon, null), ' ', (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), React.createElement(ListItemText, null, (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
+    divider: !disableFilters || enableColumnGrouping || !disableColumnHiding,
     key: 3,
     disabled: column.isSorted && column.isSortedDesc,
     onClick: handleSortDesc,
     sx: commonMenuItemStyles
-  }, React.createElement(SortIcon, {
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  }), ' ', (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header)))], !disableFilters && column.canFilter && [React.createElement(Divider, {
-    key: 0
-  }), React.createElement(MenuItem, {
+  })), React.createElement(ListItemText, null, (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(MenuItem, {
+    divider: enableColumnGrouping || !disableColumnHiding,
     key: 1,
     onClick: handleFilterByColumn,
     sx: commonMenuItemStyles
-  }, React.createElement(FilterListIcon, null), ' ', (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React.createElement(Divider, {
-    key: 1
-  }), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), React.createElement(ListItemText, null, (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), React.createElement(IconButton, {
+    onClick: handleOpenFilterModeMenu,
+    onMouseEnter: handleOpenFilterModeMenu,
+    size: "small",
+    sx: {
+      p: 0
+    }
+  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_FilterTypeMenu, {
+    anchorEl: filterMenuAnchorEl,
+    column: column,
+    key: 2,
+    setAnchorEl: setFilterMenuAnchorEl,
+    onSelect: handleFilterByColumn
+  })], enableColumnGrouping && column.canGroupBy && [React.createElement(MenuItem, {
+    divider: !disableColumnHiding,
     key: 2,
     onClick: handleGroupByColumn,
     sx: commonMenuItemStyles
-  }, React.createElement(DynamicFeedIcon, null), ' ', (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React.createElement(Divider, {
-    key: 0
-  }), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), React.createElement(ListItemText, null, (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
     key: 1,
     onClick: handleHideColumn,
     sx: commonMenuItemStyles
-  }, React.createElement(VisibilityOffIcon, null), ' ', (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
+  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), React.createElement(ListItemText, null, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]));
 };
 
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
@@ -373,11 +682,12 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     onClick: handleClick,
     size: "small",
     sx: {
+      height: '2rem',
+      mr: '2px',
+      mt: '-0.2rem',
       opacity: 0.5,
       transition: 'opacity 0.2s',
-      marginRight: '2px',
-      height: '1.6rem',
-      width: '1.6rem',
+      width: '2rem',
       '&:hover': {
         opacity: 1
       }
@@ -400,7 +710,7 @@ var commonTableHeadCellStyles = function commonTableHeadCellStyles(densePadding,
   };
 };
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _column$columns$lengt, _column$columns, _localization$columnA, _localization$columnA2;
+  var _column$columns, _localization$columnA, _localization$columnA2;
 
   var column = _ref.column;
 
@@ -408,11 +718,15 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       disableColumnActions = _useMRT.disableColumnActions,
       disableFilters = _useMRT.disableFilters,
       enableColumnResizing = _useMRT.enableColumnResizing,
+      _useMRT$icons = _useMRT.icons,
+      FilterAltIcon = _useMRT$icons.FilterAltIcon,
+      FilterAltOff = _useMRT$icons.FilterAltOff,
       localization = _useMRT.localization,
       muiTableHeadCellProps = _useMRT.muiTableHeadCellProps,
+      setShowFilters = _useMRT.setShowFilters,
       tableInstance = _useMRT.tableInstance;
 
-  var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
+  var isParentHeader = !!(column != null && (_column$columns = column.columns) != null && _column$columns.length);
   var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps(column) : muiTableHeadCellProps;
   var mcTableHeadCellProps = column.muiTableHeadCellProps instanceof Function ? column.muiTableHeadCellProps(column) : column.muiTableHeadCellProps;
 
@@ -421,17 +735,14 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   });
 
   var sortTooltip = column.isSorted ? column.isSortedDesc ? localization.columnActionMenuItemClearSort : (_localization$columnA = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA.replace('{column}', column.Header) : (_localization$columnA2 = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA2.replace('{column}', column.Header);
+  var filterTooltip = !!column.filterValue ? localization.filterApplied.replace('{column}', String(column.Header)).replace('{filterType}', // @ts-ignore
+  localization["filterMenuItem" + (tableInstance.state.currentFilterTypes[column.id].charAt(0).toUpperCase() + tableInstance.state.currentFilterTypes[column.id].slice(1))]) : localization.toggleFilterButtonTitle;
+  var columnHeader = column.render('Header');
   return React.createElement(TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
   }, tableCellProps, {
     sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding, enableColumnResizing), tableCellProps == null ? void 0 : tableCellProps.sx)
   }), React.createElement(Box, {
-    sx: {
-      alignContent: 'space-between',
-      display: 'grid',
-      height: '100%'
-    }
-  }, React.createElement(Box, {
     sx: {
       alignItems: 'flex-start',
       display: 'flex',
@@ -442,7 +753,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     sx: {
       alignItems: 'center',
       display: 'flex',
-      flexWrap: 'nowrap'
+      flexWrap: 'nowrap',
+      whiteSpace: columnHeader.length < 15 ? 'nowrap' : 'normal'
     },
     title: undefined
   }), column.render('Header'), !isParentHeader && column.canSort && React.createElement(Tooltip, {
@@ -452,7 +764,29 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     "aria-label": sortTooltip,
     active: column.isSorted,
     direction: column.isSortedDesc ? 'desc' : 'asc'
-  }))), React.createElement(Box, {
+  })), !isParentHeader && !!column.canFilter && React.createElement(Tooltip, {
+    arrow: true,
+    title: filterTooltip
+  }, React.createElement(IconButton, {
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      setShowFilters(!tableInstance.state.showFilters);
+    },
+    size: "small",
+    sx: {
+      opacity: !!column.filterValue ? 0.8 : 0,
+      p: '2px',
+      m: 0,
+      transition: 'all 0.2s ease-in-out',
+      '&:hover': {
+        opacity: 0.8
+      }
+    }
+  }, tableInstance.state.showFilters && !column.filterValue ? React.createElement(FilterAltOff, {
+    fontSize: "small"
+  }) : React.createElement(FilterAltIcon, {
+    fontSize: "small"
+  })))), React.createElement(Box, {
     sx: {
       alignItems: 'center',
       display: 'flex',
@@ -476,7 +810,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     "in": tableInstance.state.showFilters
   }, React.createElement(MRT_FilterTextField, {
     column: column
-  }))));
+  })));
 };
 
 var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
@@ -798,15 +1132,14 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     onClose: function onClose() {
       return setAnchorEl(null);
     }
+  }, React.createElement(MenuList, {
+    dense: tableInstance.state.densePadding,
+    disablePadding: true
   }, enableRowEditing && React.createElement(MenuItem, {
-    sx: {
-      display: 'flex',
-      gap: '0.75rem'
-    },
     onClick: handleEdit
-  }, React.createElement(EditIcon, null), " ", localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+  }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), React.createElement(ListItemText, null, localization.rowActionMenuItemEdit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
-  })) != null ? _renderRowActionMenuI : null);
+  })) != null ? _renderRowActionMenuI : null));
 };
 
 function createCommonjsModule(fn, module) {
@@ -1761,9 +2094,10 @@ var MRT_TableBody = function MRT_TableBody() {
       manualPagination = _useMRT.manualPagination;
 
   var rows = manualPagination ? tableInstance.rows : tableInstance.page;
+  var mTableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps(tableInstance) : muiTableBodyProps;
 
-  var tableBodyProps = _extends({}, muiTableBodyProps, tableInstance.getTableBodyProps(), {
-    style: _extends({}, tableInstance.getTableBodyProps().style, muiTableBodyProps == null ? void 0 : muiTableBodyProps.style)
+  var tableBodyProps = _extends({}, mTableBodyProps, tableInstance.getTableBodyProps(), {
+    style: _extends({}, tableInstance.getTableBodyProps().style, mTableBodyProps == null ? void 0 : mTableBodyProps.style)
   });
 
   return React.createElement(TableBody, Object.assign({}, tableBodyProps, {
@@ -1780,7 +2114,7 @@ var MRT_TableBody = function MRT_TableBody() {
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _column$columns$lengt, _column$columns;
+  var _column$columns;
 
   var column = _ref.column;
 
@@ -1789,7 +2123,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
       enableColumnResizing = _useMRT.enableColumnResizing,
       densePadding = _useMRT.tableInstance.state.densePadding;
 
-  var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
+  var isParentHeader = !!(column != null && (_column$columns = column.columns) != null && _column$columns.length);
   var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps(column) : muiTableFooterCellProps;
   var mcTableFooterCellProps = column.muiTableFooterCellProps instanceof Function ? column.muiTableFooterCellProps(column) : column.muiTableFooterCellProps;
 
@@ -1852,7 +2186,8 @@ var MRT_TableFooter = function MRT_TableFooter() {
       muiTableFooterProps = _useMRT.muiTableFooterProps,
       tableInstance = _useMRT.tableInstance;
 
-  return React.createElement(TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
+  var tableFooterProps = muiTableFooterProps instanceof Function ? muiTableFooterProps(tableInstance) : muiTableFooterProps;
+  return React.createElement(TableFooter, Object.assign({}, tableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
     return React.createElement(MRT_TableFooterRow, {
       key: footerGroup.getFooterGroupProps().key,
       footerGroup: footerGroup
@@ -1867,8 +2202,10 @@ var MRT_Table = function MRT_Table() {
       hideTableHead = _useMRT.hideTableHead,
       hideTableFooter = _useMRT.hideTableFooter;
 
-  var tableProps = _extends({}, muiTableProps, tableInstance.getTableProps(), {
-    style: _extends({}, tableInstance.getTableProps().style, muiTableProps == null ? void 0 : muiTableProps.style)
+  var mTableProps = muiTableProps instanceof Function ? muiTableProps(tableInstance) : muiTableProps;
+
+  var tableProps = _extends({}, mTableProps, tableInstance.getTableProps(), {
+    style: _extends({}, tableInstance.getTableProps().style, mTableProps == null ? void 0 : mTableProps.style)
   });
 
   return React.createElement(Table, Object.assign({}, tableProps), !hideTableHead && React.createElement(MRT_TableHead, null), React.createElement(MRT_TableBody, null), !hideTableFooter && React.createElement(MRT_TableFooter, null));
@@ -1879,6 +2216,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
       _useMRT$icons = _useMRT.icons,
       SearchIcon = _useMRT$icons.SearchIcon,
       CloseIcon = _useMRT$icons.CloseIcon,
+      idPrefix = _useMRT.idPrefix,
       localization = _useMRT.localization,
       muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
       onGlobalFilterChange = _useMRT.onGlobalFilterChange,
@@ -1904,7 +2242,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     "in": tableInstance.state.showSearch,
     orientation: "horizontal"
   }, React.createElement(TextField, Object.assign({
-    id: "global-search-text-field",
+    id: "mrt-" + idPrefix + "-search-text-field",
     placeholder: localization.searchTextFieldPlaceholder,
     onChange: function onChange(event) {
       setSearchValue(event.target.value);
@@ -1961,10 +2299,10 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
 };
 
 var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
-  var _column$columns$lengt, _column$columns, _column$columns2, _column$isVisible, _column$columns4;
+  var _column$columns, _column$columns2, _column$isVisible, _column$columns4;
 
   var column = _ref.column;
-  var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
+  var isParentHeader = !!(column != null && (_column$columns = column.columns) != null && _column$columns.length);
   var allChildColumnsVisible = isParentHeader && !!((_column$columns2 = column.columns) != null && _column$columns2.every(function (childColumn) {
     return childColumn.isVisible;
   }));
@@ -2005,9 +2343,9 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
   var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
+      ViewColumnIcon = _useMRT.icons.ViewColumnIcon,
       localization = _useMRT.localization,
-      ViewColumnIcon = _useMRT.icons.ViewColumnIcon;
+      tableInstance = _useMRT.tableInstance;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -2030,6 +2368,9 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     onClose: function onClose() {
       return setAnchorEl(null);
     }
+  }, React.createElement(MenuList, {
+    dense: tableInstance.state.densePadding,
+    disablePadding: true
   }, React.createElement(Box, {
     sx: {
       display: 'flex',
@@ -2051,7 +2392,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
       key: index + "-" + column.id,
       column: column
     });
-  })));
+  }))));
 };
 
 var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
@@ -2107,6 +2448,7 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
       _useMRT$icons = _useMRT.icons,
       SearchIcon = _useMRT$icons.SearchIcon,
       SearchOffIcon = _useMRT$icons.SearchOffIcon,
+      idPrefix = _useMRT.idPrefix,
       localization = _useMRT.localization,
       muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
       setShowSearch = _useMRT.setShowSearch,
@@ -2117,7 +2459,7 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
     setTimeout(function () {
       var _document$getElementB, _muiSearchTextFieldPr;
 
-      return (_document$getElementB = document.getElementById((_muiSearchTextFieldPr = muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.id) != null ? _muiSearchTextFieldPr : "global-search-text-field")) == null ? void 0 : _document$getElementB.focus();
+      return (_document$getElementB = document.getElementById((_muiSearchTextFieldPr = muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.id) != null ? _muiSearchTextFieldPr : "mrt-" + idPrefix + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
     }, 200);
   };
 
@@ -2377,7 +2719,12 @@ var MRT_TableContainer = function MRT_TableContainer() {
   }), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), React.createElement(Collapse, {
     "in": isFetching || isLoading,
     unmountOnExit: true
-  }, React.createElement(LinearProgress, null)), React.createElement(MRT_Table, null), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
+  }, React.createElement(LinearProgress, null)), React.createElement(Box, {
+    sx: {
+      maxWidth: '100%',
+      overflowX: 'auto'
+    }
+  }, React.createElement(MRT_Table, null)), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
 };
 
 var MRT_DefaultLocalization_EN = {
@@ -2393,6 +2740,19 @@ var MRT_DefaultLocalization_EN = {
   columnShowHideMenuShowAll: 'Show all',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
+  filterApplied: 'Filtering by {column} - ({filterType})',
+  filterMenuItemContains: 'Contains Exact',
+  filterMenuItemEmpty: 'Empty',
+  filterMenuItemEndsWith: 'Ends With',
+  filterMenuItemEquals: 'Equals',
+  filterMenuItemFuzzy: 'Fuzzy Match (Default)',
+  filterMenuItemNotEmpty: 'Not Empty',
+  filterMenuItemNotEquals: 'Not Equals',
+  filterMenuItemStartsWith: 'Starts With',
+  filterMenuTitle: 'Filter Mode',
+  filterTextFieldChangeFilterButtonTitle: 'Change Filter Mode',
+  filterTextFieldChipLabelEmpty: 'Empty',
+  filterTextFieldChipLabelNotEmpty: 'Not Empty',
   filterTextFieldClearButtonTitle: 'Clear filter',
   filterTextFieldPlaceholder: 'Filter by {column}',
   rowActionButtonCancel: 'Cancel',
@@ -2406,15 +2766,16 @@ var MRT_DefaultLocalization_EN = {
   selectCheckboxTitle: 'Toggle select row',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
-  toggleFilterButtonTitle: 'Toggle filters',
+  toggleFilterButtonTitle: 'Show/Hide filters',
   toggleFullScreenButtonTitle: 'Toggle full screen',
-  toggleSearchButtonTitle: 'Toggle search',
-  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
+  toggleSearchButtonTitle: 'Show/Hide search',
   toolbarAlertGroupedByMessage: 'Grouped by ',
-  toolbarAlertGroupedThenByMessage: ', then by '
+  toolbarAlertGroupedThenByMessage: ', then by ',
+  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected'
 };
 
 var MRT_Default_Icons = {
+  ArrowRightIcon: ArrowRightIcon,
   CancelIcon: CancelIcon,
   ClearAllIcon: ClearAllIcon,
   CloseIcon: CloseIcon,
@@ -2425,6 +2786,8 @@ var MRT_Default_Icons = {
   EditIcon: EditIcon,
   ExpandLessIcon: ExpandLessIcon,
   ExpandMoreIcon: ExpandMoreIcon,
+  FilterAltIcon: FilterAltIcon,
+  FilterAltOff: FilterAltOff,
   FilterListIcon: FilterListIcon,
   FilterListOffIcon: FilterListOffIcon,
   FullscreenExitIcon: FullscreenExitIcon,