material-react-table 1.10.0 → 1.11.1

package/dist/cjs/index.js

@@ -43,10 +43,6 @@ var ListItemIcon = require('@mui/material/ListItemIcon');
 var Menu = require('@mui/material/Menu');
 var MenuItem = require('@mui/material/MenuItem');
 var Button = require('@mui/material/Button');
-var Divider = require('@mui/material/Divider');
-var FormControlLabel = require('@mui/material/FormControlLabel');
-var Switch = require('@mui/material/Switch');
-var Typography = require('@mui/material/Typography');
 var Checkbox = require('@mui/material/Checkbox');
 var Radio = require('@mui/material/Radio');
 var Paper = require('@mui/material/Paper');
@@ -61,6 +57,10 @@ var TablePagination = require('@mui/material/TablePagination');
 var Alert = require('@mui/material/Alert');
 var AlertTitle = require('@mui/material/AlertTitle');
 var Chip = require('@mui/material/Chip');
+var Divider = require('@mui/material/Divider');
+var FormControlLabel = require('@mui/material/FormControlLabel');
+var Switch = require('@mui/material/Switch');
+var Typography = require('@mui/material/Typography');
 var Fade = require('@mui/material/Fade');
 var TableContainer = require('@mui/material/TableContainer');
 var reactVirtual = require('@tanstack/react-virtual');
@@ -119,10 +119,6 @@ var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
 var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
 var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
-var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
-var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
-var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
 var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
 var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
@@ -136,6 +132,10 @@ var TablePagination__default = /*#__PURE__*/_interopDefaultLegacy(TablePaginatio
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
 var AlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(AlertTitle);
 var Chip__default = /*#__PURE__*/_interopDefaultLegacy(Chip);
+var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
+var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
+var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
 var TableContainer__default = /*#__PURE__*/_interopDefaultLegacy(TableContainer);
 var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
@@ -747,168 +747,6 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
         label)))));
 };
 
-const MRT_ColumnPinningButtons = ({ column, table, }) => {
-    const { options: { icons: { PushPinIcon }, localization, }, } = table;
-    const handlePinColumn = (pinDirection) => {
-        column.pin(pinDirection);
-    };
-    return (React__default["default"].createElement(Box__default["default"], { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.unpin },
-        React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn(false), size: "small" },
-            React__default["default"].createElement(PushPinIcon, null)))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.pinToLeft },
-            React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn('left'), size: "small" },
-                React__default["default"].createElement(PushPinIcon, { style: {
-                        transform: 'rotate(90deg)',
-                    } }))),
-        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.pinToRight },
-            React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn('right'), size: "small" },
-                React__default["default"].createElement(PushPinIcon, { style: {
-                        transform: 'rotate(-90deg)',
-                    } })))))));
-};
-
-const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
-    var _a;
-    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
-        React__default["default"].createElement(IconButton__default["default"], Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
-                var _a;
-                e.stopPropagation();
-                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
-            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: '0 -0.1rem', opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
-                    backgroundColor: 'transparent',
-                    opacity: 1,
-                }, '&:active': {
-                    cursor: 'grabbing',
-                } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-            React__default["default"].createElement(DragHandleIcon, null))));
-};
-
-const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }) => {
-    var _a;
-    const { getState, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, setColumnOrder, } = table;
-    const { columnOrder } = getState();
-    const { columnDef } = column;
-    const { columnDefType } = columnDef;
-    const switchChecked = (columnDefType !== 'group' && column.getIsVisible()) ||
-        (columnDefType === 'group' &&
-            column.getLeafColumns().some((col) => col.getIsVisible()));
-    const handleToggleColumnHidden = (column) => {
-        var _a, _b;
-        if (columnDefType === 'group') {
-            (_b = (_a = column === null || column === void 0 ? void 0 : column.columns) === null || _a === void 0 ? void 0 : _a.forEach) === null || _b === void 0 ? void 0 : _b.call(_a, (childColumn) => {
-                childColumn.toggleVisibility(!switchChecked);
-            });
-        }
-        else {
-            column.toggleVisibility();
-        }
-    };
-    const menuItemRef = React.useRef(null);
-    const [isDragging, setIsDragging] = React.useState(false);
-    const handleDragStart = (e) => {
-        setIsDragging(true);
-        e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
-    };
-    const handleDragEnd = (_e) => {
-        setIsDragging(false);
-        setHoveredColumn(null);
-        if (hoveredColumn) {
-            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
-        }
-    };
-    const handleDragEnter = (_e) => {
-        if (!isDragging && columnDef.enableColumnOrdering !== false) {
-            setHoveredColumn(column);
-        }
-    };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(MenuItem__default["default"], { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                my: 0,
-                opacity: isDragging ? 0.5 : 1,
-                outlineOffset: '-2px',
-                outline: isDragging
-                    ? `2px dashed ${theme.palette.divider}`
-                    : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-                        ? `2px dashed ${theme.palette.primary.main}`
-                        : 'none',
-                pl: `${(column.depth + 0.5) * 2}rem`,
-                py: '6px',
-            }) },
-            React__default["default"].createElement(Box__default["default"], { sx: {
-                    display: 'flex',
-                    flexWrap: 'nowrap',
-                    gap: '8px',
-                } },
-                !isSubMenu &&
-                    columnDefType !== 'group' &&
-                    enableColumnOrdering &&
-                    !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
-                    (columnDef.enableColumnOrdering !== false ? (React__default["default"].createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React__default["default"].createElement(Box__default["default"], { sx: { width: '28px' } }))),
-                !isSubMenu &&
-                    enablePinning &&
-                    (column.getCanPin() ? (React__default["default"].createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React__default["default"].createElement(Box__default["default"], { sx: { width: '70px' } }))),
-                enableHiding ? (React__default["default"].createElement(FormControlLabel__default["default"], { componentsProps: {
-                        typography: {
-                            sx: {
-                                mb: 0,
-                                opacity: columnDefType !== 'display' ? 1 : 0.5,
-                            },
-                        },
-                    }, checked: switchChecked, control: React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
-                        React__default["default"].createElement(Switch__default["default"], null)), disabled: (isSubMenu && switchChecked) || !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React__default["default"].createElement(Typography__default["default"], { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
-        _a.map((c, i) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
-};
-
-const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) => {
-    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, toggleAllColumnsVisible, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, } = table;
-    const { density, columnOrder, columnPinning } = getState();
-    const hideAllColumns = () => {
-        getAllLeafColumns()
-            .filter((col) => col.columnDef.enableHiding !== false)
-            .forEach((col) => col.toggleVisibility(false));
-    };
-    const allColumns = React.useMemo(() => {
-        const columns = getAllColumns();
-        if (columnOrder.length > 0 &&
-            !columns.some((col) => col.columnDef.columnDefType === 'group')) {
-            return [
-                ...getLeftLeafColumns(),
-                ...Array.from(new Set(columnOrder)).map((colId) => getCenterLeafColumns().find((col) => (col === null || col === void 0 ? void 0 : col.id) === colId)),
-                ...getRightLeafColumns(),
-            ].filter(Boolean);
-        }
-        return columns;
-    }, [
-        columnOrder,
-        columnPinning,
-        getAllColumns(),
-        getCenterLeafColumns(),
-        getLeftLeafColumns(),
-        getRightLeafColumns(),
-    ]);
-    const [hoveredColumn, setHoveredColumn] = React.useState(null);
-    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
-            dense: density === 'compact',
-        } },
-        React__default["default"].createElement(Box__default["default"], { sx: {
-                display: 'flex',
-                justifyContent: isSubMenu ? 'center' : 'space-between',
-                p: '0.5rem',
-                pt: 0,
-            } },
-            !isSubMenu && enableHiding && (React__default["default"].createElement(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
-            !isSubMenu && enableColumnOrdering && (React__default["default"].createElement(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
-            !isSubMenu && enablePinning && (React__default["default"].createElement(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
-            enableHiding && (React__default["default"].createElement(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll))),
-        React__default["default"].createElement(Divider__default["default"], null),
-        allColumns.map((column, index) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
-};
-
 const commonMenuItemStyles = {
     py: '6px',
     my: 0,
@@ -924,9 +762,8 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const { columnSizing, columnVisibility, density } = getState();
+    const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
     const [filterMenuAnchorEl, setFilterMenuAnchorEl] = React.useState(null);
-    const [showHideColumnsMenuAnchorEl, setShowHideColumnsMenuAnchorEl] = React.useState(null);
     const handleClearSort = () => {
         column.clearSorting();
         setAnchorEl(null);
@@ -974,10 +811,6 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         event.stopPropagation();
         setFilterMenuAnchorEl(event.currentTarget);
     };
-    const handleOpenShowHideColumnsMenu = (event) => {
-        event.stopPropagation();
-        setShowHideColumnsMenuAnchorEl(event.currentTarget);
-    };
     const isSelectFilter = !!columnDef.filterSelectOptions;
     const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
     const showFilterModeSubMenu = enableColumnFilterModes &&
@@ -1021,7 +854,9 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
                         React__default["default"].createElement(ListItemIcon__default["default"], null,
                             React__default["default"].createElement(FilterListOffIcon, null)),
                         localization.clearFilter)),
-                React__default["default"].createElement(MenuItem__default["default"], { divider: enableGrouping || enableHiding, key: 1, onClick: handleFilterByColumn, sx: commonMenuItemStyles },
+                React__default["default"].createElement(MenuItem__default["default"], { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, key: 1, onClick: showColumnFilters
+                        ? handleOpenFilterModeMenu
+                        : handleFilterByColumn, sx: commonMenuItemStyles },
                     React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
                         React__default["default"].createElement(ListItemIcon__default["default"], null,
                             React__default["default"].createElement(FilterListIcon, null)), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 :
@@ -1075,10 +910,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
                 React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
                     React__default["default"].createElement(ListItemIcon__default["default"], null,
                         React__default["default"].createElement(ViewColumnIcon, null)), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 :
-                    _k.replace('{column}', String(columnDef.header))),
-                React__default["default"].createElement(IconButton__default["default"], { onClick: handleOpenShowHideColumnsMenu, onMouseEnter: handleOpenShowHideColumnsMenu, size: "small", sx: { p: 0 } },
-                    React__default["default"].createElement(ArrowRightIcon, null))),
-            React__default["default"].createElement(MRT_ShowHideColumnsMenu, { anchorEl: showHideColumnsMenuAnchorEl, isSubMenu: true, key: 2, setAnchorEl: setShowHideColumnsMenuAnchorEl, table: table }),
+                    _k.replace('{column}', String(columnDef.header)))),
         ]));
 };
 
@@ -1369,6 +1201,166 @@ const MRT_FullScreenToggleButton = (_a) => {
         React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React__default["default"].createElement(FullscreenExitIcon, null) : React__default["default"].createElement(FullscreenIcon, null))));
 };
 
+const MRT_ColumnPinningButtons = ({ column, table, }) => {
+    const { options: { icons: { PushPinIcon }, localization, }, } = table;
+    const handlePinColumn = (pinDirection) => {
+        column.pin(pinDirection);
+    };
+    return (React__default["default"].createElement(Box__default["default"], { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.unpin },
+        React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn(false), size: "small" },
+            React__default["default"].createElement(PushPinIcon, null)))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.pinToLeft },
+            React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn('left'), size: "small" },
+                React__default["default"].createElement(PushPinIcon, { style: {
+                        transform: 'rotate(90deg)',
+                    } }))),
+        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.pinToRight },
+            React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn('right'), size: "small" },
+                React__default["default"].createElement(PushPinIcon, { style: {
+                        transform: 'rotate(-90deg)',
+                    } })))))));
+};
+
+const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
+    var _a;
+    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
+    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
+        React__default["default"].createElement(IconButton__default["default"], Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
+            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: '0 -0.1rem', opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
+                    backgroundColor: 'transparent',
+                    opacity: 1,
+                }, '&:active': {
+                    cursor: 'grabbing',
+                } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+                ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
+                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
+            React__default["default"].createElement(DragHandleIcon, null))));
+};
+
+const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, table, }) => {
+    var _a;
+    const { getState, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, setColumnOrder, } = table;
+    const { columnOrder } = getState();
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const switchChecked = (columnDefType !== 'group' && column.getIsVisible()) ||
+        (columnDefType === 'group' &&
+            column.getLeafColumns().some((col) => col.getIsVisible()));
+    const handleToggleColumnHidden = (column) => {
+        var _a, _b;
+        if (columnDefType === 'group') {
+            (_b = (_a = column === null || column === void 0 ? void 0 : column.columns) === null || _a === void 0 ? void 0 : _a.forEach) === null || _b === void 0 ? void 0 : _b.call(_a, (childColumn) => {
+                childColumn.toggleVisibility(!switchChecked);
+            });
+        }
+        else {
+            column.toggleVisibility();
+        }
+    };
+    const menuItemRef = React.useRef(null);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const handleDragStart = (e) => {
+        setIsDragging(true);
+        e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
+    };
+    const handleDragEnd = (_e) => {
+        setIsDragging(false);
+        setHoveredColumn(null);
+        if (hoveredColumn) {
+            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
+        }
+    };
+    const handleDragEnter = (_e) => {
+        if (!isDragging && columnDef.enableColumnOrdering !== false) {
+            setHoveredColumn(column);
+        }
+    };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(MenuItem__default["default"], { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                my: 0,
+                opacity: isDragging ? 0.5 : 1,
+                outlineOffset: '-2px',
+                outline: isDragging
+                    ? `2px dashed ${theme.palette.divider}`
+                    : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
+                        ? `2px dashed ${theme.palette.primary.main}`
+                        : 'none',
+                pl: `${(column.depth + 0.5) * 2}rem`,
+                py: '6px',
+            }) },
+            React__default["default"].createElement(Box__default["default"], { sx: {
+                    display: 'flex',
+                    flexWrap: 'nowrap',
+                    gap: '8px',
+                } },
+                columnDefType !== 'group' &&
+                    enableColumnOrdering &&
+                    !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
+                    (columnDef.enableColumnOrdering !== false ? (React__default["default"].createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React__default["default"].createElement(Box__default["default"], { sx: { width: '28px' } }))),
+                enablePinning &&
+                    (column.getCanPin() ? (React__default["default"].createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React__default["default"].createElement(Box__default["default"], { sx: { width: '70px' } }))),
+                enableHiding ? (React__default["default"].createElement(FormControlLabel__default["default"], { componentsProps: {
+                        typography: {
+                            sx: {
+                                mb: 0,
+                                opacity: columnDefType !== 'display' ? 1 : 0.5,
+                            },
+                        },
+                    }, checked: switchChecked, control: React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
+                        React__default["default"].createElement(Switch__default["default"], null)), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React__default["default"].createElement(Typography__default["default"], { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
+        _a.map((c, i) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
+};
+
+const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
+    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, toggleAllColumnsVisible, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, } = table;
+    const { density, columnOrder, columnPinning } = getState();
+    const hideAllColumns = () => {
+        getAllLeafColumns()
+            .filter((col) => col.columnDef.enableHiding !== false)
+            .forEach((col) => col.toggleVisibility(false));
+    };
+    const allColumns = React.useMemo(() => {
+        const columns = getAllColumns();
+        if (columnOrder.length > 0 &&
+            !columns.some((col) => col.columnDef.columnDefType === 'group')) {
+            return [
+                ...getLeftLeafColumns(),
+                ...Array.from(new Set(columnOrder)).map((colId) => getCenterLeafColumns().find((col) => (col === null || col === void 0 ? void 0 : col.id) === colId)),
+                ...getRightLeafColumns(),
+            ].filter(Boolean);
+        }
+        return columns;
+    }, [
+        columnOrder,
+        columnPinning,
+        getAllColumns(),
+        getCenterLeafColumns(),
+        getLeftLeafColumns(),
+        getRightLeafColumns(),
+    ]);
+    const [hoveredColumn, setHoveredColumn] = React.useState(null);
+    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+            dense: density === 'compact',
+        } },
+        React__default["default"].createElement(Box__default["default"], { sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                p: '0.5rem',
+                pt: 0,
+            } },
+            enableHiding && (React__default["default"].createElement(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
+            enableColumnOrdering && (React__default["default"].createElement(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
+            enablePinning && (React__default["default"].createElement(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
+            enableHiding && (React__default["default"].createElement(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll))),
+        React__default["default"].createElement(Divider__default["default"], null),
+        allColumns.map((column, index) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
+};
+
 const MRT_ShowHideColumnsButton = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
@@ -1958,7 +1950,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
             cursor: 'col-resize',
             mr: density === 'compact' ? '-0.75rem' : '-1rem',
             position: 'absolute',
-            right: '1px',
+            right: '4px',
             px: '4px',
             '&:active > hr': {
                 backgroundColor: theme.palette.info.main,
@@ -2102,7 +2094,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
             theme,
         })), draggingBorders)) }),
         header.isPlaceholder ? null : (React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content", sx: {
-                alignItems: 'flex-start',
+                alignItems: 'center',
                 display: 'flex',
                 flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
                 justifyContent: columnDefType === 'group' || (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
@@ -2126,7 +2118,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         : undefined,
                 } },
                 React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
-                        minWidth: '5ch',
+                        minWidth: `${Math.min(columnDef.header.length, 5)}ch`,
                         overflow: columnDefType === 'data' ? 'hidden' : undefined,
                         textOverflow: 'ellipsis',
                         whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 20 ? 'nowrap' : 'normal',
@@ -2528,7 +2520,12 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
     const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
-        ? muiTableBodyRowProps({ isDetailPanel: true, row, staticRowIndex: rowIndex, table })
+        ? muiTableBodyRowProps({
+            isDetailPanel: true,
+            row,
+            staticRowIndex: rowIndex,
+            table,
+        })
         : muiTableBodyRowProps;
     const tableCellProps = muiTableDetailPanelProps instanceof Function
         ? muiTableDetailPanelProps({ row, table })