material-react-table 1.4.0-beta.0 → 1.4.0-beta.2

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

@@ -1,4 +1,5 @@
-import React, { useMemo, useRef, useState, useCallback, useEffect, Fragment, memo, useLayoutEffect } from 'react';
+import * as React from 'react';
+import React__default, { useMemo, useRef, useState, useCallback, useEffect, Fragment, memo as memo$1, useLayoutEffect } from 'react';
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { alpha, lighten, useTheme, darken } from '@mui/material/styles';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
@@ -67,7 +68,6 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import TableSortLabel from '@mui/material/TableSortLabel';
-import { useVirtual } from 'react-virtual';
 import TableBody from '@mui/material/TableBody';
 import Skeleton from '@mui/material/Skeleton';
 import TableFooter from '@mui/material/TableFooter';
@@ -249,7 +249,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
         ? tableCellProps.sx(theme)
         : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { flex: table.options.layoutMode === 'grid'
             ? `${column.getSize()} 0 auto`
-            : undefined, maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
+            : undefined, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
 };
 const MRT_DefaultColumn = {
     minSize: 40,
@@ -411,14 +411,14 @@ const MRT_ExpandAllButton = ({ table }) => {
         ? muiExpandAllButtonProps({ table })
         : muiExpandAllButtonProps;
     const isAllRowsExpanded = getIsAllRowsExpanded();
-    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
+    return (React__default.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
             ? localization.collapseAll
             : localization.expandAll },
-        React.createElement("span", null,
-            React.createElement(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+        React__default.createElement("span", null,
+            React__default.createElement(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
                     : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-                React.createElement(KeyboardDoubleArrowDownIcon, { style: {
+                React__default.createElement(KeyboardDoubleArrowDownIcon, { style: {
                         transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })))));
@@ -439,14 +439,14 @@ const MRT_ExpandButton = ({ row, table }) => {
         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, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
+    return (React__default.createElement(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
             ? localization.collapse
             : localization.expand },
-        React.createElement("span", null,
-            React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !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
+        React__default.createElement("span", null,
+            React__default.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !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))), title: undefined }),
-                React.createElement(ExpandMoreIcon, { style: {
+                React__default.createElement(ExpandMoreIcon, { style: {
                         transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })))));
@@ -579,7 +579,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
-    return (React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
+    return (React__default.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
             dense: density === 'compact',
         } }, (_d = (header && column && columnDef
         ? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
@@ -597,14 +597,14 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,
             table,
-        }))) !== 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: {
+        }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React__default.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),
+        React__default.createElement(Box, { sx: { fontSize: '1.25rem', width: '2ch' } }, symbol),
         label)))));
 };
 
@@ -613,17 +613,17 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
     const handlePinColumn = (pinDirection) => {
         column.pin(pinDirection);
     };
-    return (React.createElement(Box, { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React.createElement(Tooltip, { arrow: true, title: localization.unpin },
-        React.createElement(IconButton, { onClick: () => handlePinColumn(false), size: "small" },
-            React.createElement(PushPinIcon, null)))) : (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { arrow: true, title: localization.pinToLeft },
-            React.createElement(IconButton, { onClick: () => handlePinColumn('left'), size: "small" },
-                React.createElement(PushPinIcon, { style: {
+    return (React__default.createElement(Box, { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React__default.createElement(Tooltip, { arrow: true, title: localization.unpin },
+        React__default.createElement(IconButton, { onClick: () => handlePinColumn(false), size: "small" },
+            React__default.createElement(PushPinIcon, null)))) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Tooltip, { arrow: true, title: localization.pinToLeft },
+            React__default.createElement(IconButton, { onClick: () => handlePinColumn('left'), size: "small" },
+                React__default.createElement(PushPinIcon, { style: {
                         transform: 'rotate(90deg)',
                     } }))),
-        React.createElement(Tooltip, { arrow: true, title: localization.pinToRight },
-            React.createElement(IconButton, { onClick: () => handlePinColumn('right'), size: "small" },
-                React.createElement(PushPinIcon, { style: {
+        React__default.createElement(Tooltip, { arrow: true, title: localization.pinToRight },
+            React__default.createElement(IconButton, { onClick: () => handlePinColumn('right'), size: "small" },
+                React__default.createElement(PushPinIcon, { style: {
                         transform: 'rotate(-90deg)',
                     } })))))));
 };
@@ -631,8 +631,8 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
 const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
     var _a;
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
-        React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
+    return (React__default.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
+        React__default.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", 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);
@@ -644,7 +644,7 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
                 } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                 ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
                 : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-            React.createElement(DragHandleIcon, null))));
+            React__default.createElement(DragHandleIcon, null))));
 };
 
 const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }) => {
@@ -685,8 +685,8 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
             setHoveredColumn(column);
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MenuItem, { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MenuItem, { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 my: 0,
@@ -699,7 +699,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
                 pl: `${(column.depth + 0.5) * 2}rem`,
                 py: '6px',
             }) },
-            React.createElement(Box, { sx: {
+            React__default.createElement(Box, { sx: {
                     display: 'flex',
                     flexWrap: 'nowrap',
                     gap: '8px',
@@ -708,20 +708,20 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
                     columnDefType !== 'group' &&
                     enableColumnOrdering &&
                     !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
-                    (columnDef.enableColumnOrdering !== false ? (React.createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React.createElement(Box, { sx: { width: '28px' } }))),
+                    (columnDef.enableColumnOrdering !== false ? (React__default.createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React__default.createElement(Box, { sx: { width: '28px' } }))),
                 !isSubMenu &&
                     enablePinning &&
-                    (column.getCanPin() ? (React.createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React.createElement(Box, { sx: { width: '70px' } }))),
-                enableHiding ? (React.createElement(FormControlLabel, { componentsProps: {
+                    (column.getCanPin() ? (React__default.createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React__default.createElement(Box, { sx: { width: '70px' } }))),
+                enableHiding ? (React__default.createElement(FormControlLabel, { componentsProps: {
                         typography: {
                             sx: {
                                 mb: 0,
                                 opacity: columnDefType !== 'display' ? 1 : 0.5,
                             },
                         },
-                    }, checked: switchChecked, control: React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
-                        React.createElement(Switch, null)), disabled: (isSubMenu && switchChecked) || !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React.createElement(Typography, { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
-        _a.map((c, i) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
+                    }, checked: switchChecked, control: React__default.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
+                        React__default.createElement(Switch, null)), disabled: (isSubMenu && switchChecked) || !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React__default.createElement(Typography, { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
+        _a.map((c, i) => (React__default.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
 };
 
 const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) => {
@@ -752,21 +752,21 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) =
         getRightLeafColumns(),
     ]);
     const [hoveredColumn, setHoveredColumn] = useState(null);
-    return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (React__default.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
         } },
-        React.createElement(Box, { sx: {
+        React__default.createElement(Box, { sx: {
                 display: 'flex',
                 justifyContent: isSubMenu ? 'center' : 'space-between',
                 p: '0.5rem',
                 pt: 0,
             } },
-            !isSubMenu && enableHiding && (React.createElement(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
-            !isSubMenu && enableColumnOrdering && (React.createElement(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
-            !isSubMenu && enablePinning && (React.createElement(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
-            enableHiding && (React.createElement(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll))),
-        React.createElement(Divider, null),
-        allColumns.map((column, index) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
+            !isSubMenu && enableHiding && (React__default.createElement(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
+            !isSubMenu && enableColumnOrdering && (React__default.createElement(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
+            !isSubMenu && enablePinning && (React__default.createElement(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
+            enableHiding && (React__default.createElement(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll))),
+        React__default.createElement(Divider, null),
+        allColumns.map((column, index) => (React__default.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
 };
 
 const commonMenuItemStyles = {
@@ -844,7 +844,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         !isSelectFilter &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
-    return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (React__default.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
         } }, (_d = (_c = (_b = columnDef.renderColumnActionsMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
         closeMenu: () => setAnchorEl(null),
@@ -856,101 +856,101 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         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)),
+        React__default.createElement(MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
+            React__default.createElement(Box, { sx: commonListItemStyles },
+                React__default.createElement(ListItemIcon, null,
+                    React__default.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 :
+        React__default.createElement(MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
+            React__default.createElement(Box, { sx: commonListItemStyles },
+                React__default.createElement(ListItemIcon, null,
+                    React__default.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 :
+        React__default.createElement(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
+            React__default.createElement(Box, { sx: commonListItemStyles },
+                React__default.createElement(ListItemIcon, null,
+                    React__default.createElement(SortIcon, null)), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 :
                 _f.replace('{column}', String(columnDef.header)))),
     ]),
         enableColumnFilters &&
             column.getCanFilter() &&
             [
-                React.createElement(MenuItem, { disabled: !column.getFilterValue(), key: 0, onClick: handleClearFilter, sx: commonMenuItemStyles },
-                    React.createElement(Box, { sx: commonListItemStyles },
-                        React.createElement(ListItemIcon, null,
-                            React.createElement(FilterListOffIcon, null)),
+                React__default.createElement(MenuItem, { disabled: !column.getFilterValue(), key: 0, onClick: handleClearFilter, sx: commonMenuItemStyles },
+                    React__default.createElement(Box, { sx: commonListItemStyles },
+                        React__default.createElement(ListItemIcon, null,
+                            React__default.createElement(FilterListOffIcon, null)),
                         localization.clearFilter)),
-                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)), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 :
+                React__default.createElement(MenuItem, { divider: enableGrouping || enableHiding, key: 1, onClick: handleFilterByColumn, sx: commonMenuItemStyles },
+                    React__default.createElement(Box, { sx: commonListItemStyles },
+                        React__default.createElement(ListItemIcon, null,
+                            React__default.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 })),
+                    showFilterModeSubMenu && (React__default.createElement(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } },
+                        React__default.createElement(ArrowRightIcon, null)))),
+                showFilterModeSubMenu && (React__default.createElement(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, key: 2, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table })),
             ].filter(Boolean),
         enableGrouping &&
             column.getCanGroup() && [
-            React.createElement(MenuItem, { divider: enablePinning, key: 0, onClick: handleGroupByColumn, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(DynamicFeedIcon, null)), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 :
+            React__default.createElement(MenuItem, { divider: enablePinning, key: 0, onClick: handleGroupByColumn, sx: commonMenuItemStyles },
+                React__default.createElement(Box, { sx: commonListItemStyles },
+                    React__default.createElement(ListItemIcon, null,
+                        React__default.createElement(DynamicFeedIcon, null)), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 :
                     _h.replace('{column}', String(columnDef.header)))),
         ],
         enablePinning &&
             column.getCanPin() && [
-            React.createElement(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), key: 0, onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(PushPinIcon, { style: { transform: 'rotate(90deg)' } })),
+            React__default.createElement(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), key: 0, onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles },
+                React__default.createElement(Box, { sx: commonListItemStyles },
+                    React__default.createElement(ListItemIcon, null,
+                        React__default.createElement(PushPinIcon, { style: { transform: 'rotate(90deg)' } })),
                     localization.pinToLeft)),
-            React.createElement(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), key: 1, onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(PushPinIcon, { style: { transform: 'rotate(-90deg)' } })),
+            React__default.createElement(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), key: 1, onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles },
+                React__default.createElement(Box, { sx: commonListItemStyles },
+                    React__default.createElement(ListItemIcon, null,
+                        React__default.createElement(PushPinIcon, { style: { transform: 'rotate(-90deg)' } })),
                     localization.pinToRight)),
-            React.createElement(MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, key: 2, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(PushPinIcon, null)),
+            React__default.createElement(MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, key: 2, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles },
+                React__default.createElement(Box, { sx: commonListItemStyles },
+                    React__default.createElement(ListItemIcon, null,
+                        React__default.createElement(PushPinIcon, null)),
                     localization.unpin)),
         ],
         enableColumnResizing &&
             column.getCanResize() && [
-            React.createElement(MenuItem, { disabled: !columnSizing[column.id], key: 0, onClick: handleResetColumnSize, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(RestartAltIcon, null)),
+            React__default.createElement(MenuItem, { disabled: !columnSizing[column.id], key: 0, onClick: handleResetColumnSize, sx: commonMenuItemStyles },
+                React__default.createElement(Box, { sx: commonListItemStyles },
+                    React__default.createElement(ListItemIcon, null,
+                        React__default.createElement(RestartAltIcon, null)),
                     localization.resetColumnSize)),
         ],
         enableHiding && [
-            React.createElement(MenuItem, { disabled: !column.getCanHide(), key: 0, onClick: handleHideColumn, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(VisibilityOffIcon, null)), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 :
+            React__default.createElement(MenuItem, { disabled: !column.getCanHide(), key: 0, onClick: handleHideColumn, sx: commonMenuItemStyles },
+                React__default.createElement(Box, { sx: commonListItemStyles },
+                    React__default.createElement(ListItemIcon, null,
+                        React__default.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)
+            React__default.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)), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 :
+                React__default.createElement(Box, { sx: commonListItemStyles },
+                    React__default.createElement(ListItemIcon, null,
+                        React__default.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 }),
+                React__default.createElement(IconButton, { onClick: handleOpenShowHideColumnsMenu, onMouseEnter: handleOpenShowHideColumnsMenu, size: "small", sx: { p: 0 } },
+                    React__default.createElement(ArrowRightIcon, null))),
+            React__default.createElement(MRT_ShowHideColumnsMenu, { anchorEl: showHideColumnsMenuAnchorEl, isSubMenu: true, key: 2, setAnchorEl: setShowHideColumnsMenuAnchorEl, table: table }),
         ]));
 };
 
 const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
     const { getState, options: { icons: { EditIcon }, enableEditing, localization, renderRowActionMenuItems, }, } = table;
     const { density } = getState();
-    return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (React__default.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
         } },
-        enableEditing && (React.createElement(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles },
-            React.createElement(Box, { sx: commonListItemStyles },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(EditIcon, null)),
+        enableEditing && (React__default.createElement(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles },
+            React__default.createElement(Box, { sx: commonListItemStyles },
+                React__default.createElement(ListItemIcon, null,
+                    React__default.createElement(EditIcon, null)),
                 localization.edit))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 :
         renderRowActionMenuItems({
             row,
@@ -983,15 +983,15 @@ 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, { 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))),
-        React.createElement(Tooltip, { arrow: true, title: localization.save },
-            React.createElement(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave },
-                React.createElement(SaveIcon, null))))) : (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: handleCancel }, localization.cancel),
-        React.createElement(Button, { onClick: handleSave, variant: "contained" }, localization.save)))));
+    return (React__default.createElement(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Tooltip, { arrow: true, title: localization.cancel },
+            React__default.createElement(IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
+                React__default.createElement(CancelIcon, null))),
+        React__default.createElement(Tooltip, { arrow: true, title: localization.save },
+            React__default.createElement(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave },
+                React__default.createElement(SaveIcon, null))))) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Button, { onClick: handleCancel }, localization.cancel),
+        React__default.createElement(Button, { onClick: handleSave, variant: "contained" }, localization.save)))));
 };
 
 const commonIconButtonStyles = {
@@ -1018,13 +1018,13 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
-        React.createElement(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
-            React.createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
-            React.createElement(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles },
-                React.createElement(MoreHorizIcon, null))),
-        React.createElement(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table }))) : null));
+    return (React__default.createElement(React__default.Fragment, null, renderRowActions ? (React__default.createElement(React__default.Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React__default.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React__default.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
+        React__default.createElement(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
+            React__default.createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
+            React__default.createElement(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles },
+                React__default.createElement(MoreHorizIcon, null))),
+        React__default.createElement(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table }))) : null));
 };
 
 const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
@@ -1057,9 +1057,9 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
         }, 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))), title: undefined });
-    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
+    return (React__default.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow) }, enableMultiRowSelection === false ? (React.createElement(Radio, Object.assign({}, commonProps))) : (React.createElement(Checkbox, Object.assign({ indeterminate: selectAll
+            : localization.toggleSelectRow) }, enableMultiRowSelection === false ? (React__default.createElement(Radio, Object.assign({}, commonProps))) : (React__default.createElement(Checkbox, Object.assign({ indeterminate: selectAll
             ? table.getIsSomeRowsSelected() &&
                 !(selectAllMode === 'page'
                     ? table.getIsAllPageRowsSelected()
@@ -1096,24 +1096,24 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
             handleClear();
         }
     }, [globalFilter]);
-    return (React.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
-        React.createElement(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
-                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' } })),
-                endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                    React.createElement(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '' },
-                        React.createElement("span", null,
-                            React.createElement(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" },
-                                React.createElement(CloseIcon, null)))))),
+    return (React__default.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
+        React__default.createElement(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
+                startAdornment: enableGlobalFilterModes ? (React__default.createElement(InputAdornment, { position: "start" },
+                    React__default.createElement(Tooltip, { arrow: true, title: localization.changeSearchMode },
+                        React__default.createElement(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
+                            React__default.createElement(SearchIcon, null))))) : (React__default.createElement(SearchIcon, { style: { marginRight: '4px' } })),
+                endAdornment: (React__default.createElement(InputAdornment, { position: "end" },
+                    React__default.createElement(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '' },
+                        React__default.createElement("span", null,
+                            React__default.createElement(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" },
+                                React__default.createElement(CloseIcon, null)))))),
             } }, textFieldProps, { inputRef: (inputRef) => {
                 searchInputRef.current = inputRef;
                 if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
                     textFieldProps.inputRef = inputRef;
                 }
             } })),
-        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })));
+        React__default.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })));
 };
 
 const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
@@ -1122,13 +1122,13 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
     const linearProgressProps = muiLinearProgressProps instanceof Function
         ? muiLinearProgressProps({ isTopToolbar, table })
         : muiLinearProgressProps;
-    return (React.createElement(Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
+    return (React__default.createElement(Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
             top: !isTopToolbar ? 0 : undefined,
             width: '100%',
         } },
-        React.createElement(LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps))));
+        React__default.createElement(LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps))));
 };
 
 const MRT_TablePagination = ({ table, position, }) => {
@@ -1142,7 +1142,7 @@ const MRT_TablePagination = ({ table, position, }) => {
     const handleChangeRowsPerPage = (event) => {
         setPageSize(+event.target.value);
     };
-    return (React.createElement(TablePagination, Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
+    return (React__default.createElement(TablePagination, Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
             ? localization.goToFirstPage
             : type === 'last'
                 ? localization.goToLastPage
@@ -1183,26 +1183,26 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
     const selectMessage = getSelectedRowModel().rows.length > 0
         ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
         : null;
-    const groupedByMessage = grouping.length > 0 ? (React.createElement("span", null,
+    const groupedByMessage = grouping.length > 0 ? (React__default.createElement("span", null,
         localization.groupedBy,
         ' ',
-        grouping.map((columnId, index) => (React.createElement(Fragment, { key: `${index}-${columnId}` },
+        grouping.map((columnId, index) => (React__default.createElement(Fragment, { key: `${index}-${columnId}` },
             index > 0 ? localization.thenBy : '',
-            React.createElement(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))))))) : null;
-    return (React.createElement(Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
-        React.createElement(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', mb: stackAlertBanner
+            React__default.createElement(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))))))) : null;
+    return (React__default.createElement(Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
+        React__default.createElement(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', mb: stackAlertBanner
                     ? 0
                     : positionToolbarAlertBanner === 'bottom'
                         ? '-1rem'
                         : undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
                 ? alertProps.sx(theme)
                 : alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))) }),
-            (alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && React.createElement(AlertTitle, null, alertProps.title),
-            React.createElement(Box, { sx: { p: '0.5rem 1rem' } }, alertProps === null || alertProps === void 0 ? void 0 :
+            (alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && React__default.createElement(AlertTitle, null, alertProps.title),
+            React__default.createElement(Box, { sx: { p: '0.5rem 1rem' } }, alertProps === null || alertProps === void 0 ? void 0 :
                 alertProps.children,
-                (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (React.createElement("br", null)),
+                (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (React__default.createElement("br", null)),
                 selectMessage,
-                selectMessage && groupedByMessage && React.createElement("br", null),
+                selectMessage && groupedByMessage && React__default.createElement("br", null),
                 groupedByMessage))));
 };
 
@@ -1214,8 +1214,8 @@ const MRT_FullScreenToggleButton = (_a) => {
     const handleToggleFullScreen = () => {
         setIsFullScreen(!isFullScreen);
     };
-    return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen },
-        React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null))));
+    return (React__default.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen },
+        React__default.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null))));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -1226,11 +1226,11 @@ const MRT_ShowHideColumnsButton = (_a) => {
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
-            React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
-                React.createElement(ViewColumnIcon, null))),
-        React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
+            React__default.createElement(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
+                React__default.createElement(ViewColumnIcon, null))),
+        React__default.createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
 };
 
 const MRT_ToggleDensePaddingButton = (_a) => {
@@ -1246,8 +1246,8 @@ const MRT_ToggleDensePaddingButton = (_a) => {
                 : 'comfortable';
         setDensity(nextDensity);
     };
-    return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity },
-        React.createElement(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }), density === 'compact' ? (React.createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React.createElement(DensityMediumIcon, null)) : (React.createElement(DensityLargeIcon, null)))));
+    return (React__default.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity },
+        React__default.createElement(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }), density === 'compact' ? (React__default.createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React__default.createElement(DensityMediumIcon, null)) : (React__default.createElement(DensityLargeIcon, null)))));
 };
 
 const MRT_ToggleFiltersButton = (_a) => {
@@ -1258,8 +1258,8 @@ const MRT_ToggleFiltersButton = (_a) => {
     const handleToggleShowFilters = () => {
         setShowFilters(!showColumnFilters);
     };
-    return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
-        React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null))));
+    return (React__default.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
+        React__default.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null))));
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
@@ -1271,27 +1271,27 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
-    return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
-        React.createElement(IconButton, Object.assign({ disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
+    return (React__default.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
+        React__default.createElement(IconButton, Object.assign({ disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null))));
 };
 
 const MRT_ToolbarInternalButtons = ({ table, }) => {
     var _a;
     const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
-    return (React.createElement(Box, { sx: {
+    return (React__default.createElement(Box, { sx: {
             alignItems: 'center',
             display: 'flex',
             zIndex: 3,
         } }, (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
         table,
-    })) !== null && _a !== void 0 ? _a : (React.createElement(React.Fragment, null,
+    })) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
         enableFilters &&
             enableGlobalFilter &&
-            !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (React.createElement(MRT_ToggleGlobalFilterButton, { table: table })),
-        enableFilters && enableColumnFilters && (React.createElement(MRT_ToggleFiltersButton, { table: table })),
-        (enableHiding || enableColumnOrdering || enablePinning) && (React.createElement(MRT_ShowHideColumnsButton, { table: table })),
-        enableDensityToggle && (React.createElement(MRT_ToggleDensePaddingButton, { table: table })),
-        enableFullScreenToggle && (React.createElement(MRT_FullScreenToggleButton, { table: table }))))));
+            !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (React__default.createElement(MRT_ToggleGlobalFilterButton, { table: table })),
+        enableFilters && enableColumnFilters && (React__default.createElement(MRT_ToggleFiltersButton, { table: table })),
+        (enableHiding || enableColumnOrdering || enablePinning) && (React__default.createElement(MRT_ShowHideColumnsButton, { table: table })),
+        enableDensityToggle && (React__default.createElement(MRT_ToggleDensePaddingButton, { table: table })),
+        enableFullScreenToggle && (React__default.createElement(MRT_FullScreenToggleButton, { table: table }))))));
 };
 
 const MRT_ToolbarDropZone = ({ table }) => {
@@ -1301,10 +1301,10 @@ const MRT_ToolbarDropZone = ({ table }) => {
     const handleDragEnter = (_event) => {
         setHoveredColumn({ id: 'drop-zone' });
     };
-    return (React.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
+    return (React__default.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
             !!draggingColumn &&
             !grouping.includes(draggingColumn.id) },
-        React.createElement(Box, { sx: (theme) => ({
+        React__default.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),
                 border: `dashed ${theme.palette.info.main} 2px`,
@@ -1315,7 +1315,7 @@ const MRT_ToolbarDropZone = ({ table }) => {
                 width: 'calc(100% - 4px)',
                 zIndex: 2,
             }), onDragEnter: handleDragEnter },
-            React.createElement(Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
+            React__default.createElement(Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
 };
 
 const commonToolbarStyles = ({ theme }) => ({
@@ -1339,7 +1339,7 @@ const MRT_TopToolbar = ({ table }) => {
         ? muiTopToolbarProps({ table })
         : muiTopToolbarProps;
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
-    return (React.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
+    return (React__default.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
             if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
                 // @ts-ignore
@@ -1348,9 +1348,9 @@ const MRT_TopToolbar = ({ table }) => {
         }, sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
             ? toolbarProps.sx(theme)
             : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
-        positionToolbarAlertBanner === 'top' && (React.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
-        ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React.createElement(MRT_ToolbarDropZone, { table: table })),
-        React.createElement(Box, { sx: {
+        positionToolbarAlertBanner === 'top' && (React__default.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
+        ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React__default.createElement(MRT_ToolbarDropZone, { table: table })),
+        React__default.createElement(Box, { sx: {
                 alignItems: 'flex-start',
                 boxSizing: 'border-box',
                 display: 'flex',
@@ -1361,18 +1361,18 @@ const MRT_TopToolbar = ({ table }) => {
                 top: 0,
                 width: '100%',
             } },
-            enableGlobalFilter && positionGlobalFilter === 'left' && (React.createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React.createElement("span", null),
-            enableToolbarInternalActions ? (React.createElement(Box, { sx: {
+            enableGlobalFilter && positionGlobalFilter === 'left' && (React__default.createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React__default.createElement("span", null),
+            enableToolbarInternalActions ? (React__default.createElement(Box, { sx: {
                     display: 'flex',
                     flexWrap: 'wrap-reverse',
                     justifyContent: 'flex-end',
                 } },
-                enableGlobalFilter && positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })),
-                React.createElement(MRT_ToolbarInternalButtons, { table: table }))) : (enableGlobalFilter &&
-                positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })))),
+                enableGlobalFilter && positionGlobalFilter === 'right' && (React__default.createElement(MRT_GlobalFilterTextField, { table: table })),
+                React__default.createElement(MRT_ToolbarInternalButtons, { table: table }))) : (enableGlobalFilter &&
+                positionGlobalFilter === 'right' && (React__default.createElement(MRT_GlobalFilterTextField, { table: table })))),
         enablePagination &&
-            ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React.createElement(MRT_TablePagination, { table: table, position: "top" })),
-        React.createElement(MRT_LinearProgressBar, { isTopToolbar: true, table: table })));
+            ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React__default.createElement(MRT_TablePagination, { table: table, position: "top" })),
+        React__default.createElement(MRT_LinearProgressBar, { isTopToolbar: true, table: table })));
 };
 
 const MRT_BottomToolbar = ({ table }) => {
@@ -1383,7 +1383,7 @@ const MRT_BottomToolbar = ({ table }) => {
         ? muiBottomToolbarProps({ table })
         : muiBottomToolbarProps;
     const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
-    return (React.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
+    return (React__default.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             bottomToolbarRef.current = ref;
             if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
                 // @ts-ignore
@@ -1392,10 +1392,10 @@ const MRT_BottomToolbar = ({ table }) => {
         }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
             ? toolbarProps.sx(theme)
             : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
-        React.createElement(MRT_LinearProgressBar, { isTopToolbar: false, table: table }),
-        positionToolbarAlertBanner === 'bottom' && (React.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
-        ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React.createElement(MRT_ToolbarDropZone, { table: table })),
-        React.createElement(Box, { sx: {
+        React__default.createElement(MRT_LinearProgressBar, { isTopToolbar: false, table: table }),
+        positionToolbarAlertBanner === 'bottom' && (React__default.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
+        ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React__default.createElement(MRT_ToolbarDropZone, { table: table })),
+        React__default.createElement(Box, { sx: {
                 alignItems: 'center',
                 boxSizing: 'border-box',
                 display: 'flex',
@@ -1403,15 +1403,15 @@ const MRT_BottomToolbar = ({ table }) => {
                 p: '0.5rem',
                 width: '100%',
             } },
-            renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (React.createElement("span", null)),
-            React.createElement(Box, { sx: {
+            renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (React__default.createElement("span", null)),
+            React__default.createElement(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'flex-end',
                     position: stackAlertBanner ? 'relative' : 'absolute',
                     right: 0,
                     top: 0,
                 } }, enablePagination &&
-                ['bottom', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React.createElement(MRT_TablePagination, { table: table, position: "bottom" }))))));
+                ['bottom', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React__default.createElement(MRT_TablePagination, { table: table, position: "bottom" }))))));
 };
 
 const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
@@ -1435,15 +1435,15 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
         })
         : columnDef.muiTableHeadCellColumnActionsButtonProps;
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React.createElement(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
+            React__default.createElement(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
                     : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-                React.createElement(MoreVertIcon, null))),
-        anchorEl && (React.createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))));
+                React__default.createElement(MoreVertIcon, null))),
+        anchorEl && (React__default.createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))));
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
@@ -1554,17 +1554,17 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         isMounted.current = true;
     }, [column.getFilterValue()]);
     if (columnDef.Filter) {
-        return (React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, rangeFilterIndex, table })));
+        return (React__default.createElement(React__default.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, rangeFilterIndex, table })));
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TextField, Object.assign({ fullWidth: true, inputProps: {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(TextField, Object.assign({ fullWidth: true, inputProps: {
                 disabled: !!filterChipLabel,
                 sx: {
                     textOverflow: 'ellipsis',
                     width: filterChipLabel ? 0 : undefined,
                 },
                 title: filterPlaceholder,
-            }, helperText: showChangeModeButton ? (React.createElement("label", null, localization.filterMode.replace('{filterType}', 
+            }, helperText: showChangeModeButton ? (React__default.createElement("label", null, localization.filterMode.replace('{filterType}', 
             // @ts-ignore
             localization[`filter${((_f = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _f === void 0 ? void 0 : _f.toUpperCase()) +
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]))) : null, FormHelperTextProps: {
@@ -1576,30 +1576,30 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
             }, margin: "none", placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
                 ? undefined
                 : filterPlaceholder, onChange: handleChange, onClick: (e) => e.stopPropagation(), select: isSelectFilter || isMultiSelectFilter, value: filterValue, variant: "standard", InputProps: {
-                startAdornment: showChangeModeButton ? (React.createElement(InputAdornment, { position: "start" },
-                    React.createElement(Tooltip, { arrow: true, title: localization.changeFilterMode },
-                        React.createElement("span", null,
-                            React.createElement(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
-                                React.createElement(FilterListIcon, null)))),
-                    filterChipLabel && (React.createElement(Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : null,
-                endAdornment: !filterChipLabel && (React.createElement(InputAdornment, { position: "end" },
-                    React.createElement(Tooltip, { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '' },
-                        React.createElement("span", null,
-                            React.createElement(IconButton, { "aria-label": localization.clearFilter, disabled: !(filterValue === null || filterValue === void 0 ? void 0 : filterValue.length), onClick: handleClear, size: "small", sx: {
+                startAdornment: showChangeModeButton ? (React__default.createElement(InputAdornment, { position: "start" },
+                    React__default.createElement(Tooltip, { arrow: true, title: localization.changeFilterMode },
+                        React__default.createElement("span", null,
+                            React__default.createElement(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
+                                React__default.createElement(FilterListIcon, null)))),
+                    filterChipLabel && (React__default.createElement(Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : null,
+                endAdornment: !filterChipLabel && (React__default.createElement(InputAdornment, { position: "end" },
+                    React__default.createElement(Tooltip, { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '' },
+                        React__default.createElement("span", null,
+                            React__default.createElement(IconButton, { "aria-label": localization.clearFilter, disabled: !(filterValue === null || filterValue === void 0 ? void 0 : filterValue.length), onClick: handleClear, size: "small", sx: {
                                     height: '1.75rem',
                                     width: '1.75rem',
                                 } },
-                                React.createElement(CloseIcon, null)))))),
+                                React__default.createElement(CloseIcon, null)))))),
             }, SelectProps: {
                 displayEmpty: true,
                 multiple: isMultiSelectFilter,
                 renderValue: isMultiSelectFilter
-                    ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => {
+                    ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React__default.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React__default.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => {
                         var _a;
                         const selectedValue = (_a = columnDef.filterSelectOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option instanceof Object
                             ? option.value === value
                             : option === value);
-                        return (React.createElement(Chip, { key: value, label: selectedValue instanceof Object
+                        return (React__default.createElement(Chip, { key: value, label: selectedValue instanceof Object
                                 ? selectedValue.text
                                 : selectedValue }));
                     })))
@@ -1619,8 +1619,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
                 : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))) }),
-            (isSelectFilter || isMultiSelectFilter) && (React.createElement(MenuItem, { divider: true, disabled: true, hidden: true, value: "" },
-                React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder))), (_h = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _h === void 0 ? void 0 :
+            (isSelectFilter || isMultiSelectFilter) && (React__default.createElement(MenuItem, { divider: true, disabled: true, hidden: true, value: "" },
+                React__default.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder))), (_h = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _h === void 0 ? void 0 :
             _h.map((option) => {
                 var _a;
                 let value;
@@ -1633,22 +1633,22 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     value = option.value;
                     text = option.text;
                 }
-                return (React.createElement(MenuItem, { key: value, sx: {
+                return (React__default.createElement(MenuItem, { key: value, sx: {
                         display: 'flex',
                         m: 0,
                         alignItems: 'center',
                         gap: '0.5rem',
                     }, value: value },
-                    isMultiSelectFilter && (React.createElement(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
+                    isMultiSelectFilter && (React__default.createElement(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
                     text));
             })),
-        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })));
+        React__default.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })));
 };
 
 const MRT_FilterRangeFields = ({ header, table }) => {
-    return (React.createElement(Box, { sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' } },
-        React.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }),
-        React.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })));
+    return (React__default.createElement(Box, { sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' } },
+        React__default.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }),
+        React__default.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })));
 };
 
 const MRT_FilterCheckbox = ({ column, table }) => {
@@ -1670,8 +1670,8 @@ const MRT_FilterCheckbox = ({ column, table }) => {
         : columnDef.muiTableHeadCellFilterCheckboxProps;
     const checkboxProps = Object.assign(Object.assign({}, mTableHeadCellFilterCheckboxProps), mcTableHeadCellFilterCheckboxProps);
     const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
-    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel },
-        React.createElement(FormControlLabel, { control: React.createElement(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
+    return (React__default.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel },
+        React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', 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);
@@ -1693,13 +1693,13 @@ const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (React.createElement(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, columnDef.filterVariant === 'checkbox' ? (React.createElement(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (React.createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React.createElement(MRT_FilterTextField, { header: header, table: table }))));
+    return (React__default.createElement(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, columnDef.filterVariant === 'checkbox' ? (React__default.createElement(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (React__default.createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React__default.createElement(MRT_FilterTextField, { header: header, table: table }))));
 };
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     var _a, _b, _c;
-    const { options: { icons: { FilterAltIcon }, localization, }, } = table;
+    const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const isRangeFilter = columnDef.filterVariant === 'range' ||
@@ -1715,12 +1715,18 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
         : column.getFilterValue()}"`)
         .replace('" "', '');
-    return (React.createElement(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
+    return (React__default.createElement(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
             (isRangeFilter && // @ts-ignore
                 (!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))) },
-        React.createElement(Box, { component: "span", sx: { flex: '0 0' } },
-            React.createElement(Tooltip, { arrow: true, placement: "top", title: filterTooltip },
-                React.createElement(IconButton, { disableRipple: true, onClick: (event) => {
+        React__default.createElement(Box, { component: "span", sx: { flex: '0 0' } },
+            React__default.createElement(Tooltip, { arrow: true, placement: "top", title: filterTooltip },
+                React__default.createElement(IconButton, { disableRipple: true, onClick: (event) => {
+                        setShowFilters(true);
+                        queueMicrotask(() => {
+                            var _a, _b;
+                            (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus();
+                            (_b = filterInputRefs.current[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.select();
+                        });
                         event.stopPropagation();
                     }, size: "small", sx: {
                         height: '12px',
@@ -1730,7 +1736,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
                         transform: 'scale(0.66)',
                         width: '12px',
                     } },
-                    React.createElement(FilterAltIcon, null))))));
+                    React__default.createElement(FilterAltIcon, null))))));
 };
 
 const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
@@ -1764,7 +1770,7 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
         setDraggingColumn(null);
         setHoveredColumn(null);
     };
-    return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+    return (React__default.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
 const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
@@ -1774,7 +1780,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    return (React.createElement(Box, { onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
+    return (React__default.createElement(Box, { onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
             cursor: 'col-resize',
             mr: density === 'compact' ? '-0.5rem' : '-1rem',
             position: 'absolute',
@@ -1790,7 +1796,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
                     (columnResizeMode === 'onChange' ? 16 : 1)}px)`
                 : undefined,
         } },
-        React.createElement(Divider, { flexItem: true, orientation: "vertical", sx: {
+        React__default.createElement(Divider, { flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
                 height: showColumnFilters && columnDefType === 'data' ? '3.5rem' : '1.5rem',
@@ -1812,8 +1818,8 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
             ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
             : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
         : localization.unsorted;
-    return (React.createElement(Tooltip, { arrow: true, placement: "top", title: sortTooltip },
-        React.createElement(TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
+    return (React__default.createElement(Tooltip, { arrow: true, placement: "top", title: sortTooltip },
+        React__default.createElement(TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
                 ? column.getIsSorted()
                 : undefined, sx: {
                 flex: '0 0',
@@ -1885,11 +1891,11 @@ const MRT_TableHeadCell = ({ header, table }) => {
             table,
         })
         : (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) !== null && _b !== void 0 ? _b : columnDef.header;
-    return (React.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', component: layoutMode === 'grid' ? 'div' : 'td', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
+    return (React__default.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
             }
-        }, role: "columnheader" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
+        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? columnDefType === 'display'
@@ -1916,7 +1922,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
             tableCellProps,
             theme,
         })), draggingBorders)) }),
-        header.isPlaceholder ? null : (React.createElement(Box, { className: "Mui-TableHeadCell-Content", sx: {
+        header.isPlaceholder ? null : (React__default.createElement(Box, { className: "Mui-TableHeadCell-Content", sx: {
                 alignItems: 'flex-start',
                 display: 'flex',
                 flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
@@ -1928,7 +1934,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                 position: 'relative',
                 width: '100%',
             } },
-            React.createElement(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
+            React__default.createElement(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
                     alignItems: 'center',
                     cursor: column.getCanSort() && columnDefType !== 'group'
                         ? 'pointer'
@@ -1940,20 +1946,20 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         ? `${headerPL}rem`
                         : undefined,
                 } },
-                React.createElement(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
+                React__default.createElement(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
                         overflow: columnDefType === 'data' ? 'hidden' : undefined,
                         textOverflow: 'ellipsis',
                         whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 20 ? 'nowrap' : 'normal',
                     }, title: columnDefType === 'data' ? columnDef.header : undefined }, headerElement),
-                column.getCanSort() && (React.createElement(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })),
-                column.getCanFilter() && (React.createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
-            columnDefType !== 'group' && (React.createElement(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } },
-                showDragHandle && (React.createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
+                column.getCanSort() && (React__default.createElement(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })),
+                column.getCanFilter() && (React__default.createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
+            columnDefType !== 'group' && (React__default.createElement(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } },
+                showDragHandle && (React__default.createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
                         current: tableHeadCellRefs.current[column.id],
                     } })),
-                showColumnActions && (React.createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
-            column.getCanResize() && (React.createElement(MRT_TableHeadCellResizeHandle, { header: header, table: table })))),
-        column.getCanFilter() && (React.createElement(MRT_TableHeadCellFilterContainer, { header: header, table: table }))));
+                showColumnActions && (React__default.createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
+            column.getCanResize() && (React__default.createElement(MRT_TableHeadCellResizeHandle, { header: header, table: table })))),
+        column.getCanFilter() && (React__default.createElement(MRT_TableHeadCellFilterContainer, { header: header, table: table }))));
 };
 
 const MRT_TableHeadRow = ({ headerGroup, table }) => {
@@ -1961,9 +1967,9 @@ const MRT_TableHeadRow = ({ headerGroup, table }) => {
     const tableRowProps = muiTableHeadRowProps instanceof Function
         ? muiTableHeadRowProps({ headerGroup, table })
         : muiTableHeadRowProps;
-    return (React.createElement(TableRow, Object.assign({ component: layoutMode === 'grid' ? 'div' : 'tr', role: "row" }, tableRowProps, { sx: (theme) => (Object.assign({ boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', backgroundColor: lighten(theme.palette.background.default, 0.04) }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+    return (React__default.createElement(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
             ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
-            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), headerGroup.headers.map((header) => (React.createElement(MRT_TableHeadCell, { header: header, key: header.id, table: table })))));
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), headerGroup.headers.map((header) => (React__default.createElement(MRT_TableHeadCell, { header: header, key: header.id, table: table })))));
 };
 
 const MRT_TableHead = ({ table }) => {
@@ -1973,11 +1979,574 @@ const MRT_TableHead = ({ table }) => {
         ? muiTableHeadProps({ table })
         : muiTableHeadProps;
     const stickyHeader = enableStickyHeader || enableRowVirtualization || isFullScreen;
-    return (React.createElement(TableHead, Object.assign({ component: layoutMode === 'grid' ? 'div' : 'thead', role: "rowgroup" }, tableHeadProps, { sx: (theme) => (Object.assign({ opacity: 0.97, position: stickyHeader ? 'sticky' : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
+    return (React__default.createElement(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
             ? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
-            : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
+            : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React__default.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
 
+/**
+ * virtual-core
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+function memo(getDeps, fn, opts) {
+  let deps = [];
+  let result;
+  return () => {
+    let depTime;
+    if (opts.key && opts.debug != null && opts.debug()) depTime = Date.now();
+    const newDeps = getDeps();
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
+    if (!depsChanged) {
+      return result;
+    }
+    deps = newDeps;
+    let resultTime;
+    if (opts.key && opts.debug != null && opts.debug()) resultTime = Date.now();
+    result = fn(...newDeps);
+    opts == null ? void 0 : opts.onChange == null ? void 0 : opts.onChange(result);
+    if (opts.key && opts.debug != null && opts.debug()) {
+      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+      const resultFpsPercentage = resultEndTime / 16;
+      const pad = (str, num) => {
+        str = String(str);
+        while (str.length < num) {
+          str = ' ' + str;
+        }
+        return str;
+      };
+      console.info(`%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`, `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120))}deg 100% 31%);`, opts == null ? void 0 : opts.key);
+    }
+    return result;
+  };
+}
+
+/**
+ * virtual-core
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+//
+
+//
+
+const defaultKeyExtractor = index => index;
+const defaultRangeExtractor = range => {
+  const start = Math.max(range.startIndex - range.overscan, 0);
+  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
+  const arr = [];
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+const observeElementRect = (instance, cb) => {
+  const observer = new ResizeObserver(entries => {
+    var _entries$, _entries$2;
+    cb({
+      width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
+      height: (_entries$2 = entries[0]) == null ? void 0 : _entries$2.contentRect.height
+    });
+  });
+  if (!instance.scrollElement) {
+    return;
+  }
+  cb(instance.scrollElement.getBoundingClientRect());
+  observer.observe(instance.scrollElement);
+  return () => {
+    observer.unobserve(instance.scrollElement);
+  };
+};
+const scrollProps = {
+  element: ['scrollLeft', 'scrollTop'],
+  window: ['scrollX', 'scrollY']
+};
+const createOffsetObserver = mode => {
+  return (instance, cb) => {
+    if (!instance.scrollElement) {
+      return;
+    }
+    const propX = scrollProps[mode][0];
+    const propY = scrollProps[mode][1];
+    let prevX = instance.scrollElement[propX];
+    let prevY = instance.scrollElement[propY];
+    const scroll = () => {
+      const offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
+      cb(Math.max(0, offset - instance.options.scrollMargin));
+    };
+    scroll();
+    const onScroll = e => {
+      const target = e.currentTarget;
+      const scrollX = target[propX];
+      const scrollY = target[propY];
+      if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
+        scroll();
+      }
+      prevX = scrollX;
+      prevY = scrollY;
+    };
+    instance.scrollElement.addEventListener('scroll', onScroll, {
+      capture: false,
+      passive: true
+    });
+    return () => {
+      instance.scrollElement.removeEventListener('scroll', onScroll);
+    };
+  };
+};
+const observeElementOffset = createOffsetObserver('element');
+const measureElement = (element, instance) => {
+  return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
+};
+const elementScroll = (offset, _ref2, instance) => {
+  var _instance$scrollEleme2;
+  let {
+    adjustments,
+    behavior,
+    sync
+  } = _ref2;
+  const toOffset = (sync ? offset : offset + instance.options.scrollMargin) + (adjustments ?? 0);
+  (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo == null ? void 0 : _instance$scrollEleme2.scrollTo({
+    [instance.options.horizontal ? 'left' : 'top']: toOffset,
+    behavior
+  });
+};
+class Virtualizer {
+  constructor(_opts) {
+    var _this = this;
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.isScrolling = false;
+    this.isScrollingTimeoutId = null;
+    this.measurementsCache = [];
+    this.itemMeasurementsCache = {};
+    this.pendingMeasuredCacheIndexes = [];
+    this.scrollAdjustments = 0;
+    this.measureElementCache = {};
+    this.pendingScrollToIndexCallback = null;
+    this.getResizeObserver = (() => {
+      let _ro = null;
+      return () => {
+        if (_ro) {
+          return _ro;
+        } else if (typeof ResizeObserver !== 'undefined') {
+          return _ro = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+              this._measureElement(entry.target, false);
+            });
+          });
+        } else {
+          return null;
+        }
+      };
+    })();
+    this.range = {
+      startIndex: 0,
+      endIndex: 0
+    };
+    this.setOptions = opts => {
+      Object.entries(opts).forEach(_ref3 => {
+        let [key, value] = _ref3;
+        if (typeof value === 'undefined') delete opts[key];
+      });
+      this.options = {
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        onChange: () => {},
+        measureElement,
+        initialRect: {
+          width: 0,
+          height: 0
+        },
+        scrollMargin: 0,
+        scrollingDelay: 150,
+        indexAttribute: 'data-index',
+        ...opts
+      };
+    };
+    this.notify = () => {
+      var _this$options$onChang, _this$options;
+      (_this$options$onChang = (_this$options = this.options).onChange) == null ? void 0 : _this$options$onChang.call(_this$options, this);
+    };
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach(d => d());
+      this.unsubs = [];
+      this.scrollElement = null;
+    };
+    this._didMount = () => {
+      const ro = this.getResizeObserver();
+      Object.values(this.measureElementCache).forEach(node => ro == null ? void 0 : ro.observe(node));
+      return () => {
+        ro == null ? void 0 : ro.disconnect();
+        this.cleanup();
+      };
+    };
+    this._willUpdate = () => {
+      var _this$pendingScrollTo;
+      (_this$pendingScrollTo = this.pendingScrollToIndexCallback) == null ? void 0 : _this$pendingScrollTo.call(this);
+      const scrollElement = this.options.getScrollElement();
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        this.scrollElement = scrollElement;
+        this._scrollToOffset(this.scrollOffset, {
+          adjustments: undefined,
+          behavior: undefined,
+          sync: true
+        });
+        this.unsubs.push(this.options.observeElementRect(this, rect => {
+          this.scrollRect = rect;
+          this.calculateRange();
+        }));
+        this.unsubs.push(this.options.observeElementOffset(this, offset => {
+          if (this.isScrollingTimeoutId !== null) {
+            clearTimeout(this.isScrollingTimeoutId);
+            this.isScrollingTimeoutId = null;
+          }
+          if (this.scrollOffset !== offset) {
+            this.scrollOffset = offset;
+            this.isScrolling = true;
+            this.scrollAdjustments = 0;
+            this.isScrollingTimeoutId = setTimeout(() => {
+              this.isScrollingTimeoutId = null;
+              this.isScrolling = false;
+              this.notify();
+            }, this.options.scrollingDelay);
+          } else {
+            this.isScrolling = false;
+            this.scrollAdjustments = 0;
+          }
+          this.calculateRange();
+        }));
+      } else if (!this.isScrolling) {
+        this.calculateRange();
+      }
+    };
+    this.getSize = () => {
+      return this.scrollRect[this.options.horizontal ? 'width' : 'height'];
+    };
+    this.getMeasurements = memo(() => [this.options.count, this.options.paddingStart, this.options.getItemKey, this.itemMeasurementsCache], (count, paddingStart, getItemKey, measurementsCache) => {
+      const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+      this.pendingMeasuredCacheIndexes = [];
+      const measurements = this.measurementsCache.slice(0, min);
+      for (let i = min; i < count; i++) {
+        const key = getItemKey(i);
+        const measuredSize = measurementsCache[key];
+        const start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
+        const size = typeof measuredSize === 'number' ? measuredSize : this.options.estimateSize(i);
+        const end = start + size;
+        measurements[i] = {
+          index: i,
+          start,
+          size,
+          end,
+          key
+        };
+      }
+      this.measurementsCache = measurements;
+      return measurements;
+    }, {
+      key: process.env.NODE_ENV !== 'production' && 'getMeasurements',
+      debug: () => this.options.debug
+    });
+    this.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
+      const range = calculateRange({
+        measurements,
+        outerSize,
+        scrollOffset
+      });
+      if (range.startIndex !== this.range.startIndex || range.endIndex !== this.range.endIndex) {
+        this.range = range;
+        this.notify();
+      }
+      return this.range;
+    }, {
+      key: process.env.NODE_ENV !== 'production' && 'calculateRange',
+      debug: () => this.options.debug
+    });
+    this.getIndexes = memo(() => [this.options.rangeExtractor, this.range, this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
+      return rangeExtractor({
+        ...range,
+        overscan,
+        count: count
+      });
+    }, {
+      key: process.env.NODE_ENV !== 'production' && 'getIndexes',
+      debug: () => this.options.debug
+    });
+    this.indexFromElement = node => {
+      const attributeName = this.options.indexAttribute;
+      const indexStr = node.getAttribute(attributeName);
+      if (!indexStr) {
+        console.warn(`Missing attribute name '${attributeName}={index}' on measured element.`);
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this._measureElement = (node, _sync) => {
+      const index = this.indexFromElement(node);
+      const item = this.measurementsCache[index];
+      if (!item) {
+        return;
+      }
+      const prevNode = this.measureElementCache[item.key];
+      const ro = this.getResizeObserver();
+      if (!node.isConnected) {
+        if (prevNode) {
+          ro == null ? void 0 : ro.unobserve(prevNode);
+          delete this.measureElementCache[item.key];
+        }
+        return;
+      }
+      if (!prevNode || prevNode !== node) {
+        if (prevNode) {
+          ro == null ? void 0 : ro.unobserve(prevNode);
+        }
+        this.measureElementCache[item.key] = node;
+        ro == null ? void 0 : ro.observe(node);
+      }
+      const measuredItemSize = this.options.measureElement(node, this);
+      const itemSize = this.itemMeasurementsCache[item.key] ?? item.size;
+      const delta = measuredItemSize - itemSize;
+      if (delta !== 0) {
+        if (item.start < this.scrollOffset && this.isScrolling) {
+          if (process.env.NODE_ENV !== 'production' && this.options.debug) {
+            console.info('correction', delta);
+          }
+          this._scrollToOffset(this.scrollOffset, {
+            adjustments: this.scrollAdjustments += delta,
+            behavior: undefined,
+            sync: false
+          });
+        }
+        this.pendingMeasuredCacheIndexes.push(index);
+        this.itemMeasurementsCache = {
+          ...this.itemMeasurementsCache,
+          [item.key]: measuredItemSize
+        };
+        this.notify();
+      }
+    };
+    this.measureElement = node => {
+      if (!node) {
+        return;
+      }
+      this._measureElement(node, true);
+    };
+    this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements()], (indexes, measurements) => {
+      const virtualItems = [];
+      for (let k = 0, len = indexes.length; k < len; k++) {
+        const i = indexes[k];
+        const measurement = measurements[i];
+        virtualItems.push(measurement);
+      }
+      return virtualItems;
+    }, {
+      key: process.env.NODE_ENV !== 'production' && 'getIndexes',
+      debug: () => this.options.debug
+    });
+    this.scrollToOffset = function (toOffset, _temp) {
+      let {
+        align = 'start',
+        behavior
+      } = _temp === void 0 ? {} : _temp;
+      const offset = _this.scrollOffset;
+      const size = _this.getSize();
+      if (align === 'auto') {
+        if (toOffset <= offset) {
+          align = 'start';
+        } else if (toOffset >= offset + size) {
+          align = 'end';
+        } else {
+          align = 'start';
+        }
+      }
+      const options = {
+        adjustments: undefined,
+        behavior,
+        sync: false
+      };
+      if (align === 'start') {
+        _this._scrollToOffset(toOffset, options);
+      } else if (align === 'end') {
+        _this._scrollToOffset(toOffset - size, options);
+      } else if (align === 'center') {
+        _this._scrollToOffset(toOffset - size / 2, options);
+      }
+    };
+    this.scrollToIndex = function (index, _temp2) {
+      let {
+        align = 'auto',
+        ...rest
+      } = _temp2 === void 0 ? {} : _temp2;
+      _this.pendingScrollToIndexCallback = null;
+      const measurements = _this.getMeasurements();
+      const offset = _this.scrollOffset;
+      const size = _this.getSize();
+      const {
+        count
+      } = _this.options;
+      const measurement = measurements[Math.max(0, Math.min(index, count - 1))];
+      if (!measurement) {
+        return;
+      }
+      if (align === 'auto') {
+        if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
+          align = 'end';
+        } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
+          align = 'start';
+        } else {
+          return;
+        }
+      }
+      const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
+      _this.scrollToOffset(toOffset, {
+        align,
+        ...rest
+      });
+      const isDynamic = Object.keys(_this.measureElementCache).length > 0;
+      if (isDynamic) {
+        const didSeen = () => typeof _this.itemMeasurementsCache[_this.options.getItemKey(index)] === 'number';
+        if (!didSeen()) {
+          _this.pendingScrollToIndexCallback = () => {
+            if (didSeen()) {
+              _this.pendingScrollToIndexCallback = null;
+              _this.scrollToIndex(index, {
+                align,
+                ...rest
+              });
+            }
+          };
+        }
+      }
+    };
+    this.getTotalSize = () => {
+      var _this$getMeasurements;
+      return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
+    };
+    this._scrollToOffset = (offset, _ref4) => {
+      let {
+        adjustments,
+        behavior,
+        sync
+      } = _ref4;
+      this.options.scrollToFn(offset, {
+        behavior,
+        sync,
+        adjustments
+      }, this);
+    };
+    this.measure = () => {
+      this.itemMeasurementsCache = {};
+      this.notify();
+    };
+    this.setOptions(_opts);
+    this.scrollRect = this.options.initialRect;
+    this.scrollOffset = this.options.initialOffset;
+    this.calculateRange();
+  }
+}
+const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+  while (low <= high) {
+    const middle = (low + high) / 2 | 0;
+    const currentValue = getCurrentValue(middle);
+    if (currentValue < value) {
+      low = middle + 1;
+    } else if (currentValue > value) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+function calculateRange(_ref5) {
+  let {
+    measurements,
+    outerSize,
+    scrollOffset
+  } = _ref5;
+  const count = measurements.length - 1;
+  const getOffset = index => measurements[index].start;
+  const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+  let endIndex = startIndex;
+  while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
+    endIndex++;
+  }
+  return {
+    startIndex,
+    endIndex
+  };
+}
+
+/**
+ * react-virtual
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+//
+
+const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+function useVirtualizerBase(options) {
+  const rerender = React.useReducer(() => ({}), {})[1];
+  const resolvedOptions = {
+    ...options,
+    onChange: instance => {
+      rerender();
+      options.onChange == null ? void 0 : options.onChange(instance);
+    }
+  };
+  const [instance] = React.useState(() => new Virtualizer(resolvedOptions));
+  instance.setOptions(resolvedOptions);
+  React.useEffect(() => {
+    return instance._didMount();
+  }, []);
+  useIsomorphicLayoutEffect$1(() => {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+function useVirtualizer(options) {
+  return useVirtualizerBase({
+    observeElementRect: observeElementRect,
+    observeElementOffset: observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options
+  });
+}
+
 const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
     var _a;
     const { getState, options: { muiTableBodyCellEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, } = table;
@@ -2024,9 +2593,9 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
         }
     };
     if (columnDef.Edit) {
-        return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
+        return React__default.createElement(React__default.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
     }
-    return (React.createElement(TextField, Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, inputRef: (inputRef) => {
+    return (React__default.createElement(TextField, Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
                 editInputRefs.current[column.id] = inputRef;
                 if (textFieldProps.inputRef) {
@@ -2064,8 +2633,8 @@ 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: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy) },
-        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
+    return (React__default.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy) },
+        React__default.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))), title: undefined }), children)));
 };
@@ -2088,14 +2657,14 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
         table.setDraggingRow(null);
         table.setHoveredRow(null);
     };
-    return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+    return (React__default.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
 const MRT_TableBodyCellValue = ({ cell, table }) => {
     var _a, _b;
     const { column, row } = cell;
     const { columnDef } = column;
-    return (React.createElement(React.Fragment, null, cell.getIsAggregated() && columnDef.AggregatedCell
+    return (React__default.createElement(React__default.Fragment, null, cell.getIsAggregated() && columnDef.AggregatedCell
         ? columnDef.AggregatedCell({
             cell,
             column,
@@ -2186,7 +2755,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    return (React.createElement(TableCell, Object.assign({ component: layoutMode === 'grid' ? 'div' : 'td', role: "gridcell" }, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
+    return (React__default.createElement(TableCell, Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -2213,23 +2782,23 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
                         : `${darken(theme.palette.background.default, 0.1)} !important`
                     : undefined,
             } }, getCommonCellStyles({ column, table, theme, tableCellProps })), draggingBorders)) }),
-        React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+        React__default.createElement(React__default.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React__default.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
             rowNumberMode === 'static' &&
-            column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
+            column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React__default.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
             (column.id === 'mrt-row-select' ||
                 column.id === 'mrt-row-expand' ||
-                !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-            columnDef.enableClickToCopy !== false ? (React.createElement(MRT_CopyButton, { cell: cell, table: table },
-            React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
-        cell.getIsGrouped() && !columnDef.GroupedCell && (React.createElement(React.Fragment, null,
+                !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) : isEditing ? (React__default.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+            columnDef.enableClickToCopy !== false ? (React__default.createElement(MRT_CopyButton, { cell: cell, table: table },
+            React__default.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React__default.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
+        cell.getIsGrouped() && !columnDef.GroupedCell && (React__default.createElement(React__default.Fragment, null,
             " (", (_b = row.subRows) === null || _b === void 0 ? void 0 :
             _b.length,
             ")"))));
 };
-const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
+const Memo_MRT_TableBodyCell = memo$1(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
 const MRT_TableDetailPanel = ({ row, table }) => {
-    const { getVisibleLeafColumns, getState, options: { muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
+    const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
         ? muiTableBodyRowProps({ row, table })
@@ -2237,13 +2806,15 @@ const MRT_TableDetailPanel = ({ row, table }) => {
     const tableCellProps = muiTableDetailPanelProps instanceof Function
         ? muiTableDetailPanelProps({ row, table })
         : muiTableDetailPanelProps;
-    return (React.createElement(TableRow, Object.assign({}, tableRowProps),
-        React.createElement(TableCell, Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+    return (React__default.createElement(TableRow, Object.assign({ sx: {
+            display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        } }, tableRowProps),
+        React__default.createElement(TableCell, Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
-                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React.createElement(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
+                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default.createElement(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
 };
 
-const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
+const MRT_TableBodyRow = ({ measureElement, numRows, row, rowIndex, table, virtualRow, }) => {
     const theme = useTheme();
     const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
@@ -2266,13 +2837,15 @@ const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
             border: draggingBorder,
         }
         : undefined;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TableRow, Object.assign({ component: layoutMode === 'grid' ? 'div' : 'tr', hover: true, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
-                rowRef.current = node;
-                if (virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.measureRef) {
-                    virtualRow.measureRef = node;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(TableRow, Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, hover: true, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
+                if (node) {
+                    rowRef.current = node;
+                    measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
                 }
-            }, role: "row" }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, transition: 'all 150ms ease-in-out', '&:hover td': {
+            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, top: virtualRow ? 0 : undefined, transform: virtualRow
+                    ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
+                    : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
                         ? theme.palette.mode === 'dark'
                             ? `${lighten(theme.palette.background.default, 0.12)}`
@@ -2295,16 +2868,16 @@ const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
                 !draggingColumn &&
                 !draggingRow &&
                 (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
-                (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (React.createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React.createElement(MRT_TableBodyCell, Object.assign({}, props)));
+                (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (React__default.createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React__default.createElement(MRT_TableBodyCell, Object.assign({}, props)));
         })),
-        renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { row: row, table: table }))));
+        renderDetailPanel && !row.getIsGrouped() && (React__default.createElement(MRT_TableDetailPanel, { row: row, table: table }))));
 };
-const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row);
+const Memo_MRT_TableBodyRow = memo$1(MRT_TableBodyRow, (prev, next) => prev.row === next.row);
 
 const MRT_TableBody = ({ table }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualFiltering, manualSorting, memoMode, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
-    const { columnFilters, globalFilter, pagination, sorting } = getState();
+    const { columnFilters, density, globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
         : muiTableBodyProps;
@@ -2337,78 +2910,50 @@ const MRT_TableBody = ({ table }) => {
         pagination.pageSize,
     ]);
     const virtualizer = enableRowVirtualization
-        ? useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
-        : {};
-    if (virtualizerInstanceRef) {
+        ? useVirtualizer(Object.assign({ count: rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height, overscan: 10 }, vProps))
+        : undefined;
+    if (virtualizerInstanceRef && virtualizer) {
         virtualizerInstanceRef.current = virtualizer;
     }
-    // const virtualizer: Virtualizer = enableRowVirtualization
-    //   ? useVirtualizer({
-    //       count: rows.length,
-    //       estimateSize: () => (density === 'compact' ? 25 : 50),
-    //       getScrollElement: () => tableContainerRef.current as HTMLDivElement,
-    //       overscan: 15,
-    //       ...vProps,
-    //     })
-    //   : ({} as any);
-    const virtualRows = enableRowVirtualization ? virtualizer.virtualItems : [];
-    // const virtualRows = enableRowVirtualization
-    //   ? virtualizer.getVirtualItems()
-    //   : [];
-    let paddingTop = 0;
-    let paddingBottom = 0;
-    if (enableRowVirtualization) {
-        paddingTop = virtualRows.length ? virtualRows[0].start : 0;
-        paddingBottom = virtualRows.length
-            ? virtualizer.totalSize - virtualRows[virtualRows.length - 1].end
-            : 0;
-    }
-    // if (enableRowVirtualization) {
-    //   paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
-    //   paddingBottom = !!virtualRows.length
-    //     ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
-    //     : 0;
-    // }
-    return (React.createElement(TableBody, Object.assign({ component: layoutMode === 'grid' ? 'div' : 'tbody', role: "rowgroup" }, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
+    const virtualRows = virtualizer ? virtualizer.getVirtualItems() : undefined;
+    return (React__default.createElement(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: virtualizer ? `${virtualizer.getTotalSize()}px` : 'inherit', position: 'relative' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
             ? tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx(theme)
-            : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))) }), ((_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : !rows.length) ? (React.createElement("tr", null,
-        React.createElement("td", { colSpan: table.getVisibleLeafColumns().length },
-            React.createElement(Typography, { sx: {
+            : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))) }), ((_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : !rows.length) ? (React__default.createElement("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' } },
+        React__default.createElement("td", { colSpan: table.getVisibleLeafColumns().length, style: { display: layoutMode === 'grid' ? 'grid' : 'table-cell' } },
+            React__default.createElement(Typography, { sx: {
                     color: 'text.secondary',
                     fontStyle: 'italic',
-                    maxWidth: `min(100vw, ${(_b = tablePaperRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth}px)`,
+                    maxWidth: `min(100vw, ${(_c = (_b = tablePaperRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 360}px)`,
                     py: '2rem',
                     textAlign: 'center',
                     width: '100%',
                 } }, globalFilter || columnFilters.length
                 ? localization.noResultsFound
-                : localization.noRecordsToDisplay)))) : (React.createElement(React.Fragment, null,
-        enableRowVirtualization && paddingTop > 0 && (React.createElement("tr", null,
-            React.createElement("td", { style: { height: `${paddingTop}px` } }))),
-        (enableRowVirtualization ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
-            const row = enableRowVirtualization
-                ? rows[rowOrVirtualRow.index]
-                : rowOrVirtualRow;
-            const props = {
-                key: row.id,
-                numRows: rows.length,
-                row,
-                rowIndex: enableRowVirtualization
-                    ? rowOrVirtualRow.index
-                    : rowIndex,
-                table,
-                virtualRow: enableRowVirtualization ? rowOrVirtualRow : null,
-            };
-            return memoMode === 'rows' ? (React.createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React.createElement(MRT_TableBodyRow, Object.assign({}, props)));
-        }),
-        enableRowVirtualization && paddingBottom > 0 && (React.createElement("tr", null,
-            React.createElement("td", { style: { height: `${paddingBottom}px` } })))))));
+                : localization.noRecordsToDisplay)))) : (React__default.createElement(React__default.Fragment, null, (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+        const row = virtualizer
+            ? rows[rowOrVirtualRow.index]
+            : rowOrVirtualRow;
+        const props = {
+            key: row.id,
+            measureElement: virtualizer
+                ? virtualizer.measureElement
+                : undefined,
+            numRows: rows.length,
+            row,
+            rowIndex: virtualizer ? rowOrVirtualRow.index : rowIndex,
+            table,
+            virtualRow: virtualizer
+                ? rowOrVirtualRow
+                : undefined,
+        };
+        return memoMode === 'rows' ? (React__default.createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React__default.createElement(MRT_TableBodyRow, Object.assign({}, props)));
+    })))));
 };
-const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
+const Memo_MRT_TableBody = memo$1(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
 const MRT_TableFooterCell = ({ footer, table }) => {
     var _a, _b, _c;
-    const { getState, options: { muiTableFooterCellProps }, } = table;
+    const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
@@ -2420,12 +2965,12 @@ const MRT_TableFooterCell = ({ footer, table }) => {
         ? columnDef.muiTableFooterCellProps({ column, table })
         : columnDef.muiTableFooterCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
-    return (React.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ fontWeight: 'bold', p: density === 'compact'
+    return (React__default.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
                     : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({ column, table, theme, tableCellProps }))) }),
-        React.createElement(React.Fragment, null, footer.isPlaceholder
+        React__default.createElement(React__default.Fragment, null, footer.isPlaceholder
             ? null
             : (_c = (_b = (columnDef.Footer instanceof Function
                 ? (_a = columnDef.Footer) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
@@ -2438,7 +2983,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
 
 const MRT_TableFooterRow = ({ footerGroup, table }) => {
     var _a;
-    const { options: { muiTableFooterRowProps }, } = table;
+    const { options: { layoutMode, muiTableFooterRowProps }, } = table;
     // if no content in row, skip row
     if (!((_a = footerGroup.headers) === null || _a === void 0 ? void 0 : _a.some((header) => (typeof header.column.columnDef.footer === 'string' &&
         !!header.column.columnDef.footer) ||
@@ -2447,23 +2992,25 @@ const MRT_TableFooterRow = ({ footerGroup, table }) => {
     const tableRowProps = muiTableFooterRowProps instanceof Function
         ? muiTableFooterRowProps({ footerGroup, table })
         : muiTableFooterRowProps;
-    return (React.createElement(TableRow, Object.assign({}, tableRowProps), footerGroup.headers.map((footer) => (React.createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
+    return (React__default.createElement(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row' }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+            ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), footerGroup.headers.map((footer) => (React__default.createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
 };
 
 const MRT_TableFooter = ({ table }) => {
-    const { getFooterGroups, getState, options: { enableStickyFooter, muiTableFooterProps }, } = table;
+    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, } = table;
     const { isFullScreen } = getState();
     const tableFooterProps = muiTableFooterProps instanceof Function
         ? muiTableFooterProps({ table })
         : muiTableFooterProps;
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (React.createElement(TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
+    return (React__default.createElement(TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', 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' : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
             ? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
-            : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React.createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
+            : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React__default.createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
 };
 
 const MRT_Table = ({ table }) => {
@@ -2472,12 +3019,12 @@ const MRT_Table = ({ table }) => {
     const tableProps = muiTableProps instanceof Function
         ? muiTableProps({ table })
         : muiTableProps;
-    return (React.createElement(Table, Object.assign({ component: layoutMode === 'grid' ? 'div' : 'table', role: "grid", stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
+    return (React__default.createElement(Table, Object.assign({ stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
-        enableTableHead && React.createElement(MRT_TableHead, { table: table }),
-        memoMode === 'table-body' ? (React.createElement(Memo_MRT_TableBody, { table: table })) : (React.createElement(MRT_TableBody, { table: table })),
-        enableTableFooter && React.createElement(MRT_TableFooter, { table: table })));
+        enableTableHead && React__default.createElement(MRT_TableHead, { table: table }),
+        memoMode === 'table-body' ? (React__default.createElement(Memo_MRT_TableBody, { table: table })) : (React__default.createElement(MRT_TableBody, { table: table })),
+        enableTableFooter && React__default.createElement(MRT_TableFooter, { table: table })));
 };
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -2498,11 +3045,13 @@ const MRT_TableContainer = ({ table }) => {
             : 0;
         setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
     });
-    return (React.createElement(TableContainer, Object.assign({}, tableContainerProps, { ref: (ref) => {
-            tableContainerRef.current = ref;
-            if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
-                //@ts-ignore
-                tableContainerProps.ref.current = ref;
+    return (React__default.createElement(TableContainer, Object.assign({}, tableContainerProps, { ref: (node) => {
+            if (node) {
+                tableContainerRef.current = node;
+                if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
+                    //@ts-ignore
+                    tableContainerProps.ref.current = node;
+                }
             }
         }, sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader || enableRowVirtualization
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
@@ -2511,7 +3060,7 @@ const MRT_TableContainer = ({ table }) => {
             : tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), style: Object.assign({ maxHeight: isFullScreen
                 ? `calc(100vh - ${totalToolbarHeight}px)`
                 : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style) }),
-        React.createElement(MRT_Table, { table: table })));
+        React__default.createElement(MRT_Table, { table: table })));
 };
 
 const MRT_TablePaper = ({ table }) => {
@@ -2520,7 +3069,7 @@ const MRT_TablePaper = ({ table }) => {
     const tablePaperProps = muiTablePaperProps instanceof Function
         ? muiTablePaperProps({ table })
         : muiTablePaperProps;
-    return (React.createElement(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
+    return (React__default.createElement(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
             if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
                 //@ts-ignore
@@ -2541,21 +3090,21 @@ const MRT_TablePaper = ({ table }) => {
         enableTopToolbar &&
             (renderTopToolbar instanceof Function
                 ? renderTopToolbar({ table })
-                : renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : React.createElement(MRT_TopToolbar, { table: table })),
-        React.createElement(MRT_TableContainer, { table: table }),
+                : renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : React__default.createElement(MRT_TopToolbar, { table: table })),
+        React__default.createElement(MRT_TableContainer, { table: table }),
         enableBottomToolbar &&
             (renderBottomToolbar instanceof Function
                 ? renderBottomToolbar({ table })
-                : renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : React.createElement(MRT_BottomToolbar, { table: table }))));
+                : renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : React__default.createElement(MRT_BottomToolbar, { table: table }))));
 };
 
 const MRT_EditRowModal = ({ open, row, table, }) => {
     const { options: { localization }, } = table;
-    return (React.createElement(Dialog, { open: open },
-        React.createElement(DialogTitle, { textAlign: "center" }, localization.edit),
-        React.createElement(DialogContent, null,
-            React.createElement("form", { onSubmit: (e) => e.preventDefault() },
-                React.createElement(Stack, { sx: {
+    return (React__default.createElement(Dialog, { open: open },
+        React__default.createElement(DialogTitle, { textAlign: "center" }, localization.edit),
+        React__default.createElement(DialogContent, null,
+            React__default.createElement("form", { onSubmit: (e) => e.preventDefault() },
+                React__default.createElement(Stack, { sx: {
                         gap: '1.5rem',
                         minWidth: { xs: '300px', sm: '360px', md: '400px' },
                         pt: '1rem',
@@ -2563,9 +3112,9 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
                     } }, row
                     .getAllCells()
                     .filter((cell) => cell.column.columnDef.columnDefType === 'data')
-                    .map((cell) => (React.createElement(MRT_EditCellTextField, { cell: cell, key: cell.id, showLabel: true, table: table })))))),
-        React.createElement(DialogActions, { sx: { p: '1.25rem' } },
-            React.createElement(MRT_EditActionButtons, { row: row, table: table, variant: "text" }))));
+                    .map((cell) => (React__default.createElement(MRT_EditCellTextField, { cell: cell, key: cell.id, showLabel: true, table: table })))))),
+        React__default.createElement(DialogActions, { sx: { p: '1.25rem' } },
+            React__default.createElement(MRT_EditActionButtons, { row: row, table: table, variant: "text" }))));
 };
 
 const MRT_TableRoot = (props) => {
@@ -2612,13 +3161,13 @@ const MRT_TableRoot = (props) => {
         var _a, _b, _c, _d, _e;
         return [
             columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_a = props.displayColumnDefOptions) === null || _a === void 0 ? void 0 : _a['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React__default.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-actions']), { id: 'mrt-row-actions' }),
             columnOrder.includes('mrt-row-expand') &&
-                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
-                    ? () => React.createElement(MRT_ExpandAllButton, { table: table })
+                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default.createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
+                    ? () => React__default.createElement(MRT_ExpandAllButton, { table: table })
                     : null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
-                    ? () => React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })
+            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
+                    ? () => React__default.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })
                     : null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-select']), { id: 'mrt-row-select' }),
             columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_e = props.displayColumnDefOptions) === null || _e === void 0 ? void 0 : _e['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
         ].filter(Boolean);
@@ -2722,11 +3271,11 @@ const MRT_TableRoot = (props) => {
             }
         }
     }, [table.getState().isFullScreen]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
-            React.createElement(MRT_TablePaper, { table: table })),
-        !table.getState().isFullScreen && (React.createElement(MRT_TablePaper, { table: table })),
-        editingRow && props.editingMode === 'modal' && (React.createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
+            React__default.createElement(MRT_TablePaper, { table: table })),
+        !table.getState().isFullScreen && (React__default.createElement(MRT_TablePaper, { table: table })),
+        editingRow && props.editingMode === 'modal' && (React__default.createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
 };
 
 const MRT_Localization_EN = {
@@ -2830,7 +3379,9 @@ const MaterialReactTable = (_a) => {
     const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
     const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), []);
     const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), []);
-    return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, 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: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
+    if (rest.enableRowVirtualization)
+        layoutMode = 'grid';
+    return (React__default.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, 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: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
 };
 
 export { MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarInternalButtons, MaterialReactTable as default };