material-react-table 2.9.2 → 2.11.0

package/dist/index.js

@@ -12,8 +12,8 @@ var Box = require('@mui/material/Box');
 var Button = require('@mui/material/Button');
 var CircularProgress = require('@mui/material/CircularProgress');
 var styles = require('@mui/material/styles');
-var ListItemIcon = require('@mui/material/ListItemIcon');
 var Menu = require('@mui/material/Menu');
+var ListItemIcon = require('@mui/material/ListItemIcon');
 var MenuItem = require('@mui/material/MenuItem');
 var Stack = require('@mui/material/Stack');
 var Checkbox = require('@mui/material/Checkbox');
@@ -25,6 +25,7 @@ var ChevronLeftIcon = require('@mui/icons-material/ChevronLeft');
 var ChevronRightIcon = require('@mui/icons-material/ChevronRight');
 var ClearAllIcon = require('@mui/icons-material/ClearAll');
 var CloseIcon = require('@mui/icons-material/Close');
+var ContentCopy = require('@mui/icons-material/ContentCopy');
 var DensityLargeIcon = require('@mui/icons-material/DensityLarge');
 var DensityMediumIcon = require('@mui/icons-material/DensityMedium');
 var DensitySmallIcon = require('@mui/icons-material/DensitySmall');
@@ -102,8 +103,8 @@ var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
-var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
 var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
+var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
 var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
 var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
 var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
@@ -115,6 +116,7 @@ var ChevronLeftIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeftIco
 var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
 var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
 var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
+var ContentCopy__default = /*#__PURE__*/_interopDefaultLegacy(ContentCopy);
 var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
 var DensityMediumIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityMediumIcon);
 var DensitySmallIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensitySmallIcon);
@@ -248,13 +250,12 @@ const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
     return newColumnOrder;
 };
 const getDefaultColumnFilterFn = (columnDef) => {
-    var _a;
-    if (columnDef.filterVariant === 'multi-select')
+    const { filterVariant } = columnDef;
+    if (filterVariant === 'multi-select')
         return 'arrIncludesSome';
-    if ((_a = columnDef.filterVariant) === null || _a === void 0 ? void 0 : _a.includes('range'))
+    if (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range'))
         return 'betweenInclusive';
-    if (columnDef.filterVariant === 'select' ||
-        columnDef.filterVariant === 'checkbox')
+    if (filterVariant === 'select' || filterVariant === 'checkbox')
         return 'equals';
     return 'fuzzy';
 };
@@ -301,32 +302,73 @@ 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;
     return !!(enableExpanding ||
-        (enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
+        (enableGrouping && (grouping === null || grouping === void 0 ? void 0 : grouping.length)) ||
         renderDetailPanel);
 };
 const showRowActionsColumn = (tableOptions) => {
     const { createDisplayMode, editDisplayMode, enableEditing, enableRowActions, state: { creatingRow }, } = tableOptions;
-    return (enableRowActions ||
+    return !!(enableRowActions ||
         (creatingRow && createDisplayMode === 'row') ||
         (enableEditing && ['modal', 'row'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')));
 };
-const showRowSelectionColumn = (tableOptions) => tableOptions.enableRowSelection;
-const showRowNumbersColumn = (tableOptions) => tableOptions.enableRowNumbers;
+const showRowSelectionColumn = (tableOptions) => !!tableOptions.enableRowSelection;
+const showRowNumbersColumn = (tableOptions) => !!tableOptions.enableRowNumbers;
 const showRowSpacerColumn = (tableOptions) => tableOptions.layoutMode === 'grid-no-grow';
 const getLeadingDisplayColumnIds = (tableOptions) => [
     showRowPinningColumn(tableOptions) && 'mrt-row-pin',
@@ -349,44 +391,82 @@ 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 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 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;
-        }
+const fuzzy$1 = (rowA, rowB, columnId) => {
+    let dir = 0;
+    if (rowA.columnFiltersMeta[columnId]) {
+        dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
     }
-    return { label, value };
+    // Provide a fallback for when the item ranks are equal
+    return dir === 0
+        ? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId)
+        : dir;
 };
+const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), { fuzzy: fuzzy$1 });
+const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
+    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
 
-const getIsRowSelected = ({ row, table, }) => {
-    const { options: { enableRowSelection }, } = table;
-    return (row.getIsSelected() ||
-        (parseFromValuesOrFunc(enableRowSelection, row) &&
-            row.getCanSelectSubRows() &&
-            row.getIsAllSubRowsSelected()));
+const getMRT_Rows = (table, pinnedRowIds = [], all) => {
+    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
+    const { creatingRow, pagination } = getState();
+    const isRankingRows = getIsRankingRows(table);
+    let rows = [];
+    if (!isRankingRows) {
+        rows =
+            !enableRowPinning || (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))
+                ? all
+                    ? getPrePaginationRowModel().rows
+                    : getRowModel().rows
+                : getCenterRows();
+    }
+    else {
+        rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
+        if (enablePagination && !manualPagination && !all) {
+            const start = pagination.pageIndex * pagination.pageSize;
+            rows = rows.slice(start, start + pagination.pageSize);
+        }
+    }
+    if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
+        rows = [
+            ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
+            ...rows,
+            ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
+        ];
+    }
+    if (positionCreatingRow !== undefined &&
+        creatingRow &&
+        createDisplayMode === 'row') {
+        const creatingRowIndex = !isNaN(+positionCreatingRow)
+            ? +positionCreatingRow
+            : positionCreatingRow === 'top'
+                ? 0
+                : rows.length;
+        rows = [
+            ...rows.slice(0, creatingRowIndex),
+            creatingRow,
+            ...rows.slice(creatingRowIndex),
+        ];
+    }
+    return rows;
 };
 const getCanRankRows = (table) => {
-    const { getState, options } = table;
-    const { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, } = options;
+    const { getState, options: { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, }, } = table;
     const { expanded, globalFilterFn } = getState();
     return (!manualExpanding &&
         !manualFiltering &&
@@ -397,17 +477,67 @@ const getCanRankRows = (table) => {
         expanded !== true &&
         !Object.values(expanded).some(Boolean));
 };
+const getIsRankingRows = (table) => {
+    const { globalFilter, sorting } = table.getState();
+    return (getCanRankRows(table) &&
+        globalFilter &&
+        !Object.values(sorting).some(Boolean));
+};
+const getIsRowSelected = ({ row, table, }) => {
+    const { options: { enableRowSelection }, } = table;
+    return (row.getIsSelected() ||
+        (parseFromValuesOrFunc(enableRowSelection, row) &&
+            row.getCanSelectSubRows() &&
+            row.getIsAllSubRowsSelected()));
+};
+const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, table, }) => {
+    var _a;
+    const { getState, options: { enableBatchRowSelection, enableRowPinning, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
+    const { pagination: { pageIndex, pageSize }, } = getState();
+    const isChecked = getIsRowSelected({ row, table });
+    const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
+    // toggle selected of this row
+    row.getToggleSelectedHandler()(event);
+    // if shift key is pressed, select all rows between last selected and this one
+    if (enableBatchRowSelection &&
+        event.nativeEvent.shiftKey &&
+        lastSelectedRowId.current !== null) {
+        const rows = getMRT_Rows(table, undefined, true);
+        const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
+        if (lastIndex !== -1) {
+            const currentIndex = staticRowIndex + pageSize * pageIndex;
+            const [start, end] = lastIndex < currentIndex
+                ? [lastIndex, currentIndex]
+                : [currentIndex, lastIndex];
+            for (let i = start; i <= end; i++) {
+                rows[i].toggleSelected(!isChecked);
+            }
+        }
+    }
+    lastSelectedRowId.current = row.id;
+    // if all sub rows were selected, unselect them
+    if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
+        (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
+    }
+    if (isStickySelection) {
+        row.pin(!row.getIsPinned() && isChecked
+            ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
+                ? 'bottom'
+                : 'top'
+            : false);
+    }
+};
 
 const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
 
-const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
+const fuzzy = (row, columnId, filterValue, addMeta) => {
     const itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
         threshold: matchSorterUtils.rankings.MATCHES,
     });
     addMeta(itemRank);
     return itemRank.passed;
 };
-fuzzy$1.autoRemove = (val) => !val;
+fuzzy.autoRemove = (val) => !val;
 const contains = (row, id, filterValue) => row
     .getValue(id)
     .toString()
@@ -475,7 +605,7 @@ const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { b
     empty,
     endsWith,
     equals,
-    fuzzy: fuzzy$1,
+    fuzzy,
     greaterThan,
     greaterThanOrEqualTo,
     lessThan,
@@ -484,20 +614,6 @@ const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { b
     notEquals,
     startsWith });
 
-const fuzzy = (rowA, rowB, columnId) => {
-    let dir = 0;
-    if (rowA.columnFiltersMeta[columnId]) {
-        dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-    }
-    // Provide a fallback for when the item ranks are equal
-    return dir === 0
-        ? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId)
-        : dir;
-};
-const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), { fuzzy });
-const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
-    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -673,380 +789,44 @@ const getCommonTooltipProps = (placement) => ({
     placement,
 });
 
-const mrtFilterOptions = (localization) => [
-    {
-        divider: false,
-        label: localization.filterFuzzy,
-        option: 'fuzzy',
-        symbol: '≈',
-    },
-    {
-        divider: false,
-        label: localization.filterContains,
-        option: 'contains',
-        symbol: '*',
-    },
-    {
-        divider: false,
-        label: localization.filterStartsWith,
-        option: 'startsWith',
-        symbol: 'a',
-    },
-    {
-        divider: true,
-        label: localization.filterEndsWith,
-        option: 'endsWith',
-        symbol: 'z',
-    },
-    {
-        divider: false,
-        label: localization.filterEquals,
-        option: 'equals',
-        symbol: '=',
-    },
-    {
-        divider: true,
-        label: localization.filterNotEquals,
-        option: 'notEquals',
-        symbol: '≠',
-    },
-    {
-        divider: false,
-        label: localization.filterBetween,
-        option: 'between',
-        symbol: '⇿',
-    },
-    {
-        divider: true,
-        label: localization.filterBetweenInclusive,
-        option: 'betweenInclusive',
-        symbol: '⬌',
-    },
-    {
-        divider: false,
-        label: localization.filterGreaterThan,
-        option: 'greaterThan',
-        symbol: '>',
-    },
-    {
-        divider: false,
-        label: localization.filterGreaterThanOrEqualTo,
-        option: 'greaterThanOrEqualTo',
-        symbol: '≥',
-    },
-    {
-        divider: false,
-        label: localization.filterLessThan,
-        option: 'lessThan',
-        symbol: '<',
-    },
-    {
-        divider: true,
-        label: localization.filterLessThanOrEqualTo,
-        option: 'lessThanOrEqualTo',
-        symbol: '≤',
-    },
-    {
-        divider: false,
-        label: localization.filterEmpty,
-        option: 'empty',
-        symbol: '∅',
-    },
-    {
-        divider: false,
-        label: localization.filterNotEmpty,
-        option: 'notEmpty',
-        symbol: '!∅',
-    },
-];
-const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
-const emptyModes = ['empty', 'notEmpty'];
-const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
-const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
-const MRT_FilterOptionMenu = (_a) => {
-    var _b, _c, _d, _e;
-    var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
-    const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
-    const { density, globalFilterFn } = getState();
-    const { column } = header !== null && header !== void 0 ? header : {};
-    const { columnDef } = column !== null && column !== void 0 ? column : {};
-    const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
-    let allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
-    if (rangeVariants.includes(columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant)) {
-        allowedColumnFilterOptions = [
-            ...rangeModes,
-            ...(allowedColumnFilterOptions !== null && allowedColumnFilterOptions !== void 0 ? allowedColumnFilterOptions : []),
-        ].filter((option) => rangeModes.includes(option));
-    }
-    const internalFilterOptions = react.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
-        ? allowedColumnFilterOptions === undefined ||
-            (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
-        : (!globalFilterModeOptions ||
-            globalFilterModeOptions.includes(filterOption.option)) &&
-            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option)), []);
-    const handleSelectFilterMode = (option) => {
-        var _a, _b;
-        const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
-        if (!header || !column) {
-            // global filter mode
-            setGlobalFilterFn(option);
-        }
-        else if (option !== prevFilterMode) {
-            // column filter mode
-            setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
-            // reset filter value and/or perform new filter render
-            if (emptyModes.includes(option)) {
-                // will now be empty/notEmpty filter mode
-                if (currentFilterValue !== ' ' &&
-                    !emptyModes.includes(prevFilterMode)) {
-                    column.setFilterValue(' ');
-                }
-                else if (currentFilterValue) {
-                    column.setFilterValue(currentFilterValue); // perform new filter render
-                }
-            }
-            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
-                arrModes.includes(option)) {
-                // will now be array filter mode
-                if (currentFilterValue instanceof String ||
-                    (currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length)) {
-                    column.setFilterValue([]);
-                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
-                }
-                else if (currentFilterValue) {
-                    column.setFilterValue(currentFilterValue); // perform new filter render
-                }
-            }
-            else if (((_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
-                rangeModes.includes(option)) {
-                // will now be range filter mode
-                if (!Array.isArray(currentFilterValue) ||
-                    (!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === '')) &&
-                        !rangeModes.includes(prevFilterMode))) {
-                    column.setFilterValue(['', '']);
-                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
-                }
-                else {
-                    column.setFilterValue(currentFilterValue); // perform new filter render
-                }
-            }
-            else {
-                // will now be single value filter mode
-                if (Array.isArray(currentFilterValue)) {
-                    column.setFilterValue('');
-                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
-                }
-                else if (currentFilterValue === ' ' &&
-                    emptyModes.includes(prevFilterMode)) {
-                    column.setFilterValue(undefined);
-                }
-                else {
-                    column.setFilterValue(currentFilterValue); // perform new filter render
-                }
-            }
-        }
-        setAnchorEl(null);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
-    };
-    const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
-    const theme = styles.useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
-    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
-            dense: density === 'compact',
-            sx: {
-                backgroundColor: menuBackgroundColor,
-            },
-        }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
-            ? (_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
-                column: column,
-                internalFilterOptions,
-                onSelectFilterMode: handleSelectFilterMode,
-                table,
-            })) !== null && _d !== void 0 ? _d : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
-                column: column,
-                internalFilterOptions,
-                onSelectFilterMode: handleSelectFilterMode,
-                table,
-            })
-            : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
-                internalFilterOptions,
-                onSelectFilterMode: handleSelectFilterMode,
-                table,
-            }))) !== null && _e !== void 0 ? _e : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxRuntime.jsxs(MenuItem__default["default"], { divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
-                alignItems: 'center',
-                display: 'flex',
-                gap: '2ch',
-                my: 0,
-                py: '6px',
-            }, value: option, children: [jsxRuntime.jsx(Box__default["default"], { sx: { fontSize: '1.25rem', width: '2ch' }, children: symbol }), label] }, index))) })));
-};
-
-const commonMenuItemStyles = {
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    my: 0,
-    py: '6px',
-};
-const commonListItemStyles = {
-    alignItems: 'center',
-    display: 'flex',
-};
-const MRT_ColumnActionMenu = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
-    const { getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, toggleAllColumnsVisible, } = table;
-    const { column } = header;
-    const { columnDef } = column;
-    const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
-    const columnFilterValue = column.getFilterValue();
-    const [filterMenuAnchorEl, setFilterMenuAnchorEl] = react.useState(null);
-    const handleClearSort = () => {
-        column.clearSorting();
-        setAnchorEl(null);
-    };
-    const handleSortAsc = () => {
-        column.toggleSorting(false);
-        setAnchorEl(null);
-    };
-    const handleSortDesc = () => {
-        column.toggleSorting(true);
-        setAnchorEl(null);
-    };
-    const handleResetColumnSize = () => {
-        setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
-        column.resetSize();
-        setAnchorEl(null);
-    };
-    const handleHideColumn = () => {
-        column.toggleVisibility(false);
-        setAnchorEl(null);
-    };
-    const handlePinColumn = (pinDirection) => {
-        column.pin(pinDirection);
-        setAnchorEl(null);
-    };
-    const handleGroupByColumn = () => {
-        column.toggleGrouping();
-        setColumnOrder((old) => ['mrt-row-expand', ...old]);
-        setAnchorEl(null);
-    };
-    const handleClearFilter = () => {
-        column.setFilterValue(undefined);
-        setAnchorEl(null);
-        if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
-            setColumnFilterFns((prev) => {
-                var _a;
-                return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
-            });
-        }
-    };
-    const handleFilterByColumn = () => {
-        setShowColumnFilters(true);
-        queueMicrotask(() => { var _a; return (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus(); });
-        setAnchorEl(null);
-    };
-    const handleShowAllColumns = () => {
-        toggleAllColumnsVisible(true);
-        setAnchorEl(null);
-    };
-    const handleOpenFilterModeMenu = (event) => {
-        event.stopPropagation();
-        setFilterMenuAnchorEl(event.currentTarget);
-    };
-    const isSelectFilter = !!columnDef.filterSelectOptions;
-    const allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
-    const showFilterModeSubMenu = enableColumnFilterModes &&
-        columnDef.enableColumnFilterModes !== false &&
-        !isSelectFilter &&
-        (allowedColumnFilterOptions === undefined ||
-            !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
-    const internalColumnMenuItems = [
-        ...(enableSorting && column.getCanSort()
-            ? [
-                enableSortingRemoval !== false && (jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 1),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, {}) }), (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }) }, 2),
-            ]
-            : []),
-        ...(enableColumnFilters && column.getCanFilter()
-            ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !columnFilterValue ||
-                        (Array.isArray(columnFilterValue) &&
-                            !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
-                columnFilterDisplayMode === 'subheader' && (jsxRuntime.jsxs(MenuItem__default["default"], { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
-                        ? handleOpenFilterModeMenu
-                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListIcon, {}) }), (_e = localization.filterByColumn) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] }, 4)),
-                showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
-            ].filter(Boolean)
-            : []),
-        ...(enableGrouping && column.getCanGroup()
-            ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { divider: enableColumnPinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(DynamicFeedIcon, {}) }), (_f = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 6),
-            ]
-            : []),
-        ...(enableColumnPinning && column.getCanPin()
-            ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 7),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 8),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, {}) }), localization.unpin] }) }, 9),
-            ]
-            : []),
-        ...(enableColumnResizing && column.getCanResize()
-            ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(RestartAltIcon, {}) }), localization.resetColumnSize] }) }, 10),
-            ]
-            : []),
-        ...(enableHiding
-            ? [
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(VisibilityOffIcon, {}) }), (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }) }, 11),
-                jsxRuntime.jsx(MenuItem__default["default"], { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
-                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ViewColumnIcon, {}) }), (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] }) }, 12),
-            ]
-            : []),
-    ].filter(Boolean);
-    const theme = styles.useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
-    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
-            dense: density === 'compact',
-            sx: {
-                backgroundColor: menuBackgroundColor,
-            },
-        }, anchorEl: anchorEl, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
-            closeMenu: () => setAnchorEl(null),
-            column,
-            internalColumnMenuItems,
-            table,
-        })) !== null && _k !== void 0 ? _k : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
-            closeMenu: () => setAnchorEl(null),
-            column,
-            internalColumnMenuItems,
-            table,
-        })) !== null && _l !== void 0 ? _l : internalColumnMenuItems })));
-};
-
-const MRT_RowActionMenu = (_a) => {
-    var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
-    const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
-    const { density } = getState();
-    const theme = styles.useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
-    return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
-            dense: density === 'compact',
-            sx: {
-                backgroundColor: menuBackgroundColor,
-            },
-        }, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) &&
-                ['modal', 'row'].includes(editDisplayMode) && (jsxRuntime.jsx(MenuItem__default["default"], { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
-                closeMenu: () => setAnchorEl(null),
-                row,
-                staticRowIndex,
-                table,
-            })] })));
-};
-
-const commonIconButtonStyles = {
-    '&:hover': {
-        opacity: 1,
+const MRT_ActionMenuItem = (_a) => {
+    var { icon, label, onOpenSubMenu, table } = _a, rest = __rest(_a, ["icon", "label", "onOpenSubMenu", "table"]);
+    const { options: { icons: { ArrowRightIcon }, }, } = table;
+    return (jsxRuntime.jsxs(MenuItem__default["default"], Object.assign({ sx: {
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            minWidth: '120px',
+            my: 0,
+            py: '6px',
+        } }, rest, { children: [jsxRuntime.jsxs(Box__default["default"], { sx: {
+                    alignItems: 'center',
+                    display: 'flex',
+                }, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: icon }), label] }), onOpenSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: onOpenSubMenu, onMouseEnter: onOpenSubMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] })));
+};
+
+const MRT_RowActionMenu = (_a) => {
+    var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
+    const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
+    const { density } = getState();
+    const theme = styles.useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
+    return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
+            dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
+        }, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) &&
+                ['modal', 'row'].includes(editDisplayMode) && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(EditIcon, {}), label: localization.edit, onClick: handleEdit, table: table })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+                closeMenu: () => setAnchorEl(null),
+                row,
+                staticRowIndex,
+                table,
+            })] })));
+};
+
+const commonIconButtonStyles = {
+    '&:hover': {
+        opacity: 1,
     },
     height: '2rem',
     ml: '10px',
@@ -1079,9 +859,6 @@ const MRT_ToggleRowActionMenuButton = (_a) => {
 };
 
 const getMRT_RowActionsColumnDef = (tableOptions) => {
-    if (!showRowActionsColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign({ Cell: ({ cell, row, staticRowIndex, table }) => (jsxRuntime.jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, staticRowIndex: staticRowIndex, table: table })) }, defaultDisplayColumnProps({
         header: 'actions',
         id: 'mrt-row-actions',
@@ -1092,19 +869,18 @@ const getMRT_RowActionsColumnDef = (tableOptions) => {
 
 const MRT_GrabHandleButton = (_a) => {
     var _b, _c;
-    var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
+    var { location, table } = _a, rest = __rest(_a, ["location", "table"]);
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
-    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": (_c = _iconButtonProps.title) !== null && _c !== void 0 ? _c : localization.move, disableRipple: true, draggable: "true", size: "small" }, _iconButtonProps, { onClick: (e) => {
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.move, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": (_c = rest.title) !== null && _c !== void 0 ? _c : localization.move, disableRipple: true, draggable: "true", size: "small" }, rest, { onClick: (e) => {
                 var _a;
                 e.stopPropagation();
-                (_a = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(_iconButtonProps, e);
-            }, onDragEnd: onDragEnd, onDragStart: onDragStart, sx: (theme) => (Object.assign({ '&:active': {
+                (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+            }, sx: (theme) => (Object.assign({ '&:active': {
                     cursor: 'grabbing',
                 }, '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
-                }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.3, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(_iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.sx, theme))), title: undefined, children: jsxRuntime.jsx(DragHandleIcon, {}) })) })));
+                }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.5, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), title: undefined, children: jsxRuntime.jsx(DragHandleIcon, {}) })) })));
 };
 
 const MRT_TableBodyRowGrabHandle = (_a) => {
@@ -1131,13 +907,10 @@ const MRT_TableBodyRowGrabHandle = (_a) => {
         table.setDraggingRow(null);
         table.setHoveredRow(null);
     };
-    return (jsxRuntime.jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
+    return (jsxRuntime.jsx(MRT_GrabHandleButton, Object.assign({}, iconButtonProps, { location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })));
 };
 
 const getMRT_RowDragColumnDef = (tableOptions) => {
-    if (!showRowDragColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign({ Cell: ({ row, rowRef, table }) => (jsxRuntime.jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), grow: false }, defaultDisplayColumnProps({
         header: 'move',
         id: 'mrt-row-drag',
@@ -1197,9 +970,6 @@ const MRT_ExpandButton = ({ row, staticRowIndex, table, }) => {
 
 const getMRT_RowExpandColumnDef = (tableOptions) => {
     var _a;
-    if (!showRowExpandColumn(tableOptions)) {
-        return null;
-    }
     const { defaultColumn, enableExpandAll, groupedColumnMode, positionExpandColumn, renderDetailPanel, state: { grouping }, } = tableOptions;
     const alignProps = positionExpandColumn === 'last'
         ? {
@@ -1237,9 +1007,6 @@ const getMRT_RowExpandColumnDef = (tableOptions) => {
 };
 
 const getMRT_RowNumbersColumnDef = (tableOptions) => {
-    if (!showRowNumbersColumn(tableOptions)) {
-        return null;
-    }
     const { localization, rowNumberDisplayMode } = tableOptions;
     const { pagination: { pageIndex, pageSize }, } = tableOptions.state;
     return Object.assign({ Cell: ({ row, staticRowIndex }) => {
@@ -1293,9 +1060,6 @@ const MRT_TableBodyRowPinButton = (_a) => {
 };
 
 const getMRT_RowPinningColumnDef = (tableOptions) => {
-    if (!showRowPinningColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign({ Cell: ({ row, table }) => (jsxRuntime.jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), grow: false }, defaultDisplayColumnProps({
         header: 'pin',
         id: 'mrt-row-pin',
@@ -1307,36 +1071,25 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
 const MRT_SelectCheckbox = (_a) => {
     var _b;
     var { row, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "staticRowIndex", "table"]);
-    const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, } = table;
+    const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, refs: { lastSelectedRowId }, } = table;
     const { density, isLoading } = getState();
     const selectAll = !row;
-    const checkboxProps = Object.assign(Object.assign({}, (!row
-        ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-        : parseFromValuesOrFunc(muiSelectCheckboxProps, {
-            row,
-            staticRowIndex,
-            table,
-        }))), rest);
     const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
     const allRowsSelected = selectAll
         ? selectAllMode === 'page'
             ? table.getIsAllPageRowsSelected()
             : table.getIsAllRowsSelected()
         : undefined;
-    const onSelectionChange = (event, row) => {
-        var _a;
-        if (row.getIsAllSubRowsSelected() && row.getCanSelectSubRows()) {
-            (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
-        }
-        row.getToggleSelectedHandler()(event);
-        if (isStickySelection) {
-            row.pin(!row.getIsPinned() && event.target.checked
-                ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
-                    ? 'bottom'
-                    : 'top'
-                : false);
-        }
-    };
+    const isChecked = selectAll
+        ? allRowsSelected
+        : getIsRowSelected({ row, table });
+    const checkboxProps = Object.assign(Object.assign({}, (selectAll
+        ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+        : parseFromValuesOrFunc(muiSelectCheckboxProps, {
+            row,
+            table,
+        }))), rest);
+    const onSelectionChange = getMRT_RowSelectionHandler();
     const onSelectAllChange = (event) => {
         selectAllMode === 'all'
             ? table.getToggleAllRowsSelectedHandler()(event)
@@ -1344,16 +1097,19 @@ const MRT_SelectCheckbox = (_a) => {
         if (isStickySelection) {
             table.setRowPinning({ bottom: [], top: [] });
         }
+        lastSelectedRowId.current = null;
     };
     const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow, checked: selectAll ? allRowsSelected : getIsRowSelected({ row, table }), disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
+            : localization.toggleSelectRow, checked: isChecked, disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
             'aria-label': selectAll
                 ? localization.toggleSelectAll
                 : localization.toggleSelectRow,
         }, onChange: (event) => {
             event.stopPropagation();
-            row ? onSelectionChange(event, row) : onSelectAllChange(event);
+            row
+                ? onSelectionChange({ event, row, staticRowIndex, table })
+                : onSelectAllChange(event);
         }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
             var _a;
             e.stopPropagation();
@@ -1367,9 +1123,6 @@ const MRT_SelectCheckbox = (_a) => {
 };
 
 const getMRT_RowSelectColumnDef = (tableOptions) => {
-    if (!showRowSelectionColumn(tableOptions)) {
-        return null;
-    }
     const { enableMultiRowSelection, enableSelectAll } = tableOptions;
     return Object.assign({ Cell: ({ row, staticRowIndex, table }) => (jsxRuntime.jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: enableSelectAll && enableMultiRowSelection
             ? ({ table }) => jsxRuntime.jsx(MRT_SelectCheckbox, { table: table })
@@ -1389,6 +1142,7 @@ const MRT_Default_Icons = {
     ChevronRightIcon: ChevronRightIcon__default["default"],
     ClearAllIcon: ClearAllIcon__default["default"],
     CloseIcon: CloseIcon__default["default"],
+    ContentCopy: ContentCopy__default["default"],
     DensityLargeIcon: DensityLargeIcon__default["default"],
     DensityMediumIcon: DensityMediumIcon__default["default"],
     DensitySmallIcon: DensitySmallIcon__default["default"],
@@ -1425,8 +1179,10 @@ const MRT_Localization_EN = {
     changeSearchMode: 'Change search mode',
     clearFilter: 'Clear filter',
     clearSearch: 'Clear search',
+    clearSelection: 'Clear selection',
     clearSort: 'Clear sort',
     clickToCopy: 'Click to copy',
+    copy: 'Copy',
     collapse: 'Collapse',
     collapseAll: 'Collapse all',
     columnActions: 'Column Actions',
@@ -1531,7 +1287,7 @@ const MRT_DefaultDisplayColumn = {
 };
 const useMRT_TableOptions = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
     const theme = styles.useTheme();
     icons = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     localization = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
@@ -1572,6 +1328,7 @@ const useMRT_TableOptions = (_a) => {
         defaultColumn,
         defaultDisplayColumn,
         editDisplayMode,
+        enableBatchRowSelection,
         enableBottomToolbar,
         enableColumnActions,
         enableColumnFilters,
@@ -1641,9 +1398,6 @@ const blankColProps = {
     },
 };
 const getMRT_RowSpacerColumnDef = (tableOptions) => {
-    if (!showRowSpacerColumn(tableOptions)) {
-        return null;
-    }
     return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumnProps({
         id: 'mrt-row-spacer',
         size: 0,
@@ -1651,24 +1405,12 @@ const getMRT_RowSpacerColumnDef = (tableOptions) => {
     })), { grow: true }), MRT_DefaultDisplayColumn), { muiTableBodyCellProps: blankColProps, muiTableFooterCellProps: blankColProps, muiTableHeadCellProps: blankColProps });
 };
 
-const getMRT_DisplayColumns = (tableOptions) => {
-    return [
-        getMRT_RowNumbersColumnDef(tableOptions),
-        getMRT_RowSelectColumnDef(tableOptions),
-        getMRT_RowExpandColumnDef(tableOptions),
-        getMRT_RowActionsColumnDef(tableOptions),
-        getMRT_RowDragColumnDef(tableOptions),
-        getMRT_RowPinningColumnDef(tableOptions),
-        getMRT_RowSpacerColumnDef(tableOptions),
-    ].filter(Boolean);
-};
-
 const useMRT_Effects = (table) => {
     const { getIsSomeRowsPinned, getPrePaginationRowModel, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
-    const { density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const { columnOrder, density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const totalColumnCount = table.options.columns.length;
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
     const rerender = react.useReducer(() => ({}), {})[1];
-    const isMounted = react.useRef(false);
     const initialBodyHeight = react.useRef();
     const previousTop = react.useRef();
     react.useEffect(() => {
@@ -1676,11 +1418,12 @@ const useMRT_Effects = (table) => {
             initialBodyHeight.current = document.body.style.height;
         }
     }, []);
+    //hide scrollbars when table is in full screen mode, preserve body scroll position after full screen exit
     react.useEffect(() => {
-        if (isMounted && typeof window !== 'undefined') {
+        if (typeof window !== 'undefined') {
             if (isFullScreen) {
                 previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
-                document.body.style.height = '100vh'; //hide page scrollbars when table is in full screen mode
+                document.body.style.height = '100dvh'; //hide page scrollbars when table is in full screen mode
             }
             else {
                 document.body.style.height = initialBodyHeight.current;
@@ -1693,8 +1436,13 @@ const useMRT_Effects = (table) => {
                 });
             }
         }
-        isMounted.current = true;
     }, [isFullScreen]);
+    //recalculate column order when columns change or features are toggled on/off
+    react.useEffect(() => {
+        if (totalColumnCount !== columnOrder.length) {
+            table.setColumnOrder(getDefaultColumnOrderIds(table.options));
+        }
+    }, [totalColumnCount]);
     //if page index is out of bounds, set it to the last page
     react.useEffect(() => {
         if (!enablePagination || isLoading || showSkeletons)
@@ -1722,6 +1470,7 @@ const useMRT_Effects = (table) => {
             table.setSorting(() => appliedSort.current || []);
         }
     }, [globalFilter]);
+    //fix pinned row top style when density changes
     react.useEffect(() => {
         if (enableRowPinning && getIsSomeRowsPinned()) {
             setTimeout(() => {
@@ -1731,8 +1480,15 @@ const useMRT_Effects = (table) => {
     }, [density]);
 };
 
-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 lastSelectedRowId = react.useRef(null);
+    const actionCellRef = react.useRef(null);
     const bottomToolbarRef = react.useRef(null);
     const editInputRefs = react.useRef({});
     const filterInputRefs = react.useRef({});
@@ -1743,17 +1499,19 @@ const useMRT_TableInstance = (_tableOptions) => {
     const topToolbarRef = react.useRef(null);
     const tableHeadRef = react.useRef(null);
     const tableFooterRef = react.useRef(null);
+    //transform initial state with proper column order
     const initialState = react.useMemo(() => {
         var _a, _b, _c;
-        const initState = (_a = _tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
+        const initState = (_a = definedTableOptions.initialState) !== null && _a !== void 0 ? _a : {};
         initState.columnOrder =
-            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(Object.assign(Object.assign({}, _tableOptions), { state: Object.assign(Object.assign({}, _tableOptions.initialState), _tableOptions.state) }));
-        initState.globalFilterFn = (_c = _tableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
+            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(Object.assign(Object.assign({}, definedTableOptions), { state: Object.assign(Object.assign({}, definedTableOptions.initialState), definedTableOptions.state) }));
+        initState.globalFilterFn = (_c = definedTableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
         return initState;
     }, []);
-    _tableOptions.initialState = initialState;
-    const [creatingRow, _setCreatingRow] = react.useState((_a = initialState.creatingRow) !== null && _a !== void 0 ? _a : null);
-    const [columnFilterFns, setColumnFilterFns] = react.useState(() => Object.assign({}, ...getAllLeafColumnDefs(_tableOptions.columns).map((col) => {
+    definedTableOptions.initialState = initialState;
+    const [actionCell, setActionCell] = react.useState((_a = initialState.actionCell) !== null && _a !== void 0 ? _a : null);
+    const [creatingRow, _setCreatingRow] = react.useState((_b = initialState.creatingRow) !== null && _b !== void 0 ? _b : null);
+    const [columnFilterFns, setColumnFilterFns] = react.useState(() => Object.assign({}, ...getAllLeafColumnDefs(definedTableOptions.columns).map((col) => {
         var _a, _b, _c, _d;
         return ({
             [getColumnId(col)]: col.filterFn instanceof Function
@@ -1761,24 +1519,25 @@ const useMRT_TableInstance = (_tableOptions) => {
                 : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
         });
     })));
-    const [columnOrder, onColumnOrderChange] = react.useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
-    const [columnSizingInfo, onColumnSizingInfoChange] = react.useState((_c = initialState.columnSizingInfo) !== null && _c !== void 0 ? _c : {});
-    const [density, setDensity] = react.useState((_d = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _d !== void 0 ? _d : 'comfortable');
-    const [draggingColumn, setDraggingColumn] = react.useState((_e = initialState.draggingColumn) !== null && _e !== void 0 ? _e : null);
-    const [draggingRow, setDraggingRow] = react.useState((_f = initialState.draggingRow) !== null && _f !== void 0 ? _f : null);
-    const [editingCell, setEditingCell] = react.useState((_g = initialState.editingCell) !== null && _g !== void 0 ? _g : null);
-    const [editingRow, setEditingRow] = react.useState((_h = initialState.editingRow) !== null && _h !== void 0 ? _h : null);
-    const [globalFilterFn, setGlobalFilterFn] = react.useState((_j = initialState.globalFilterFn) !== null && _j !== void 0 ? _j : 'fuzzy');
-    const [grouping, onGroupingChange] = react.useState((_k = initialState.grouping) !== null && _k !== void 0 ? _k : []);
-    const [hoveredColumn, setHoveredColumn] = react.useState((_l = initialState.hoveredColumn) !== null && _l !== void 0 ? _l : null);
-    const [hoveredRow, setHoveredRow] = react.useState((_m = initialState.hoveredRow) !== null && _m !== void 0 ? _m : null);
-    const [isFullScreen, setIsFullScreen] = react.useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _o !== void 0 ? _o : false);
-    const [pagination, onPaginationChange] = react.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _p !== void 0 ? _p : { pageIndex: 0, pageSize: 10 });
-    const [showAlertBanner, setShowAlertBanner] = react.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _q !== void 0 ? _q : false);
-    const [showColumnFilters, setShowColumnFilters] = react.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _r !== void 0 ? _r : false);
-    const [showGlobalFilter, setShowGlobalFilter] = react.useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _s !== void 0 ? _s : false);
-    const [showToolbarDropZone, setShowToolbarDropZone] = react.useState((_t = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _t !== void 0 ? _t : false);
-    _tableOptions.state = Object.assign({ columnFilterFns,
+    const [columnOrder, onColumnOrderChange] = react.useState((_c = initialState.columnOrder) !== null && _c !== void 0 ? _c : []);
+    const [columnSizingInfo, onColumnSizingInfoChange] = react.useState((_d = initialState.columnSizingInfo) !== null && _d !== void 0 ? _d : {});
+    const [density, setDensity] = react.useState((_e = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _e !== void 0 ? _e : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = react.useState((_f = initialState.draggingColumn) !== null && _f !== void 0 ? _f : null);
+    const [draggingRow, setDraggingRow] = react.useState((_g = initialState.draggingRow) !== null && _g !== void 0 ? _g : null);
+    const [editingCell, setEditingCell] = react.useState((_h = initialState.editingCell) !== null && _h !== void 0 ? _h : null);
+    const [editingRow, setEditingRow] = react.useState((_j = initialState.editingRow) !== null && _j !== void 0 ? _j : null);
+    const [globalFilterFn, setGlobalFilterFn] = react.useState((_k = initialState.globalFilterFn) !== null && _k !== void 0 ? _k : 'fuzzy');
+    const [grouping, onGroupingChange] = react.useState((_l = initialState.grouping) !== null && _l !== void 0 ? _l : []);
+    const [hoveredColumn, setHoveredColumn] = react.useState((_m = initialState.hoveredColumn) !== null && _m !== void 0 ? _m : null);
+    const [hoveredRow, setHoveredRow] = react.useState((_o = initialState.hoveredRow) !== null && _o !== void 0 ? _o : null);
+    const [isFullScreen, setIsFullScreen] = react.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _p !== void 0 ? _p : false);
+    const [pagination, onPaginationChange] = react.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _q !== void 0 ? _q : { pageIndex: 0, pageSize: 10 });
+    const [showAlertBanner, setShowAlertBanner] = react.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _r !== void 0 ? _r : false);
+    const [showColumnFilters, setShowColumnFilters] = react.useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _s !== void 0 ? _s : false);
+    const [showGlobalFilter, setShowGlobalFilter] = react.useState((_t = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _t !== void 0 ? _t : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = react.useState((_u = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _u !== void 0 ? _u : false);
+    definedTableOptions.state = Object.assign({ actionCell,
+        columnFilterFns,
         columnOrder,
         columnSizingInfo,
         creatingRow,
@@ -1796,90 +1555,111 @@ const useMRT_TableInstance = (_tableOptions) => {
         showAlertBanner,
         showColumnFilters,
         showGlobalFilter,
-        showToolbarDropZone }, _tableOptions.state);
-    const tableOptions = _tableOptions;
+        showToolbarDropZone }, definedTableOptions.state);
+    //The table options now include all state needed to help determine column visibility and order logic
+    const statefulTableOptions = definedTableOptions;
     //don't recompute columnDefs while resizing column or dragging column/row
     const columnDefsRef = react.useRef([]);
-    tableOptions.columns =
-        tableOptions.state.columnSizingInfo.isResizingColumn ||
-            tableOptions.state.draggingColumn ||
-            tableOptions.state.draggingRow
+    statefulTableOptions.columns =
+        statefulTableOptions.state.columnSizingInfo.isResizingColumn ||
+            statefulTableOptions.state.draggingColumn ||
+            statefulTableOptions.state.draggingRow
             ? columnDefsRef.current
             : prepareColumns({
                 columnDefs: [
-                    ...getMRT_DisplayColumns(tableOptions),
-                    ...tableOptions.columns,
+                    ...[
+                        showRowPinningColumn(statefulTableOptions) &&
+                            getMRT_RowPinningColumnDef(statefulTableOptions),
+                        showRowDragColumn(statefulTableOptions) &&
+                            getMRT_RowDragColumnDef(statefulTableOptions),
+                        showRowActionsColumn(statefulTableOptions) &&
+                            getMRT_RowActionsColumnDef(statefulTableOptions),
+                        showRowExpandColumn(statefulTableOptions) &&
+                            getMRT_RowExpandColumnDef(statefulTableOptions),
+                        showRowSelectionColumn(statefulTableOptions) &&
+                            getMRT_RowSelectColumnDef(statefulTableOptions),
+                        showRowNumbersColumn(statefulTableOptions) &&
+                            getMRT_RowNumbersColumnDef(statefulTableOptions),
+                    ].filter(Boolean),
+                    ...statefulTableOptions.columns,
+                    ...[
+                        showRowSpacerColumn(statefulTableOptions) &&
+                            getMRT_RowSpacerColumnDef(statefulTableOptions),
+                    ].filter(Boolean),
                 ],
-                tableOptions,
+                tableOptions: statefulTableOptions,
             });
-    columnDefsRef.current = tableOptions.columns;
-    tableOptions.data = react.useMemo(() => (tableOptions.state.isLoading || tableOptions.state.showSkeletons) &&
-        !tableOptions.data.length
+    columnDefsRef.current = statefulTableOptions.columns;
+    //if loading, generate blank rows to show skeleton loaders
+    statefulTableOptions.data = react.useMemo(() => (statefulTableOptions.state.isLoading ||
+        statefulTableOptions.state.showSkeletons) &&
+        !statefulTableOptions.data.length
         ? [
-            ...Array(Math.min(tableOptions.state.pagination.pageSize, 20)).fill(null),
-        ].map(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => ({
+            ...Array(Math.min(statefulTableOptions.state.pagination.pageSize, 20)).fill(null),
+        ].map(() => Object.assign({}, ...getAllLeafColumnDefs(statefulTableOptions.columns).map((col) => ({
             [getColumnId(col)]: null,
         }))))
-        : tableOptions.data, [
-        tableOptions.data,
-        tableOptions.state.isLoading,
-        tableOptions.state.showSkeletons,
+        : statefulTableOptions.data, [
+        statefulTableOptions.data,
+        statefulTableOptions.state.isLoading,
+        statefulTableOptions.state.showSkeletons,
     ]);
     //@ts-ignore
     const table = reactTable.useReactTable(Object.assign(Object.assign({ onColumnOrderChange,
         onColumnSizingInfoChange,
         onGroupingChange,
-        onPaginationChange }, tableOptions), { globalFilterFn: (_u = tableOptions.filterFns) === null || _u === void 0 ? void 0 : _u[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
-    //@ts-ignore
+        onPaginationChange }, statefulTableOptions), { globalFilterFn: (_v = statefulTableOptions.filterFns) === null || _v === void 0 ? void 0 : _v[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
     table.refs = {
-        //@ts-ignore
+        actionCellRef,
         bottomToolbarRef,
         editInputRefs,
         filterInputRefs,
-        //@ts-ignore
+        lastSelectedRowId,
         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;
 };
@@ -1990,71 +1770,26 @@ const useMRT_RowVirtualizer = (table, rows) => {
 };
 
 const useMRT_Rows = (table, pinnedRowIds = []) => {
-    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enableGlobalFilterRankedResults, enablePagination, enableRowPinning, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, positionCreatingRow, rowPinningDisplayMode, }, } = table;
+    const { getRowModel, getState, options: { data, enableGlobalFilterRankedResults, positionCreatingRow }, } = table;
     const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting, } = getState();
-    const shouldRankRows = react.useMemo(() => getCanRankRows(table) &&
-        !Object.values(sorting).some(Boolean) &&
-        globalFilter, [
+    const rows = react.useMemo(() => getMRT_Rows(table, pinnedRowIds), [
+        creatingRow,
+        data,
         enableGlobalFilterRankedResults,
         expanded,
+        getRowModel().rows,
         globalFilter,
-        manualExpanding,
-        manualFiltering,
-        manualGrouping,
-        manualSorting,
-        sorting,
-    ]);
-    const rows = react.useMemo(() => {
-        let rows = [];
-        if (!shouldRankRows) {
-            rows =
-                !enableRowPinning || (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))
-                    ? getRowModel().rows
-                    : getCenterRows();
-        }
-        else {
-            rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
-            if (enablePagination && !manualPagination) {
-                const start = pagination.pageIndex * pagination.pageSize;
-                rows = rows.slice(start, start + pagination.pageSize);
-            }
-        }
-        if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
-            rows = [
-                ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
-                ...rows,
-                ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
-            ];
-        }
-        if (positionCreatingRow !== undefined &&
-            creatingRow &&
-            createDisplayMode === 'row') {
-            const creatingRowIndex = !isNaN(+positionCreatingRow)
-                ? +positionCreatingRow
-                : positionCreatingRow === 'top'
-                    ? 0
-                    : rows.length;
-            rows = [
-                ...rows.slice(0, creatingRowIndex),
-                creatingRow,
-                ...rows.slice(creatingRowIndex),
-            ];
-        }
-        return rows;
-    }, [
-        creatingRow,
         pagination.pageIndex,
         pagination.pageSize,
         positionCreatingRow,
         rowPinning,
-        shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
-        shouldRankRows,
+        sorting,
     ]);
     return rows;
 };
 
 const allowedTypes = ['string', 'number'];
-const MRT_TableBodyCellValue = ({ cell, rowRef, staticRowIndex, table, }) => {
+const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table, }) => {
     var _a, _b, _c;
     const { getState, options: { enableFilterMatchHighlighting }, } = table;
     const { column, row } = cell;
@@ -2117,6 +1852,7 @@ const MRT_TableBodyCellValue = ({ cell, rowRef, staticRowIndex, table, }) => {
             renderedCellValue,
             row,
             rowRef,
+            staticColumnIndex,
             staticRowIndex,
             table,
         });
@@ -2148,7 +1884,7 @@ const MRT_CopyButton = (_a) => {
         row,
         table,
     })), rest);
-    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsxRuntime.jsx(Button__default["default"], Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) })));
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsxRuntime.jsx(Button__default["default"], Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', py: 0, textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) })));
 };
 
 const MRT_EditCellTextField = (_a) => {
@@ -2249,10 +1985,10 @@ const MRT_EditCellTextField = (_a) => {
 
 const MRT_TableBodyCell = (_a) => {
     var _b, _c, _d, _e, _f;
-    var { cell, measureElement, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
+    var { cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
     const theme = styles.useTheme();
-    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableEditing, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
-    const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
+    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
+    const { actionCell, columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -2325,9 +2061,7 @@ const MRT_TableBodyCell = (_a) => {
     const isColumnPinned = enableColumnPinning &&
         columnDef.columnDefType !== 'group' &&
         column.getIsPinned();
-    const isEditable = !cell.getIsPlaceholder() &&
-        parseFromValuesOrFunc(enableEditing, row) &&
-        parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
+    const isEditable = isCellEditable({ cell, table });
     const isEditing = isEditable &&
         !['custom', 'modal'].includes(editDisplayMode) &&
         (editDisplayMode === 'table' ||
@@ -2335,20 +2069,20 @@ const MRT_TableBodyCell = (_a) => {
             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
         !row.getIsGrouped();
     const isCreating = isEditable && createDisplayMode === 'row' && (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
+    const showClickToCopyButton = (parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
+        parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
+        !['context-menu', false].includes(
+        // @ts-ignore
+        parseFromValuesOrFunc(columnDef.enableClickToCopy, cell));
+    const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
+    const cellValueProps = {
+        cell,
+        table,
+    };
     const handleDoubleClick = (event) => {
         var _a;
         (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
-        if (isEditable && editDisplayMode === 'cell') {
-            setEditingCell(cell);
-            queueMicrotask(() => {
-                var _a;
-                const textField = editInputRefs.current[column.id];
-                if (textField) {
-                    textField.focus();
-                    (_a = textField.select) === null || _a === void 0 ? void 0 : _a.call(textField);
-                }
-            });
-        }
+        openEditingCell({ cell, table });
     };
     const handleDragEnter = (e) => {
         var _a;
@@ -2360,22 +2094,29 @@ const MRT_TableBodyCell = (_a) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const cellValueProps = {
-        cell,
-        table,
+    const handleContextMenu = (e) => {
+        var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
+        if (isRightClickable) {
+            e.preventDefault();
+            table.setActionCell(cell);
+            table.refs.actionCellRef.current = e.currentTarget;
+        }
     };
-    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, ref: (node) => {
-            if (node) {
-                measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
-            }
-        } }, tableCellProps, { onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
-                outline: (editDisplayMode === 'cell' && isEditable) ||
+    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined }, tableCellProps, { onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
+                outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
+                    (editDisplayMode === 'cell' && isEditable) ||
                     (editDisplayMode === 'table' && (isCreating || isEditing))
                     ? `1px solid ${theme.palette.grey[500]}`
                     : undefined,
-                outlineOffset: '-1px',
                 textOverflow: 'clip',
-            }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
+            }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isRightClickable
+                ? 'context-menu'
+                : isEditable && editDisplayMode === 'cell'
+                    ? 'pointer'
+                    : 'inherit', outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id
+                ? `1px solid ${theme.palette.grey[500]}`
+                : undefined, outlineOffset: '-1px', overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -2398,10 +2139,10 @@ const MRT_TableBodyCell = (_a) => {
                     renderedCellValue: cell.renderValue(),
                     row,
                     rowRef,
+                    staticColumnIndex,
                     staticRowIndex,
                     table,
-                })) : isCreating || isEditing ? (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-                    columnDef.enableClickToCopy !== false ? (jsxRuntime.jsx(MRT_CopyButton, { cell: cell, table: table, children: jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
+                })) : isCreating || isEditing ? (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table })) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (jsxRuntime.jsx(MRT_CopyButton, { cell: cell, table: table, children: jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
 };
 const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
@@ -2439,8 +2180,9 @@ const MRT_TableDetailPanel = (_a) => {
                     : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: enableRowVirtualization ? (row.getIsExpanded() && DetailPanel) : (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
 };
 
-const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow, }) => {
-    var _a, _b, _c, _d;
+const MRT_TableBodyRow = (_a) => {
+    var _b, _c, _d, _f;
+    var { columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["columnVirtualizer", "numRows", "pinnedRowIds", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
     const theme = styles.useTheme();
     const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
     const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
@@ -2450,11 +2192,11 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
     const isRowPinned = enableRowPinning && row.getIsPinned();
     const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
     const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
-    const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyRowProps, {
         row,
         staticRowIndex,
         table,
-    });
+    })), rest);
     const [bottomPinnedIndex, topPinnedIndex] = react.useMemo(() => {
         if (!enableRowPinning ||
             !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) ||
@@ -2467,14 +2209,14 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
         ];
     }, [pinnedRowIds, rowPinning]);
     const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
-        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
+        ((_b = tableHeadRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
         0;
-    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
+    const tableFooterHeight = (enableStickyFooter && ((_c = tableFooterRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight)) || 0;
     const sx = parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme);
     const defaultRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
     const customRowHeight = 
     // @ts-ignore
-    parseInt((_d = (_c = tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : sx === null || sx === void 0 ? void 0 : sx.height, 10) || undefined;
+    parseInt((_f = (_d = tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) === null || _d === void 0 ? void 0 : _d.height) !== null && _f !== void 0 ? _f : sx === null || sx === void 0 ? void 0 : sx.height, 10) || undefined;
     const rowHeight = customRowHeight || defaultRowHeight;
     const handleDragEnter = (_e) => {
         if (enableRowOrdering && draggingRow) {
@@ -2524,9 +2266,6 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
                         }
                         const props = {
                             cell,
-                            measureElement: !isDraggingRow && !isHoveredRow
-                                ? columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement
-                                : undefined,
                             numRows,
                             rowRef,
                             staticColumnIndex,
@@ -2620,89 +2359,427 @@ const MRT_TableBody = (_a) => {
                     return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                 }) })))] }));
 };
-const Memo_MRT_TableBody = react.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
+const Memo_MRT_TableBody = react.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
+
+const MRT_TableFooterCell = (_a) => {
+    var _b, _c, _d;
+    var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
+    const theme = styles.useTheme();
+    const { getState, options: { enableColumnPinning, muiTableFooterCellProps }, } = table;
+    const { density } = getState();
+    const { column } = footer;
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const isColumnPinned = enableColumnPinning &&
+        columnDef.columnDefType !== 'group' &&
+        column.getIsPinned();
+    const args = { column, table };
+    const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
+    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: columnDefType === 'group'
+            ? 'center'
+            : theme.direction === 'rtl'
+                ? 'right'
+                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, variant: "footer" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
+                ? '0.5rem'
+                : density === 'comfortable'
+                    ? '1rem'
+                    : '1.5rem', verticalAlign: 'top' }, getCommonMRTCellStyles({
+            column,
+            header: footer,
+            table,
+            tableCellProps,
+            theme,
+        })), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (footer.isPlaceholder
+            ? null
+            : (_d = (_c = parseFromValuesOrFunc(columnDef.Footer, {
+                column,
+                footer,
+                table,
+            })) !== null && _c !== void 0 ? _c : columnDef.footer) !== null && _d !== void 0 ? _d : null) })));
+};
+
+const MRT_TableFooterRow = (_a) => {
+    var _b;
+    var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
+    const { options: { layoutMode, muiTableFooterRowProps }, } = table;
+    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
+    // if no content in row, skip row
+    if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
+        !!header.column.columnDef.footer) ||
+        header.column.columnDef.Footer))) {
+        return null;
+    }
+    const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterRowProps, {
+        footerGroup,
+        table,
+    })), rest);
+    return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: 'relative', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
+                let footer = footerOrVirtualFooter;
+                if (columnVirtualizer) {
+                    staticColumnIndex = footerOrVirtualFooter
+                        .index;
+                    footer = footerGroup.headers[staticColumnIndex];
+                }
+                return footer ? (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, staticColumnIndex: staticColumnIndex, table: table }, footer.id)) : null;
+            }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
+};
+
+const MRT_TableFooter = (_a) => {
+    var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
+    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
+    const { isFullScreen } = getState();
+    const tableFooterProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterProps, {
+        table,
+    })), rest);
+    const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
+    return (jsxRuntime.jsx(TableFooter__default["default"], Object.assign({}, tableFooterProps, { ref: (ref) => {
+            tableFooterRef.current = ref;
+            if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
+                // @ts-ignore
+                tableFooterProps.ref.current = ref;
+            }
+        }, sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
+                ? theme.palette.mode === 'light'
+                    ? `1px solid ${theme.palette.grey[300]}`
+                    : `1px solid ${theme.palette.grey[700]}`
+                : undefined, position: stickFooter ? 'sticky' : 'relative', zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsxRuntime.jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
+};
+
+const mrtFilterOptions = (localization) => [
+    {
+        divider: false,
+        label: localization.filterFuzzy,
+        option: 'fuzzy',
+        symbol: '≈',
+    },
+    {
+        divider: false,
+        label: localization.filterContains,
+        option: 'contains',
+        symbol: '*',
+    },
+    {
+        divider: false,
+        label: localization.filterStartsWith,
+        option: 'startsWith',
+        symbol: 'a',
+    },
+    {
+        divider: true,
+        label: localization.filterEndsWith,
+        option: 'endsWith',
+        symbol: 'z',
+    },
+    {
+        divider: false,
+        label: localization.filterEquals,
+        option: 'equals',
+        symbol: '=',
+    },
+    {
+        divider: true,
+        label: localization.filterNotEquals,
+        option: 'notEquals',
+        symbol: '≠',
+    },
+    {
+        divider: false,
+        label: localization.filterBetween,
+        option: 'between',
+        symbol: '⇿',
+    },
+    {
+        divider: true,
+        label: localization.filterBetweenInclusive,
+        option: 'betweenInclusive',
+        symbol: '⬌',
+    },
+    {
+        divider: false,
+        label: localization.filterGreaterThan,
+        option: 'greaterThan',
+        symbol: '>',
+    },
+    {
+        divider: false,
+        label: localization.filterGreaterThanOrEqualTo,
+        option: 'greaterThanOrEqualTo',
+        symbol: '≥',
+    },
+    {
+        divider: false,
+        label: localization.filterLessThan,
+        option: 'lessThan',
+        symbol: '<',
+    },
+    {
+        divider: true,
+        label: localization.filterLessThanOrEqualTo,
+        option: 'lessThanOrEqualTo',
+        symbol: '≤',
+    },
+    {
+        divider: false,
+        label: localization.filterEmpty,
+        option: 'empty',
+        symbol: '∅',
+    },
+    {
+        divider: false,
+        label: localization.filterNotEmpty,
+        option: 'notEmpty',
+        symbol: '!∅',
+    },
+];
+const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
+const emptyModes = ['empty', 'notEmpty'];
+const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
+const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
+const MRT_FilterOptionMenu = (_a) => {
+    var _b, _c, _d, _e;
+    var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
+    const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
+    const { density, globalFilterFn } = getState();
+    const { column } = header !== null && header !== void 0 ? header : {};
+    const { columnDef } = column !== null && column !== void 0 ? column : {};
+    const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
+    let allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
+    if (rangeVariants.includes(columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant)) {
+        allowedColumnFilterOptions = [
+            ...rangeModes,
+            ...(allowedColumnFilterOptions !== null && allowedColumnFilterOptions !== void 0 ? allowedColumnFilterOptions : []),
+        ].filter((option) => rangeModes.includes(option));
+    }
+    const internalFilterOptions = react.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
+        ? allowedColumnFilterOptions === undefined ||
+            (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
+        : (!globalFilterModeOptions ||
+            globalFilterModeOptions.includes(filterOption.option)) &&
+            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option)), []);
+    const handleSelectFilterMode = (option) => {
+        var _a, _b;
+        const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
+        if (!header || !column) {
+            // global filter mode
+            setGlobalFilterFn(option);
+        }
+        else if (option !== prevFilterMode) {
+            // column filter mode
+            setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
+            // reset filter value and/or perform new filter render
+            if (emptyModes.includes(option)) {
+                // will now be empty/notEmpty filter mode
+                if (currentFilterValue !== ' ' &&
+                    !emptyModes.includes(prevFilterMode)) {
+                    column.setFilterValue(' ');
+                }
+                else if (currentFilterValue) {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
+            }
+            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
+                arrModes.includes(option)) {
+                // will now be array filter mode
+                if (currentFilterValue instanceof String ||
+                    (currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length)) {
+                    column.setFilterValue([]);
+                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
+                }
+                else if (currentFilterValue) {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
+            }
+            else if (((_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
+                rangeModes.includes(option)) {
+                // will now be range filter mode
+                if (!Array.isArray(currentFilterValue) ||
+                    (!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === '')) &&
+                        !rangeModes.includes(prevFilterMode))) {
+                    column.setFilterValue(['', '']);
+                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
+                }
+                else {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
+            }
+            else {
+                // will now be single value filter mode
+                if (Array.isArray(currentFilterValue)) {
+                    column.setFilterValue('');
+                    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
+                }
+                else if (currentFilterValue === ' ' &&
+                    emptyModes.includes(prevFilterMode)) {
+                    column.setFilterValue(undefined);
+                }
+                else {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
+            }
+        }
+        setAnchorEl(null);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
+    const theme = styles.useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
+    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
+            dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
+        }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
+            ? (_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
+                column: column,
+                internalFilterOptions,
+                onSelectFilterMode: handleSelectFilterMode,
+                table,
+            })) !== null && _d !== void 0 ? _d : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
+                column: column,
+                internalFilterOptions,
+                onSelectFilterMode: handleSelectFilterMode,
+                table,
+            })
+            : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
+                internalFilterOptions,
+                onSelectFilterMode: handleSelectFilterMode,
+                table,
+            }))) !== null && _e !== void 0 ? _e : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxRuntime.jsx(MRT_ActionMenuItem, { divider: divider, icon: symbol, label: label, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, table: table, value: option }, index))) })));
+};
 
-const MRT_TableFooterCell = (_a) => {
-    var _b, _c, _d;
-    var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
-    const theme = styles.useTheme();
-    const { getState, options: { enableColumnPinning, muiTableFooterCellProps }, } = table;
-    const { density } = getState();
-    const { column } = footer;
+const MRT_ColumnActionMenu = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
+    const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
+    const { column } = header;
     const { columnDef } = column;
-    const { columnDefType } = columnDef;
-    const isColumnPinned = enableColumnPinning &&
-        columnDef.columnDefType !== 'group' &&
-        column.getIsPinned();
-    const args = { column, table };
-    const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
-    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: columnDefType === 'group'
-            ? 'center'
-            : theme.direction === 'rtl'
-                ? 'right'
-                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, variant: "footer" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
-                ? '0.5rem'
-                : density === 'comfortable'
-                    ? '1rem'
-                    : '1.5rem', verticalAlign: 'top' }, getCommonMRTCellStyles({
+    const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
+    const columnFilterValue = column.getFilterValue();
+    const [filterMenuAnchorEl, setFilterMenuAnchorEl] = react.useState(null);
+    const handleClearSort = () => {
+        column.clearSorting();
+        setAnchorEl(null);
+    };
+    const handleSortAsc = () => {
+        column.toggleSorting(false);
+        setAnchorEl(null);
+    };
+    const handleSortDesc = () => {
+        column.toggleSorting(true);
+        setAnchorEl(null);
+    };
+    const handleResetColumnSize = () => {
+        setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
+        column.resetSize();
+        setAnchorEl(null);
+    };
+    const handleHideColumn = () => {
+        column.toggleVisibility(false);
+        setAnchorEl(null);
+    };
+    const handlePinColumn = (pinDirection) => {
+        column.pin(pinDirection);
+        setAnchorEl(null);
+    };
+    const handleGroupByColumn = () => {
+        column.toggleGrouping();
+        setColumnOrder((old) => ['mrt-row-expand', ...old]);
+        setAnchorEl(null);
+    };
+    const handleClearFilter = () => {
+        column.setFilterValue(undefined);
+        setAnchorEl(null);
+        if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
+            setColumnFilterFns((prev) => {
+                var _a;
+                return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
+            });
+        }
+    };
+    const handleFilterByColumn = () => {
+        setShowColumnFilters(true);
+        queueMicrotask(() => { var _a; return (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus(); });
+        setAnchorEl(null);
+    };
+    const handleShowAllColumns = () => {
+        getAllLeafColumns()
+            .filter((col) => col.columnDef.enableHiding !== false)
+            .forEach((col) => col.toggleVisibility(true));
+        setAnchorEl(null);
+    };
+    const handleOpenFilterModeMenu = (event) => {
+        event.stopPropagation();
+        setFilterMenuAnchorEl(event.currentTarget);
+    };
+    const isSelectFilter = !!columnDef.filterSelectOptions;
+    const allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
+    const showFilterModeSubMenu = enableColumnFilterModes &&
+        columnDef.enableColumnFilterModes !== false &&
+        !isSelectFilter &&
+        (allowedColumnFilterOptions === undefined ||
+            !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
+    const internalColumnMenuItems = [
+        ...(enableSorting && column.getCanSort()
+            ? [
+                enableSortingRemoval !== false && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(ClearAllIcon, {}), label: localization.clearSort, onClick: handleClearSort, table: table }, 0)),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'asc', icon: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }), label: (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header)), onClick: handleSortAsc, table: table }, 1),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, icon: jsxRuntime.jsx(SortIcon, {}), label: (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header)), onClick: handleSortDesc, table: table }, 2),
+            ]
+            : []),
+        ...(enableColumnFilters && column.getCanFilter()
+            ? [
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !columnFilterValue ||
+                        (Array.isArray(columnFilterValue) &&
+                            !columnFilterValue.filter((value) => value).length), icon: jsxRuntime.jsx(FilterListOffIcon, {}), label: localization.clearFilter, onClick: handleClearFilter, table: table }, 3),
+                columnFilterDisplayMode === 'subheader' && (jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, icon: jsxRuntime.jsx(FilterListIcon, {}), label: (_e = localization.filterByColumn) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header)), onClick: showColumnFilters
+                        ? handleOpenFilterModeMenu
+                        : handleFilterByColumn, onOpenSubMenu: showFilterModeSubMenu ? handleOpenFilterModeMenu : undefined, table: table }, 4)),
+                showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
+            ].filter(Boolean)
+            : []),
+        ...(enableGrouping && column.getCanGroup()
+            ? [
+                jsxRuntime.jsx(MRT_ActionMenuItem, { divider: enableColumnPinning, icon: jsxRuntime.jsx(DynamicFeedIcon, {}), label: (_f = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header)), onClick: handleGroupByColumn, table: table }, 6),
+            ]
+            : []),
+        ...(enableColumnPinning && column.getCanPin()
+            ? [
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), icon: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }), label: localization.pinToLeft, onClick: () => handlePinColumn('left'), table: table }, 7),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), icon: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }), label: localization.pinToRight, onClick: () => handlePinColumn('right'), table: table }, 8),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, icon: jsxRuntime.jsx(PushPinIcon, {}), label: localization.unpin, onClick: () => handlePinColumn(false), table: table }, 9),
+            ]
+            : []),
+        ...(enableColumnResizing && column.getCanResize()
+            ? [
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !columnSizing[column.id], icon: jsxRuntime.jsx(RestartAltIcon, {}), label: localization.resetColumnSize, onClick: handleResetColumnSize, table: table }, 10),
+            ]
+            : []),
+        ...(enableHiding
+            ? [
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !column.getCanHide(), icon: jsxRuntime.jsx(VisibilityOffIcon, {}), label: (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header)), onClick: handleHideColumn, table: table }, 11),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
+                        .length, icon: jsxRuntime.jsx(ViewColumnIcon, {}), label: (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header)), onClick: handleShowAllColumns, table: table }, 12),
+            ]
+            : []),
+    ].filter(Boolean);
+    const theme = styles.useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
+    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
+            dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
+        }, anchorEl: anchorEl, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
+            closeMenu: () => setAnchorEl(null),
             column,
-            header: footer,
+            internalColumnMenuItems,
             table,
-            tableCellProps,
-            theme,
-        })), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (footer.isPlaceholder
-            ? null
-            : (_d = (_c = parseFromValuesOrFunc(columnDef.Footer, {
-                column,
-                footer,
-                table,
-            })) !== null && _c !== void 0 ? _c : columnDef.footer) !== null && _d !== void 0 ? _d : null) })));
-};
-
-const MRT_TableFooterRow = (_a) => {
-    var _b;
-    var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
-    const { options: { layoutMode, muiTableFooterRowProps }, } = table;
-    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
-    // if no content in row, skip row
-    if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
-        !!header.column.columnDef.footer) ||
-        header.column.columnDef.Footer)))
-        return null;
-    const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterRowProps, {
-        footerGroup,
-        table,
-    })), rest);
-    return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: 'relative', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
-                let footer = footerOrVirtualFooter;
-                if (columnVirtualizer) {
-                    staticColumnIndex = footerOrVirtualFooter
-                        .index;
-                    footer = footerGroup.headers[staticColumnIndex];
-                }
-                return footer ? (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, staticColumnIndex: staticColumnIndex, table: table }, footer.id)) : null;
-            }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
-};
-
-const MRT_TableFooter = (_a) => {
-    var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
-    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
-    const { isFullScreen } = getState();
-    const tableFooterProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterProps, {
-        table,
-    })), rest);
-    const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (jsxRuntime.jsx(TableFooter__default["default"], Object.assign({}, tableFooterProps, { ref: (ref) => {
-            tableFooterRef.current = ref;
-            if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
-                // @ts-ignore
-                tableFooterProps.ref.current = ref;
-            }
-        }, sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
-                ? theme.palette.mode === 'light'
-                    ? `1px solid ${theme.palette.grey[300]}`
-                    : `1px solid ${theme.palette.grey[700]}`
-                : undefined, position: stickFooter ? 'sticky' : 'relative', zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsxRuntime.jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
+        })) !== null && _k !== void 0 ? _k : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
+            closeMenu: () => setAnchorEl(null),
+            column,
+            internalColumnMenuItems,
+            table,
+        })) !== null && _l !== void 0 ? _l : internalColumnMenuItems })));
 };
 
 const MRT_TableHeadCellColumnActionsButton = (_a) => {
@@ -2821,6 +2898,7 @@ const MRT_FilterTextField = (_a) => {
                 ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || ''
                 : (_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '';
     });
+    const [autocompleteValue, setAutocompleteValue] = react.useState(isAutocompleteFilter ? filterValue : null);
     const handleChangeDebounced = react.useCallback(utils.debounce((newValue) => {
         if (isRangeFilter) {
             column.setFilterValue((old) => {
@@ -2847,6 +2925,10 @@ const MRT_FilterTextField = (_a) => {
         handleChange(newValue);
         (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
     };
+    const handleAutocompleteChange = (newValue) => {
+        setAutocompleteValue(newValue);
+        handleChange(getValueAndLabel(newValue).value);
+    };
     const handleClear = () => {
         if (isMultiSelectFilter) {
             setFilterValue([]);
@@ -2967,10 +3049,10 @@ const MRT_FilterTextField = (_a) => {
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsxRuntime.jsx(DatePicker.DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
                     field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.field),
                     textField: Object.assign(Object.assign({}, commonTextFieldProps), (_s = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _s === void 0 ? void 0 : _s.textField),
-                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleChange(getValueAndLabel(newValue).value), options: (_t = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _t !== void 0 ? _t : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_t = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _t !== void 0 ? _t : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
                     return (jsxRuntime.jsx(TextField__default["default"], Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
-                }, value: filterValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
+                }, value: autocompleteValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
                         ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsxRuntime.jsx(Box__default["default"], { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
                                 const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
                                 return (jsxRuntime.jsx(Chip__default["default"], { label: getValueAndLabel(selectedValue).label }, value));
@@ -3126,7 +3208,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
                             }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
                     horizontal: 'center',
                     vertical: 'top',
-                }, onClick: (event) => event.stopPropagation(), onClose: (event) => {
+                }, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: (event) => {
                     //@ts-ignore
                     event.stopPropagation();
                     setAnchorEl(null);
@@ -3170,7 +3252,7 @@ const MRT_TableHeadCellGrabHandle = (_a) => {
         setDraggingColumn(null);
         setHoveredColumn(null);
     };
-    return (jsxRuntime.jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
+    return (jsxRuntime.jsx(MRT_GrabHandleButton, Object.assign({}, iconButtonProps, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })));
 };
 
 const MRT_TableHeadCellResizeHandle = (_a) => {
@@ -3247,7 +3329,7 @@ const MRT_TableHeadCellSortLabel = (_a) => {
 
 const MRT_TableHeadCell = (_a) => {
     var _b, _c, _d, _f, _g, _h;
-    var { header, staticColumnIndex, table } = _a, rest = __rest(_a, ["header", "staticColumnIndex", "table"]);
+    var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
     const theme = styles.useTheme();
     const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
@@ -3324,8 +3406,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': {
@@ -3388,7 +3474,7 @@ const MRT_TableHeadCell = (_a) => {
                                         whiteSpace: ((_h = (_g = columnDef.header) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) < 20
                                             ? 'nowrap'
                                             : 'normal',
-                                    }, title: columnDefType === 'data' ? columnDef.header : undefined, children: HeaderElement }), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: {
+                                    }, children: HeaderElement }), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: {
                                 whiteSpace: 'nowrap',
                             }, children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
                                         current: tableHeadCellRefs.current[column.id],
@@ -3412,14 +3498,14 @@ const MRT_TableHeadRow = (_a) => {
                         .index;
                     header = headerGroup.headers[staticColumnIndex];
                 }
-                return header ? (jsxRuntime.jsx(MRT_TableHeadCell, { header: header, staticColumnIndex: staticColumnIndex, table: table }, header.id)) : null;
+                return header ? (jsxRuntime.jsx(MRT_TableHeadCell, { columnVirtualizer: columnVirtualizer, header: header, staticColumnIndex: staticColumnIndex, table: table }, header.id)) : null;
             }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
 const MRT_ToolbarAlertBanner = (_a) => {
     var _b, _c, _d;
     var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
-    const { getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
+    const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { lastSelectedRowId, tablePaperRef }, } = table;
     const { density, grouping, rowSelection, showAlertBanner } = getState();
     const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
         table,
@@ -3427,10 +3513,14 @@ const MRT_ToolbarAlertBanner = (_a) => {
     const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
         table,
     });
-    const selectedRowCount = react.useMemo(() => Object.values(rowSelection).filter(Boolean).length, [rowSelection]);
-    const selectedAlert = selectedRowCount > 0
-        ? (_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
-        : null;
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
+    const selectedRowCount = react.useMemo(() => manualPagination
+        ? Object.values(rowSelection).filter(Boolean).length
+        : getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
+    const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsxRuntime.jsx(Button__default["default"], { onClick: () => {
+                    table.toggleAllRowsSelected(false);
+                    lastSelectedRowId.current = null;
+                }, size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
     const groupedAlert = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
     return (jsxRuntime.jsx(Collapse__default["default"], { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsxRuntime.jsx(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
                 var _a, _b;
@@ -3506,6 +3596,7 @@ const MRT_Table = (_a) => {
 };
 
 const MRT_TableLoadingOverlay = (_a) => {
+    var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { options: { localization, muiCircularProgressProps }, } = table;
     const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
@@ -3521,8 +3612,54 @@ const MRT_TableLoadingOverlay = (_a) => {
             right: 0,
             top: 0,
             width: '100%',
-            zIndex: 2,
-        }), children: jsxRuntime.jsx(CircularProgress__default["default"], Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps)) }));
+            zIndex: 3,
+        }), children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(CircularProgress__default["default"], Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps))) }));
+};
+
+const MRT_CellActionMenu = (_a) => {
+    var _b, _c;
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
+    const { actionCell, density } = getState();
+    const cell = actionCell;
+    const { row } = cell;
+    const { column } = cell;
+    const { columnDef } = column;
+    const theme = styles.useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
+    const handleClose = (event) => {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        table.setActionCell(null);
+        actionCellRef.current = null;
+    };
+    const internalMenuItems = [
+        (parseFromValuesOrFunc(enableClickToCopy, cell) === 'context-menu' ||
+            parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
+                'context-menu') && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(ContentCopy, {}), label: localization.copy, onClick: (event) => {
+                event.stopPropagation();
+                navigator.clipboard.writeText(cell.getValue());
+                handleClose();
+            }, table: table }, 'mrt-copy')),
+        parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === 'cell' && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(EditIcon, {}), label: localization.edit, onClick: () => {
+                openEditingCell({ cell, table });
+                handleClose();
+            }, table: table }, 'mrt-edit')),
+    ].filter(Boolean);
+    const renderActionProps = {
+        cell,
+        closeMenu: handleClose,
+        column,
+        internalMenuItems,
+        row,
+        table,
+    };
+    const menuItems = (_c = (_b = columnDef.renderCellActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, renderActionProps)) !== null && _c !== void 0 ? _c : renderCellActionMenuItems === null || renderCellActionMenuItems === void 0 ? void 0 : renderCellActionMenuItems(renderActionProps);
+    return ((!!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) || !!(internalMenuItems === null || internalMenuItems === void 0 ? void 0 : internalMenuItems.length)) && (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
+            dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
+        }, anchorEl: actionCellRef.current, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: handleClose, open: !!cell, transformOrigin: { horizontal: -100, vertical: 8 } }, rest, { children: menuItems !== null && menuItems !== void 0 ? menuItems : internalMenuItems }))));
 };
 
 const MRT_EditRowModal = (_a) => {
@@ -3569,8 +3706,8 @@ const MRT_EditRowModal = (_a) => {
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 const MRT_TableContainer = (_a) => {
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
-    const { creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay, } = getState();
+    const { getState, options: { createDisplayMode, editDisplayMode, enableCellActions, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
+    const { actionCell, creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay, } = getState();
     const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
     const [totalToolbarHeight, setTotalToolbarHeight] = react.useState(0);
     const tableContainerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableContainerProps, {
@@ -3600,7 +3737,7 @@ const MRT_TableContainer = (_a) => {
                 ? `calc(100vh - ${totalToolbarHeight}px)`
                 : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), sx: (theme) => (Object.assign({ maxHeight: enableStickyHeader
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
-                : undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? jsxRuntime.jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsxRuntime.jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsxRuntime.jsx(MRT_EditRowModal, { open: true, table: table }))] })));
+                : undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? jsxRuntime.jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsxRuntime.jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsxRuntime.jsx(MRT_EditRowModal, { open: true, table: table })), enableCellActions && actionCell && jsxRuntime.jsx(MRT_CellActionMenu, { table: table })] })));
 };
 
 const MRT_LinearProgressBar = (_a) => {
@@ -3740,7 +3877,7 @@ const MRT_ColumnPinningButtons = (_a) => {
 
 const MRT_ShowHideColumnsMenuItems = (_a) => {
     var _b;
-    var { allColumns, column, hoveredColumn, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "setHoveredColumn", "table"]);
+    var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
     const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, setColumnOrder, } = table;
     const { columnOrder } = getState();
     const { columnDef } = column;
@@ -3795,7 +3932,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
                         gap: '8px',
                     }, children: [columnDefType !== 'group' &&
                             enableColumnOrdering &&
-                            !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
+                            !isNestedColumns &&
                             (columnDef.enableColumnOrdering !== false ? (jsxRuntime.jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsxRuntime.jsx(Box__default["default"], { sx: { width: '28px' } }))), enableColumnPinning &&
                             (column.getCanPin() ? (jsxRuntime.jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsxRuntime.jsx(Box__default["default"], { sx: { width: '70px' } }))), enableHiding ? (jsxRuntime.jsx(FormControlLabel__default["default"], { checked: switchChecked, componentsProps: {
                                 typography: {
@@ -3804,7 +3941,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
                                         opacity: columnDefType !== 'display' ? 1 : 0.5,
                                     },
                                 },
-                            }, control: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsxRuntime.jsx(Switch__default["default"], {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsxRuntime.jsx(Typography__default["default"], { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
+                            }, control: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsxRuntime.jsx(Switch__default["default"], {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsxRuntime.jsx(Typography__default["default"], { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
 };
 
 const MRT_ShowHideColumnsMenu = (_a) => {
@@ -3835,6 +3972,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
         getLeftLeafColumns(),
         getRightLeafColumns(),
     ]);
+    const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
     const [hoveredColumn, setHoveredColumn] = react.useState(null);
     const theme = styles.useTheme();
     const { menuBackgroundColor } = getMRTTheme(table, theme);
@@ -3848,7 +3986,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     pt: 0,
-                }, children: [enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsxRuntime.jsx(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enableColumnPinning && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsxRuntime.jsx(Divider__default["default"], {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
+                }, children: [enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsxRuntime.jsx(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsxRuntime.jsx(Divider__default["default"], {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -4065,6 +4203,7 @@ const MaterialReactTable = (props) => {
     return jsxRuntime.jsx(MRT_TablePaper, { table: table });
 };
 
+exports.MRT_ActionMenuItem = MRT_ActionMenuItem;
 exports.MRT_AggregationFns = MRT_AggregationFns;
 exports.MRT_BottomToolbar = MRT_BottomToolbar;
 exports.MRT_ColumnActionMenu = MRT_ColumnActionMenu;
@@ -4130,8 +4269,6 @@ exports.MaterialReactTable = MaterialReactTable;
 exports.Memo_MRT_TableBody = Memo_MRT_TableBody;
 exports.Memo_MRT_TableBodyCell = Memo_MRT_TableBodyCell;
 exports.Memo_MRT_TableBodyRow = Memo_MRT_TableBodyRow;
-exports.commonListItemStyles = commonListItemStyles;
-exports.commonMenuItemStyles = commonMenuItemStyles;
 exports.createMRTColumnHelper = createMRTColumnHelper;
 exports.createRow = createRow;
 exports.defaultDisplayColumnProps = defaultDisplayColumnProps;
@@ -4145,11 +4282,16 @@ exports.getIsFirstColumn = getIsFirstColumn;
 exports.getIsFirstRightPinnedColumn = getIsFirstRightPinnedColumn;
 exports.getIsLastColumn = getIsLastColumn;
 exports.getIsLastLeftPinnedColumn = getIsLastLeftPinnedColumn;
+exports.getIsRankingRows = getIsRankingRows;
 exports.getIsRowSelected = getIsRowSelected;
 exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
+exports.getMRT_RowSelectionHandler = getMRT_RowSelectionHandler;
+exports.getMRT_Rows = getMRT_Rows;
 exports.getTotalRight = getTotalRight;
 exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
+exports.isCellEditable = isCellEditable;
 exports.mrtFilterOptions = mrtFilterOptions;
+exports.openEditingCell = openEditingCell;
 exports.prepareColumns = prepareColumns;
 exports.rankGlobalFuzzy = rankGlobalFuzzy;
 exports.reorderColumn = reorderColumn;