material-react-table 0.5.4 → 0.5.7

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

@@ -20,6 +20,8 @@ var DynamicFeedIcon = _interopDefault(require('@mui/icons-material/DynamicFeed')
 var EditIcon = _interopDefault(require('@mui/icons-material/Edit'));
 var ExpandLessIcon = _interopDefault(require('@mui/icons-material/ExpandLess'));
 var ExpandMoreIcon = _interopDefault(require('@mui/icons-material/ExpandMore'));
+var FilterAltIcon = _interopDefault(require('@mui/icons-material/FilterAlt'));
+var FilterAltOff = _interopDefault(require('@mui/icons-material/FilterAltOff'));
 var FilterListIcon = _interopDefault(require('@mui/icons-material/FilterList'));
 var FilterListOffIcon = _interopDefault(require('@mui/icons-material/FilterListOff'));
 var FullscreenExitIcon = _interopDefault(require('@mui/icons-material/FullscreenExit'));
@@ -303,7 +305,152 @@ var useMRT = function useMRT() {
   return React.useContext(MaterialReactTableContext);
 };
 
-var MRT_FilterMenu = function MRT_FilterMenu(_ref) {
+var commonMenuItemStyles = {
+  py: '0 !important',
+  my: '0 !important'
+};
+var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
+  var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
+
+  var anchorEl = _ref.anchorEl,
+      column = _ref.column,
+      setAnchorEl = _ref.setAnchorEl;
+
+  var _useMRT = useMRT(),
+      disableColumnHiding = _useMRT.disableColumnHiding,
+      disableFilters = _useMRT.disableFilters,
+      disableSortBy = _useMRT.disableSortBy,
+      enableColumnGrouping = _useMRT.enableColumnGrouping,
+      _useMRT$icons = _useMRT.icons,
+      ArrowRightIcon = _useMRT$icons.ArrowRightIcon,
+      ClearAllIcon = _useMRT$icons.ClearAllIcon,
+      DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
+      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 = React.useState(null),
+      filterMenuAnchorEl = _useState[0],
+      setFilterMenuAnchorEl = _useState[1];
+
+  var handleClearSort = function handleClearSort() {
+    column.clearSortBy();
+    setAnchorEl(null);
+  };
+
+  var handleSortAsc = function handleSortAsc() {
+    column.toggleSortBy(false);
+    setAnchorEl(null);
+  };
+
+  var handleSortDesc = function handleSortDesc() {
+    column.toggleSortBy(true);
+    setAnchorEl(null);
+  };
+
+  var handleHideColumn = function handleHideColumn() {
+    column.toggleHidden();
+    setAnchorEl(null);
+  };
+
+  var handleGroupByColumn = function handleGroupByColumn() {
+    column.toggleGroupBy();
+    setAnchorEl(null);
+  };
+
+  var handleFilterByColumn = function handleFilterByColumn() {
+    setShowFilters(true);
+    setTimeout(function () {
+      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 : "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__default.createElement(material.Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
+    }
+  }, !disableSortBy && column.canSort && [React__default.createElement(material.MenuItem, {
+    key: 1,
+    disabled: !column.isSorted,
+    onClick: handleClearSort,
+    sx: commonMenuItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ClearAllIcon, null)), React__default.createElement(material.ListItemText, {
+    sx: commonMenuItemStyles
+  }, 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, {
+    sx: commonMenuItemStyles
+  }, (_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, {
+    style: {
+      transform: 'rotate(180deg) scaleX(-1)'
+    }
+  })), React__default.createElement(material.ListItemText, {
+    sx: commonMenuItemStyles
+  }, (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [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, {
+    sx: commonMenuItemStyles
+  }, (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), React__default.createElement(material.IconButton, {
+    onClick: handleOpenFilterModeMenu,
+    onMouseEnter: handleOpenFilterModeMenu,
+    size: "small",
+    sx: {
+      p: 0
+    }
+  }, React__default.createElement(ArrowRightIcon, null))), React__default.createElement(MRT_FilterTypeMenu, {
+    anchorEl: filterMenuAnchorEl,
+    column: column,
+    key: 2,
+    setAnchorEl: setFilterMenuAnchorEl,
+    onSelect: handleFilterByColumn
+  })], enableColumnGrouping && column.canGroupBy && [React__default.createElement(material.MenuItem, {
+    divider: !disableColumnHiding,
+    key: 2,
+    onClick: handleGroupByColumn,
+    sx: commonMenuItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), React__default.createElement(material.ListItemText, {
+    sx: commonMenuItemStyles
+  }, (_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, {
+    sx: commonMenuItemStyles
+  }, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]);
+};
+
+var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
   var anchorEl = _ref.anchorEl,
       column = _ref.column,
       onSelect = _ref.onSelect,
@@ -350,7 +497,7 @@ var MRT_FilterMenu = function MRT_FilterMenu(_ref) {
     }];
   }, []);
 
-  var handleSelectMenuItem = function handleSelectMenuItem(value) {
+  var handleSelectFilterType = function handleSelectFilterType(value) {
     setAnchorEl(null);
     setCurrentFilterTypes(function (prev) {
       var _extends2;
@@ -368,21 +515,19 @@ var MRT_FilterMenu = function MRT_FilterMenu(_ref) {
   var filterType = tableInstance.state.currentFilterTypes[column.id];
   return React__default.createElement(material.Menu, {
     anchorEl: anchorEl,
-    open: !!anchorEl,
     anchorOrigin: {
       vertical: 'center',
       horizontal: 'right'
     },
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    open: !!anchorEl,
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
     }
-  }, React__default.createElement(material.Typography, {
-    sx: {
-      fontWeight: 'bold',
-      p: '1rem',
-      fontSize: '1.1rem'
-    }
-  }, localization.filterMenuTitle), React__default.createElement(material.Divider, null), filterTypes.map(function (_ref2) {
+  }, filterTypes.map(function (_ref2) {
     var type = _ref2.type,
         label = _ref2.label,
         divider = _ref2.divider;
@@ -390,10 +535,11 @@ var MRT_FilterMenu = function MRT_FilterMenu(_ref) {
       divider: divider,
       key: type,
       onClick: function onClick() {
-        return handleSelectMenuItem(type);
+        return handleSelectFilterType(type);
       },
       selected: type === filterType,
-      value: type
+      value: type,
+      sx: commonMenuItemStyles
     }, label);
   }));
 };
@@ -458,19 +604,21 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }
 
   var filterType = tableInstance.state.currentFilterTypes[column.id];
-  var showFilterChip = ['empty', 'notEmpty'].includes(filterType);
+  var filterChipLabel = ['empty', 'notEmpty'].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,
     id: "mrt-" + idPrefix + "-" + column.id + "-filter-text-field",
     inputProps: {
+      disabled: !!filterChipLabel,
       sx: {
-        textOverflow: 'ellipsis'
+        textOverflow: 'ellipsis',
+        width: filterChipLabel ? 0 : undefined
       },
       title: filterPlaceholder
     },
     margin: "none",
-    placeholder: showFilterChip ? '' : filterPlaceholder,
+    placeholder: filterChipLabel ? '' : filterPlaceholder,
     onChange: function onChange(e) {
       setFilterValue(e.target.value);
       handleChange(e.target.value);
@@ -493,11 +641,11 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React__default.createElement(FilterListIcon, null))), showFilterChip && React__default.createElement(material.Chip, {
+      }, React__default.createElement(FilterListIcon, null))), filterChipLabel && React__default.createElement(material.Chip, {
         onDelete: handleClearFilterChip,
         label: filterType
       })),
-      endAdornment: !showFilterChip && React__default.createElement(material.InputAdornment, {
+      endAdornment: !filterChipLabel && React__default.createElement(material.InputAdornment, {
         position: "end"
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
@@ -518,131 +666,17 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     }
   }, textFieldProps, {
     sx: _extends({
-      minWidth: '6rem'
+      m: '0 -0.25rem',
+      minWidth: !filterChipLabel ? '5rem' : 'auto',
+      width: 'calc(100% + 0.5rem)'
     }, textFieldProps == null ? void 0 : textFieldProps.sx)
-  })), React__default.createElement(MRT_FilterMenu, {
+  })), React__default.createElement(MRT_FilterTypeMenu, {
     anchorEl: anchorEl,
     column: column,
     setAnchorEl: setAnchorEl
   }));
 };
 
-var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
-  var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
-
-  var anchorEl = _ref.anchorEl,
-      column = _ref.column,
-      setAnchorEl = _ref.setAnchorEl;
-
-  var _useMRT = useMRT(),
-      disableColumnHiding = _useMRT.disableColumnHiding,
-      disableFilters = _useMRT.disableFilters,
-      disableSortBy = _useMRT.disableSortBy,
-      enableColumnGrouping = _useMRT.enableColumnGrouping,
-      _useMRT$icons = _useMRT.icons,
-      ClearAllIcon = _useMRT$icons.ClearAllIcon,
-      DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
-      FilterListIcon = _useMRT$icons.FilterListIcon,
-      SortIcon = _useMRT$icons.SortIcon,
-      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon,
-      idPrefix = _useMRT.idPrefix,
-      localization = _useMRT.localization,
-      setShowFilters = _useMRT.setShowFilters;
-
-  var _useState = React.useState(null),
-      filterMenuAnchorEl = _useState[0],
-      setFilterMenuAnchorEl = _useState[1];
-
-  var handleClearSort = function handleClearSort() {
-    column.clearSortBy();
-    setAnchorEl(null);
-  };
-
-  var handleSortAsc = function handleSortAsc() {
-    column.toggleSortBy(false);
-    setAnchorEl(null);
-  };
-
-  var handleSortDesc = function handleSortDesc() {
-    column.toggleSortBy(true);
-    setAnchorEl(null);
-  };
-
-  var handleHideColumn = function handleHideColumn() {
-    column.toggleHidden();
-    setAnchorEl(null);
-  };
-
-  var handleGroupByColumn = function handleGroupByColumn() {
-    column.toggleGroupBy();
-    setAnchorEl(null);
-  };
-
-  var handleFilterByColumn = function handleFilterByColumn() {
-    setShowFilters(true);
-    setTimeout(function () {
-      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 : "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__default.createElement(material.Menu, {
-    anchorEl: anchorEl,
-    open: !!anchorEl,
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    }
-  }, React__default.createElement(material.MenuList, null, !disableSortBy && column.canSort && [React__default.createElement(material.MenuItem, {
-    key: 1,
-    disabled: !column.isSorted,
-    onClick: handleClearSort
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ClearAllIcon, null)), React__default.createElement(material.ListItemText, null, localization.columnActionMenuItemClearSort)), React__default.createElement(material.MenuItem, {
-    key: 2,
-    disabled: column.isSorted && !column.isSortedDesc,
-    onClick: handleSortAsc
-  }, 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, {
-    key: 3,
-    disabled: column.isSorted && column.isSortedDesc,
-    onClick: handleSortDesc
-  }, React__default.createElement(material.ListItemIcon, null, 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.Divider, {
-    key: 0
-  }), React__default.createElement(material.MenuItem, {
-    key: 1,
-    onClick: handleFilterByColumn
-  }, 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, {
-    size: "small",
-    onMouseEnter: handleOpenFilterModeMenu
-  }, React__default.createElement(ArrowRightIcon, null))), React__default.createElement(MRT_FilterMenu, {
-    anchorEl: filterMenuAnchorEl,
-    column: column,
-    key: 2,
-    setAnchorEl: setFilterMenuAnchorEl,
-    onSelect: handleFilterByColumn
-  })], enableColumnGrouping && column.canGroupBy && [React__default.createElement(material.Divider, {
-    key: 1
-  }), React__default.createElement(material.MenuItem, {
-    key: 2,
-    onClick: handleGroupByColumn
-  }, 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.Divider, {
-    key: 0
-  }), React__default.createElement(material.MenuItem, {
-    key: 1,
-    onClick: handleHideColumn
-  }, 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))))]));
-};
-
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
   var column = _ref.column;
 
@@ -698,7 +732,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;
 
@@ -706,11 +740,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;
 
@@ -719,6 +757,8 @@ 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__default.createElement(material.TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
@@ -746,7 +786,29 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     "aria-label": sortTooltip,
     active: column.isSorted,
     direction: column.isSortedDesc ? 'desc' : 'asc'
-  }))), React__default.createElement(material.Box, {
+  })), !isParentHeader && !!column.canFilter && React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: filterTooltip
+  }, React__default.createElement(material.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__default.createElement(FilterAltOff, {
+    fontSize: "small"
+  }) : React__default.createElement(FilterAltIcon, {
+    fontSize: "small"
+  })))), React__default.createElement(material.Box, {
     sx: {
       alignItems: 'center',
       display: 'flex',
@@ -835,8 +897,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;
@@ -854,7 +918,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'));
 };
@@ -1091,14 +1159,17 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
     }
   }, enableRowEditing && React__default.createElement(material.MenuItem, {
-    sx: {
-      display: 'flex',
-      gap: '0.75rem'
-    },
-    onClick: handleEdit
-  }, React__default.createElement(EditIcon, null), " ", localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+    onClick: handleEdit,
+    sx: commonMenuItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), React__default.createElement(material.ListItemText, {
+    sx: commonMenuItemStyles
+  }, localization.rowActionMenuItemEdit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
   })) != null ? _renderRowActionMenuI : null);
 };
@@ -2075,7 +2146,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;
 
@@ -2084,7 +2155,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;
 
@@ -2260,10 +2331,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;
   }));
@@ -2304,9 +2375,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 = React.useState(null),
       anchorEl = _useState[0],
@@ -2328,12 +2399,17 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
-    }
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding,
+      disablePadding: true
+    },
+    sx: commonMenuItemStyles
   }, 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,
@@ -2635,6 +2711,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;
 
@@ -2659,6 +2736,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, {
@@ -2677,7 +2755,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'
@@ -2698,15 +2776,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',
+  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',
@@ -2720,15 +2802,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',
+  toggleSearchButtonTitle: 'Show/Hide search',
   toolbarAlertGroupedByMessage: 'Grouped by ',
   toolbarAlertGroupedThenByMessage: ', then by ',
   toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected'
 };
 
 var MRT_Default_Icons = {
+  ArrowRightIcon: ArrowRightIcon,
   CancelIcon: CancelIcon,
   ClearAllIcon: ClearAllIcon,
   CloseIcon: CloseIcon,
@@ -2739,6 +2822,8 @@ var MRT_Default_Icons = {
   EditIcon: EditIcon,
   ExpandLessIcon: ExpandLessIcon,
   ExpandMoreIcon: ExpandMoreIcon,
+  FilterAltIcon: FilterAltIcon,
+  FilterAltOff: FilterAltOff,
   FilterListIcon: FilterListIcon,
   FilterListOffIcon: FilterListOffIcon,
   FullscreenExitIcon: FullscreenExitIcon,