material-react-table 2.9.2 → 2.10.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { flexRender as flexRender$1, createRow as createRow$1, aggregationFns, filterFns, sortingFns, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-import { useMemo, useState, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { useState, useMemo, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -8,8 +8,8 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import { lighten, darken, alpha, useTheme } from '@mui/material/styles';
-import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
+import ListItemIcon from '@mui/material/ListItemIcon';
 import MenuItem from '@mui/material/MenuItem';
 import Stack from '@mui/material/Stack';
 import Checkbox from '@mui/material/Checkbox';
@@ -21,6 +21,7 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
+import ContentCopy from '@mui/icons-material/ContentCopy';
 import DensityLargeIcon from '@mui/icons-material/DensityLarge';
 import DensityMediumIcon from '@mui/icons-material/DensityMedium';
 import DensitySmallIcon from '@mui/icons-material/DensitySmall';
@@ -212,17 +213,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;
@@ -232,12 +274,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',
@@ -260,32 +302,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, }) => {
@@ -584,355 +615,19 @@ 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 = 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 = useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
-    return (jsx(Menu, 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) => (jsxs(MenuItem, { divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
-                alignItems: 'center',
-                display: 'flex',
-                gap: '2ch',
-                my: 0,
-                py: '6px',
-            }, value: option, children: [jsx(Box, { 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] = 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 && (jsx(MenuItem, { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
-                jsx(MenuItem, { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 1),
-                jsx(MenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, {}) }), (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }) }, 2),
-            ]
-            : []),
-        ...(enableColumnFilters && column.getCanFilter()
-            ? [
-                jsx(MenuItem, { disabled: !columnFilterValue ||
-                        (Array.isArray(columnFilterValue) &&
-                            !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
-                columnFilterDisplayMode === 'subheader' && (jsxs(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
-                        ? handleOpenFilterModeMenu
-                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_e = localization.filterByColumn) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] }, 4)),
-                showFilterModeSubMenu && (jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
-            ].filter(Boolean)
-            : []),
-        ...(enableGrouping && column.getCanGroup()
-            ? [
-                jsx(MenuItem, { divider: enableColumnPinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(DynamicFeedIcon, {}) }), (_f = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 6),
-            ]
-            : []),
-        ...(enableColumnPinning && column.getCanPin()
-            ? [
-                jsx(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 7),
-                jsx(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 8),
-                jsx(MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, {}) }), localization.unpin] }) }, 9),
-            ]
-            : []),
-        ...(enableColumnResizing && column.getCanResize()
-            ? [
-                jsx(MenuItem, { disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(RestartAltIcon, {}) }), localization.resetColumnSize] }) }, 10),
-            ]
-            : []),
-        ...(enableHiding
-            ? [
-                jsx(MenuItem, { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(VisibilityOffIcon, {}) }), (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }) }, 11),
-                jsx(MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
-                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ViewColumnIcon, {}) }), (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] }) }, 12),
-            ]
-            : []),
-    ].filter(Boolean);
-    const theme = useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
-    return (jsx(Menu, 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_ActionMenuItem = (_a) => {
+    var { icon, label, onOpenSubMenu, table } = _a, rest = __rest(_a, ["icon", "label", "onOpenSubMenu", "table"]);
+    const { options: { icons: { ArrowRightIcon }, }, } = table;
+    return (jsxs(MenuItem, Object.assign({ sx: {
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            minWidth: '120px',
+            my: 0,
+            py: '6px',
+        } }, rest, { children: [jsxs(Box, { sx: {
+                    alignItems: 'center',
+                    display: 'flex',
+                }, children: [jsx(ListItemIcon, { children: icon }), label] }), onOpenSubMenu && (jsx(IconButton, { onClick: onOpenSubMenu, onMouseEnter: onOpenSubMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] })));
 };
 
 const MRT_RowActionMenu = (_a) => {
@@ -947,7 +642,7 @@ const MRT_RowActionMenu = (_a) => {
                 backgroundColor: menuBackgroundColor,
             },
         }, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) &&
-                ['modal', 'row'].includes(editDisplayMode) && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+                ['modal', 'row'].includes(editDisplayMode) && (jsx(MRT_ActionMenuItem, { icon: jsx(EditIcon, {}), label: localization.edit, onClick: handleEdit, table: table })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
                 closeMenu: () => setAnchorEl(null),
                 row,
                 staticRowIndex,
@@ -990,9 +685,6 @@ const MRT_ToggleRowActionMenuButton = (_a) => {
 };
 
 const getMRT_RowActionsColumnDef = (tableOptions) => {
-    if (!showRowActionsColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign({ Cell: ({ cell, row, staticRowIndex, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, staticRowIndex: staticRowIndex, table: table })) }, defaultDisplayColumnProps({
         header: 'actions',
         id: 'mrt-row-actions',
@@ -1046,9 +738,6 @@ const MRT_TableBodyRowGrabHandle = (_a) => {
 };
 
 const getMRT_RowDragColumnDef = (tableOptions) => {
-    if (!showRowDragColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), grow: false }, defaultDisplayColumnProps({
         header: 'move',
         id: 'mrt-row-drag',
@@ -1108,9 +797,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'
         ? {
@@ -1148,9 +834,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 }) => {
@@ -1204,9 +887,6 @@ const MRT_TableBodyRowPinButton = (_a) => {
 };
 
 const getMRT_RowPinningColumnDef = (tableOptions) => {
-    if (!showRowPinningColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign({ Cell: ({ row, table }) => (jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), grow: false }, defaultDisplayColumnProps({
         header: 'pin',
         id: 'mrt-row-pin',
@@ -1278,9 +958,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 }) => (jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: enableSelectAll && enableMultiRowSelection
             ? ({ table }) => jsx(MRT_SelectCheckbox, { table: table })
@@ -1300,6 +977,7 @@ const MRT_Default_Icons = {
     ChevronRightIcon,
     ClearAllIcon,
     CloseIcon,
+    ContentCopy,
     DensityLargeIcon,
     DensityMediumIcon,
     DensitySmallIcon,
@@ -1338,6 +1016,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',
@@ -1552,9 +1231,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,
@@ -1562,21 +1238,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 = useReducer(() => ({}), {})[1];
     const isMounted = useRef(false);
@@ -1640,10 +1305,22 @@ const useMRT_Effects = (table) => {
             }, 150);
         }
     }, [density]);
+    //recalculate column order when columns change or features are toggled on/off
+    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 = useRef(null);
     const bottomToolbarRef = useRef(null);
     const editInputRefs = useRef({});
     const filterInputRefs = useRef({});
@@ -1654,17 +1331,19 @@ const useMRT_TableInstance = (_tableOptions) => {
     const topToolbarRef = useRef(null);
     const tableHeadRef = useRef(null);
     const tableFooterRef = useRef(null);
+    //transform initial state with proper column order
     const initialState = 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] = useState((_a = initialState.creatingRow) !== null && _a !== void 0 ? _a : null);
-    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(_tableOptions.columns).map((col) => {
+    definedTableOptions.initialState = initialState;
+    const [actionCell, setActionCell] = useState((_a = initialState.actionCell) !== null && _a !== void 0 ? _a : null);
+    const [creatingRow, _setCreatingRow] = useState((_b = initialState.creatingRow) !== null && _b !== void 0 ? _b : null);
+    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(definedTableOptions.columns).map((col) => {
         var _a, _b, _c, _d;
         return ({
             [getColumnId(col)]: col.filterFn instanceof Function
@@ -1672,24 +1351,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] = useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
-    const [columnSizingInfo, onColumnSizingInfoChange] = useState((_c = initialState.columnSizingInfo) !== null && _c !== void 0 ? _c : {});
-    const [density, setDensity] = useState((_d = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _d !== void 0 ? _d : 'comfortable');
-    const [draggingColumn, setDraggingColumn] = useState((_e = initialState.draggingColumn) !== null && _e !== void 0 ? _e : null);
-    const [draggingRow, setDraggingRow] = useState((_f = initialState.draggingRow) !== null && _f !== void 0 ? _f : null);
-    const [editingCell, setEditingCell] = useState((_g = initialState.editingCell) !== null && _g !== void 0 ? _g : null);
-    const [editingRow, setEditingRow] = useState((_h = initialState.editingRow) !== null && _h !== void 0 ? _h : null);
-    const [globalFilterFn, setGlobalFilterFn] = useState((_j = initialState.globalFilterFn) !== null && _j !== void 0 ? _j : 'fuzzy');
-    const [grouping, onGroupingChange] = useState((_k = initialState.grouping) !== null && _k !== void 0 ? _k : []);
-    const [hoveredColumn, setHoveredColumn] = useState((_l = initialState.hoveredColumn) !== null && _l !== void 0 ? _l : null);
-    const [hoveredRow, setHoveredRow] = useState((_m = initialState.hoveredRow) !== null && _m !== void 0 ? _m : null);
-    const [isFullScreen, setIsFullScreen] = useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _o !== void 0 ? _o : false);
-    const [pagination, onPaginationChange] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _p !== void 0 ? _p : { pageIndex: 0, pageSize: 10 });
-    const [showAlertBanner, setShowAlertBanner] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _q !== void 0 ? _q : false);
-    const [showColumnFilters, setShowColumnFilters] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _r !== void 0 ? _r : false);
-    const [showGlobalFilter, setShowGlobalFilter] = useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _s !== void 0 ? _s : false);
-    const [showToolbarDropZone, setShowToolbarDropZone] = 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] = useState((_c = initialState.columnOrder) !== null && _c !== void 0 ? _c : []);
+    const [columnSizingInfo, onColumnSizingInfoChange] = useState((_d = initialState.columnSizingInfo) !== null && _d !== void 0 ? _d : {});
+    const [density, setDensity] = useState((_e = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _e !== void 0 ? _e : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = useState((_f = initialState.draggingColumn) !== null && _f !== void 0 ? _f : null);
+    const [draggingRow, setDraggingRow] = useState((_g = initialState.draggingRow) !== null && _g !== void 0 ? _g : null);
+    const [editingCell, setEditingCell] = useState((_h = initialState.editingCell) !== null && _h !== void 0 ? _h : null);
+    const [editingRow, setEditingRow] = useState((_j = initialState.editingRow) !== null && _j !== void 0 ? _j : null);
+    const [globalFilterFn, setGlobalFilterFn] = useState((_k = initialState.globalFilterFn) !== null && _k !== void 0 ? _k : 'fuzzy');
+    const [grouping, onGroupingChange] = useState((_l = initialState.grouping) !== null && _l !== void 0 ? _l : []);
+    const [hoveredColumn, setHoveredColumn] = useState((_m = initialState.hoveredColumn) !== null && _m !== void 0 ? _m : null);
+    const [hoveredRow, setHoveredRow] = useState((_o = initialState.hoveredRow) !== null && _o !== void 0 ? _o : null);
+    const [isFullScreen, setIsFullScreen] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _p !== void 0 ? _p : false);
+    const [pagination, onPaginationChange] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _q !== void 0 ? _q : { pageIndex: 0, pageSize: 10 });
+    const [showAlertBanner, setShowAlertBanner] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _r !== void 0 ? _r : false);
+    const [showColumnFilters, setShowColumnFilters] = useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _s !== void 0 ? _s : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_t = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _t !== void 0 ? _t : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = 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,
@@ -1707,90 +1387,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 = 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 = 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 = 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 = 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;
 };
@@ -2059,7 +1759,7 @@ const MRT_CopyButton = (_a) => {
         row,
         table,
     })), rest);
-    return (jsx(Tooltip, 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: jsx(Button, 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 (jsx(Tooltip, 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: jsx(Button, 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) => {
@@ -2160,10 +1860,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 = 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;
@@ -2236,9 +1936,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' ||
@@ -2246,20 +1944,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;
@@ -2271,22 +1969,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 (jsx(TableCell, 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 (jsx(TableCell, 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'
@@ -2311,8 +2016,7 @@ const MRT_TableBodyCell = (_a) => {
                     rowRef,
                     staticRowIndex,
                     table,
-                })) : isCreating || isEditing ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-                    columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
+                })) : isCreating || isEditing ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
 };
 const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
@@ -2435,9 +2139,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,
@@ -2531,89 +2232,426 @@ const MRT_TableBody = (_a) => {
                     return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                 }) })))] }));
 };
-const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
+const Memo_MRT_TableBody = 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 = 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 (jsx(TableCell, 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 (jsxs(TableRow, 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 ? (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 ? (jsx(MRT_TableFooterCell, { footer: footer, staticColumnIndex: staticColumnIndex, table: table }, footer.id)) : null;
+            }), virtualPaddingRight ? (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 (jsx(TableFooter, 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) => (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 = 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 = useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
+    return (jsx(Menu, 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) => (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 = 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 (jsx(TableCell, 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] = 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 && (jsx(MRT_ActionMenuItem, { icon: jsx(ClearAllIcon, {}), label: localization.clearSort, onClick: handleClearSort, table: table }, 0)),
+                jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'asc', icon: 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),
+                jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, icon: 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()
+            ? [
+                jsx(MRT_ActionMenuItem, { disabled: !columnFilterValue ||
+                        (Array.isArray(columnFilterValue) &&
+                            !columnFilterValue.filter((value) => value).length), icon: jsx(FilterListOffIcon, {}), label: localization.clearFilter, onClick: handleClearFilter, table: table }, 3),
+                columnFilterDisplayMode === 'subheader' && (jsx(MRT_ActionMenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, icon: 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 && (jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
+            ].filter(Boolean)
+            : []),
+        ...(enableGrouping && column.getCanGroup()
+            ? [
+                jsx(MRT_ActionMenuItem, { divider: enableColumnPinning, icon: 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()
+            ? [
+                jsx(MRT_ActionMenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), icon: jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }), label: localization.pinToLeft, onClick: () => handlePinColumn('left'), table: table }, 7),
+                jsx(MRT_ActionMenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), icon: jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }), label: localization.pinToRight, onClick: () => handlePinColumn('right'), table: table }, 8),
+                jsx(MRT_ActionMenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, icon: jsx(PushPinIcon, {}), label: localization.unpin, onClick: () => handlePinColumn(false), table: table }, 9),
+            ]
+            : []),
+        ...(enableColumnResizing && column.getCanResize()
+            ? [
+                jsx(MRT_ActionMenuItem, { disabled: !columnSizing[column.id], icon: jsx(RestartAltIcon, {}), label: localization.resetColumnSize, onClick: handleResetColumnSize, table: table }, 10),
+            ]
+            : []),
+        ...(enableHiding
+            ? [
+                jsx(MRT_ActionMenuItem, { disabled: !column.getCanHide(), icon: jsx(VisibilityOffIcon, {}), label: (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header)), onClick: handleHideColumn, table: table }, 11),
+                jsx(MRT_ActionMenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
+                        .length, icon: 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 = useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
+    return (jsx(Menu, 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 (jsxs(TableRow, 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 ? (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 ? (jsx(MRT_TableFooterCell, { footer: footer, staticColumnIndex: staticColumnIndex, table: table }, footer.id)) : null;
-            }), virtualPaddingRight ? (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 (jsx(TableFooter, 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) => (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) => {
@@ -3037,7 +3075,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: jsx(FilterAltIcon, {}) })) }) }) }), jsx(Popover, { 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);
@@ -3158,7 +3196,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 = 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();
@@ -3235,8 +3273,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': {
@@ -3323,7 +3365,7 @@ const MRT_TableHeadRow = (_a) => {
                         .index;
                     header = headerGroup.headers[staticColumnIndex];
                 }
-                return header ? (jsx(MRT_TableHeadCell, { header: header, staticColumnIndex: staticColumnIndex, table: table }, header.id)) : null;
+                return header ? (jsx(MRT_TableHeadCell, { columnVirtualizer: columnVirtualizer, header: header, staticColumnIndex: staticColumnIndex, table: table }, header.id)) : null;
             }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
@@ -3436,6 +3478,52 @@ const MRT_TableLoadingOverlay = (_a) => {
         }), children: jsx(CircularProgress, 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 = 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') && (jsx(MRT_ActionMenuItem, { icon: jsx(ContentCopy, {}), label: localization.copy, onClick: (event) => {
+                event.stopPropagation();
+                navigator.clipboard.writeText(cell.getValue());
+                handleClose();
+            }, table: table }, 'mrt-copy')),
+        parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === 'cell' && (jsx(MRT_ActionMenuItem, { icon: 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)) && (jsx(Menu, 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"]);
@@ -3480,8 +3568,8 @@ const MRT_EditRowModal = (_a) => {
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : 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] = useState(0);
     const tableContainerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableContainerProps, {
@@ -3511,7 +3599,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 ? jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (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 ? jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table })), enableCellActions && actionCell && jsx(MRT_CellActionMenu, { table: table })] })));
 };
 
 const MRT_LinearProgressBar = (_a) => {
@@ -3759,7 +3847,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     pt: 0,
-                }, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
+                }, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -3976,5 +4064,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getIsRowSelected, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getIsRowSelected, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
 //# sourceMappingURL=index.esm.js.map