material-react-table 1.9.4 → 1.11.0

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);
@@ -278,13 +278,17 @@ const getTrailingDisplayColumnIds = (props) => {
         props.positionExpandColumn === 'last' &&
             showExpandColumn(props) &&
             'mrt-row-expand',
-    ];
+    ].filter(Boolean);
+};
+const getDefaultColumnOrderIds = (props) => {
+    const leadingDisplayCols = getLeadingDisplayColumnIds(props);
+    const trailingDisplayCols = getTrailingDisplayColumnIds(props);
+    const allLeafColumnDefs = getAllLeafColumnDefs(props.columns)
+        .map((columnDef) => getColumnId(columnDef))
+        .filter((columnId) => !leadingDisplayCols.includes(columnId) &&
+        !trailingDisplayCols.includes(columnId));
+    return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
 };
-const getDefaultColumnOrderIds = (props) => [
-    ...getLeadingDisplayColumnIds(props),
-    ...getAllLeafColumnDefs(props.columns).map((columnDef) => getColumnId(columnDef)),
-    ...getTrailingDisplayColumnIds(props),
-].filter(Boolean);
 const getDefaultColumnFilterFn = (columnDef) => {
     if (columnDef.filterVariant === 'multi-select')
         return 'arrIncludesSome';
@@ -314,28 +318,33 @@ const getTotalRight = (table, column) => {
 };
 const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+    const widthStyles = {
+        minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = column.columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
+        width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px)`,
+    };
+    return Object.assign(Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? styles.alpha(styles.lighten(theme.palette.background.default, 0.04), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
             ? `-4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
             : getIsFirstRightPinnedColumn(column)
                 ? `4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
                 : undefined, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', flex: table.options.layoutMode === 'grid'
-            ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) 0 auto`
+            ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_d = header === null || header === void 0 ? void 0 : header.id) !== null && _d !== void 0 ? _d : column.id)}-size) 0 auto`
             : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'left' &&
             column.getPinnedIndex() === 0
-            ? `-${column.getSize() * ((_c = (_b = table.getState().columnPinning.left) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 1)}px`
+            ? `-${column.getSize() *
+                ((_f = (_e = table.getState().columnPinning.left) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 1)}px`
             : undefined, mr: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'right' &&
             column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
             ? `-${column.getSize() *
-                ((_e = (_d = table.getState().columnPinning.right) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 1) *
+                ((_h = (_g = table.getState().columnPinning.right) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 1) *
                 1.2}px`
-            : undefined, opacity: ((_f = table.getState().draggingColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id ||
-            ((_g = table.getState().hoveredColumn) === null || _g === void 0 ? void 0 : _g.id) === column.id
+            : undefined, opacity: ((_j = table.getState().draggingColumn) === null || _j === void 0 ? void 0 : _j.id) === column.id ||
+            ((_k = table.getState().hoveredColumn) === null || _k === void 0 ? void 0 : _k.id) === column.id
             ? 0.5
             : 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? 'sticky'
@@ -343,9 +352,9 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             ? `${getTotalRight(table, column)}px`
             : undefined, transition: table.options.enableColumnVirtualization
             ? 'none'
-            : `padding 150ms ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+            : `padding 150ms ease-in-out` }, (!table.options.enableColumnResizing && widthStyles)), ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
         ? tableCellProps.sx(theme)
-        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_h = header === null || header === void 0 ? void 0 : header.id) !== null && _h !== void 0 ? _h : column.id)}-size) * 1px), ${(_j = column.columnDef.minSize) !== null && _j !== void 0 ? _j : 30}px)`, width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_k = header === null || header === void 0 ? void 0 : header.id) !== null && _k !== void 0 ? _k : column.id)}-size) * 1px)` }));
+        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), (table.options.enableColumnResizing && widthStyles));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -738,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,
@@ -915,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);
@@ -965,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 &&
@@ -1012,7 +854,7 @@ 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: 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 :
@@ -1066,10 +908,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)))),
         ]));
 };
 
@@ -1360,6 +1199,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"]);
@@ -1448,6 +1447,7 @@ const MRT_ToolbarDropZone = ({ table, }) => {
         if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
             setShowToolbarDropZone(!!enableGrouping &&
                 !!draggingColumn &&
+                draggingColumn.columnDef.enableGrouping !== false &&
                 !grouping.includes(draggingColumn.id));
         }
     }, [enableGrouping, draggingColumn, grouping]);
@@ -1948,7 +1948,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,
@@ -2092,7 +2092,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'
@@ -2116,7 +2116,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',
@@ -2514,11 +2514,11 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
 };
 const Memo_MRT_TableBodyCell = React.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
-const MRT_TableDetailPanel = ({ parentRowRef, row, table, virtualRow, }) => {
+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, table })
+        ? muiTableBodyRowProps({ isDetailPanel: true, row, staticRowIndex: rowIndex, table })
         : muiTableBodyRowProps;
     const tableCellProps = muiTableDetailPanelProps instanceof Function
         ? muiTableDetailPanelProps({ row, table })
@@ -2544,7 +2544,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
     const { getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
-        ? muiTableBodyRowProps({ row, table })
+        ? muiTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
         : muiTableBodyRowProps;
     const handleDragEnter = (_e) => {
         if (enableRowOrdering && draggingRow) {
@@ -2596,13 +2596,13 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                     (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (React__default["default"].createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React__default["default"].createElement(MRT_TableBodyCell, Object.assign({}, props)));
             }),
             virtualPaddingRight ? (React__default["default"].createElement("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null),
-        renderDetailPanel && !row.getIsGrouped() && (React__default["default"].createElement(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, table: table, virtualRow: virtualRow }))));
+        renderDetailPanel && !row.getIsGrouped() && (React__default["default"].createElement(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))));
 };
 const Memo_MRT_TableBodyRow = React.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
 
 const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    var _a, _b, _c;
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, rowVirtualizerInstanceRef, rowVirtualizerProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
+    var _a, _b, _c, _d;
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowVirtualizerInstanceRef, rowVirtualizerProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
     const { columnFilters, density, expanded, globalFilter, globalFilterFn, pagination, sorting, } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
@@ -2665,17 +2665,18 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
                 : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
             ? tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx(theme)
             : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))) }), (_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : (!rows.length ? (React__default["default"].createElement("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' } },
-        React__default["default"].createElement("td", { colSpan: table.getVisibleLeafColumns().length, style: { display: layoutMode === 'grid' ? 'grid' : 'table-cell' } },
-            React__default["default"].createElement(Typography__default["default"], { sx: {
-                    color: 'text.secondary',
-                    fontStyle: 'italic',
-                    maxWidth: `min(100vw, ${(_c = (_b = tablePaperRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 360}px)`,
-                    py: '2rem',
-                    textAlign: 'center',
-                    width: '100%',
-                } }, globalFilter || columnFilters.length
-                ? localization.noResultsFound
-                : localization.noRecordsToDisplay)))) : (React__default["default"].createElement(React__default["default"].Fragment, null, (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+        React__default["default"].createElement("td", { colSpan: table.getVisibleLeafColumns().length, style: {
+                display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+            } }, (_b = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(Typography__default["default"], { sx: {
+                color: 'text.secondary',
+                fontStyle: 'italic',
+                maxWidth: `min(100vw, ${(_d = (_c = tablePaperRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 360}px)`,
+                py: '2rem',
+                textAlign: 'center',
+                width: '100%',
+            } }, globalFilter || columnFilters.length
+            ? localization.noResultsFound
+            : localization.noRecordsToDisplay))))) : (React__default["default"].createElement(React__default["default"].Fragment, null, (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
         const row = rowVirtualizer
             ? rows[rowOrVirtualRow.index]
             : rowOrVirtualRow;