material-react-table 0.38.4 → 0.40.1

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

@@ -1,12 +1,7 @@
 /// <reference types="react" />
-import type { MRT_Header, MRT_TableInstance } from '..';
+import type { MRT_Header, MRT_InternalFilterOption, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
-export declare const internalFilterOptions: (localization: MRT_Localization) => {
-    option: string;
-    symbol: string;
-    label: string;
-    divider: boolean;
-}[];
+export declare const mrtFilterOptions: (localization: MRT_Localization) => MRT_InternalFilterOption[];
 interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
     header?: MRT_Header;

package/dist/esm/MaterialReactTable.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, DragEvent, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import type { AlertProps, ButtonProps, CheckboxProps, ChipProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
-import type { Options as VirtualizerOptions } from 'react-virtual';
+import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
 import { MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_Localization } from './localization';
@@ -154,7 +154,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnDragging?: boolean;
-    enableColumnFilterChangeMode?: boolean;
+    enableColumnFilterModes?: boolean;
     enableColumnOrdering?: boolean;
     enableEditing?: boolean;
     filterFn?: MRT_FilterFn<TData>;
@@ -216,6 +216,10 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => TableCellProps);
+    renderColumnFilterModeMenuItems?: ({ table, column, }: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+    }) => ReactNode[];
     sortingFn?: MRT_SortingFn;
 };
 export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
@@ -249,6 +253,12 @@ export declare type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_S
 export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
 export declare type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
 export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
+export declare type MRT_InternalFilterOption = {
+    option: string;
+    symbol: string;
+    label: string;
+    divider: boolean;
+};
 export declare type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand' | 'mrt-row-numbers' | 'mrt-row-select';
 /**
  * `columns` and `data` props are the only required props, but there are over 150 other optional props.
@@ -272,13 +282,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnDragging?: boolean;
-    enableColumnFilterChangeMode?: boolean;
+    enableColumnFilterModes?: boolean;
     enableColumnOrdering?: boolean;
     enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
-    enableGlobalFilterChangeMode?: boolean;
+    enableGlobalFilterModes?: boolean;
     enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
     enableRowActions?: boolean;
@@ -460,10 +470,21 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     renderBottomToolbarCustomActions?: ({ table, }: {
         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;
     renderDetailPanel?: ({ row, table, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderGlobalFilterModeMenuItems?: ({ internalFilterOptions, onSelectFilterMode, table, }: {
+        internalFilterOptions: MRT_InternalFilterOption[];
+        onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode[];
     renderRowActionMenuItems?: ({ closeMenu, row, table, }: {
         closeMenu: () => void;
         row: MRT_Row<TData>;
@@ -484,9 +505,18 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
+    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => Partial<VirtualizerOptions<HTMLDivElement>>);
+    virtualizerInstanceRef?: MutableRefObject<Virtualizer | null>;
+};
+export declare type Virtualizer = {
+    virtualItems: VirtualItem[];
+    totalSize: number;
+    scrollToOffset: (index: number, options?: any | undefined) => void;
+    scrollToIndex: (index: number, options?: any | undefined) => void;
+    measure: () => void;
 };
-declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 export default _default;

package/dist/esm/column.utils.d.ts

@@ -3,6 +3,7 @@ import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDe
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 export declare const defaultDisplayColumnDefOptions: Partial<MRT_ColumnDef<{}>>;
+export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
 export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
 export declare const prepareColumns: <TData extends Record<string, any> = {}>(columnDefs: MRT_ColumnDef<TData>[], columnFilterFns: {
     [key: string]: MRT_FilterOption;

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

@@ -292,7 +292,7 @@ const MRT_ExpandButton = ({ row, table }) => {
                     } })))));
 };
 
-const internalFilterOptions = (localization) => [
+const mrtFilterOptions = (localization) => [
     {
         option: 'fuzzy',
         symbol: '≈',
@@ -379,19 +379,19 @@ const internalFilterOptions = (localization) => [
     },
 ];
 const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table, }) => {
-    var _a;
-    const { getState, options: { enabledGlobalFilterOptions, columnFilterModeOptions, localization, }, setColumnFilterFns, setGlobalFilterFn, } = table;
-    const { columnFilterFns, globalFilterFn, density } = getState();
+    var _a, _b;
+    const { getState, options: { enabledGlobalFilterOptions, columnFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
+    const { globalFilterFn, density } = getState();
     const { column } = header !== null && header !== void 0 ? header : {};
     const { columnDef } = column !== null && column !== void 0 ? column : {};
     const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
-    const filterOptions = useMemo(() => internalFilterOptions(localization).filter((filterOption) => columnDef
+    const internalFilterOptions = useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
         ? allowedColumnFilterOptions === undefined ||
             (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
         : (!enabledGlobalFilterOptions ||
             enabledGlobalFilterOptions.includes(filterOption.option)) &&
-            ['fuzzy', 'contains'].includes(filterOption.option)), []);
-    const handleSelectFilterType = (option) => {
+            ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option)), []);
+    const handleSelectFilterMode = (option) => {
         if (header && column) {
             setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
             if (['empty', 'notEmpty'].includes(option)) {
@@ -410,15 +410,26 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
         setAnchorEl(null);
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
-    const filterOption = !!header ? columnFilterFns[header.id] : globalFilterFn;
+    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',
-        } }, filterOptions.map(({ option, label, divider, symbol }, index) => (React.createElement(MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterType(option), selected: option === filterOption, sx: {
-            py: '6px',
-            my: 0,
+        } }, (_b = (header && column
+        ? 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 && _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: {
             alignItems: 'center',
             display: 'flex',
             gap: '2ch',
+            my: 0,
+            py: '6px',
         }, value: option },
         React.createElement(Box, { sx: { fontSize: '1.25rem', width: '2ch' } }, symbol),
         label)))));
@@ -604,7 +615,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
         }
     };
     const handleDragEnter = (_e) => {
-        if (!isDragging) {
+        if (!isDragging && columnDef.enableColumnOrdering !== false) {
             setHoveredColumn(column);
         }
     };
@@ -706,7 +717,7 @@ const commonListItemStyles = {
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
-    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { enableColumnFilterChangeMode, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, columnFilterModeOptions, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, }, refs: { filterInputRefs }, setShowFilters, } = table;
+    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;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density } = getState();
@@ -764,8 +775,8 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     };
     const isSelectFilter = !!columnDef.filterSelectOptions;
     const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
-    const showFilterModeSubMenu = enableColumnFilterChangeMode &&
-        columnDef.enableColumnFilterChangeMode !== false &&
+    const showFilterModeSubMenu = enableColumnFilterModes &&
+        columnDef.enableColumnFilterModes !== false &&
         !isSelectFilter &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
@@ -967,7 +978,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
     var _a;
-    const { getState, setGlobalFilter, options: { enableGlobalFilterChangeMode, icons: { SearchIcon, CloseIcon }, localization, muiSearchTextFieldProps, }, refs: { searchInputRef }, } = table;
+    const { getState, setGlobalFilter, options: { enableGlobalFilterModes, icons: { SearchIcon, CloseIcon }, localization, muiSearchTextFieldProps, }, refs: { searchInputRef }, } = table;
     const { globalFilter, showGlobalFilter } = getState();
     const [anchorEl, setAnchorEl] = useState(null);
     const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
@@ -991,7 +1002,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
         : muiSearchTextFieldProps;
     return (React.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal" },
         React.createElement(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
-                startAdornment: enableGlobalFilterChangeMode ? (React.createElement(InputAdornment, { position: "start" },
+                startAdornment: enableGlobalFilterModes ? (React.createElement(InputAdornment, { position: "start" },
                     React.createElement(Tooltip, { arrow: true, title: localization.changeSearchMode },
                         React.createElement(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
                             React.createElement(SearchIcon, null))))) : (React.createElement(SearchIcon, { style: { marginRight: '4px' } })),
@@ -1164,11 +1175,13 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
 const MRT_ToolbarDropZone = ({ table }) => {
     var _a, _b;
     const { getState, options: { enableGrouping, localization }, setHoveredColumn, } = table;
-    const { draggingColumn, hoveredColumn } = getState();
+    const { draggingColumn, hoveredColumn, grouping } = getState();
     const handleDragEnter = (_event) => {
         setHoveredColumn({ id: 'drop-zone' });
     };
-    return (React.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping && !!draggingColumn },
+    return (React.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
+            !!draggingColumn &&
+            !grouping.includes(draggingColumn.id) },
         React.createElement(Box, { sx: (theme) => ({
                 alignItems: 'center',
                 backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
@@ -1302,10 +1315,9 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { getState, options: { enableColumnFilterChangeMode, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, muiTableHeadCellFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
+    const { options: { enableColumnFilterModes, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, muiTableHeadCellFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const { columnFilterFns } = getState();
     const mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function
         ? muiTableHeadCellFilterTextFieldProps({
             column,
@@ -1326,7 +1338,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const isMultiSelectFilter = columnDef.filterVariant === 'multi-select';
     const isTextboxFilter = columnDef.filterVariant === 'text' ||
         (!isSelectFilter && !isMultiSelectFilter);
-    const currentFilterOption = columnFilterFns === null || columnFilterFns === void 0 ? void 0 : columnFilterFns[header.id];
+    const currentFilterOption = columnDef._filterFn;
     const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
         ? //@ts-ignore
             localization[`filter${((_b = (_a = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _a === void 0 ? void 0 : _a.call(currentFilterOption, 0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
@@ -1340,8 +1352,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 ? localization.max
                 : '';
     const allowedColumnFilterOptions = (_d = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _d !== void 0 ? _d : columnFilterModeOptions;
-    const showChangeModeButton = enableColumnFilterChangeMode &&
-        columnDef.enableColumnFilterChangeMode !== false &&
+    const showChangeModeButton = enableColumnFilterModes &&
+        columnDef.enableColumnFilterModes !== false &&
         !rangeFilterIndex &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
@@ -1448,7 +1460,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 if (textFieldProps.inputRef) {
                     textFieldProps.inputRef = inputRef;
                 }
-            }, sx: (theme) => (Object.assign({ p: 0, minWidth: !filterChipLabel ? '150px' : 'auto', width: '100%', '&	.MuiSelect-icon': {
+            }, sx: (theme) => (Object.assign({ p: 0, minWidth: !filterChipLabel ? '120px' : 'auto', width: '100%', '&	.MuiSelect-icon': {
                     mr: '1.5rem',
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
@@ -1482,9 +1494,10 @@ const MRT_FilterRangeFields = ({ header, table }) => {
 
 const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
     const { getState } = table;
-    const { columnFilterFns, showColumnFilters } = getState();
+    const { showColumnFilters } = getState();
     const { column } = header;
-    return (React.createElement(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, ['between', 'betweenInclusive', 'inNumberRange'].includes(columnFilterFns[column.id]) ? (React.createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React.createElement(MRT_FilterTextField, { header: header, table: table }))));
+    const { columnDef } = column;
+    return (React.createElement(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (React.createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React.createElement(MRT_FilterTextField, { header: header, table: table }))));
 };
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
@@ -1615,7 +1628,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
     var _a, _b, _c, _d;
     const theme = useTheme();
     const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnResizing, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setHoveredColumn, } = table;
-    const { density, draggingColumn, hoveredColumn, showColumnFilters } = getState();
+    const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -1731,11 +1744,14 @@ const MRT_TableHeadCell = ({ header, table }) => {
                 column.getCanSort() && (React.createElement(MRT_TableHeadCellSortLabel, { header: header, table: table })),
                 column.getCanFilter() && (React.createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
             columnDefType !== 'group' && (React.createElement(Box, { sx: { whiteSpace: 'nowrap' } },
-                ((enableColumnDragging &&
-                    columnDef.enableColumnDragging !== false) ||
-                    (enableColumnOrdering &&
-                        columnDef.enableColumnOrdering !== false) ||
-                    (enableGrouping && columnDef.enableGrouping !== false)) && (React.createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: tableHeadCellRef })),
+                enableColumnDragging !== false &&
+                    columnDef.enableColumnDragging !== false &&
+                    (enableColumnDragging ||
+                        (enableColumnOrdering &&
+                            columnDef.enableColumnOrdering !== false) ||
+                        (enableGrouping &&
+                            columnDef.enableGrouping !== false &&
+                            !grouping.includes(column.id))) && (React.createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: tableHeadCellRef })),
                 (enableColumnActions || columnDef.enableColumnActions) &&
                     columnDef.enableColumnActions !== false && (React.createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
             column.getCanResize() && (React.createElement(MRT_TableHeadCellResizeHandle, { header: header, table: table })))),
@@ -1918,7 +1934,9 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
                 column.getSize() / 3)
         : 100), [isLoading, showSkeletons]);
-    const handleDoubleClick = (_event) => {
+    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 ((enableEditing || columnDef.enableEditing) &&
             columnDef.enableEditing !== false &&
             editingMode === 'cell') {
@@ -1942,7 +1960,9 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     const getTotalRight = () => {
         return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
     };
-    const handleDragEnter = (_e) => {
+    const handleDragEnter = (e) => {
+        var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             setHoveredColumn(null);
         }
@@ -1968,7 +1988,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                 : undefined,
         }
         : undefined;
-    return (React.createElement(TableCell, Object.assign({ onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter }, tableCellProps, { sx: (theme) => {
+    return (React.createElement(TableCell, Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => {
             var _a;
             return (Object.assign(Object.assign(Object.assign({ backgroundColor: column.getIsPinned()
                     ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
@@ -2085,7 +2105,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
 };
 
 const MRT_TableBody = ({ table, tableContainerRef }) => {
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, }, } = table;
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, virtualizerInstanceRef, }, } = table;
     const { globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
@@ -2113,10 +2133,15 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
             : getRowModel().rows,
         globalFilter,
     ]);
-    const rowVirtualizer = enableRowVirtualization
+    const virtualizer = enableRowVirtualization
         ? useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
         : {};
-    // const rowVirtualizer: Virtualizer = enableRowVirtualization
+    useEffect(() => {
+        if (virtualizerInstanceRef) {
+            virtualizerInstanceRef.current = virtualizer;
+        }
+    }, [virtualizer]);
+    // const virtualizer: Virtualizer = enableRowVirtualization
     //   ? useVirtualizer({
     //       count: rows.length,
     //       estimateSize: () => (density === 'compact' ? 25 : 50),
@@ -2125,24 +2150,22 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
     //       ...vProps,
     //     })
     //   : ({} as any);
-    const virtualRows = enableRowVirtualization
-        ? rowVirtualizer.virtualItems
-        : [];
+    const virtualRows = enableRowVirtualization ? virtualizer.virtualItems : [];
     // const virtualRows = enableRowVirtualization
-    //   ? rowVirtualizer.getVirtualItems()
+    //   ? virtualizer.getVirtualItems()
     //   : [];
     let paddingTop = 0;
     let paddingBottom = 0;
     if (enableRowVirtualization) {
         paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
         paddingBottom = !!virtualRows.length
-            ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
+            ? virtualizer.totalSize - virtualRows[virtualRows.length - 1].end
             : 0;
     }
     // if (enableRowVirtualization) {
     //   paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
     //   paddingBottom = !!virtualRows.length
-    //     ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+    //     ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
     //     : 0;
     // }
     return (React.createElement(TableBody, Object.assign({}, tableBodyProps),
@@ -2330,11 +2353,11 @@ const MRT_TableRoot = (props) => {
         return initState;
     }, []);
     const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d;
         return ({
-            [(_d = (_b = (_a = col.id) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : (_c = col.accessorKey) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '']: col.filterFn instanceof Function
-                ? (_e = col.filterFn.name) !== null && _e !== void 0 ? _e : 'custom'
-                : (_m = (_f = col.filterFn) !== null && _f !== void 0 ? _f : (_g = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _g === void 0 ? void 0 : _g[(_l = (_j = (_h = col.id) === null || _h === void 0 ? void 0 : _h.toString()) !== null && _j !== void 0 ? _j : (_k = col.accessorKey) === null || _k === void 0 ? void 0 : _k.toString()) !== null && _l !== void 0 ? _l : '']) !== null && _m !== void 0 ? _m : getDefaultColumnFilterFn(col),
+            [getColumnId(col)]: col.filterFn instanceof Function
+                ? (_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom'
+                : (_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, setColumnOrder] = useState((_a = initialState.columnOrder) !== null && _a !== void 0 ? _a : []);
@@ -2424,6 +2447,11 @@ 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]);
     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 })),
@@ -2432,8 +2460,8 @@ const MRT_TableRoot = (props) => {
 };
 
 var MaterialReactTable = (_a) => {
-    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilterChangeMode = false, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterChangeMode = false, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
-    return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilterChangeMode: enableColumnFilterChangeMode, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterChangeMode: enableGlobalFilterChangeMode, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
+    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
+    return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilterModes: enableColumnFilterModes, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterModes: enableGlobalFilterModes, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
 };
 
 export { MRT_CopyButton, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTable as default };