material-react-table 2.4.0 → 2.5.0

package/dist/index.esm.js

@@ -13,12 +13,13 @@ import Box from '@mui/material/Box';
 import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, aggregationFns, filterFns } from '@tanstack/react-table';
 import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import highlightWords from 'highlight-words';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import Collapse from '@mui/material/Collapse';
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
 import CircularProgress from '@mui/material/CircularProgress';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
@@ -71,7 +72,6 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import FormHelperText from '@mui/material/FormHelperText';
 import Slider from '@mui/material/Slider';
-import Stack from '@mui/material/Stack';
 import Grow from '@mui/material/Grow';
 import Popover from '@mui/material/Popover';
 import Divider from '@mui/material/Divider';
@@ -297,6 +297,8 @@ const createRow = (table, originalRow) => createRow$1(table, 'mrt-row-create', o
 }))), -1, 0);
 const extraIndexRangeExtractor = (range, draggingIndex) => {
     const newIndexes = defaultRangeExtractor(range);
+    if (draggingIndex === undefined)
+        return newIndexes;
     if (draggingIndex >= 0 &&
         draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
         newIndexes.unshift(draggingIndex);
@@ -341,7 +343,7 @@ const getMRTTheme = (table, theme) => (Object.assign({ baseBackgroundColor: them
         ? darken(theme.palette.warning.dark, 0.25)
         : lighten(theme.palette.warning.light, 0.5), pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2) }, parseFromValuesOrFunc(table.options.mrtTheme, theme)));
 const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f;
     const { options: { layoutMode }, } = table;
     const widthStyles = {
         minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = column.columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
@@ -361,19 +363,8 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
                 ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
                 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
-            : undefined, ml: table.options.enableColumnVirtualization &&
-            column.getIsPinned() === 'left' &&
-            column.getPinnedIndex() === 0
-            ? `-${column.getSize() *
-                ((_f = (_e = table.getState().columnPinning.left) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 1)}px`
-            : undefined, mr: table.options.enableColumnVirtualization &&
-            column.getIsPinned() === 'right' &&
-            column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
-            ? `-${column.getSize() *
-                ((_h = (_g = table.getState().columnPinning.right) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 1) *
-                1.2}px`
-            : undefined, opacity: ((_j = table.getState().draggingColumn) === null || _j === void 0 ? void 0 : _j.id) === column.id ||
-            ((_k = table.getState().hoveredColumn) === null || _k === void 0 ? void 0 : _k.id) === column.id
+            : undefined, opacity: ((_e = table.getState().draggingColumn) === null || _e === void 0 ? void 0 : _e.id) === column.id ||
+            ((_f = table.getState().hoveredColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id
             ? 0.5
             : 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? 'sticky'
@@ -396,7 +387,7 @@ const getCommonToolbarStyles = ({ table, theme, }) => ({
 });
 
 const allowedTypes = ['string', 'number'];
-const MRT_TableBodyCellValue = ({ cell, table, }) => {
+const MRT_TableBodyCellValue = ({ cell, rowRef, staticRowIndex, table, }) => {
     var _a, _b, _c;
     const { getState, options: { enableFilterMatchHighlighting }, } = table;
     const { column, row } = cell;
@@ -458,51 +449,14 @@ const MRT_TableBodyCellValue = ({ cell, table, }) => {
             column,
             renderedCellValue,
             row,
+            rowRef,
+            staticRowIndex,
             table,
         });
     }
     return renderedCellValue;
 };
 
-const MRT_GrabHandleButton = (_a) => {
-    var _b, _c;
-    var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
-    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
-    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsx(IconButton, Object.assign({ "aria-label": (_c = _iconButtonProps.title) !== null && _c !== void 0 ? _c : localization.move, 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);
-            }, onDragEnd: onDragEnd, onDragStart: onDragStart, sx: (theme) => (Object.assign({ '&:active': {
-                    cursor: 'grabbing',
-                }, '&:hover': {
-                    backgroundColor: 'transparent',
-                    opacity: 1,
-                }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.3, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(_iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
-};
-
-const MRT_TableBodyRowGrabHandle = (_a) => {
-    var { row, rowRef, table } = _a, rest = __rest(_a, ["row", "rowRef", "table"]);
-    const { options: { muiRowDragHandleProps }, } = table;
-    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiRowDragHandleProps, {
-        row,
-        table,
-    })), rest);
-    const handleDragStart = (event) => {
-        var _a;
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-        event.dataTransfer.setDragImage(rowRef.current, 0, 0);
-        table.setDraggingRow(row);
-    };
-    const handleDragEnd = (event) => {
-        var _a;
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-        table.setDraggingRow(null);
-        table.setHoveredRow(null);
-    };
-    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
-};
-
 const MRT_CopyButton = (_a) => {
     var _b;
     var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
@@ -621,7 +575,7 @@ const MRT_TableBodyCell = (_a) => {
     var _b, _c, _d, _e, _f;
     var { cell, measureElement, numRows, rowIndex, rowRef, table, virtualColumnIndex } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowIndex", "rowRef", "table", "virtualColumnIndex"]);
     const theme = useTheme();
-    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberDisplayMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
+    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
@@ -727,6 +681,10 @@ const MRT_TableBodyCell = (_a) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
+    const cellValueProps = {
+        cell,
+        table,
+    };
     return (jsx(TableCell, Object.assign({ "data-index": virtualColumnIndex, ref: (node) => {
             if (node) {
                 measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
@@ -762,19 +720,18 @@ const MRT_TableBodyCell = (_a) => {
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
-                    rowNumberDisplayMode === 'static' &&
-                    column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
-                    (column.id === 'mrt-row-select' ||
-                        column.id === 'mrt-row-expand' ||
+        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : columnDefType === 'display' &&
+                    (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(column.id) ||
                         !row.getIsGrouped()) ? ((_e = columnDef.Cell) === null || _e === void 0 ? void 0 : _e.call(columnDef, {
                     cell,
                     column,
                     renderedCellValue: cell.renderValue(),
                     row,
+                    rowRef,
+                    staticRowIndex: rowIndex,
                     table,
                 })) : isCreating || isEditing ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-                    columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) })) : (jsx(MRT_TableBodyCellValue, { cell: cell, table: table })), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
+                    columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
 };
 const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
@@ -804,12 +761,12 @@ const MRT_TableDetailPanel = (_a) => {
                     : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
 };
 
-const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualRow, }) => {
+const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualRow, }) => {
     var _a, _b, _c, _d;
     const theme = useTheme();
     const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
     const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
-    const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
+    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     const isPinned = enableRowPinning && row.getIsPinned();
     const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
         row,
@@ -909,7 +866,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
 const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
 
 const useMRT_ColumnVirtualizer = (table) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
     const { columnPinning, columnVisibility, draggingColumn } = getState();
     const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, {
@@ -920,7 +877,8 @@ const useMRT_ColumnVirtualizer = (table) => {
             table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
             table
                 .getRightLeafColumns()
-                .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1),
+                .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1)
+                .sort((a, b) => a - b),
         ]
         : [[], []], [columnPinning, enableColumnVirtualization, enableColumnPinning]);
     //get first 16 column widths and average them if calc is needed
@@ -934,9 +892,11 @@ const useMRT_ColumnVirtualizer = (table) => {
             .rows[0]) === null || _a === void 0 ? void 0 : _a.getCenterVisibleCells()) === null || _b === void 0 ? void 0 : _b.slice(0, 16)) === null || _c === void 0 ? void 0 : _c.map((cell) => cell.column.getSize() * 1.2)) !== null && _d !== void 0 ? _d : [];
         return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
     }, [table.getRowModel().rows, columnPinning, columnVisibility]);
-    const draggingColumnIndex = table
-        .getVisibleLeafColumns()
-        .findIndex((c) => c.id === (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id));
+    const draggingColumnIndex = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
+        ? table
+            .getVisibleLeafColumns()
+            .findIndex((c) => c.id === (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id))
+        : undefined;
     const columnVirtualizer = enableColumnVirtualization
         ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => {
                 const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
@@ -949,25 +909,68 @@ const useMRT_ColumnVirtualizer = (table) => {
                 ];
             }, [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex]) }, columnVirtualizerProps))
         : undefined;
-    if (columnVirtualizerInstanceRef && columnVirtualizer) {
-        //@ts-ignore
-        columnVirtualizerInstanceRef.current = columnVirtualizer;
-    }
-    const virtualColumns = columnVirtualizer
-        ? columnVirtualizer.getVirtualItems()
-        : undefined;
-    if (columnVirtualizer && (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)) {
-        // @ts-ignore
-        columnVirtualizer.virtualPaddingLeft =
-            (_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0;
-        // @ts-ignore
-        columnVirtualizer.virtualPaddingRight =
-            columnVirtualizer.getTotalSize() -
-                ((_d = (_c = virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
+    if (columnVirtualizer) {
+        const virtualColumns = columnVirtualizer.getVirtualItems();
+        columnVirtualizer.virtualColumns = virtualColumns;
+        if (virtualColumns.length) {
+            columnVirtualizer.virtualPaddingLeft =
+                ((_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0) -
+                    ((_d = (_c = virtualColumns[leftPinnedIndexes.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
+            columnVirtualizer.virtualPaddingRight =
+                columnVirtualizer.getTotalSize() -
+                    ((_f = (_e = virtualColumns[virtualColumns.length - rightPinnedIndexes.length - 1]) === null || _e === void 0 ? void 0 : _e.end) !== null && _f !== void 0 ? _f : 0) -
+                    (rightPinnedIndexes.length
+                        ? columnVirtualizer.getTotalSize() -
+                            ((_h = (_g = virtualColumns[virtualColumns.length - rightPinnedIndexes.length]) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : 0)
+                        : 0);
+        }
+        if (columnVirtualizerInstanceRef) {
+            //@ts-ignore
+            columnVirtualizerInstanceRef.current = columnVirtualizer;
+        }
     }
     return columnVirtualizer;
 };
 
+const MRT_GrabHandleButton = (_a) => {
+    var _b, _c;
+    var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
+    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
+    const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
+    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsx(IconButton, Object.assign({ "aria-label": (_c = _iconButtonProps.title) !== null && _c !== void 0 ? _c : localization.move, 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);
+            }, onDragEnd: onDragEnd, onDragStart: onDragStart, sx: (theme) => (Object.assign({ '&:active': {
+                    cursor: 'grabbing',
+                }, '&:hover': {
+                    backgroundColor: 'transparent',
+                    opacity: 1,
+                }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.3, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(_iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
+};
+
+const MRT_TableBodyRowGrabHandle = (_a) => {
+    var { row, rowRef, table } = _a, rest = __rest(_a, ["row", "rowRef", "table"]);
+    const { options: { muiRowDragHandleProps }, } = table;
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiRowDragHandleProps, {
+        row,
+        table,
+    })), rest);
+    const handleDragStart = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        event.dataTransfer.setDragImage(rowRef.current, 0, 0);
+        table.setDraggingRow(row);
+    };
+    const handleDragEnd = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        table.setDraggingRow(null);
+        table.setHoveredRow(null);
+    };
+    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
+};
+
 const MRT_RowPinButton = (_a) => {
     var { pinningPosition, row, table } = _a, rest = __rest(_a, ["pinningPosition", "row", "table"]);
     const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode, }, } = table;
@@ -1302,7 +1305,7 @@ const commonListItemStyles = {
 const MRT_ColumnActionMenu = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
-    const { getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, toggleAllColumnsVisible, } = table;
+    const { getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, toggleAllColumnsVisible, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
@@ -1339,8 +1342,14 @@ const MRT_ColumnActionMenu = (_a) => {
         setAnchorEl(null);
     };
     const handleClearFilter = () => {
-        column.setFilterValue('');
+        column.setFilterValue(undefined);
         setAnchorEl(null);
+        if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
+            setColumnFilterFns((prev) => {
+                var _a;
+                return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
+            });
+        }
     };
     const handleFilterByColumn = () => {
         setShowColumnFilters(true);
@@ -1471,40 +1480,53 @@ const MRT_ToggleRowActionMenuButton = (_a) => {
 
 const MRT_SelectCheckbox = (_a) => {
     var _b;
-    var { row, selectAll, table } = _a, rest = __rest(_a, ["row", "selectAll", "table"]);
+    var { row, selectAll, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "selectAll", "staticRowIndex", "table"]);
     const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, } = table;
     const { density, isLoading } = getState();
     const checkboxProps = Object.assign(Object.assign({}, (!row
         ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-        : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table }))), rest);
+        : parseFromValuesOrFunc(muiSelectCheckboxProps, {
+            row,
+            staticRowIndex,
+            table,
+        }))), rest);
+    const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
     const allRowsSelected = selectAll
         ? selectAllMode === 'page'
             ? table.getIsAllPageRowsSelected()
             : table.getIsAllRowsSelected()
         : undefined;
-    const commonProps = Object.assign(Object.assign({ checked: selectAll ? allRowsSelected : row === null || row === void 0 ? void 0 : row.getIsSelected(), disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
+    const onSelectionChange = (event, row) => {
+        var _a;
+        if (row.getIsAllSubRowsSelected()) {
+            (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
+        }
+        row.getToggleSelectedHandler()(event);
+        if (isStickySelection) {
+            row.pin(!row.getIsPinned() && event.target.checked
+                ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
+                    ? 'bottom'
+                    : 'top'
+                : false);
+        }
+    };
+    const onSelectAllChange = (event) => {
+        selectAllMode === 'all'
+            ? table.getToggleAllRowsSelectedHandler()(event)
+            : table.getToggleAllPageRowsSelectedHandler()(event);
+        if (isStickySelection) {
+            table.setRowPinning({ bottom: [], top: [] });
+        }
+    };
+    const commonProps = Object.assign(Object.assign({ checked: selectAll
+            ? allRowsSelected
+            : (row === null || row === void 0 ? void 0 : row.getIsSelected()) || (row === null || row === void 0 ? void 0 : row.getIsAllSubRowsSelected()), disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
             'aria-label': selectAll
                 ? localization.toggleSelectAll
                 : localization.toggleSelectRow,
         }, onChange: (event) => {
             event.stopPropagation();
-            row
-                ? row.getToggleSelectedHandler()(event)
-                : selectAllMode === 'all'
-                    ? table.getToggleAllRowsSelectedHandler()(event)
-                    : table.getToggleAllPageRowsSelectedHandler()(event);
-            if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
-                if (row) {
-                    row.pin(!row.getIsPinned() && event.target.checked
-                        ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
-                            ? 'bottom'
-                            : 'top'
-                        : false);
-                }
-                else {
-                    table.setRowPinning({ bottom: [], top: [] });
-                }
-            }
+            row ? onSelectionChange(event, row) : onSelectAllChange(event);
         }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
             var _a;
             e.stopPropagation();
@@ -1550,6 +1572,7 @@ const useMRT_DisplayColumns = (params) => {
         tableOptions.enableRowOrdering,
         tableOptions.enableRowSelection,
         tableOptions.enableSelectAll,
+        tableOptions.groupedColumnMode,
         tableOptions.localization,
         tableOptions.positionActionsColumn,
         tableOptions.renderDetailPanel,
@@ -1585,20 +1608,38 @@ function makeRowActionsColumn({ creatingRow, tableOptions }, order) {
     return null;
 }
 function makeRowExpandColumn({ grouping, tableOptions }, order) {
-    var _a, _b;
+    var _a, _b, _c;
     const id = 'mrt-row-expand';
     if (order.includes(id) &&
         showExpandColumn(tableOptions, (_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.grouping) !== null && _b !== void 0 ? _b : grouping)) {
-        return Object.assign({ Cell: ({ row, table }) => jsx(MRT_ExpandButton, { row: row, table: table }), Header: tableOptions.enableExpandAll
-                ? ({ table }) => jsx(MRT_ExpandAllButton, { table: table })
-                : undefined }, defaultDisplayColumnProps(tableOptions, id, 'expand'));
+        return Object.assign({ Cell: ({ cell, column, row, table }) => {
+                var _a, _b, _c;
+                const expandButtonProps = { row, table };
+                const subRowsLength = (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length;
+                if (tableOptions.groupedColumnMode === 'remove' &&
+                    row.groupingColumnId) {
+                    return (jsxs(Stack, { alignItems: "center", flexDirection: "row", gap: "0.25rem", children: [jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "right", title: table.getColumn(row.groupingColumnId).columnDef.header, children: jsx("span", { children: row.groupingValue }) }), !!subRowsLength && jsxs("span", { children: ["(", subRowsLength, ")"] })] }));
+                }
+                else {
+                    return (jsxs(Fragment, { children: [jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), (_c = (_b = column.columnDef).GroupedCell) === null || _c === void 0 ? void 0 : _c.call(_b, { cell, column, row, table })] }));
+                }
+            }, Header: tableOptions.enableExpandAll
+                ? ({ table }) => {
+                    return (jsxs(Fragment, { children: [jsx(MRT_ExpandAllButton, { table: table }), tableOptions.groupedColumnMode === 'remove' &&
+                                grouping
+                                    .map((groupedColumnId) => table.getColumn(groupedColumnId).columnDef.header)
+                                    .join(', ')] }));
+                }
+                : undefined }, defaultDisplayColumnProps(tableOptions, id, 'expand', tableOptions.groupedColumnMode === 'remove'
+            ? (_c = tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.defaultColumn) === null || _c === void 0 ? void 0 : _c.size
+            : 60));
     }
     return null;
 }
 function makeRowSelectColumn({ tableOptions }, order) {
     const id = 'mrt-row-select';
     if (order.includes(id)) {
-        return Object.assign({ Cell: ({ row, table }) => jsx(MRT_SelectCheckbox, { row: row, table: table }), Header: tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
+        return Object.assign({ Cell: ({ row, staticRowIndex, table }) => (jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
                 ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
                 : undefined }, defaultDisplayColumnProps(tableOptions, id, 'select'));
     }
@@ -1607,7 +1648,12 @@ function makeRowSelectColumn({ tableOptions }, order) {
 function makeRowNumbersColumn({ tableOptions }, order) {
     const id = 'mrt-row-numbers';
     if (order.includes(id) || tableOptions.enableRowNumbers)
-        return Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => tableOptions.localization.rowNumber }, defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'));
+        return Object.assign({ Cell: ({ row, staticRowIndex }) => {
+                var _a;
+                return ((_a = (tableOptions.rowNumberDisplayMode === 'static'
+                    ? staticRowIndex
+                    : row.index)) !== null && _a !== void 0 ? _a : 0) + 1;
+            }, Header: () => tableOptions.localization.rowNumber }, defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'));
     return null;
 }
 const blankColProps = {
@@ -1711,9 +1757,13 @@ const useMRT_RowVirtualizer = (table, rows) => {
                 return extraIndexRangeExtractor(range, (_a = draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.index) !== null && _a !== void 0 ? _a : 0);
             }, [draggingRow]) }, rowVirtualizerProps))
         : undefined;
-    if (rowVirtualizerInstanceRef && rowVirtualizer) {
-        //@ts-ignore
-        rowVirtualizerInstanceRef.current = rowVirtualizer;
+    if (rowVirtualizer) {
+        const virtualRows = rowVirtualizer.getVirtualItems();
+        rowVirtualizer.virtualRows = virtualRows;
+        if (rowVirtualizerInstanceRef) {
+            //@ts-ignore
+            rowVirtualizerInstanceRef.current = rowVirtualizer;
+        }
     }
     return rowVirtualizer;
 };
@@ -2272,7 +2322,7 @@ const useMRT_TableOptions = (_a) => {
 
 const MRT_TableBody = (_a) => {
     var _b, _c, _d, _e, _f, _g;
-    var { columnVirtualizer, table, virtualColumns } = _a, rest = __rest(_a, ["columnVirtualizer", "table", "virtualColumns"]);
+    var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
     const { getBottomRows, getIsSomeRowsPinned, getRowModel, getState, getTopRows, options: { createDisplayMode, enableStickyFooter, enableStickyHeader, layoutMode, localization, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
     const { columnFilters, creatingRow, globalFilter, isFullScreen, rowPinning } = getState();
     const tableBodyProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyProps, { table })), rest);
@@ -2290,14 +2340,11 @@ const MRT_TableBody = (_a) => {
     }, [rowPinning, getRowModel().rows]);
     const rows = useMRT_Rows(table, pinnedRowIds);
     const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
-    const virtualRows = rowVirtualizer
-        ? rowVirtualizer.getVirtualItems()
-        : undefined;
+    const { virtualRows } = rowVirtualizer !== null && rowVirtualizer !== void 0 ? rowVirtualizer : {};
     const commonRowProps = {
         columnVirtualizer,
         numRows: rows.length,
         table,
-        virtualColumns,
     };
     const CreatingRow = creatingRow && createDisplayMode === 'row' && (jsx(MRT_TableBodyRow, Object.assign({}, commonRowProps, { row: creatingRow, rowIndex: -1 })));
     return (jsxs(Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
@@ -2328,12 +2375,13 @@ const MRT_TableBody = (_a) => {
                                 row, rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex, virtualRow: rowVirtualizer
                                     ? rowOrVirtualRow
                                     : undefined });
-                            return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), `${row.id}-${row.index}`)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), `${row.id}-${row.index}`));
+                            const key = `${row.id}-${row.index}`;
+                            return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), key)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), key));
                         }) })))] })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
                 getIsSomeRowsPinned('bottom') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
                     const props = Object.assign(Object.assign({}, commonRowProps), { row,
                         rowIndex });
-                    return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), `${row.id}`)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                    return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                 }) })))] }));
 };
 const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
@@ -2368,9 +2416,9 @@ const MRT_TableFooterCell = (_a) => {
 
 const MRT_TableFooterRow = (_a) => {
     var _b;
-    var { columnVirtualizer, footerGroup, table, virtualColumns } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table", "virtualColumns"]);
+    var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
     const { options: { layoutMode, muiTableFooterRowProps }, } = table;
-    const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
+    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     // if no content in row, skip row
     if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
         !!header.column.columnDef.footer) ||
@@ -2389,7 +2437,7 @@ const MRT_TableFooterRow = (_a) => {
 };
 
 const MRT_TableFooter = (_a) => {
-    var { columnVirtualizer, table, virtualColumns } = _a, rest = __rest(_a, ["columnVirtualizer", "table", "virtualColumns"]);
+    var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
     const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
     const { isFullScreen } = getState();
     const tableFooterProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterProps, {
@@ -2406,7 +2454,7 @@ const MRT_TableFooter = (_a) => {
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
-                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table, virtualColumns: virtualColumns }, footerGroup.id))) })));
+                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
 };
 
 const MRT_TableHeadCellColumnActionsButton = (_a) => {
@@ -2674,16 +2722,12 @@ const MRT_FilterTextField = (_a) => {
                 } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleChange(getValueAndLabel(newValue).value), options: (_t = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _t !== void 0 ? _t : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
                     return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange })));
-                }, value: filterValue }))) : (jsx(TextField, Object.assign({ SelectProps: {
-                    displayEmpty: true,
-                    multiple: isMultiSelectFilter,
-                    renderValue: isMultiSelectFilter
+                }, value: filterValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
                         ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
                                 const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
                                 return (jsx(Chip, { label: getValueAndLabel(selectedValue).label }, value));
                             }) }))
-                        : undefined,
-                }, onChange: handleTextFieldChange, select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
+                        : undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
                     jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
                         (_u = textFieldProps.children) !== null && _u !== void 0 ? _u : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
@@ -3095,9 +3139,9 @@ const MRT_TableHeadCell = (_a) => {
 };
 
 const MRT_TableHeadRow = (_a) => {
-    var { columnVirtualizer, headerGroup, table, virtualColumns } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table", "virtualColumns"]);
+    var { columnVirtualizer, headerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table"]);
     const { options: { layoutMode, muiTableHeadRowProps }, } = table;
-    const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
+    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadRowProps, {
         headerGroup,
         table,
@@ -3140,6 +3184,8 @@ const MRT_TablePagination = (_a) => {
     const firstRowIndex = pageIndex * pageSize;
     const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
     const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { SelectProps, disabled = false, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, _rest = __rest(_b, ["SelectProps", "disabled", "rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
+    const disableBack = pageIndex <= 0 || disabled;
+    const disableNext = lastRowIndex >= totalRowCount || disabled;
     return (jsxs(Box, { className: "MuiTablePagination-root", sx: {
             alignItems: 'center',
             display: 'flex',
@@ -3166,7 +3212,7 @@ const MRT_TablePagination = (_a) => {
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, { title: localization.goToFirstPage, children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) }) })), jsx(Tooltip, { title: localization.goToPreviousPage, children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }) }), jsx(Tooltip, { title: localization.goToNextPage, children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }) }), showLastButton && (jsx(Tooltip, { title: localization.goToLastPage, children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }) }))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, { enterDelay: 1000, title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) }) }) })), jsx(Tooltip, { enterDelay: 1000, title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }) }) }), jsx(Tooltip, { enterDelay: 1000, title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }) }) }), showLastButton && (jsx(Tooltip, { enterDelay: 1000, title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }) }) }))] })] })) : null] }));
 };
 
 const MRT_GlobalFilterTextField = (_a) => {
@@ -3363,8 +3409,9 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
             setHoveredColumn(column);
         }
     };
-    if (!columnDef.header || columnDef.visibleInShowHideMenu === false)
+    if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
         return null;
+    }
     return (jsxs(Fragment, { children: [jsx(MenuItem, Object.assign({ disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', justifyContent: 'flex-start', my: 0, opacity: isDragging ? 0.5 : 1, outline: isDragging
                         ? `2px dashed ${theme.palette.grey[500]}`
                         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
@@ -3507,8 +3554,19 @@ const MRT_TopToolbar = ({ table, }) => {
     const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
     const { isFullScreen, showGlobalFilter } = getState();
     const isMobile = useMediaQuery('(max-width:720px)');
+    const isTablet = useMediaQuery('(max-width:1024px)');
     const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
-    const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
+    const stackAlertBanner = isMobile ||
+        !!renderTopToolbarCustomActions ||
+        (showGlobalFilter && isTablet);
+    const globalFilterProps = {
+        sx: !isTablet
+            ? {
+                zIndex: 2,
+            }
+            : undefined,
+        table,
+    };
     return (jsxs(Box, Object.assign({}, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
             if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
@@ -3526,19 +3584,19 @@ const MRT_TopToolbar = ({ table, }) => {
                     right: 0,
                     top: 0,
                     width: '100%',
-                }, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsx(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsx("span", {}), enableToolbarInternalActions ? (jsxs(Box, { sx: {
+                }, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsx("span", {}), enableToolbarInternalActions ? (jsxs(Box, { sx: {
                             alignItems: 'center',
                             display: 'flex',
                             flexWrap: 'wrap-reverse',
                             gap: '0.5rem',
                             justifyContent: 'flex-end',
-                        }, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })), jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
-                        positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })))] }), enablePagination &&
+                        }, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))), jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
+                        positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))))] }), enablePagination &&
                 ['both', 'top'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { position: "top", table: table })), jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
 };
 
 const MRT_TableHead = (_a) => {
-    var { columnVirtualizer, table, virtualColumns } = _a, rest = __rest(_a, ["columnVirtualizer", "table", "virtualColumns"]);
+    var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
     const { getHeaderGroups, getSelectedRowModel, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
     const { isFullScreen, showAlertBanner } = getState();
     const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
@@ -3555,7 +3613,7 @@ const MRT_TableHead = (_a) => {
             }, children: jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
                     display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
                     padding: 0,
-                }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table, virtualColumns: virtualColumns }, headerGroup.id)))) })));
+                }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
 };
 
 const MRT_Table = (_a) => {
@@ -3578,13 +3636,9 @@ const MRT_Table = (_a) => {
         return colSizes;
     }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
     const columnVirtualizer = useMRT_ColumnVirtualizer(table);
-    const virtualColumns = columnVirtualizer
-        ? columnVirtualizer.getVirtualItems()
-        : undefined;
     const commonTableGroupProps = {
         columnVirtualizer,
         table,
-        virtualColumns,
     };
     return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
 };