material-react-table 2.9.2 → 2.10.0

package/dist/index.js

@@ -12,8 +12,8 @@ var Box = require('@mui/material/Box');
 var Button = require('@mui/material/Button');
 var CircularProgress = require('@mui/material/CircularProgress');
 var styles = require('@mui/material/styles');
-var ListItemIcon = require('@mui/material/ListItemIcon');
 var Menu = require('@mui/material/Menu');
+var ListItemIcon = require('@mui/material/ListItemIcon');
 var MenuItem = require('@mui/material/MenuItem');
 var Stack = require('@mui/material/Stack');
 var Checkbox = require('@mui/material/Checkbox');
@@ -25,6 +25,7 @@ var ChevronLeftIcon = require('@mui/icons-material/ChevronLeft');
 var ChevronRightIcon = require('@mui/icons-material/ChevronRight');
 var ClearAllIcon = require('@mui/icons-material/ClearAll');
 var CloseIcon = require('@mui/icons-material/Close');
+var ContentCopy = require('@mui/icons-material/ContentCopy');
 var DensityLargeIcon = require('@mui/icons-material/DensityLarge');
 var DensityMediumIcon = require('@mui/icons-material/DensityMedium');
 var DensitySmallIcon = require('@mui/icons-material/DensitySmall');
@@ -102,8 +103,8 @@ var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
-var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
 var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
+var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
 var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
 var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
 var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
@@ -115,6 +116,7 @@ var ChevronLeftIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeftIco
 var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
 var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
 var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
+var ContentCopy__default = /*#__PURE__*/_interopDefaultLegacy(ContentCopy);
 var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
 var DensityMediumIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityMediumIcon);
 var DensitySmallIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensitySmallIcon);
@@ -301,17 +303,58 @@ const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parent
     [getColumnId(col)]: '',
 }))), rowIndex, depth, subRows, parentId);
 
+const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
+const getValueAndLabel = (option) => {
+    var _a, _b, _c;
+    let label = '';
+    let value = '';
+    if (option) {
+        if (typeof option !== 'object') {
+            label = option;
+            value = option;
+        }
+        else {
+            label = (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : option.value;
+            value = (_c = option.value) !== null && _c !== void 0 ? _c : label;
+        }
+    }
+    return { label, value };
+};
+
+const isCellEditable = ({ cell, table, }) => {
+    const { enableEditing } = table.options;
+    const { column: { columnDef }, row, } = cell;
+    return (!cell.getIsPlaceholder() &&
+        parseFromValuesOrFunc(enableEditing, row) &&
+        parseFromValuesOrFunc(columnDef.enableEditing, row) !== false);
+};
+const openEditingCell = ({ cell, table, }) => {
+    const { options: { editDisplayMode }, refs: { editInputRefs }, } = table;
+    const { column } = cell;
+    if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
+        table.setEditingCell(cell);
+        queueMicrotask(() => {
+            var _a;
+            const textField = editInputRefs.current[column.id];
+            if (textField) {
+                textField.focus();
+                (_a = textField.select) === null || _a === void 0 ? void 0 : _a.call(textField);
+            }
+        });
+    }
+};
+
 function defaultDisplayColumnProps({ header, id, size, tableOptions, }) {
     const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
     return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumn), { header: header ? localization[header] : '', size }), displayColumnDefOptions === null || displayColumnDefOptions === void 0 ? void 0 : displayColumnDefOptions[id]), { id });
 }
 const showRowPinningColumn = (tableOptions) => {
     const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
-    return enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.startsWith('select'));
+    return !!(enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.startsWith('select')));
 };
 const showRowDragColumn = (tableOptions) => {
     const { enableRowDragging, enableRowOrdering } = tableOptions;
-    return enableRowDragging || enableRowOrdering;
+    return !!(enableRowDragging || enableRowOrdering);
 };
 const showRowExpandColumn = (tableOptions) => {
     const { enableExpanding, enableGrouping, renderDetailPanel, state: { grouping }, } = tableOptions;
@@ -321,12 +364,12 @@ const showRowExpandColumn = (tableOptions) => {
 };
 const showRowActionsColumn = (tableOptions) => {
     const { createDisplayMode, editDisplayMode, enableEditing, enableRowActions, state: { creatingRow }, } = tableOptions;
-    return (enableRowActions ||
+    return !!(enableRowActions ||
         (creatingRow && createDisplayMode === 'row') ||
         (enableEditing && ['modal', 'row'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')));
 };
-const showRowSelectionColumn = (tableOptions) => tableOptions.enableRowSelection;
-const showRowNumbersColumn = (tableOptions) => tableOptions.enableRowNumbers;
+const showRowSelectionColumn = (tableOptions) => !!tableOptions.enableRowSelection;
+const showRowNumbersColumn = (tableOptions) => !!tableOptions.enableRowNumbers;
 const showRowSpacerColumn = (tableOptions) => tableOptions.layoutMode === 'grid-no-grow';
 const getLeadingDisplayColumnIds = (tableOptions) => [
     showRowPinningColumn(tableOptions) && 'mrt-row-pin',
@@ -349,32 +392,21 @@ const getTrailingDisplayColumnIds = (tableOptions) => [
         'mrt-row-expand',
     showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
 ].filter(Boolean);
-const getDefaultColumnOrderIds = (tableOptions) => {
-    const leadingDisplayCols = getLeadingDisplayColumnIds(tableOptions);
-    const trailingDisplayCols = getTrailingDisplayColumnIds(tableOptions);
-    const allLeafColumnDefs = getAllLeafColumnDefs(tableOptions.columns)
-        .map((columnDef) => getColumnId(columnDef))
-        .filter((columnId) => !leadingDisplayCols.includes(columnId) &&
-        !trailingDisplayCols.includes(columnId));
-    return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
-};
-
-const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
-const getValueAndLabel = (option) => {
-    var _a, _b, _c;
-    let label = '';
-    let value = '';
-    if (option) {
-        if (typeof option !== 'object') {
-            label = option;
-            value = option;
-        }
-        else {
-            label = (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : option.value;
-            value = (_c = option.value) !== null && _c !== void 0 ? _c : label;
-        }
-    }
-    return { label, value };
+const getDefaultColumnOrderIds = (tableOptions, reset = false) => {
+    const { state: { columnOrder: currentColumnOrderIds = [] }, } = tableOptions;
+    const leadingDisplayColIds = getLeadingDisplayColumnIds(tableOptions);
+    const trailingDisplayColIds = getTrailingDisplayColumnIds(tableOptions);
+    const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map((columnDef) => getColumnId(columnDef));
+    let allLeafColumnDefIds = reset
+        ? defaultColumnDefIds
+        : Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
+    allLeafColumnDefIds = allLeafColumnDefIds.filter((colId) => !leadingDisplayColIds.includes(colId) &&
+        !trailingDisplayColIds.includes(colId));
+    return [
+        ...leadingDisplayColIds,
+        ...allLeafColumnDefIds,
+        ...trailingDisplayColIds,
+    ];
 };
 
 const getIsRowSelected = ({ row, table, }) => {
@@ -673,373 +705,37 @@ const getCommonTooltipProps = (placement) => ({
     placement,
 });
 
-const mrtFilterOptions = (localization) => [
-    {
-        divider: false,
-        label: localization.filterFuzzy,
-        option: 'fuzzy',
-        symbol: '≈',
-    },
-    {
-        divider: false,
-        label: localization.filterContains,
-        option: 'contains',
-        symbol: '*',
-    },
-    {
-        divider: false,
-        label: localization.filterStartsWith,
-        option: 'startsWith',
-        symbol: 'a',
-    },
-    {
-        divider: true,
-        label: localization.filterEndsWith,
-        option: 'endsWith',
-        symbol: 'z',
-    },
-    {
-        divider: false,
-        label: localization.filterEquals,
-        option: 'equals',
-        symbol: '=',
-    },
-    {
-        divider: true,
-        label: localization.filterNotEquals,
-        option: 'notEquals',
-        symbol: '≠',
-    },
-    {
-        divider: false,
-        label: localization.filterBetween,
-        option: 'between',
-        symbol: '⇿',
-    },
-    {
-        divider: true,
-        label: localization.filterBetweenInclusive,
-        option: 'betweenInclusive',
-        symbol: '⬌',
-    },
-    {
-        divider: false,
-        label: localization.filterGreaterThan,
-        option: 'greaterThan',
-        symbol: '>',
-    },
-    {
-        divider: false,
-        label: localization.filterGreaterThanOrEqualTo,
-        option: 'greaterThanOrEqualTo',
-        symbol: '≥',
-    },
-    {
-        divider: false,
-        label: localization.filterLessThan,
-        option: 'lessThan',
-        symbol: '<',
-    },
-    {
-        divider: true,
-        label: localization.filterLessThanOrEqualTo,
-        option: 'lessThanOrEqualTo',
-        symbol: '≤',
-    },
-    {
-        divider: false,
-        label: localization.filterEmpty,
-        option: 'empty',
-        symbol: '∅',
-    },
-    {
-        divider: false,
-        label: localization.filterNotEmpty,
-        option: 'notEmpty',
-        symbol: '!∅',
-    },
-];
-const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
-const emptyModes = ['empty', 'notEmpty'];
-const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
-const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
-const MRT_FilterOptionMenu = (_a) => {
-    var _b, _c, _d, _e;
-    var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
-    const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
-    const { density, globalFilterFn } = getState();
-    const { column } = header !== null && header !== void 0 ? header : {};
-    const { columnDef } = column !== null && column !== void 0 ? column : {};
-    const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
-    let allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
-    if (rangeVariants.includes(columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant)) {
-        allowedColumnFilterOptions = [
-            ...rangeModes,
-            ...(allowedColumnFilterOptions !== null && allowedColumnFilterOptions !== void 0 ? allowedColumnFilterOptions : []),
-        ].filter((option) => rangeModes.includes(option));
-    }
-    const internalFilterOptions = react.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
-        ? allowedColumnFilterOptions === undefined ||
-            (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
-        : (!globalFilterModeOptions ||
-            globalFilterModeOptions.includes(filterOption.option)) &&
-            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option)), []);
-    const handleSelectFilterMode = (option) => {
-        var _a, _b;
-        const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
-        if (!header || !column) {
-            // global filter mode
-            setGlobalFilterFn(option);
-        }
-        else if (option !== prevFilterMode) {
-            // column filter mode
-            setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
-            // reset filter value and/or perform new filter render
-            if (emptyModes.includes(option)) {
-                // will now be empty/notEmpty filter mode
-                if (currentFilterValue !== ' ' &&
-                    !emptyModes.includes(prevFilterMode)) {
-                    column.setFilterValue(' ');
-                }
-                else if (currentFilterValue) {
-                    column.setFilterValue(currentFilterValue); // perform new filter render
-                }
-            }
-            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
-                arrModes.includes(option)) {
-                // will now be array filter mode
-                if (currentFilterValue instanceof String ||
-                    (currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length)) {
-                    column.setFilterValue([]);
-                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
-                }
-                else if (currentFilterValue) {
-                    column.setFilterValue(currentFilterValue); // perform new filter render
-                }
-            }
-            else if (((_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
-                rangeModes.includes(option)) {
-                // will now be range filter mode
-                if (!Array.isArray(currentFilterValue) ||
-                    (!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === '')) &&
-                        !rangeModes.includes(prevFilterMode))) {
-                    column.setFilterValue(['', '']);
-                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
-                }
-                else {
-                    column.setFilterValue(currentFilterValue); // perform new filter render
-                }
-            }
-            else {
-                // will now be single value filter mode
-                if (Array.isArray(currentFilterValue)) {
-                    column.setFilterValue('');
-                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
-                }
-                else if (currentFilterValue === ' ' &&
-                    emptyModes.includes(prevFilterMode)) {
-                    column.setFilterValue(undefined);
-                }
-                else {
-                    column.setFilterValue(currentFilterValue); // perform new filter render
-                }
-            }
-        }
-        setAnchorEl(null);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
-    };
-    const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
+const MRT_ActionMenuItem = (_a) => {
+    var { icon, label, onOpenSubMenu, table } = _a, rest = __rest(_a, ["icon", "label", "onOpenSubMenu", "table"]);
+    const { options: { icons: { ArrowRightIcon }, }, } = table;
+    return (jsxRuntime.jsxs(MenuItem__default["default"], Object.assign({ sx: {
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            minWidth: '120px',
+            my: 0,
+            py: '6px',
+        } }, rest, { children: [jsxRuntime.jsxs(Box__default["default"], { sx: {
+                    alignItems: 'center',
+                    display: 'flex',
+                }, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: icon }), label] }), onOpenSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: onOpenSubMenu, onMouseEnter: onOpenSubMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] })));
+};
+
+const MRT_RowActionMenu = (_a) => {
+    var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
+    const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
+    const { density } = getState();
     const theme = styles.useTheme();
     const { menuBackgroundColor } = getMRTTheme(table, theme);
-    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
+    return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
             dense: density === 'compact',
             sx: {
                 backgroundColor: menuBackgroundColor,
             },
-        }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
-            ? (_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
-                column: column,
-                internalFilterOptions,
-                onSelectFilterMode: handleSelectFilterMode,
-                table,
-            })) !== null && _d !== void 0 ? _d : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
-                column: column,
-                internalFilterOptions,
-                onSelectFilterMode: handleSelectFilterMode,
-                table,
-            })
-            : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
-                internalFilterOptions,
-                onSelectFilterMode: handleSelectFilterMode,
-                table,
-            }))) !== null && _e !== void 0 ? _e : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxRuntime.jsxs(MenuItem__default["default"], { divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
-                alignItems: 'center',
-                display: 'flex',
-                gap: '2ch',
-                my: 0,
-                py: '6px',
-            }, value: option, children: [jsxRuntime.jsx(Box__default["default"], { sx: { fontSize: '1.25rem', width: '2ch' }, children: symbol }), label] }, index))) })));
-};
-
-const commonMenuItemStyles = {
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    my: 0,
-    py: '6px',
-};
-const commonListItemStyles = {
-    alignItems: 'center',
-    display: 'flex',
-};
-const MRT_ColumnActionMenu = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
-    const { getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, toggleAllColumnsVisible, } = table;
-    const { column } = header;
-    const { columnDef } = column;
-    const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
-    const columnFilterValue = column.getFilterValue();
-    const [filterMenuAnchorEl, setFilterMenuAnchorEl] = react.useState(null);
-    const handleClearSort = () => {
-        column.clearSorting();
-        setAnchorEl(null);
-    };
-    const handleSortAsc = () => {
-        column.toggleSorting(false);
-        setAnchorEl(null);
-    };
-    const handleSortDesc = () => {
-        column.toggleSorting(true);
-        setAnchorEl(null);
-    };
-    const handleResetColumnSize = () => {
-        setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
-        column.resetSize();
-        setAnchorEl(null);
-    };
-    const handleHideColumn = () => {
-        column.toggleVisibility(false);
-        setAnchorEl(null);
-    };
-    const handlePinColumn = (pinDirection) => {
-        column.pin(pinDirection);
-        setAnchorEl(null);
-    };
-    const handleGroupByColumn = () => {
-        column.toggleGrouping();
-        setColumnOrder((old) => ['mrt-row-expand', ...old]);
-        setAnchorEl(null);
-    };
-    const handleClearFilter = () => {
-        column.setFilterValue(undefined);
-        setAnchorEl(null);
-        if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
-            setColumnFilterFns((prev) => {
-                var _a;
-                return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
-            });
-        }
-    };
-    const handleFilterByColumn = () => {
-        setShowColumnFilters(true);
-        queueMicrotask(() => { var _a; return (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus(); });
-        setAnchorEl(null);
-    };
-    const handleShowAllColumns = () => {
-        toggleAllColumnsVisible(true);
-        setAnchorEl(null);
-    };
-    const handleOpenFilterModeMenu = (event) => {
-        event.stopPropagation();
-        setFilterMenuAnchorEl(event.currentTarget);
-    };
-    const isSelectFilter = !!columnDef.filterSelectOptions;
-    const allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
-    const showFilterModeSubMenu = enableColumnFilterModes &&
-        columnDef.enableColumnFilterModes !== false &&
-        !isSelectFilter &&
-        (allowedColumnFilterOptions === undefined ||
-            !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
-    const internalColumnMenuItems = [
-        ...(enableSorting && column.getCanSort()
-            ? [
-                enableSortingRemoval !== false && (jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 1),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, {}) }), (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }) }, 2),
-            ]
-            : []),
-        ...(enableColumnFilters && column.getCanFilter()
-            ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !columnFilterValue ||
-                        (Array.isArray(columnFilterValue) &&
-                            !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
-                columnFilterDisplayMode === 'subheader' && (jsxRuntime.jsxs(MenuItem__default["default"], { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
-                        ? handleOpenFilterModeMenu
-                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListIcon, {}) }), (_e = localization.filterByColumn) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] }, 4)),
-                showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
-            ].filter(Boolean)
-            : []),
-        ...(enableGrouping && column.getCanGroup()
-            ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { divider: enableColumnPinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(DynamicFeedIcon, {}) }), (_f = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 6),
-            ]
-            : []),
-        ...(enableColumnPinning && column.getCanPin()
-            ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 7),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 8),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, {}) }), localization.unpin] }) }, 9),
-            ]
-            : []),
-        ...(enableColumnResizing && column.getCanResize()
-            ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(RestartAltIcon, {}) }), localization.resetColumnSize] }) }, 10),
-            ]
-            : []),
-        ...(enableHiding
-            ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(VisibilityOffIcon, {}) }), (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }) }, 11),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
-                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ViewColumnIcon, {}) }), (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] }) }, 12),
-            ]
-            : []),
-    ].filter(Boolean);
-    const theme = styles.useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
-    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
-            dense: density === 'compact',
-            sx: {
-                backgroundColor: menuBackgroundColor,
-            },
-        }, anchorEl: anchorEl, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
-            closeMenu: () => setAnchorEl(null),
-            column,
-            internalColumnMenuItems,
-            table,
-        })) !== null && _k !== void 0 ? _k : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
-            closeMenu: () => setAnchorEl(null),
-            column,
-            internalColumnMenuItems,
-            table,
-        })) !== null && _l !== void 0 ? _l : internalColumnMenuItems })));
-};
-
-const MRT_RowActionMenu = (_a) => {
-    var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
-    const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
-    const { density } = getState();
-    const theme = styles.useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
-    return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
-            dense: density === 'compact',
-            sx: {
-                backgroundColor: menuBackgroundColor,
-            },
-        }, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) &&
-                ['modal', 'row'].includes(editDisplayMode) && (jsxRuntime.jsx(MenuItem__default["default"], { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
-                closeMenu: () => setAnchorEl(null),
-                row,
-                staticRowIndex,
+        }, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) &&
+                ['modal', 'row'].includes(editDisplayMode) && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(EditIcon, {}), label: localization.edit, onClick: handleEdit, table: table })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+                closeMenu: () => setAnchorEl(null),
+                row,
+                staticRowIndex,
                 table,
             })] })));
 };
@@ -1079,9 +775,6 @@ const MRT_ToggleRowActionMenuButton = (_a) => {
 };
 
 const getMRT_RowActionsColumnDef = (tableOptions) => {
-    if (!showRowActionsColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign({ Cell: ({ cell, row, staticRowIndex, table }) => (jsxRuntime.jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, staticRowIndex: staticRowIndex, table: table })) }, defaultDisplayColumnProps({
         header: 'actions',
         id: 'mrt-row-actions',
@@ -1135,9 +828,6 @@ const MRT_TableBodyRowGrabHandle = (_a) => {
 };
 
 const getMRT_RowDragColumnDef = (tableOptions) => {
-    if (!showRowDragColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign({ Cell: ({ row, rowRef, table }) => (jsxRuntime.jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), grow: false }, defaultDisplayColumnProps({
         header: 'move',
         id: 'mrt-row-drag',
@@ -1197,9 +887,6 @@ const MRT_ExpandButton = ({ row, staticRowIndex, table, }) => {
 
 const getMRT_RowExpandColumnDef = (tableOptions) => {
     var _a;
-    if (!showRowExpandColumn(tableOptions)) {
-        return null;
-    }
     const { defaultColumn, enableExpandAll, groupedColumnMode, positionExpandColumn, renderDetailPanel, state: { grouping }, } = tableOptions;
     const alignProps = positionExpandColumn === 'last'
         ? {
@@ -1237,9 +924,6 @@ const getMRT_RowExpandColumnDef = (tableOptions) => {
 };
 
 const getMRT_RowNumbersColumnDef = (tableOptions) => {
-    if (!showRowNumbersColumn(tableOptions)) {
-        return null;
-    }
     const { localization, rowNumberDisplayMode } = tableOptions;
     const { pagination: { pageIndex, pageSize }, } = tableOptions.state;
     return Object.assign({ Cell: ({ row, staticRowIndex }) => {
@@ -1293,9 +977,6 @@ const MRT_TableBodyRowPinButton = (_a) => {
 };
 
 const getMRT_RowPinningColumnDef = (tableOptions) => {
-    if (!showRowPinningColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign({ Cell: ({ row, table }) => (jsxRuntime.jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), grow: false }, defaultDisplayColumnProps({
         header: 'pin',
         id: 'mrt-row-pin',
@@ -1367,9 +1048,6 @@ const MRT_SelectCheckbox = (_a) => {
 };
 
 const getMRT_RowSelectColumnDef = (tableOptions) => {
-    if (!showRowSelectionColumn(tableOptions)) {
-        return null;
-    }
     const { enableMultiRowSelection, enableSelectAll } = tableOptions;
     return Object.assign({ Cell: ({ row, staticRowIndex, table }) => (jsxRuntime.jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: enableSelectAll && enableMultiRowSelection
             ? ({ table }) => jsxRuntime.jsx(MRT_SelectCheckbox, { table: table })
@@ -1389,6 +1067,7 @@ const MRT_Default_Icons = {
     ChevronRightIcon: ChevronRightIcon__default["default"],
     ClearAllIcon: ClearAllIcon__default["default"],
     CloseIcon: CloseIcon__default["default"],
+    ContentCopy: ContentCopy__default["default"],
     DensityLargeIcon: DensityLargeIcon__default["default"],
     DensityMediumIcon: DensityMediumIcon__default["default"],
     DensitySmallIcon: DensitySmallIcon__default["default"],
@@ -1427,6 +1106,7 @@ const MRT_Localization_EN = {
     clearSearch: 'Clear search',
     clearSort: 'Clear sort',
     clickToCopy: 'Click to copy',
+    copy: 'Copy',
     collapse: 'Collapse',
     collapseAll: 'Collapse all',
     columnActions: 'Column Actions',
@@ -1641,9 +1321,6 @@ const blankColProps = {
     },
 };
 const getMRT_RowSpacerColumnDef = (tableOptions) => {
-    if (!showRowSpacerColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumnProps({
         id: 'mrt-row-spacer',
         size: 0,
@@ -1651,21 +1328,10 @@ const getMRT_RowSpacerColumnDef = (tableOptions) => {
     })), { grow: true }), MRT_DefaultDisplayColumn), { muiTableBodyCellProps: blankColProps, muiTableFooterCellProps: blankColProps, muiTableHeadCellProps: blankColProps });
 };
 
-const getMRT_DisplayColumns = (tableOptions) => {
-    return [
-        getMRT_RowNumbersColumnDef(tableOptions),
-        getMRT_RowSelectColumnDef(tableOptions),
-        getMRT_RowExpandColumnDef(tableOptions),
-        getMRT_RowActionsColumnDef(tableOptions),
-        getMRT_RowDragColumnDef(tableOptions),
-        getMRT_RowPinningColumnDef(tableOptions),
-        getMRT_RowSpacerColumnDef(tableOptions),
-    ].filter(Boolean);
-};
-
 const useMRT_Effects = (table) => {
     const { getIsSomeRowsPinned, getPrePaginationRowModel, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
-    const { density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const { columnOrder, density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const totalColumnCount = table.options.columns.length;
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
     const rerender = react.useReducer(() => ({}), {})[1];
     const isMounted = react.useRef(false);
@@ -1729,10 +1395,22 @@ const useMRT_Effects = (table) => {
             }, 150);
         }
     }, [density]);
+    //recalculate column order when columns change or features are toggled on/off
+    react.useEffect(() => {
+        if (totalColumnCount !== columnOrder.length) {
+            table.setColumnOrder(getDefaultColumnOrderIds(table.options));
+        }
+    }, [totalColumnCount]);
 };
 
-const useMRT_TableInstance = (_tableOptions) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+/**
+ * The MRT hook that wraps the TanStack useReactTable hook and adds additional functionality
+ * @param definedTableOptions - table options with proper defaults set
+ * @returns the MRT table instance
+ */
+const useMRT_TableInstance = (definedTableOptions) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+    const actionCellRef = react.useRef(null);
     const bottomToolbarRef = react.useRef(null);
     const editInputRefs = react.useRef({});
     const filterInputRefs = react.useRef({});
@@ -1743,17 +1421,19 @@ const useMRT_TableInstance = (_tableOptions) => {
     const topToolbarRef = react.useRef(null);
     const tableHeadRef = react.useRef(null);
     const tableFooterRef = react.useRef(null);
+    //transform initial state with proper column order
     const initialState = react.useMemo(() => {
         var _a, _b, _c;
-        const initState = (_a = _tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
+        const initState = (_a = definedTableOptions.initialState) !== null && _a !== void 0 ? _a : {};
         initState.columnOrder =
-            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(Object.assign(Object.assign({}, _tableOptions), { state: Object.assign(Object.assign({}, _tableOptions.initialState), _tableOptions.state) }));
-        initState.globalFilterFn = (_c = _tableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
+            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(Object.assign(Object.assign({}, definedTableOptions), { state: Object.assign(Object.assign({}, definedTableOptions.initialState), definedTableOptions.state) }));
+        initState.globalFilterFn = (_c = definedTableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
         return initState;
     }, []);
-    _tableOptions.initialState = initialState;
-    const [creatingRow, _setCreatingRow] = react.useState((_a = initialState.creatingRow) !== null && _a !== void 0 ? _a : null);
-    const [columnFilterFns, setColumnFilterFns] = react.useState(() => Object.assign({}, ...getAllLeafColumnDefs(_tableOptions.columns).map((col) => {
+    definedTableOptions.initialState = initialState;
+    const [actionCell, setActionCell] = react.useState((_a = initialState.actionCell) !== null && _a !== void 0 ? _a : null);
+    const [creatingRow, _setCreatingRow] = react.useState((_b = initialState.creatingRow) !== null && _b !== void 0 ? _b : null);
+    const [columnFilterFns, setColumnFilterFns] = react.useState(() => Object.assign({}, ...getAllLeafColumnDefs(definedTableOptions.columns).map((col) => {
         var _a, _b, _c, _d;
         return ({
             [getColumnId(col)]: col.filterFn instanceof Function
@@ -1761,24 +1441,25 @@ const useMRT_TableInstance = (_tableOptions) => {
                 : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
         });
     })));
-    const [columnOrder, onColumnOrderChange] = react.useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
-    const [columnSizingInfo, onColumnSizingInfoChange] = react.useState((_c = initialState.columnSizingInfo) !== null && _c !== void 0 ? _c : {});
-    const [density, setDensity] = react.useState((_d = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _d !== void 0 ? _d : 'comfortable');
-    const [draggingColumn, setDraggingColumn] = react.useState((_e = initialState.draggingColumn) !== null && _e !== void 0 ? _e : null);
-    const [draggingRow, setDraggingRow] = react.useState((_f = initialState.draggingRow) !== null && _f !== void 0 ? _f : null);
-    const [editingCell, setEditingCell] = react.useState((_g = initialState.editingCell) !== null && _g !== void 0 ? _g : null);
-    const [editingRow, setEditingRow] = react.useState((_h = initialState.editingRow) !== null && _h !== void 0 ? _h : null);
-    const [globalFilterFn, setGlobalFilterFn] = react.useState((_j = initialState.globalFilterFn) !== null && _j !== void 0 ? _j : 'fuzzy');
-    const [grouping, onGroupingChange] = react.useState((_k = initialState.grouping) !== null && _k !== void 0 ? _k : []);
-    const [hoveredColumn, setHoveredColumn] = react.useState((_l = initialState.hoveredColumn) !== null && _l !== void 0 ? _l : null);
-    const [hoveredRow, setHoveredRow] = react.useState((_m = initialState.hoveredRow) !== null && _m !== void 0 ? _m : null);
-    const [isFullScreen, setIsFullScreen] = react.useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _o !== void 0 ? _o : false);
-    const [pagination, onPaginationChange] = react.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _p !== void 0 ? _p : { pageIndex: 0, pageSize: 10 });
-    const [showAlertBanner, setShowAlertBanner] = react.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _q !== void 0 ? _q : false);
-    const [showColumnFilters, setShowColumnFilters] = react.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _r !== void 0 ? _r : false);
-    const [showGlobalFilter, setShowGlobalFilter] = react.useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _s !== void 0 ? _s : false);
-    const [showToolbarDropZone, setShowToolbarDropZone] = react.useState((_t = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _t !== void 0 ? _t : false);
-    _tableOptions.state = Object.assign({ columnFilterFns,
+    const [columnOrder, onColumnOrderChange] = react.useState((_c = initialState.columnOrder) !== null && _c !== void 0 ? _c : []);
+    const [columnSizingInfo, onColumnSizingInfoChange] = react.useState((_d = initialState.columnSizingInfo) !== null && _d !== void 0 ? _d : {});
+    const [density, setDensity] = react.useState((_e = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _e !== void 0 ? _e : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = react.useState((_f = initialState.draggingColumn) !== null && _f !== void 0 ? _f : null);
+    const [draggingRow, setDraggingRow] = react.useState((_g = initialState.draggingRow) !== null && _g !== void 0 ? _g : null);
+    const [editingCell, setEditingCell] = react.useState((_h = initialState.editingCell) !== null && _h !== void 0 ? _h : null);
+    const [editingRow, setEditingRow] = react.useState((_j = initialState.editingRow) !== null && _j !== void 0 ? _j : null);
+    const [globalFilterFn, setGlobalFilterFn] = react.useState((_k = initialState.globalFilterFn) !== null && _k !== void 0 ? _k : 'fuzzy');
+    const [grouping, onGroupingChange] = react.useState((_l = initialState.grouping) !== null && _l !== void 0 ? _l : []);
+    const [hoveredColumn, setHoveredColumn] = react.useState((_m = initialState.hoveredColumn) !== null && _m !== void 0 ? _m : null);
+    const [hoveredRow, setHoveredRow] = react.useState((_o = initialState.hoveredRow) !== null && _o !== void 0 ? _o : null);
+    const [isFullScreen, setIsFullScreen] = react.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _p !== void 0 ? _p : false);
+    const [pagination, onPaginationChange] = react.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _q !== void 0 ? _q : { pageIndex: 0, pageSize: 10 });
+    const [showAlertBanner, setShowAlertBanner] = react.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _r !== void 0 ? _r : false);
+    const [showColumnFilters, setShowColumnFilters] = react.useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _s !== void 0 ? _s : false);
+    const [showGlobalFilter, setShowGlobalFilter] = react.useState((_t = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _t !== void 0 ? _t : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = react.useState((_u = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _u !== void 0 ? _u : false);
+    definedTableOptions.state = Object.assign({ actionCell,
+        columnFilterFns,
         columnOrder,
         columnSizingInfo,
         creatingRow,
@@ -1796,90 +1477,110 @@ const useMRT_TableInstance = (_tableOptions) => {
         showAlertBanner,
         showColumnFilters,
         showGlobalFilter,
-        showToolbarDropZone }, _tableOptions.state);
-    const tableOptions = _tableOptions;
+        showToolbarDropZone }, definedTableOptions.state);
+    //The table options now include all state needed to help determine column visibility and order logic
+    const statefulTableOptions = definedTableOptions;
     //don't recompute columnDefs while resizing column or dragging column/row
     const columnDefsRef = react.useRef([]);
-    tableOptions.columns =
-        tableOptions.state.columnSizingInfo.isResizingColumn ||
-            tableOptions.state.draggingColumn ||
-            tableOptions.state.draggingRow
+    statefulTableOptions.columns =
+        statefulTableOptions.state.columnSizingInfo.isResizingColumn ||
+            statefulTableOptions.state.draggingColumn ||
+            statefulTableOptions.state.draggingRow
             ? columnDefsRef.current
             : prepareColumns({
                 columnDefs: [
-                    ...getMRT_DisplayColumns(tableOptions),
-                    ...tableOptions.columns,
+                    ...[
+                        showRowPinningColumn(statefulTableOptions) &&
+                            getMRT_RowPinningColumnDef(statefulTableOptions),
+                        showRowDragColumn(statefulTableOptions) &&
+                            getMRT_RowDragColumnDef(statefulTableOptions),
+                        showRowActionsColumn(statefulTableOptions) &&
+                            getMRT_RowActionsColumnDef(statefulTableOptions),
+                        showRowExpandColumn(statefulTableOptions) &&
+                            getMRT_RowExpandColumnDef(statefulTableOptions),
+                        showRowSelectionColumn(statefulTableOptions) &&
+                            getMRT_RowSelectColumnDef(statefulTableOptions),
+                        showRowNumbersColumn(statefulTableOptions) &&
+                            getMRT_RowNumbersColumnDef(statefulTableOptions),
+                    ].filter(Boolean),
+                    ...statefulTableOptions.columns,
+                    ...[
+                        showRowSpacerColumn(statefulTableOptions) &&
+                            getMRT_RowSpacerColumnDef(statefulTableOptions),
+                    ].filter(Boolean),
                 ],
-                tableOptions,
+                tableOptions: statefulTableOptions,
             });
-    columnDefsRef.current = tableOptions.columns;
-    tableOptions.data = react.useMemo(() => (tableOptions.state.isLoading || tableOptions.state.showSkeletons) &&
-        !tableOptions.data.length
+    columnDefsRef.current = statefulTableOptions.columns;
+    //if loading, generate blank rows to show skeleton loaders
+    statefulTableOptions.data = react.useMemo(() => (statefulTableOptions.state.isLoading ||
+        statefulTableOptions.state.showSkeletons) &&
+        !statefulTableOptions.data.length
         ? [
-            ...Array(Math.min(tableOptions.state.pagination.pageSize, 20)).fill(null),
-        ].map(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => ({
+            ...Array(Math.min(statefulTableOptions.state.pagination.pageSize, 20)).fill(null),
+        ].map(() => Object.assign({}, ...getAllLeafColumnDefs(statefulTableOptions.columns).map((col) => ({
             [getColumnId(col)]: null,
         }))))
-        : tableOptions.data, [
-        tableOptions.data,
-        tableOptions.state.isLoading,
-        tableOptions.state.showSkeletons,
+        : statefulTableOptions.data, [
+        statefulTableOptions.data,
+        statefulTableOptions.state.isLoading,
+        statefulTableOptions.state.showSkeletons,
     ]);
     //@ts-ignore
     const table = reactTable.useReactTable(Object.assign(Object.assign({ onColumnOrderChange,
         onColumnSizingInfoChange,
         onGroupingChange,
-        onPaginationChange }, tableOptions), { globalFilterFn: (_u = tableOptions.filterFns) === null || _u === void 0 ? void 0 : _u[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
-    //@ts-ignore
+        onPaginationChange }, statefulTableOptions), { globalFilterFn: (_v = statefulTableOptions.filterFns) === null || _v === void 0 ? void 0 : _v[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
     table.refs = {
-        //@ts-ignore
+        actionCellRef,
         bottomToolbarRef,
         editInputRefs,
         filterInputRefs,
-        //@ts-ignore
         searchInputRef,
-        //@ts-ignore
         tableContainerRef,
-        //@ts-ignore
         tableFooterRef,
         tableHeadCellRefs,
-        //@ts-ignore
         tableHeadRef,
-        //@ts-ignore
         tablePaperRef,
-        //@ts-ignore
         topToolbarRef,
     };
+    table.setActionCell =
+        (_w = statefulTableOptions.onActionCellChange) !== null && _w !== void 0 ? _w : setActionCell;
     table.setCreatingRow = (row) => {
         var _a, _b;
         let _row = row;
         if (row === true) {
             _row = createRow(table);
         }
-        (_b = (_a = tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(tableOptions, _row)) !== null && _b !== void 0 ? _b : _setCreatingRow(_row);
+        (_b = (_a = statefulTableOptions === null || statefulTableOptions === void 0 ? void 0 : statefulTableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(statefulTableOptions, _row)) !== null && _b !== void 0 ? _b : _setCreatingRow(_row);
     };
     table.setColumnFilterFns =
-        (_v = tableOptions.onColumnFilterFnsChange) !== null && _v !== void 0 ? _v : setColumnFilterFns;
-    table.setDensity = (_w = tableOptions.onDensityChange) !== null && _w !== void 0 ? _w : setDensity;
+        (_x = statefulTableOptions.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns;
+    table.setDensity = (_y = statefulTableOptions.onDensityChange) !== null && _y !== void 0 ? _y : setDensity;
     table.setDraggingColumn =
-        (_x = tableOptions.onDraggingColumnChange) !== null && _x !== void 0 ? _x : setDraggingColumn;
-    table.setDraggingRow = (_y = tableOptions.onDraggingRowChange) !== null && _y !== void 0 ? _y : setDraggingRow;
-    table.setEditingCell = (_z = tableOptions.onEditingCellChange) !== null && _z !== void 0 ? _z : setEditingCell;
-    table.setEditingRow = (_0 = tableOptions.onEditingRowChange) !== null && _0 !== void 0 ? _0 : setEditingRow;
+        (_z = statefulTableOptions.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn;
+    table.setDraggingRow =
+        (_0 = statefulTableOptions.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow;
+    table.setEditingCell =
+        (_1 = statefulTableOptions.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell;
+    table.setEditingRow =
+        (_2 = statefulTableOptions.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow;
     table.setGlobalFilterFn =
-        (_1 = tableOptions.onGlobalFilterFnChange) !== null && _1 !== void 0 ? _1 : setGlobalFilterFn;
+        (_3 = statefulTableOptions.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn;
     table.setHoveredColumn =
-        (_2 = tableOptions.onHoveredColumnChange) !== null && _2 !== void 0 ? _2 : setHoveredColumn;
-    table.setHoveredRow = (_3 = tableOptions.onHoveredRowChange) !== null && _3 !== void 0 ? _3 : setHoveredRow;
-    table.setIsFullScreen = (_4 = tableOptions.onIsFullScreenChange) !== null && _4 !== void 0 ? _4 : setIsFullScreen;
+        (_4 = statefulTableOptions.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn;
+    table.setHoveredRow =
+        (_5 = statefulTableOptions.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow;
+    table.setIsFullScreen =
+        (_6 = statefulTableOptions.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen;
     table.setShowAlertBanner =
-        (_5 = tableOptions.onShowAlertBannerChange) !== null && _5 !== void 0 ? _5 : setShowAlertBanner;
+        (_7 = statefulTableOptions.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner;
     table.setShowColumnFilters =
-        (_6 = tableOptions.onShowColumnFiltersChange) !== null && _6 !== void 0 ? _6 : setShowColumnFilters;
+        (_8 = statefulTableOptions.onShowColumnFiltersChange) !== null && _8 !== void 0 ? _8 : setShowColumnFilters;
     table.setShowGlobalFilter =
-        (_7 = tableOptions.onShowGlobalFilterChange) !== null && _7 !== void 0 ? _7 : setShowGlobalFilter;
+        (_9 = statefulTableOptions.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter;
     table.setShowToolbarDropZone =
-        (_8 = tableOptions.onShowToolbarDropZoneChange) !== null && _8 !== void 0 ? _8 : setShowToolbarDropZone;
+        (_10 = statefulTableOptions.onShowToolbarDropZoneChange) !== null && _10 !== void 0 ? _10 : setShowToolbarDropZone;
     useMRT_Effects(table);
     return table;
 };
@@ -2148,7 +1849,7 @@ const MRT_CopyButton = (_a) => {
         row,
         table,
     })), rest);
-    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsxRuntime.jsx(Button__default["default"], Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) })));
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsxRuntime.jsx(Button__default["default"], Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', py: 0, textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) })));
 };
 
 const MRT_EditCellTextField = (_a) => {
@@ -2249,10 +1950,10 @@ const MRT_EditCellTextField = (_a) => {
 
 const MRT_TableBodyCell = (_a) => {
     var _b, _c, _d, _e, _f;
-    var { cell, measureElement, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
+    var { cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
     const theme = styles.useTheme();
-    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableEditing, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
-    const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
+    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
+    const { actionCell, columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -2325,9 +2026,7 @@ const MRT_TableBodyCell = (_a) => {
     const isColumnPinned = enableColumnPinning &&
         columnDef.columnDefType !== 'group' &&
         column.getIsPinned();
-    const isEditable = !cell.getIsPlaceholder() &&
-        parseFromValuesOrFunc(enableEditing, row) &&
-        parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
+    const isEditable = isCellEditable({ cell, table });
     const isEditing = isEditable &&
         !['custom', 'modal'].includes(editDisplayMode) &&
         (editDisplayMode === 'table' ||
@@ -2335,20 +2034,20 @@ const MRT_TableBodyCell = (_a) => {
             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
         !row.getIsGrouped();
     const isCreating = isEditable && createDisplayMode === 'row' && (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
+    const showClickToCopyButton = (parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
+        parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
+        !['context-menu', false].includes(
+        // @ts-ignore
+        parseFromValuesOrFunc(columnDef.enableClickToCopy, cell));
+    const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
+    const cellValueProps = {
+        cell,
+        table,
+    };
     const handleDoubleClick = (event) => {
         var _a;
         (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
-        if (isEditable && editDisplayMode === 'cell') {
-            setEditingCell(cell);
-            queueMicrotask(() => {
-                var _a;
-                const textField = editInputRefs.current[column.id];
-                if (textField) {
-                    textField.focus();
-                    (_a = textField.select) === null || _a === void 0 ? void 0 : _a.call(textField);
-                }
-            });
-        }
+        openEditingCell({ cell, table });
     };
     const handleDragEnter = (e) => {
         var _a;
@@ -2360,22 +2059,29 @@ const MRT_TableBodyCell = (_a) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const cellValueProps = {
-        cell,
-        table,
+    const handleContextMenu = (e) => {
+        var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
+        if (isRightClickable) {
+            e.preventDefault();
+            table.setActionCell(cell);
+            table.refs.actionCellRef.current = e.currentTarget;
+        }
     };
-    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, ref: (node) => {
-            if (node) {
-                measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
-            }
-        } }, tableCellProps, { onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
-                outline: (editDisplayMode === 'cell' && isEditable) ||
+    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined }, tableCellProps, { onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
+                outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
+                    (editDisplayMode === 'cell' && isEditable) ||
                     (editDisplayMode === 'table' && (isCreating || isEditing))
                     ? `1px solid ${theme.palette.grey[500]}`
                     : undefined,
-                outlineOffset: '-1px',
                 textOverflow: 'clip',
-            }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
+            }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isRightClickable
+                ? 'context-menu'
+                : isEditable && editDisplayMode === 'cell'
+                    ? 'pointer'
+                    : 'inherit', outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id
+                ? `1px solid ${theme.palette.grey[500]}`
+                : undefined, outlineOffset: '-1px', overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -2400,8 +2106,7 @@ const MRT_TableBodyCell = (_a) => {
                     rowRef,
                     staticRowIndex,
                     table,
-                })) : isCreating || isEditing ? (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-                    columnDef.enableClickToCopy !== false ? (jsxRuntime.jsx(MRT_CopyButton, { cell: cell, table: table, children: jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
+                })) : isCreating || isEditing ? (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table })) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (jsxRuntime.jsx(MRT_CopyButton, { cell: cell, table: table, children: jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
 };
 const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
@@ -2524,9 +2229,6 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
                         }
                         const props = {
                             cell,
-                            measureElement: !isDraggingRow && !isHoveredRow
-                                ? columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement
-                                : undefined,
                             numRows,
                             rowRef,
                             staticColumnIndex,
@@ -2620,89 +2322,426 @@ const MRT_TableBody = (_a) => {
                     return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                 }) })))] }));
 };
-const Memo_MRT_TableBody = react.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
+const Memo_MRT_TableBody = react.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
+
+const MRT_TableFooterCell = (_a) => {
+    var _b, _c, _d;
+    var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
+    const theme = styles.useTheme();
+    const { getState, options: { enableColumnPinning, muiTableFooterCellProps }, } = table;
+    const { density } = getState();
+    const { column } = footer;
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const isColumnPinned = enableColumnPinning &&
+        columnDef.columnDefType !== 'group' &&
+        column.getIsPinned();
+    const args = { column, table };
+    const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
+    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: columnDefType === 'group'
+            ? 'center'
+            : theme.direction === 'rtl'
+                ? 'right'
+                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, variant: "footer" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
+                ? '0.5rem'
+                : density === 'comfortable'
+                    ? '1rem'
+                    : '1.5rem', verticalAlign: 'top' }, getCommonMRTCellStyles({
+            column,
+            header: footer,
+            table,
+            tableCellProps,
+            theme,
+        })), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (footer.isPlaceholder
+            ? null
+            : (_d = (_c = parseFromValuesOrFunc(columnDef.Footer, {
+                column,
+                footer,
+                table,
+            })) !== null && _c !== void 0 ? _c : columnDef.footer) !== null && _d !== void 0 ? _d : null) })));
+};
+
+const MRT_TableFooterRow = (_a) => {
+    var _b;
+    var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
+    const { options: { layoutMode, muiTableFooterRowProps }, } = table;
+    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
+    // if no content in row, skip row
+    if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
+        !!header.column.columnDef.footer) ||
+        header.column.columnDef.Footer)))
+        return null;
+    const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterRowProps, {
+        footerGroup,
+        table,
+    })), rest);
+    return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: 'relative', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
+                let footer = footerOrVirtualFooter;
+                if (columnVirtualizer) {
+                    staticColumnIndex = footerOrVirtualFooter
+                        .index;
+                    footer = footerGroup.headers[staticColumnIndex];
+                }
+                return footer ? (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, staticColumnIndex: staticColumnIndex, table: table }, footer.id)) : null;
+            }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
+};
+
+const MRT_TableFooter = (_a) => {
+    var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
+    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
+    const { isFullScreen } = getState();
+    const tableFooterProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterProps, {
+        table,
+    })), rest);
+    const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
+    return (jsxRuntime.jsx(TableFooter__default["default"], Object.assign({}, tableFooterProps, { ref: (ref) => {
+            tableFooterRef.current = ref;
+            if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
+                // @ts-ignore
+                tableFooterProps.ref.current = ref;
+            }
+        }, sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
+                ? theme.palette.mode === 'light'
+                    ? `1px solid ${theme.palette.grey[300]}`
+                    : `1px solid ${theme.palette.grey[700]}`
+                : undefined, position: stickFooter ? 'sticky' : 'relative', zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsxRuntime.jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
+};
+
+const mrtFilterOptions = (localization) => [
+    {
+        divider: false,
+        label: localization.filterFuzzy,
+        option: 'fuzzy',
+        symbol: '≈',
+    },
+    {
+        divider: false,
+        label: localization.filterContains,
+        option: 'contains',
+        symbol: '*',
+    },
+    {
+        divider: false,
+        label: localization.filterStartsWith,
+        option: 'startsWith',
+        symbol: 'a',
+    },
+    {
+        divider: true,
+        label: localization.filterEndsWith,
+        option: 'endsWith',
+        symbol: 'z',
+    },
+    {
+        divider: false,
+        label: localization.filterEquals,
+        option: 'equals',
+        symbol: '=',
+    },
+    {
+        divider: true,
+        label: localization.filterNotEquals,
+        option: 'notEquals',
+        symbol: '≠',
+    },
+    {
+        divider: false,
+        label: localization.filterBetween,
+        option: 'between',
+        symbol: '⇿',
+    },
+    {
+        divider: true,
+        label: localization.filterBetweenInclusive,
+        option: 'betweenInclusive',
+        symbol: '⬌',
+    },
+    {
+        divider: false,
+        label: localization.filterGreaterThan,
+        option: 'greaterThan',
+        symbol: '>',
+    },
+    {
+        divider: false,
+        label: localization.filterGreaterThanOrEqualTo,
+        option: 'greaterThanOrEqualTo',
+        symbol: '≥',
+    },
+    {
+        divider: false,
+        label: localization.filterLessThan,
+        option: 'lessThan',
+        symbol: '<',
+    },
+    {
+        divider: true,
+        label: localization.filterLessThanOrEqualTo,
+        option: 'lessThanOrEqualTo',
+        symbol: '≤',
+    },
+    {
+        divider: false,
+        label: localization.filterEmpty,
+        option: 'empty',
+        symbol: '∅',
+    },
+    {
+        divider: false,
+        label: localization.filterNotEmpty,
+        option: 'notEmpty',
+        symbol: '!∅',
+    },
+];
+const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
+const emptyModes = ['empty', 'notEmpty'];
+const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
+const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
+const MRT_FilterOptionMenu = (_a) => {
+    var _b, _c, _d, _e;
+    var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
+    const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
+    const { density, globalFilterFn } = getState();
+    const { column } = header !== null && header !== void 0 ? header : {};
+    const { columnDef } = column !== null && column !== void 0 ? column : {};
+    const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
+    let allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
+    if (rangeVariants.includes(columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant)) {
+        allowedColumnFilterOptions = [
+            ...rangeModes,
+            ...(allowedColumnFilterOptions !== null && allowedColumnFilterOptions !== void 0 ? allowedColumnFilterOptions : []),
+        ].filter((option) => rangeModes.includes(option));
+    }
+    const internalFilterOptions = react.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
+        ? allowedColumnFilterOptions === undefined ||
+            (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
+        : (!globalFilterModeOptions ||
+            globalFilterModeOptions.includes(filterOption.option)) &&
+            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option)), []);
+    const handleSelectFilterMode = (option) => {
+        var _a, _b;
+        const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
+        if (!header || !column) {
+            // global filter mode
+            setGlobalFilterFn(option);
+        }
+        else if (option !== prevFilterMode) {
+            // column filter mode
+            setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
+            // reset filter value and/or perform new filter render
+            if (emptyModes.includes(option)) {
+                // will now be empty/notEmpty filter mode
+                if (currentFilterValue !== ' ' &&
+                    !emptyModes.includes(prevFilterMode)) {
+                    column.setFilterValue(' ');
+                }
+                else if (currentFilterValue) {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
+            }
+            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
+                arrModes.includes(option)) {
+                // will now be array filter mode
+                if (currentFilterValue instanceof String ||
+                    (currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length)) {
+                    column.setFilterValue([]);
+                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
+                }
+                else if (currentFilterValue) {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
+            }
+            else if (((_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
+                rangeModes.includes(option)) {
+                // will now be range filter mode
+                if (!Array.isArray(currentFilterValue) ||
+                    (!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === '')) &&
+                        !rangeModes.includes(prevFilterMode))) {
+                    column.setFilterValue(['', '']);
+                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
+                }
+                else {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
+            }
+            else {
+                // will now be single value filter mode
+                if (Array.isArray(currentFilterValue)) {
+                    column.setFilterValue('');
+                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
+                }
+                else if (currentFilterValue === ' ' &&
+                    emptyModes.includes(prevFilterMode)) {
+                    column.setFilterValue(undefined);
+                }
+                else {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
+            }
+        }
+        setAnchorEl(null);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
+    const theme = styles.useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
+    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
+            dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
+        }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
+            ? (_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
+                column: column,
+                internalFilterOptions,
+                onSelectFilterMode: handleSelectFilterMode,
+                table,
+            })) !== null && _d !== void 0 ? _d : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
+                column: column,
+                internalFilterOptions,
+                onSelectFilterMode: handleSelectFilterMode,
+                table,
+            })
+            : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
+                internalFilterOptions,
+                onSelectFilterMode: handleSelectFilterMode,
+                table,
+            }))) !== null && _e !== void 0 ? _e : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxRuntime.jsx(MRT_ActionMenuItem, { divider: divider, icon: symbol, label: label, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, table: table, value: option }, index))) })));
+};
 
-const MRT_TableFooterCell = (_a) => {
-    var _b, _c, _d;
-    var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
-    const theme = styles.useTheme();
-    const { getState, options: { enableColumnPinning, muiTableFooterCellProps }, } = table;
-    const { density } = getState();
-    const { column } = footer;
+const MRT_ColumnActionMenu = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
+    const { getState, getAllLeafColumns, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
+    const { column } = header;
     const { columnDef } = column;
-    const { columnDefType } = columnDef;
-    const isColumnPinned = enableColumnPinning &&
-        columnDef.columnDefType !== 'group' &&
-        column.getIsPinned();
-    const args = { column, table };
-    const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
-    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: columnDefType === 'group'
-            ? 'center'
-            : theme.direction === 'rtl'
-                ? 'right'
-                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, variant: "footer" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
-                ? '0.5rem'
-                : density === 'comfortable'
-                    ? '1rem'
-                    : '1.5rem', verticalAlign: 'top' }, getCommonMRTCellStyles({
+    const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
+    const columnFilterValue = column.getFilterValue();
+    const [filterMenuAnchorEl, setFilterMenuAnchorEl] = react.useState(null);
+    const handleClearSort = () => {
+        column.clearSorting();
+        setAnchorEl(null);
+    };
+    const handleSortAsc = () => {
+        column.toggleSorting(false);
+        setAnchorEl(null);
+    };
+    const handleSortDesc = () => {
+        column.toggleSorting(true);
+        setAnchorEl(null);
+    };
+    const handleResetColumnSize = () => {
+        setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
+        column.resetSize();
+        setAnchorEl(null);
+    };
+    const handleHideColumn = () => {
+        column.toggleVisibility(false);
+        setAnchorEl(null);
+    };
+    const handlePinColumn = (pinDirection) => {
+        column.pin(pinDirection);
+        setAnchorEl(null);
+    };
+    const handleGroupByColumn = () => {
+        column.toggleGrouping();
+        setColumnOrder((old) => ['mrt-row-expand', ...old]);
+        setAnchorEl(null);
+    };
+    const handleClearFilter = () => {
+        column.setFilterValue(undefined);
+        setAnchorEl(null);
+        if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
+            setColumnFilterFns((prev) => {
+                var _a;
+                return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
+            });
+        }
+    };
+    const handleFilterByColumn = () => {
+        setShowColumnFilters(true);
+        queueMicrotask(() => { var _a; return (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus(); });
+        setAnchorEl(null);
+    };
+    const handleShowAllColumns = () => {
+        getAllLeafColumns()
+            .filter((col) => col.columnDef.enableHiding !== false)
+            .forEach((col) => col.toggleVisibility(true));
+        setAnchorEl(null);
+    };
+    const handleOpenFilterModeMenu = (event) => {
+        event.stopPropagation();
+        setFilterMenuAnchorEl(event.currentTarget);
+    };
+    const isSelectFilter = !!columnDef.filterSelectOptions;
+    const allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
+    const showFilterModeSubMenu = enableColumnFilterModes &&
+        columnDef.enableColumnFilterModes !== false &&
+        !isSelectFilter &&
+        (allowedColumnFilterOptions === undefined ||
+            !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
+    const internalColumnMenuItems = [
+        ...(enableSorting && column.getCanSort()
+            ? [
+                enableSortingRemoval !== false && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(ClearAllIcon, {}), label: localization.clearSort, onClick: handleClearSort, table: table }, 0)),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'asc', icon: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }), label: (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header)), onClick: handleSortAsc, table: table }, 1),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, icon: jsxRuntime.jsx(SortIcon, {}), label: (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header)), onClick: handleSortDesc, table: table }, 2),
+            ]
+            : []),
+        ...(enableColumnFilters && column.getCanFilter()
+            ? [
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !columnFilterValue ||
+                        (Array.isArray(columnFilterValue) &&
+                            !columnFilterValue.filter((value) => value).length), icon: jsxRuntime.jsx(FilterListOffIcon, {}), label: localization.clearFilter, onClick: handleClearFilter, table: table }, 3),
+                columnFilterDisplayMode === 'subheader' && (jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, icon: jsxRuntime.jsx(FilterListIcon, {}), label: (_e = localization.filterByColumn) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header)), onClick: showColumnFilters
+                        ? handleOpenFilterModeMenu
+                        : handleFilterByColumn, onOpenSubMenu: showFilterModeSubMenu ? handleOpenFilterModeMenu : undefined, table: table }, 4)),
+                showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
+            ].filter(Boolean)
+            : []),
+        ...(enableGrouping && column.getCanGroup()
+            ? [
+                jsxRuntime.jsx(MRT_ActionMenuItem, { divider: enableColumnPinning, icon: jsxRuntime.jsx(DynamicFeedIcon, {}), label: (_f = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header)), onClick: handleGroupByColumn, table: table }, 6),
+            ]
+            : []),
+        ...(enableColumnPinning && column.getCanPin()
+            ? [
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), icon: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }), label: localization.pinToLeft, onClick: () => handlePinColumn('left'), table: table }, 7),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), icon: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }), label: localization.pinToRight, onClick: () => handlePinColumn('right'), table: table }, 8),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, icon: jsxRuntime.jsx(PushPinIcon, {}), label: localization.unpin, onClick: () => handlePinColumn(false), table: table }, 9),
+            ]
+            : []),
+        ...(enableColumnResizing && column.getCanResize()
+            ? [
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !columnSizing[column.id], icon: jsxRuntime.jsx(RestartAltIcon, {}), label: localization.resetColumnSize, onClick: handleResetColumnSize, table: table }, 10),
+            ]
+            : []),
+        ...(enableHiding
+            ? [
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !column.getCanHide(), icon: jsxRuntime.jsx(VisibilityOffIcon, {}), label: (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header)), onClick: handleHideColumn, table: table }, 11),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
+                        .length, icon: jsxRuntime.jsx(ViewColumnIcon, {}), label: (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header)), onClick: handleShowAllColumns, table: table }, 12),
+            ]
+            : []),
+    ].filter(Boolean);
+    const theme = styles.useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
+    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
+            dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
+        }, anchorEl: anchorEl, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
+            closeMenu: () => setAnchorEl(null),
             column,
-            header: footer,
+            internalColumnMenuItems,
             table,
-            tableCellProps,
-            theme,
-        })), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (footer.isPlaceholder
-            ? null
-            : (_d = (_c = parseFromValuesOrFunc(columnDef.Footer, {
-                column,
-                footer,
-                table,
-            })) !== null && _c !== void 0 ? _c : columnDef.footer) !== null && _d !== void 0 ? _d : null) })));
-};
-
-const MRT_TableFooterRow = (_a) => {
-    var _b;
-    var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
-    const { options: { layoutMode, muiTableFooterRowProps }, } = table;
-    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
-    // if no content in row, skip row
-    if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
-        !!header.column.columnDef.footer) ||
-        header.column.columnDef.Footer)))
-        return null;
-    const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterRowProps, {
-        footerGroup,
-        table,
-    })), rest);
-    return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: 'relative', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
-                let footer = footerOrVirtualFooter;
-                if (columnVirtualizer) {
-                    staticColumnIndex = footerOrVirtualFooter
-                        .index;
-                    footer = footerGroup.headers[staticColumnIndex];
-                }
-                return footer ? (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, staticColumnIndex: staticColumnIndex, table: table }, footer.id)) : null;
-            }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
-};
-
-const MRT_TableFooter = (_a) => {
-    var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
-    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
-    const { isFullScreen } = getState();
-    const tableFooterProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterProps, {
-        table,
-    })), rest);
-    const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (jsxRuntime.jsx(TableFooter__default["default"], Object.assign({}, tableFooterProps, { ref: (ref) => {
-            tableFooterRef.current = ref;
-            if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
-                // @ts-ignore
-                tableFooterProps.ref.current = ref;
-            }
-        }, sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
-                ? theme.palette.mode === 'light'
-                    ? `1px solid ${theme.palette.grey[300]}`
-                    : `1px solid ${theme.palette.grey[700]}`
-                : undefined, position: stickFooter ? 'sticky' : 'relative', zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsxRuntime.jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
+        })) !== null && _k !== void 0 ? _k : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
+            closeMenu: () => setAnchorEl(null),
+            column,
+            internalColumnMenuItems,
+            table,
+        })) !== null && _l !== void 0 ? _l : internalColumnMenuItems })));
 };
 
 const MRT_TableHeadCellColumnActionsButton = (_a) => {
@@ -3126,7 +3165,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
                             }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
                     horizontal: 'center',
                     vertical: 'top',
-                }, onClick: (event) => event.stopPropagation(), onClose: (event) => {
+                }, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: (event) => {
                     //@ts-ignore
                     event.stopPropagation();
                     setAnchorEl(null);
@@ -3247,7 +3286,7 @@ const MRT_TableHeadCellSortLabel = (_a) => {
 
 const MRT_TableHeadCell = (_a) => {
     var _b, _c, _d, _f, _g, _h;
-    var { header, staticColumnIndex, table } = _a, rest = __rest(_a, ["header", "staticColumnIndex", "table"]);
+    var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
     const theme = styles.useTheme();
     const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
@@ -3324,8 +3363,12 @@ const MRT_TableHeadCell = (_a) => {
             : theme.direction === 'rtl'
                 ? 'right'
                 : 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, ref: (node) => {
+            var _a;
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
+                if (columnDefType !== 'group') {
+                    (_a = columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement) === null || _a === void 0 ? void 0 : _a.call(columnVirtualizer, node);
+                }
             }
         } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ '& :hover': {
                 '.MuiButtonBase-root': {
@@ -3412,7 +3455,7 @@ const MRT_TableHeadRow = (_a) => {
                         .index;
                     header = headerGroup.headers[staticColumnIndex];
                 }
-                return header ? (jsxRuntime.jsx(MRT_TableHeadCell, { header: header, staticColumnIndex: staticColumnIndex, table: table }, header.id)) : null;
+                return header ? (jsxRuntime.jsx(MRT_TableHeadCell, { columnVirtualizer: columnVirtualizer, header: header, staticColumnIndex: staticColumnIndex, table: table }, header.id)) : null;
             }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
@@ -3525,6 +3568,52 @@ const MRT_TableLoadingOverlay = (_a) => {
         }), children: jsxRuntime.jsx(CircularProgress__default["default"], Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps)) }));
 };
 
+const MRT_CellActionMenu = (_a) => {
+    var _b, _c;
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
+    const { actionCell, density } = getState();
+    const cell = actionCell;
+    const { row } = cell;
+    const { column } = cell;
+    const { columnDef } = column;
+    const theme = styles.useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
+    const handleClose = (event) => {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        table.setActionCell(null);
+        actionCellRef.current = null;
+    };
+    const internalMenuItems = [
+        (parseFromValuesOrFunc(enableClickToCopy, cell) === 'context-menu' ||
+            parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
+                'context-menu') && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(ContentCopy, {}), label: localization.copy, onClick: (event) => {
+                event.stopPropagation();
+                navigator.clipboard.writeText(cell.getValue());
+                handleClose();
+            }, table: table }, 'mrt-copy')),
+        parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === 'cell' && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(EditIcon, {}), label: localization.edit, onClick: () => {
+                openEditingCell({ cell, table });
+                handleClose();
+            }, table: table }, 'mrt-edit')),
+    ].filter(Boolean);
+    const renderActionProps = {
+        cell,
+        closeMenu: handleClose,
+        column,
+        internalMenuItems,
+        row,
+        table,
+    };
+    const menuItems = (_c = (_b = columnDef.renderCellActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, renderActionProps)) !== null && _c !== void 0 ? _c : renderCellActionMenuItems === null || renderCellActionMenuItems === void 0 ? void 0 : renderCellActionMenuItems(renderActionProps);
+    return ((!!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) || !!(internalMenuItems === null || internalMenuItems === void 0 ? void 0 : internalMenuItems.length)) && (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
+            dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
+        }, anchorEl: actionCellRef.current, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: handleClose, open: !!cell, transformOrigin: { horizontal: -100, vertical: 8 } }, rest, { children: menuItems !== null && menuItems !== void 0 ? menuItems : internalMenuItems }))));
+};
+
 const MRT_EditRowModal = (_a) => {
     var _b;
     var { open, table } = _a, rest = __rest(_a, ["open", "table"]);
@@ -3569,8 +3658,8 @@ const MRT_EditRowModal = (_a) => {
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 const MRT_TableContainer = (_a) => {
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
-    const { creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay, } = getState();
+    const { getState, options: { createDisplayMode, editDisplayMode, enableCellActions, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
+    const { actionCell, creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay, } = getState();
     const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
     const [totalToolbarHeight, setTotalToolbarHeight] = react.useState(0);
     const tableContainerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableContainerProps, {
@@ -3600,7 +3689,7 @@ const MRT_TableContainer = (_a) => {
                 ? `calc(100vh - ${totalToolbarHeight}px)`
                 : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), sx: (theme) => (Object.assign({ maxHeight: enableStickyHeader
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
-                : undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? jsxRuntime.jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsxRuntime.jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsxRuntime.jsx(MRT_EditRowModal, { open: true, table: table }))] })));
+                : undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? jsxRuntime.jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsxRuntime.jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsxRuntime.jsx(MRT_EditRowModal, { open: true, table: table })), enableCellActions && actionCell && jsxRuntime.jsx(MRT_CellActionMenu, { table: table })] })));
 };
 
 const MRT_LinearProgressBar = (_a) => {
@@ -3848,7 +3937,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     pt: 0,
-                }, children: [enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsxRuntime.jsx(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enableColumnPinning && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsxRuntime.jsx(Divider__default["default"], {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
+                }, children: [enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsxRuntime.jsx(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsxRuntime.jsx(Divider__default["default"], {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -4065,6 +4154,7 @@ const MaterialReactTable = (props) => {
     return jsxRuntime.jsx(MRT_TablePaper, { table: table });
 };
 
+exports.MRT_ActionMenuItem = MRT_ActionMenuItem;
 exports.MRT_AggregationFns = MRT_AggregationFns;
 exports.MRT_BottomToolbar = MRT_BottomToolbar;
 exports.MRT_ColumnActionMenu = MRT_ColumnActionMenu;
@@ -4130,8 +4220,6 @@ exports.MaterialReactTable = MaterialReactTable;
 exports.Memo_MRT_TableBody = Memo_MRT_TableBody;
 exports.Memo_MRT_TableBodyCell = Memo_MRT_TableBodyCell;
 exports.Memo_MRT_TableBodyRow = Memo_MRT_TableBodyRow;
-exports.commonListItemStyles = commonListItemStyles;
-exports.commonMenuItemStyles = commonMenuItemStyles;
 exports.createMRTColumnHelper = createMRTColumnHelper;
 exports.createRow = createRow;
 exports.defaultDisplayColumnProps = defaultDisplayColumnProps;
@@ -4149,7 +4237,9 @@ exports.getIsRowSelected = getIsRowSelected;
 exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
 exports.getTotalRight = getTotalRight;
 exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
+exports.isCellEditable = isCellEditable;
 exports.mrtFilterOptions = mrtFilterOptions;
+exports.openEditingCell = openEditingCell;
 exports.prepareColumns = prepareColumns;
 exports.rankGlobalFuzzy = rankGlobalFuzzy;
 exports.reorderColumn = reorderColumn;