material-react-table 1.10.0 → 1.11.1

package/dist/cjs/types/_locales/fi.d.ts

@@ -0,0 +1,2 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_FI: MRT_Localization;

package/dist/cjs/types/_locales/id.d.ts

@@ -0,0 +1,2 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_ID: MRT_Localization;

package/dist/cjs/types/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -6,5 +6,5 @@ interface Props<TData extends Record<string, any> = {}> {
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     table: MRT_TableInstance<TData>;
 }
-export declare const MRT_ShowHideColumnsMenu: <TData extends Record<string, any> = {}>({ anchorEl, isSubMenu, setAnchorEl, table, }: Props<TData>) => JSX.Element;
+export declare const MRT_ShowHideColumnsMenu: <TData extends Record<string, any> = {}>({ anchorEl, setAnchorEl, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/cjs/types/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -4,9 +4,8 @@ interface Props<TData extends Record<string, any> = {}> {
     allColumns: MRT_Column<TData>[];
     column: MRT_Column<TData>;
     hoveredColumn: MRT_Column<TData> | null;
-    isSubMenu?: boolean;
     setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
     table: MRT_TableInstance<TData>;
 }
-export declare const MRT_ShowHideColumnsMenuItems: <TData extends Record<string, any> = {}>({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }: Props<TData>) => JSX.Element;
+export declare const MRT_ShowHideColumnsMenuItems: <TData extends Record<string, any> = {}>({ allColumns, hoveredColumn, setHoveredColumn, column, table, }: Props<TData>) => JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState, useCallback, useEffect, Fragment, memo, useLayoutEffect } from 'react';
+import React, { useMemo, useState, useRef, useCallback, useEffect, Fragment, memo, useLayoutEffect } from 'react';
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { alpha, lighten, useTheme, darken } from '@mui/material/styles';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
@@ -39,10 +39,6 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
-import Divider from '@mui/material/Divider';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import Typography from '@mui/material/Typography';
 import Checkbox from '@mui/material/Checkbox';
 import Radio from '@mui/material/Radio';
 import Paper from '@mui/material/Paper';
@@ -57,6 +53,10 @@ import TablePagination from '@mui/material/TablePagination';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
 import Fade from '@mui/material/Fade';
 import TableContainer from '@mui/material/TableContainer';
 import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
@@ -669,168 +669,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.createElement(Box, { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React.createElement(Tooltip, { arrow: true, title: localization.unpin },
-        React.createElement(IconButton, { onClick: () => handlePinColumn(false), size: "small" },
-            React.createElement(PushPinIcon, null)))) : (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { arrow: true, title: localization.pinToLeft },
-            React.createElement(IconButton, { onClick: () => handlePinColumn('left'), size: "small" },
-                React.createElement(PushPinIcon, { style: {
-                        transform: 'rotate(90deg)',
-                    } }))),
-        React.createElement(Tooltip, { arrow: true, title: localization.pinToRight },
-            React.createElement(IconButton, { onClick: () => handlePinColumn('right'), size: "small" },
-                React.createElement(PushPinIcon, { style: {
-                        transform: 'rotate(-90deg)',
-                    } })))))));
-};
-
-const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
-    var _a;
-    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (React.createElement(Tooltip, { 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.createElement(IconButton, 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.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 = useRef(null);
-    const [isDragging, setIsDragging] = 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.createElement(React.Fragment, null,
-        React.createElement(MenuItem, { 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.createElement(Box, { sx: {
-                    display: 'flex',
-                    flexWrap: 'nowrap',
-                    gap: '8px',
-                } },
-                !isSubMenu &&
-                    columnDefType !== 'group' &&
-                    enableColumnOrdering &&
-                    !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
-                    (columnDef.enableColumnOrdering !== false ? (React.createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React.createElement(Box, { sx: { width: '28px' } }))),
-                !isSubMenu &&
-                    enablePinning &&
-                    (column.getCanPin() ? (React.createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React.createElement(Box, { sx: { width: '70px' } }))),
-                enableHiding ? (React.createElement(FormControlLabel, { componentsProps: {
-                        typography: {
-                            sx: {
-                                mb: 0,
-                                opacity: columnDefType !== 'display' ? 1 : 0.5,
-                            },
-                        },
-                    }, checked: switchChecked, control: React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
-                        React.createElement(Switch, null)), disabled: (isSubMenu && switchChecked) || !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React.createElement(Typography, { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
-        _a.map((c, i) => (React.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 = 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] = useState(null);
-    return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
-            dense: density === 'compact',
-        } },
-        React.createElement(Box, { sx: {
-                display: 'flex',
-                justifyContent: isSubMenu ? 'center' : 'space-between',
-                p: '0.5rem',
-                pt: 0,
-            } },
-            !isSubMenu && enableHiding && (React.createElement(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
-            !isSubMenu && enableColumnOrdering && (React.createElement(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
-            !isSubMenu && enablePinning && (React.createElement(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
-            enableHiding && (React.createElement(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll))),
-        React.createElement(Divider, null),
-        allColumns.map((column, index) => (React.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,
@@ -846,9 +684,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] = useState(null);
-    const [showHideColumnsMenuAnchorEl, setShowHideColumnsMenuAnchorEl] = useState(null);
     const handleClearSort = () => {
         column.clearSorting();
         setAnchorEl(null);
@@ -896,10 +733,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 &&
@@ -943,7 +776,9 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
                         React.createElement(ListItemIcon, null,
                             React.createElement(FilterListOffIcon, null)),
                         localization.clearFilter)),
-                React.createElement(MenuItem, { divider: enableGrouping || enableHiding, key: 1, onClick: handleFilterByColumn, sx: commonMenuItemStyles },
+                React.createElement(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, key: 1, onClick: showColumnFilters
+                        ? handleOpenFilterModeMenu
+                        : handleFilterByColumn, sx: commonMenuItemStyles },
                     React.createElement(Box, { sx: commonListItemStyles },
                         React.createElement(ListItemIcon, null,
                             React.createElement(FilterListIcon, null)), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 :
@@ -997,10 +832,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
                 React.createElement(Box, { sx: commonListItemStyles },
                     React.createElement(ListItemIcon, null,
                         React.createElement(ViewColumnIcon, null)), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 :
-                    _k.replace('{column}', String(columnDef.header))),
-                React.createElement(IconButton, { onClick: handleOpenShowHideColumnsMenu, onMouseEnter: handleOpenShowHideColumnsMenu, size: "small", sx: { p: 0 } },
-                    React.createElement(ArrowRightIcon, null))),
-            React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: showHideColumnsMenuAnchorEl, isSubMenu: true, key: 2, setAnchorEl: setShowHideColumnsMenuAnchorEl, table: table }),
+                    _k.replace('{column}', String(columnDef.header)))),
         ]));
 };
 
@@ -1291,6 +1123,166 @@ const MRT_FullScreenToggleButton = (_a) => {
         React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null))));
 };
 
+const MRT_ColumnPinningButtons = ({ column, table, }) => {
+    const { options: { icons: { PushPinIcon }, localization, }, } = table;
+    const handlePinColumn = (pinDirection) => {
+        column.pin(pinDirection);
+    };
+    return (React.createElement(Box, { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React.createElement(Tooltip, { arrow: true, title: localization.unpin },
+        React.createElement(IconButton, { onClick: () => handlePinColumn(false), size: "small" },
+            React.createElement(PushPinIcon, null)))) : (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { arrow: true, title: localization.pinToLeft },
+            React.createElement(IconButton, { onClick: () => handlePinColumn('left'), size: "small" },
+                React.createElement(PushPinIcon, { style: {
+                        transform: 'rotate(90deg)',
+                    } }))),
+        React.createElement(Tooltip, { arrow: true, title: localization.pinToRight },
+            React.createElement(IconButton, { onClick: () => handlePinColumn('right'), size: "small" },
+                React.createElement(PushPinIcon, { style: {
+                        transform: 'rotate(-90deg)',
+                    } })))))));
+};
+
+const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
+    var _a;
+    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
+    return (React.createElement(Tooltip, { 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.createElement(IconButton, 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.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 = useRef(null);
+    const [isDragging, setIsDragging] = 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.createElement(React.Fragment, null,
+        React.createElement(MenuItem, { 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.createElement(Box, { sx: {
+                    display: 'flex',
+                    flexWrap: 'nowrap',
+                    gap: '8px',
+                } },
+                columnDefType !== 'group' &&
+                    enableColumnOrdering &&
+                    !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
+                    (columnDef.enableColumnOrdering !== false ? (React.createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React.createElement(Box, { sx: { width: '28px' } }))),
+                enablePinning &&
+                    (column.getCanPin() ? (React.createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React.createElement(Box, { sx: { width: '70px' } }))),
+                enableHiding ? (React.createElement(FormControlLabel, { componentsProps: {
+                        typography: {
+                            sx: {
+                                mb: 0,
+                                opacity: columnDefType !== 'display' ? 1 : 0.5,
+                            },
+                        },
+                    }, checked: switchChecked, control: React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
+                        React.createElement(Switch, null)), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React.createElement(Typography, { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
+        _a.map((c, i) => (React.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 = 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] = useState(null);
+    return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+            dense: density === 'compact',
+        } },
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                p: '0.5rem',
+                pt: 0,
+            } },
+            enableHiding && (React.createElement(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
+            enableColumnOrdering && (React.createElement(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
+            enablePinning && (React.createElement(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
+            enableHiding && (React.createElement(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll))),
+        React.createElement(Divider, null),
+        allColumns.map((column, index) => (React.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"]);
@@ -1880,7 +1872,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,
@@ -2024,7 +2016,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
             theme,
         })), draggingBorders)) }),
         header.isPlaceholder ? null : (React.createElement(Box, { 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'
@@ -2048,7 +2040,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         : undefined,
                 } },
                 React.createElement(Box, { 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',
@@ -2450,7 +2442,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 })