material-react-table 0.7.1 → 0.7.2

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

@@ -20,6 +20,7 @@ import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PushPinIcon from '@mui/icons-material/PushPin';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import SaveIcon from '@mui/icons-material/Save';
 import SearchIcon from '@mui/icons-material/Search';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
@@ -97,6 +98,7 @@ var MRT_DefaultLocalization_EN = {
   hideColumn: 'Hide {column} column',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
+  resetColumnSize: 'Reset column size',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',
@@ -145,6 +147,7 @@ var MRT_Default_Icons = {
   MoreHorizIcon: MoreHorizIcon,
   MoreVertIcon: MoreVertIcon,
   PushPinIcon: PushPinIcon,
+  RestartAltIcon: RestartAltIcon,
   SaveIcon: SaveIcon,
   SearchIcon: SearchIcon,
   SearchOffIcon: SearchOffIcon,
@@ -675,9 +678,10 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       setColumnOrder = tableInstance.setColumnOrder,
       _tableInstance$option = tableInstance.options,
       enableColumnFilters = _tableInstance$option.enableColumnFilters,
-      enablePinning = _tableInstance$option.enablePinning,
+      enableColumnResizing = _tableInstance$option.enableColumnResizing,
       enableGrouping = _tableInstance$option.enableGrouping,
       enableHiding = _tableInstance$option.enableHiding,
+      enablePinning = _tableInstance$option.enablePinning,
       enableSorting = _tableInstance$option.enableSorting,
       _tableInstance$option2 = _tableInstance$option.icons,
       ArrowRightIcon = _tableInstance$option2.ArrowRightIcon,
@@ -688,6 +692,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
       PushPinIcon = _tableInstance$option2.PushPinIcon,
       SortIcon = _tableInstance$option2.SortIcon,
+      RestartAltIcon = _tableInstance$option2.RestartAltIcon,
       VisibilityOffIcon = _tableInstance$option2.VisibilityOffIcon,
       idPrefix = _tableInstance$option.idPrefix,
       localization = _tableInstance$option.localization,
@@ -695,8 +700,9 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var column = header.column;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding,
-      columnVisibility = _getState.columnVisibility;
+      columnSizing = _getState.columnSizing,
+      columnVisibility = _getState.columnVisibility,
+      isDensePadding = _getState.isDensePadding;
 
   var _useState = useState(null),
       filterMenuAnchorEl = _useState[0],
@@ -721,6 +727,11 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setAnchorEl(null);
   };
 
+  var handleResetColumnSize = function handleResetColumnSize() {
+    column.resetSize();
+    setAnchorEl(null);
+  };
+
   var handleHideColumn = function handleHideColumn() {
     column.toggleVisibility(false);
     setAnchorEl(null);
@@ -840,7 +851,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.header))))], enablePinning && column.getCanPin() && [React.createElement(MenuItem, {
-    disabled: column.getIsPinned() === 'left',
+    disabled: column.getIsPinned() === 'left' || !column.getCanPin(),
     key: 0,
     onClick: function onClick() {
       return handlePinColumn('left');
@@ -853,7 +864,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       transform: 'rotate(90deg)'
     }
   })), localization.pinToLeft)), React.createElement(MenuItem, {
-    disabled: column.getIsPinned() === 'right',
+    disabled: column.getIsPinned() === 'right' || !column.getCanPin(),
     key: 0,
     onClick: function onClick() {
       return handlePinColumn('right');
@@ -875,7 +886,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, null)), localization.unpin))], enableHiding && [React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && [React.createElement(MenuItem, {
+    disabled: !column.getCanResize() || !columnSizing[column.id],
+    key: 0,
+    onClick: handleResetColumnSize,
+    sx: commonMenuItemStyles$1
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React.createElement(MenuItem, {
     disabled: column.enableHiding === false,
     key: 0,
     onClick: handleHideColumn,
@@ -2012,16 +2030,18 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       return _extends({
         backgroundColor: theme.palette.background["default"],
         backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
-        boxShadow: "3px 0 6px " + alpha(theme.palette.common.black, 0.1),
         fontWeight: 'bold',
         height: '100%',
-        minWidth: "max(" + header.getWidth() + ", 100px)",
+        maxWidth: "min(" + column.getWidth() + "px, " + column.maxWidth + "px)",
+        minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
         p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pt: column.columnDefType === 'display' ? 0 : isDensePadding ? '0.75rem' : '1.25rem',
         pb: column.columnDefType === 'display' ? 0 : undefined,
+        overflow: 'visible',
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
-        width: header.getWidth()
+        width: header.getWidth(),
+        zIndex: column.getIsResizing() ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
   }), header.isPlaceholder ? null : column.columnDefType === 'display' ? headerElement : React.createElement(Box, {
@@ -2042,7 +2062,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       flexWrap: 'nowrap',
       whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal'
     }
-  }, headerElement, column.columnDefType !== 'group' && column.getCanSort() && React.createElement(Tooltip, {
+  }, headerElement, column.columnDefType === 'data' && column.getCanSort() && React.createElement(Tooltip, {
     arrow: true,
     placement: "top",
     title: sortTooltip
@@ -2050,7 +2070,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     "aria-label": sortTooltip,
     active: !!column.getIsSorted(),
     direction: column.getIsSorted() ? column.getIsSorted() : undefined
-  })), column.columnDefType !== 'group' && enableColumnFilters && !!column.getCanColumnFilter() && React.createElement(Tooltip, {
+  })), column.columnDefType === 'data' && enableColumnFilters && !!column.getCanColumnFilter() && React.createElement(Tooltip, {
     arrow: true,
     placement: "top",
     title: filterTooltip
@@ -2071,16 +2091,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         opacity: 0.8
       }
     }
-  }, showFilters && !column.getColumnFilterValue() ? React.createElement(FilterAltOff, null) : React.createElement(FilterAltIcon, null)))), React.createElement(Box, {
-    sx: {
-      alignItems: 'center',
-      display: 'flex',
-      flexWrap: 'nowrap'
-    }
-  }, (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
+  }, showFilters && !column.getColumnFilterValue() ? React.createElement(FilterAltOff, null) : React.createElement(FilterAltIcon, null)))), (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
     header: header,
     tableInstance: tableInstance
-  }), enableColumnResizing && column.columnDefType !== 'group' && React.createElement(Divider, Object.assign({
+  }), column.getCanResize() && React.createElement(Divider, Object.assign({
     flexItem: true,
     orientation: "vertical",
     onDoubleClick: function onDoubleClick() {
@@ -2088,14 +2102,19 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     },
     sx: function sx(theme) {
       return {
-        borderRightWidth: '2px',
         borderRadius: '2px',
-        maxHeight: '2rem',
+        borderRightWidth: '2px',
         cursor: 'col-resize',
-        userSelect: 'none',
+        height: showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
+        opacity: 0.8,
+        position: 'absolute',
+        right: '1px',
         touchAction: 'none',
+        transition: 'all 0.2s ease-in-out',
+        userSelect: 'none',
+        zIndex: 2000,
         '&:active': {
-          backgroundColor: theme.palette.secondary.dark,
+          backgroundColor: theme.palette.info.main,
           opacity: 1
         }
       };
@@ -2106,7 +2125,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : ''
       }
     });
-  }))))), column.columnDefType === 'data' && enableColumnFilters && column.getCanColumnFilter() && React.createElement(Collapse, {
+  })))), column.columnDefType === 'data' && column.getCanColumnFilter() && React.createElement(Collapse, {
     "in": showFilters
   }, React.createElement(MRT_FilterTextField, {
     header: header,
@@ -2125,7 +2144,13 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 
   var tableRowProps = _extends({}, headerGroup == null ? void 0 : headerGroup.getHeaderGroupProps(), mTableHeadRowProps);
 
-  return React.createElement(TableRow, Object.assign({}, tableRowProps), headerGroup.headers.map(function (header, index) {
+  return React.createElement(TableRow, Object.assign({}, tableRowProps, {
+    sx: function sx(theme) {
+      return _extends({
+        boxShadow: "4px 0 8px " + alpha(theme.palette.common.black, 0.1)
+      }, tableRowProps == null ? void 0 : tableRowProps.sx);
+    }
+  }), headerGroup.headers.map(function (header, index) {
     return React.createElement(MRT_TableHeadCell, {
       header: header,
       key: header.id || index,
@@ -2335,10 +2360,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     }
   }, tableCellProps, {
     sx: _extends({
+      maxWidth: "min(" + column.getWidth() + "px, fit-content)",
+      minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
       p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
       pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
       transition: 'all 0.2s ease-in-out',
-      whiteSpace: isDensePadding || enablePinning && getIsSomeColumnsPinned() ? 'nowrap' : 'normal'
+      whiteSpace: isDensePadding || enablePinning && getIsSomeColumnsPinned() ? 'nowrap' : 'normal',
+      width: column.getWidth()
     }, tableCellProps == null ? void 0 : tableCellProps.sx)
   }), isLoading ? React.createElement(Skeleton, Object.assign({
     animation: "wave",
@@ -2514,8 +2542,11 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         backgroundColor: theme.palette.background["default"],
         backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
         fontWeight: 'bold',
+        maxWidth: "min(" + column.getWidth() + "px, " + column.maxWidth + "px)",
+        minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
         p: isDensePadding ? '0.5rem' : '1rem',
         transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
+        width: column.getWidth(),
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
@@ -2613,7 +2644,7 @@ var commonBoxStyles = function commonBoxStyles(_ref) {
   return {
     display: 'grid',
     minWidth: visible ? '200px' : 0,
-    overflowX: 'auto',
+    overflowX: pinned ? 'scroll' : 'auto',
     boxShadow: pinned === 'left' ? "0 1px 12px " + alpha(theme.palette.common.black, 0.5) : pinned === 'right' ? "0 -1px 12px " + alpha(theme.palette.common.black, 0.5) : 'none'
   };
 };
@@ -2792,7 +2823,7 @@ var createGroup = function createGroup(table, column, currentFilterTypes) {
 var createDataColumn = function createDataColumn(table, column, currentFilterTypes) {
   return (// @ts-ignore
     table.createDataColumn(column.id, _extends({
-      filterType: currentFilterTypes[column.id] || MRT_FILTER_TYPE.BEST_MATCH
+      filterFn: currentFilterTypes[column.id] instanceof Function ? currentFilterTypes[column.id] : defaultFilterFNs[currentFilterTypes[column.id]]
     }, column))
   );
 };
@@ -3004,14 +3035,18 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "enableColumnActions", "enableColumnFilters", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
+      _ref$columnResizeMode = _ref.columnResizeMode,
+      columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
       _ref$enableColumnActi = _ref.enableColumnActions,
       enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
       _ref$enableColumnFilt = _ref.enableColumnFilters,
       enableColumnFilters = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      _ref$enableColumnResi = _ref.enableColumnResizing,
+      enableColumnResizing = _ref$enableColumnResi === void 0 ? false : _ref$enableColumnResi,
       _ref$enableDensePaddi = _ref.enableDensePaddingToggle,
       enableDensePaddingToggle = _ref$enableDensePaddi === void 0 ? true : _ref$enableDensePaddi,
       _ref$enableExpandAll = _ref.enableExpandAll,
@@ -3058,7 +3093,9 @@ var MaterialReactTable = (function (_ref) {
 
   return React.createElement(MRT_TableRoot, Object.assign({
     autoResetExpanded: autoResetExpanded,
+    columnResizeMode: columnResizeMode,
     enableColumnActions: enableColumnActions,
+    enableColumnResizing: enableColumnResizing,
     enableColumnFilters: enableColumnFilters,
     enableDensePaddingToggle: enableDensePaddingToggle,
     enableExpandAll: enableExpandAll,