material-react-table 0.40.2 → 0.40.5

package/dist/cjs/menus/MRT_FilterOptionMenu.d.ts

@@ -4,7 +4,7 @@ import { MRT_Localization } from '../localization';
 export declare const mrtFilterOptions: (localization: MRT_Localization) => MRT_InternalFilterOption[];
 interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
-    header?: MRT_Header;
+    header?: MRT_Header<TData>;
     onSelect?: () => void;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     table: MRT_TableInstance<TData>;

package/dist/cjs/menus/MRT_RowActionMenu.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, MouseEvent } from 'react';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
-    handleEdit: () => void;
+    handleEdit: (event: MouseEvent) => void;
     row: MRT_Row;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     table: MRT_TableInstance;

package/dist/esm/MaterialReactTable.d.ts

@@ -216,9 +216,16 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => TableCellProps);
-    renderColumnFilterModeMenuItems?: ({ table, column, }: {
+    renderColumnActionsMenuItems?: ({ closeMenu, column, table, }: {
+        closeMenu: () => void;
+        column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
+    }) => ReactNode[];
+    renderColumnFilterModeMenuItems?: ({ column, internalFilterOptions, onSelectFilterMode, table, }: {
         column: MRT_Column<TData>;
+        internalFilterOptions: MRT_InternalFilterOption[];
+        onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+        table: MRT_TableInstance<TData>;
     }) => ReactNode[];
     sortingFn?: MRT_SortingFn;
 };
@@ -470,12 +477,17 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     renderBottomToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderColumnActionsMenuItems?: ({ column, closeMenu, table, }: {
+        column: MRT_Column<TData>;
+        closeMenu: () => void;
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode[];
     renderColumnFilterModeMenuItems?: ({ column, internalFilterOptions, onSelectFilterMode, table, }: {
         column: MRT_Column<TData>;
         internalFilterOptions: MRT_InternalFilterOption[];
         onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
         table: MRT_TableInstance<TData>;
-    }) => ReactNode;
+    }) => ReactNode[];
     renderDetailPanel?: ({ row, table, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;

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

@@ -274,12 +274,15 @@ const MRT_ExpandButton = ({ row, table }) => {
     const iconButtonProps = muiExpandButtonProps instanceof Function
         ? muiExpandButtonProps({ table, row })
         : muiExpandButtonProps;
-    const handleToggleExpand = () => {
+    const handleToggleExpand = (event) => {
+        var _a;
+        event.stopPropagation();
         row.toggleExpanded();
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
     };
     return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.expand },
         React.createElement("span", null,
-            React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel, onClick: handleToggleExpand }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+            React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
                     : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
                 React.createElement(ExpandMoreIcon, { style: {
@@ -379,7 +382,7 @@ const mrtFilterOptions = (localization) => [
     },
 ];
 const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table, }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { getState, options: { enabledGlobalFilterOptions, columnFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
     const { globalFilterFn, density } = getState();
     const { column } = header !== null && header !== void 0 ? header : {};
@@ -413,8 +416,13 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
     return (React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
             dense: density === 'compact',
-        } }, (_b = (header && column
-        ? renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
+        } }, (_d = (header && column && columnDef
+        ? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
+            column: column,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+        })) !== null && _c !== void 0 ? _c : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
             column: column,
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,
@@ -424,7 +432,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,
             table,
-        }))) !== null && _b !== void 0 ? _b : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React.createElement(MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
+        }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React.createElement(MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
             alignItems: 'center',
             display: 'flex',
             gap: '2ch',
@@ -458,7 +466,11 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
 const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
     return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: localization.move },
-        React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
+        React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
+            }, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
                 }, '&:active': {
@@ -716,8 +728,8 @@ const commonListItemStyles = {
     alignItems: 'center',
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, columnFilterModeOptions, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, }, refs: { filterInputRefs }, setShowFilters, } = table;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setShowFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density } = getState();
@@ -782,25 +794,32 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
     return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
-        } },
-        enableSorting &&
-            column.getCanSort() && [
-            React.createElement(MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(ClearAllIcon, null)),
-                    localization.clearSort)),
-            React.createElement(MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_b = localization.sortByColumnAsc) === null || _b === void 0 ? void 0 :
-                    _b.replace('{column}', String(columnDef.header)))),
-            React.createElement(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(SortIcon, null)), (_c = localization.sortByColumnDesc) === null || _c === void 0 ? void 0 :
-                    _c.replace('{column}', String(columnDef.header)))),
-        ],
+        } }, (_d = (_c = (_b = columnDef.renderColumnActionsMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
+        closeMenu: () => setAnchorEl(null),
+        column,
+        table,
+    })) !== null && _c !== void 0 ? _c : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
+        closeMenu: () => setAnchorEl(null),
+        column,
+        table,
+    })) !== null && _d !== void 0 ? _d : (enableSorting &&
+        column.getCanSort() && [
+        React.createElement(MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
+            React.createElement(Box, { sx: commonListItemStyles },
+                React.createElement(ListItemIcon, null,
+                    React.createElement(ClearAllIcon, null)),
+                localization.clearSort)),
+        React.createElement(MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
+            React.createElement(Box, { sx: commonListItemStyles },
+                React.createElement(ListItemIcon, null,
+                    React.createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 :
+                _e.replace('{column}', String(columnDef.header)))),
+        React.createElement(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
+            React.createElement(Box, { sx: commonListItemStyles },
+                React.createElement(ListItemIcon, null,
+                    React.createElement(SortIcon, null)), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 :
+                _f.replace('{column}', String(columnDef.header)))),
+    ]),
         enableColumnFilters &&
             column.getCanFilter() &&
             [
@@ -812,8 +831,8 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
                 React.createElement(MenuItem, { divider: enableGrouping || enableHiding, key: 1, onClick: handleFilterByColumn, sx: commonMenuItemStyles },
                     React.createElement(Box, { sx: commonListItemStyles },
                         React.createElement(ListItemIcon, null,
-                            React.createElement(FilterListIcon, null)), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 :
-                        _d.replace('{column}', String(columnDef.header))),
+                            React.createElement(FilterListIcon, null)), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 :
+                        _g.replace('{column}', String(columnDef.header))),
                     showFilterModeSubMenu && (React.createElement(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } },
                         React.createElement(ArrowRightIcon, null)))),
                 showFilterModeSubMenu && (React.createElement(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, key: 2, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table })),
@@ -823,8 +842,8 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
             React.createElement(MenuItem, { divider: enablePinning, key: 0, onClick: handleGroupByColumn, sx: commonMenuItemStyles },
                 React.createElement(Box, { sx: commonListItemStyles },
                     React.createElement(ListItemIcon, null,
-                        React.createElement(DynamicFeedIcon, null)), (_e = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _e === void 0 ? void 0 :
-                    _e.replace('{column}', String(columnDef.header)))),
+                        React.createElement(DynamicFeedIcon, null)), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 :
+                    _h.replace('{column}', String(columnDef.header)))),
         ],
         enablePinning &&
             column.getCanPin() && [
@@ -856,14 +875,14 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
             React.createElement(MenuItem, { disabled: columnDef.enableHiding === false, key: 0, onClick: handleHideColumn, sx: commonMenuItemStyles },
                 React.createElement(Box, { sx: commonListItemStyles },
                     React.createElement(ListItemIcon, null,
-                        React.createElement(VisibilityOffIcon, null)), (_f = localization.hideColumn) === null || _f === void 0 ? void 0 :
-                    _f.replace('{column}', String(columnDef.header)))),
+                        React.createElement(VisibilityOffIcon, null)), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 :
+                    _j.replace('{column}', String(columnDef.header)))),
             React.createElement(MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
                     .length, key: 1, onClick: handleShowAllColumns, sx: commonMenuItemStyles },
                 React.createElement(Box, { sx: commonListItemStyles },
                     React.createElement(ListItemIcon, null,
-                        React.createElement(ViewColumnIcon, null)), (_g = localization.showAllColumns) === null || _g === void 0 ? void 0 :
-                    _g.replace('{column}', String(columnDef.header))),
+                        React.createElement(ViewColumnIcon, null)), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 :
+                    _k.replace('{column}', String(columnDef.header))),
                 React.createElement(IconButton, { onClick: handleOpenShowHideColumnsMenu, onMouseEnter: handleOpenShowHideColumnsMenu, size: "small", sx: { p: 0 } },
                     React.createElement(ArrowRightIcon, null))),
             React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: showHideColumnsMenuAnchorEl, isSubMenu: true, key: 2, setAnchorEl: setShowHideColumnsMenuAnchorEl, table: table }),
@@ -909,7 +928,7 @@ const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
             values: (_b = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _b !== void 0 ? _b : Object.assign({}, row.original),
         });
     };
-    return (React.createElement(Box, { sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { arrow: true, title: localization.cancel },
             React.createElement(IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
                 React.createElement(CancelIcon, null))),
@@ -930,7 +949,7 @@ const commonIconButtonStyles = {
         opacity: 1,
     },
 };
-const MRT_ToggleRowActionMenuButton = ({ cell, row, table }) => {
+const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
     const { getState, options: { editingMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
     const { editingRow } = getState();
     const [anchorEl, setAnchorEl] = useState(null);
@@ -939,7 +958,8 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table }) => {
         event.preventDefault();
         setAnchorEl(event.currentTarget);
     };
-    const handleStartEditMode = () => {
+    const handleStartEditMode = (event) => {
+        event.stopPropagation();
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
@@ -971,7 +991,11 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
                 ? selectAllMode === 'all'
                     ? table.getToggleAllRowsSelectedHandler()
                     : table.getToggleAllPageRowsSelectedHandler()
-                : row.getToggleSelectedHandler(), size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
+                : row.getToggleSelectedHandler(), size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
+            }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
                 ? checkboxProps.sx(theme)
                 : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) }))));
 };
@@ -1831,7 +1855,11 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             }
-        }, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown })));
+        }, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
+        }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown })));
 };
 
 const MRT_CopyButton = ({ cell, children, table, }) => {
@@ -1839,7 +1867,8 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
     const { column, row } = cell;
     const { columnDef } = column;
     const [copied, setCopied] = useState(false);
-    const handleCopy = (text) => {
+    const handleCopy = (event, text) => {
+        event.stopPropagation();
         navigator.clipboard.writeText(text);
         setCopied(true);
         setTimeout(() => setCopied(false), 4000);
@@ -1855,7 +1884,7 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
         : columnDef.muiTableBodyCellCopyButtonProps;
     const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
     return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: copied ? localization.copiedToClipboard : localization.clickToCopy },
-        React.createElement(Button, Object.assign({ onClick: () => handleCopy(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' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
+        React.createElement(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
                 ? buttonProps.sx(theme)
                 : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))) }), children)));
 };
@@ -2105,7 +2134,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
 };
 
 const MRT_TableBody = ({ table, tableContainerRef }) => {
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, virtualizerInstanceRef, }, } = table;
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, } = table;
     const { globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
@@ -2116,6 +2145,8 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
     const rows = useMemo(() => {
         if (enableGlobalFilterRankedResults &&
             globalFilter &&
+            !manualFiltering &&
+            !manualSorting &&
             !Object.values(sorting).some(Boolean)) {
             const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
             if (enablePagination) {
@@ -2136,11 +2167,9 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
     const virtualizer = enableRowVirtualization
         ? useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
         : {};
-    useEffect(() => {
-        if (virtualizerInstanceRef) {
-            virtualizerInstanceRef.current = virtualizer;
-        }
-    }, [virtualizer]);
+    if (virtualizerInstanceRef) {
+        virtualizerInstanceRef.current = virtualizer;
+    }
     // const virtualizer: Virtualizer = enableRowVirtualization
     //   ? useVirtualizer({
     //       count: rows.length,
@@ -2447,11 +2476,9 @@ const MRT_TableRoot = (props) => {
             tableContainerRef,
             topToolbarRef,
         }, setColumnFilterFns: (_w = props.onFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setDensity: (_x = props.onDensityChange) !== null && _x !== void 0 ? _x : setDensity, setDraggingColumn: (_y = props.onDraggingColumnChange) !== null && _y !== void 0 ? _y : setDraggingColumn, setDraggingRow: (_z = props.onDraggingRowChange) !== null && _z !== void 0 ? _z : setDraggingRow, setEditingCell: (_0 = props.onEditingCellChange) !== null && _0 !== void 0 ? _0 : setEditingCell, setEditingRow: (_1 = props.onEditingRowChange) !== null && _1 !== void 0 ? _1 : setEditingRow, setGlobalFilterFn: (_2 = props.onGlobalFilterFnChange) !== null && _2 !== void 0 ? _2 : setGlobalFilterFn, setHoveredColumn: (_3 = props.onHoveredColumnChange) !== null && _3 !== void 0 ? _3 : setHoveredColumn, setHoveredRow: (_4 = props.onHoveredRowChange) !== null && _4 !== void 0 ? _4 : setHoveredRow, setIsFullScreen: (_5 = props.onIsFullScreenChange) !== null && _5 !== void 0 ? _5 : setIsFullScreen, setShowAlertBanner: (_6 = props.onShowAlertBannerChange) !== null && _6 !== void 0 ? _6 : setShowAlertBanner, setShowFilters: (_7 = props.onShowFiltersChange) !== null && _7 !== void 0 ? _7 : setShowFilters, setShowGlobalFilter: (_8 = props.onShowGlobalFilterChange) !== null && _8 !== void 0 ? _8 : setShowGlobalFilter });
-    useEffect(() => {
-        if (props.tableInstanceRef) {
-            props.tableInstanceRef.current = table;
-        }
-    }, [table]);
+    if (props.tableInstanceRef) {
+        props.tableInstanceRef.current = table;
+    }
     return (React.createElement(React.Fragment, null,
         React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
             React.createElement(MRT_TablePaper, { table: table })),