material-react-table 0.5.5 → 0.5.8

package/dist/MaterialReactTable.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
-import { AlertProps, IconButtonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
-import { Cell, Column, ColumnInstance, HeaderGroup, Row, TableInstance, TableOptions, TableState, UseColumnOrderInstanceProps, UseColumnOrderState, UseExpandedInstanceProps, UseExpandedOptions, UseExpandedRowProps, UseExpandedState, UseFiltersColumnOptions, UseFiltersColumnProps, UseFiltersInstanceProps, UseFiltersOptions, UseFiltersState, UseGlobalFiltersColumnOptions, UseGlobalFiltersInstanceProps, UseGlobalFiltersOptions, UseGlobalFiltersState, UseGroupByCellProps, UseGroupByColumnOptions, UseGroupByColumnProps, UseGroupByInstanceProps, UseGroupByOptions, UseGroupByRowProps, UseGroupByState, UsePaginationInstanceProps, UsePaginationOptions, UsePaginationState, UseResizeColumnsColumnOptions, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectOptions, UseRowSelectRowProps, UseRowSelectState, UseRowStateCellProps, UseRowStateInstanceProps, UseRowStateOptions, UseRowStateRowProps, UseRowStateState, UseSortByColumnOptions, UseSortByColumnProps, UseSortByInstanceProps, UseSortByOptions, UseSortByState, UseTableHeaderGroupProps, UseTableInstanceProps, UseTableOptions } from 'react-table';
+import { AlertProps, IconButtonProps, LinearProgressProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
+import { Cell, Column, ColumnInstance, FilterType, HeaderGroup, Row, TableInstance, TableOptions, TableState, UseColumnOrderInstanceProps, UseColumnOrderState, UseExpandedInstanceProps, UseExpandedOptions, UseExpandedRowProps, UseExpandedState, UseFiltersColumnOptions, UseFiltersColumnProps, UseFiltersInstanceProps, UseFiltersOptions, UseFiltersState, UseGlobalFiltersColumnOptions, UseGlobalFiltersInstanceProps, UseGlobalFiltersOptions, UseGlobalFiltersState, UseGroupByCellProps, UseGroupByColumnOptions, UseGroupByColumnProps, UseGroupByInstanceProps, UseGroupByOptions, UseGroupByRowProps, UseGroupByState, UsePaginationInstanceProps, UsePaginationOptions, UsePaginationState, UseResizeColumnsColumnOptions, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectOptions, UseRowSelectRowProps, UseRowSelectState, UseRowStateCellProps, UseRowStateInstanceProps, UseRowStateOptions, UseRowStateRowProps, UseRowStateState, UseSortByColumnOptions, UseSortByColumnProps, UseSortByInstanceProps, UseSortByOptions, UseSortByState, UseTableHeaderGroupProps, UseTableInstanceProps, UseTableOptions } from 'react-table';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
 export declare type MRT_TableOptions<D extends {} = {}> = TableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseGroupByOptions<D> & UsePaginationOptions<D> & UseResizeColumnsOptions<D> & UseRowSelectOptions<D> & UseRowStateOptions<D> & UseSortByOptions<D> & {
@@ -30,6 +30,11 @@ export declare type MRT_ColumnInterface<D extends {} = {}> = UseFiltersColumnOpt
     Header?: string;
     disableFilters?: boolean;
     editable?: boolean;
+    filter?: MRT_FilterType | string | FilterType<D>;
+    filterSelectOptions?: (string | {
+        text: string;
+        value: string;
+    })[];
     muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell: MRT_Cell<D>) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | ((cell: MRT_Cell<D>) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
@@ -48,7 +53,17 @@ export declare type MRT_Row<D extends {} = {}> = Row<D> & UseExpandedRowProps<D>
     cells: MRT_Cell<D>[];
 };
 export declare type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> & UseGroupByCellProps<D> & UseRowStateCellProps<D> & {};
-export declare type MRT_FilterType = 'contains' | 'empty' | 'endsWith' | 'equals' | 'fuzzy' | 'notEmpty' | 'notEquals' | 'startsWith';
+export declare enum MRT_FILTER_TYPE {
+    CONTAINS = "contains",
+    EMPTY = "empty",
+    ENDS_WITH = "endsWith",
+    EQUALS = "equals",
+    FUZZY = "fuzzy",
+    NOT_EMPTY = "notEmpty",
+    NOT_EQUALS = "notEquals",
+    STARTS_WITH = "startsWith"
+}
+export declare type MRT_FilterType = MRT_FILTER_TYPE | Function;
 export declare type MRT_TableState<D extends {} = {}> = TableState<D> & UseColumnOrderState<D> & UseExpandedState<D> & UseFiltersState<D> & UseGlobalFiltersState<D> & UseGroupByState<D> & UsePaginationState<D> & UseResizeColumnsState<D> & UseRowSelectState<D> & UseRowStateState<D> & UseSortByState<D> & {
     currentEditingRow: MRT_Row<D> | null;
     currentFilterTypes: {
@@ -83,9 +98,11 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
     isFetching?: boolean;
     isLoading?: boolean;
     localization?: Partial<MRT_Localization>;
+    muiLinearProgressProps?: LinearProgressProps | ((tableInstance: MRT_TableInstance) => LinearProgressProps);
     muiSearchTextFieldProps?: TextFieldProps;
     muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell?: MRT_Cell<D>) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | ((cell?: MRT_Cell<D>) => TableCellProps);
+    muiTableBodyCellSkeletonProps?: SkeletonProps | ((cell?: MRT_Cell<D>) => SkeletonProps);
     muiTableBodyProps?: TableBodyProps | ((tableInstance: MRT_TableInstance<D>) => TableBodyProps);
     muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
     muiTableContainerProps?: TableContainerProps | ((tableInstance: MRT_TableInstance<D>) => TableContainerProps);

package/dist/filtersFNs.d.ts

@@ -1,4 +1,8 @@
 import { MRT_Row } from '.';
+export declare const fuzzySearchFN: {
+    (rows: MRT_Row[], columnIds: string[], filterValue: string | number): MRT_Row<{}>[];
+    autoRemove(val: any): boolean;
+};
 export declare const fuzzyFilterFN: {
     (rows: MRT_Row[], id: string, filterValue: string | number): MRT_Row<{}>[];
     autoRemove(val: any): boolean;

package/dist/localization.d.ts

@@ -26,6 +26,7 @@ export interface MRT_Localization {
     filterTextFieldChipLabelNotEmpty: string;
     filterTextFieldClearButtonTitle: string;
     filterTextFieldPlaceholder: string;
+    changeFilterMode: string;
     rowActionButtonCancel: string;
     rowActionButtonSave: string;
     rowActionMenuButtonTitle: string;

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

@@ -234,13 +234,9 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
 
   var _useState6 = React.useState(function () {
     return Object.assign.apply(Object, [{}].concat(props.columns.map(function (c) {
-      var _c$accessor;
+      var _ref, _c$filter, _props$initialState5, _props$initialState5$, _ref2;
 
-      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;
+      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;
     })));
   }),
       currentFilterTypes = _useState6[0],
@@ -256,6 +252,7 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
     columns: columns,
     // @ts-ignore
     filterTypes: filterTypes,
+    globalFilterValue: 'fuzzy',
     useControlledState: function useControlledState(state) {
       return React.useMemo(function () {
         return _extends({}, state, {
@@ -305,6 +302,11 @@ var useMRT = function useMRT() {
   return React.useContext(MaterialReactTableContext);
 };
 
+var commonMenuItemStyles = {
+  py: '6px',
+  my: 0,
+  alignItems: 'center'
+};
 var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
   var anchorEl = _ref.anchorEl,
       column = _ref.column,
@@ -318,35 +320,35 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
 
   var filterTypes = React.useMemo(function () {
     return [{
-      type: 'fuzzy',
+      type: exports.MRT_FILTER_TYPE.FUZZY,
       label: localization.filterMenuItemFuzzy,
       divider: false
     }, {
-      type: 'contains',
+      type: exports.MRT_FILTER_TYPE.CONTAINS,
       label: localization.filterMenuItemContains,
       divider: true
     }, {
-      type: 'startsWith',
+      type: exports.MRT_FILTER_TYPE.STARTS_WITH,
       label: localization.filterMenuItemStartsWith,
       divider: false
     }, {
-      type: 'endsWith',
+      type: exports.MRT_FILTER_TYPE.ENDS_WITH,
       label: localization.filterMenuItemEndsWith,
       divider: true
     }, {
-      type: 'equals',
+      type: exports.MRT_FILTER_TYPE.EQUALS,
       label: localization.filterMenuItemEquals,
       divider: false
     }, {
-      type: 'notEquals',
+      type: exports.MRT_FILTER_TYPE.NOT_EQUALS,
       label: localization.filterMenuItemNotEquals,
       divider: true
     }, {
-      type: 'empty',
+      type: exports.MRT_FILTER_TYPE.EMPTY,
       label: localization.filterMenuItemEmpty,
       divider: false
     }, {
-      type: 'notEmpty',
+      type: exports.MRT_FILTER_TYPE.NOT_EMPTY,
       label: localization.filterMenuItemNotEmpty,
       divider: false
     }];
@@ -360,7 +362,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = value, _extends2));
     });
 
-    if (['empty', 'notEmpty'].includes(value)) {
+    if ([exports.MRT_FILTER_TYPE.EMPTY, exports.MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
       column.setFilter(' ');
     }
 
@@ -377,28 +379,29 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
     onClose: function onClose() {
       return setAnchorEl(null);
     },
-    open: !!anchorEl
-  }, React__default.createElement(material.MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
-  }, filterTypes.map(function (_ref2) {
+    open: !!anchorEl,
+    MenuListProps: {
+      dense: tableInstance.state.densePadding
+    }
+  }, filterTypes.map(function (_ref2, index) {
     var type = _ref2.type,
         label = _ref2.label,
         divider = _ref2.divider;
     return React__default.createElement(material.MenuItem, {
       divider: divider,
-      key: type,
+      key: index,
       onClick: function onClick() {
         return handleSelectFilterType(type);
       },
       selected: type === filterType,
+      sx: commonMenuItemStyles,
       value: type
     }, label);
-  })));
+  }));
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterT, _localization$filterT2;
+  var _localization$filterT, _localization$filterT2, _column$filterSelectO;
 
   var column = _ref.column;
 
@@ -446,7 +449,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     setCurrentFilterTypes(function (prev) {
       var _extends2;
 
-      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = 'fuzzy', _extends2));
+      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = exports.MRT_FILTER_TYPE.FUZZY, _extends2));
     });
   };
 
@@ -457,7 +460,9 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }
 
   var filterType = tableInstance.state.currentFilterTypes[column.id];
-  var filterChipLabel = ['empty', 'notEmpty'].includes(filterType);
+  var isCustomFilterType = filterType instanceof Function;
+  var isSelectFilter = !!column.filterSelectOptions;
+  var filterChipLabel = !isCustomFilterType && [exports.MRT_FILTER_TYPE.EMPTY, exports.MRT_FILTER_TYPE.NOT_EMPTY].includes(filterType);
   var filterPlaceholder = (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
     fullWidth: true,
@@ -466,12 +471,20 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       disabled: !!filterChipLabel,
       sx: {
         textOverflow: 'ellipsis',
-        width: filterChipLabel ? 0 : 'auto'
+        width: filterChipLabel ? 0 : undefined
+      },
+      title: filterPlaceholder
+    },
+    label: isSelectFilter && !filterValue ? filterPlaceholder : undefined,
+    InputLabelProps: {
+      shrink: false,
+      sx: {
+        maxWidth: 'calc(100% - 2.5rem)'
       },
       title: filterPlaceholder
     },
     margin: "none",
-    placeholder: filterChipLabel ? '' : filterPlaceholder,
+    placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
     onChange: function onChange(e) {
       setFilterValue(e.target.value);
       handleChange(e.target.value);
@@ -479,22 +492,24 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
+    select: isSelectFilter,
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: React__default.createElement(material.InputAdornment, {
+      startAdornment: !isSelectFilter && React__default.createElement(material.InputAdornment, {
         position: "start"
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
-        title: "Change Filter Mode"
-      }, React__default.createElement(material.IconButton, {
+        title: localization.changeFilterMode
+      }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
+        disabled: isCustomFilterType,
         onClick: handleFilterMenuOpen,
         size: "small",
         sx: {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React__default.createElement(FilterListIcon, null))), filterChipLabel && React__default.createElement(material.Chip, {
+      }, React__default.createElement(FilterListIcon, null)))), filterChipLabel && React__default.createElement(material.Chip, {
         onDelete: handleClearFilterChip,
         label: filterType
       })),
@@ -502,11 +517,12 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
         position: "end"
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
+        disableHoverListener: isSelectFilter,
         placement: "right",
         title: (_localization$filterT2 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT2 : ''
       }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
         "aria-label": localization.filterTextFieldClearButtonTitle,
-        disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
+        disabled: !(filterValue != null && filterValue.length),
         onClick: handleClear,
         size: "small",
         sx: {
@@ -521,8 +537,32 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     sx: _extends({
       m: '0 -0.25rem',
       minWidth: !filterChipLabel ? '5rem' : 'auto',
-      width: 'calc(100% + 0.5rem)'
+      width: 'calc(100% + 0.5rem)',
+      mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
+      '&	.MuiSelect-icon': {
+        mr: '1.5rem'
+      }
     }, textFieldProps == null ? void 0 : textFieldProps.sx)
+  }), isSelectFilter && React__default.createElement(material.MenuItem, {
+    divider: true,
+    disabled: !filterValue,
+    value: ""
+  }, localization.filterTextFieldClearButtonTitle), column == null ? void 0 : (_column$filterSelectO = column.filterSelectOptions) == null ? void 0 : _column$filterSelectO.map(function (option) {
+    var value;
+    var text;
+
+    if (typeof option === 'string') {
+      value = option;
+      text = option;
+    } else if (typeof option === 'object') {
+      value = option.value;
+      text = option.text;
+    }
+
+    return React__default.createElement(material.MenuItem, {
+      key: value,
+      value: value
+    }, text);
   })), React__default.createElement(MRT_FilterTypeMenu, {
     anchorEl: anchorEl,
     column: column,
@@ -530,8 +570,15 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }));
 };
 
-var commonMenuItemStyles = {
+var commonMenuItemStyles$1 = {
+  py: '6px',
+  my: 0,
+  justifyContent: 'space-between',
+  alignItems: 'center'
+};
+var commonListItemStyles = {
   display: 'flex',
+  gap: '0.75rem',
   alignItems: 'center'
 };
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
@@ -551,6 +598,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       ClearAllIcon = _useMRT$icons.ClearAllIcon,
       DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
       FilterListIcon = _useMRT$icons.FilterListIcon,
+      FilterListOffIcon = _useMRT$icons.FilterListOffIcon,
       SortIcon = _useMRT$icons.SortIcon,
       VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon,
       idPrefix = _useMRT.idPrefix,
@@ -587,6 +635,11 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setAnchorEl(null);
   };
 
+  var handleClearFilter = function handleClearFilter() {
+    column.setFilter('');
+    setAnchorEl(null);
+  };
+
   var handleFilterByColumn = function handleFilterByColumn() {
     setShowFilters(true);
     setTimeout(function () {
@@ -608,36 +661,51 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding
     }
-  }, React__default.createElement(material.MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
   }, !disableSortBy && column.canSort && [React__default.createElement(material.MenuItem, {
-    key: 1,
     disabled: !column.isSorted,
+    key: 1,
     onClick: handleClearSort,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ClearAllIcon, null)), React__default.createElement(material.ListItemText, null, localization.columnActionMenuItemClearSort)), React__default.createElement(material.MenuItem, {
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(ClearAllIcon, null), localization.columnActionMenuItemClearSort)), React__default.createElement(material.MenuItem, {
     disabled: column.isSorted && !column.isSortedDesc,
     key: 2,
     onClick: handleSortAsc,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), React__default.createElement(material.ListItemText, null, (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header)))), React__default.createElement(material.MenuItem, {
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(SortIcon, null), (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header)))), React__default.createElement(material.MenuItem, {
     divider: !disableFilters || enableColumnGrouping || !disableColumnHiding,
     key: 3,
     disabled: column.isSorted && column.isSortedDesc,
     onClick: handleSortDesc,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, {
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(SortIcon, {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  })), React__default.createElement(material.ListItemText, null, (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React__default.createElement(material.MenuItem, {
+  }), (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React__default.createElement(material.MenuItem, {
+    disabled: !column.filterValue,
+    key: 0,
+    onClick: handleClearFilter,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(FilterListOffIcon, null), localization.filterTextFieldClearButtonTitle)), React__default.createElement(material.MenuItem, {
     divider: enableColumnGrouping || !disableColumnHiding,
     key: 1,
     onClick: handleFilterByColumn,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), React__default.createElement(material.ListItemText, null, (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), React__default.createElement(material.IconButton, {
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(FilterListIcon, null), (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), !column.filterSelectOptions && React__default.createElement(material.IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
@@ -654,12 +722,16 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     divider: !disableColumnHiding,
     key: 2,
     onClick: handleGroupByColumn,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), React__default.createElement(material.ListItemText, null, (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React__default.createElement(material.MenuItem, {
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(DynamicFeedIcon, null), (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React__default.createElement(material.MenuItem, {
     key: 1,
     onClick: handleHideColumn,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), React__default.createElement(material.ListItemText, null, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]));
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(VisibilityOffIcon, null), (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]);
 };
 
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
@@ -742,8 +814,7 @@ 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 filterTooltip = !!column.filterValue ? localization.filterApplied.replace('{column}', String(column.Header)).replace('{filterType}', column.filterValue) : localization.toggleFilterButtonTitle;
   var columnHeader = column.render('Header');
   return React__default.createElement(material.TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
@@ -766,6 +837,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     title: undefined
   }), column.render('Header'), !isParentHeader && column.canSort && React__default.createElement(material.Tooltip, {
     arrow: true,
+    placement: "top",
     title: sortTooltip
   }, React__default.createElement(material.TableSortLabel, {
     "aria-label": sortTooltip,
@@ -773,19 +845,22 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     direction: column.isSortedDesc ? 'desc' : 'asc'
   })), !isParentHeader && !!column.canFilter && React__default.createElement(material.Tooltip, {
     arrow: true,
+    placement: "top",
     title: filterTooltip
   }, React__default.createElement(material.IconButton, {
+    disableRipple: true,
     onClick: function onClick(event) {
       event.stopPropagation();
       setShowFilters(!tableInstance.state.showFilters);
     },
     size: "small",
     sx: {
+      m: 0,
       opacity: !!column.filterValue ? 0.8 : 0,
       p: '2px',
-      m: 0,
       transition: 'all 0.2s ease-in-out',
       '&:hover': {
+        backgroundColor: 'transparent',
         opacity: 0.8
       }
     }
@@ -882,8 +957,10 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var cell = _ref.cell;
 
   var _useMRT = useMRT(),
-      onCellClick = _useMRT.onCellClick,
+      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;
@@ -901,7 +978,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     }
   }, tableCellProps, {
     sx: _extends({}, commonTableBodyCellStyles(densePadding), tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
+  }), isLoading ? React__default.createElement(material.Skeleton, Object.assign({
+    animation: "wave",
+    height: 20,
+    width: Math.random() * (120 - 60) + 60
+  }, muiTableBodyCellSkeletonProps)) : (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
     cell: cell
   }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
 };
@@ -1138,15 +1219,16 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding
     }
-  }, React__default.createElement(material.MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
   }, enableRowEditing && React__default.createElement(material.MenuItem, {
-    onClick: handleEdit
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), React__default.createElement(material.ListItemText, null, localization.rowActionMenuItemEdit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+    onClick: handleEdit,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(EditIcon, 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) {
@@ -2328,10 +2410,17 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   };
 
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
-    sx: {
+    sx: _extends({}, commonMenuItemStyles$1, {
       pl: (column.depth + 0.5) * 2 + "rem"
-    }
+    })
   }, React__default.createElement(material.FormControlLabel, {
+    componentsProps: {
+      typography: {
+        sx: {
+          marginBottom: 0
+        }
+      }
+    },
     checked: switchChecked,
     control: React__default.createElement(material.Switch, null),
     label: column.Header,
@@ -2374,15 +2463,15 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding
     }
-  }, React__default.createElement(material.MenuList, {
-    dense: tableInstance.state.densePadding,
-    disablePadding: true
   }, React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
       justifyContent: 'space-between',
-      p: '0 0.5rem 0.5rem 0.5rem'
+      p: '0.5rem'
     }
   }, React__default.createElement(material.Button, {
     disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
@@ -2399,7 +2488,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
       key: index + "-" + column.id,
       column: column
     });
-  }))));
+  })));
 };
 
 var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
@@ -2684,6 +2773,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
       hideToolbarTop = _useMRT.hideToolbarTop,
       isFetching = _useMRT.isFetching,
       isLoading = _useMRT.isLoading,
+      muiLinearProgressProps = _useMRT.muiLinearProgressProps,
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
@@ -2708,6 +2798,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
     }
   }, [fullScreen]);
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
+  var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps(tableInstance) : muiLinearProgressProps;
   return React__default.createElement(material.TableContainer, Object.assign({
     component: material.Paper
   }, tableContainerProps, {
@@ -2726,7 +2817,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
   }), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, null), React__default.createElement(material.Collapse, {
     "in": isFetching || isLoading,
     unmountOnExit: true
-  }, React__default.createElement(material.LinearProgress, null)), React__default.createElement(material.Box, {
+  }, React__default.createElement(material.LinearProgress, Object.assign({}, linearProgressProps))), React__default.createElement(material.Box, {
     sx: {
       maxWidth: '100%',
       overflowX: 'auto'
@@ -2752,6 +2843,7 @@ var MRT_DefaultLocalization_EN = {
   filterMenuItemEmpty: 'Empty',
   filterMenuItemEndsWith: 'Ends With',
   filterMenuItemEquals: 'Equals',
+  changeFilterMode: 'Change filter mode',
   filterMenuItemFuzzy: 'Fuzzy Match (Default)',
   filterMenuItemNotEmpty: 'Not Empty',
   filterMenuItemNotEquals: 'Not Equals',
@@ -2810,6 +2902,18 @@ var MRT_Default_Icons = {
 };
 
 var _excluded = ["defaultColumn", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+
+(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["NOT_EMPTY"] = "notEmpty";
+  MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
+  MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
+})(exports.MRT_FILTER_TYPE || (exports.MRT_FILTER_TYPE = {}));
+
 var MaterialReactTable = (function (_ref) {
   var _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {