material-react-table 2.4.0 → 2.4.1

package/dist/index.js

@@ -386,6 +386,8 @@ const createRow = (table, originalRow) => reactTable.createRow(table, 'mrt-row-c
 }))), -1, 0);
 const extraIndexRangeExtractor = (range, draggingIndex) => {
     const newIndexes = reactVirtual.defaultRangeExtractor(range);
+    if (draggingIndex === undefined)
+        return newIndexes;
     if (draggingIndex >= 0 &&
         draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
         newIndexes.unshift(draggingIndex);
@@ -430,7 +432,7 @@ const getMRTTheme = (table, theme) => (Object.assign({ baseBackgroundColor: them
         ? styles.darken(theme.palette.warning.dark, 0.25)
         : styles.lighten(theme.palette.warning.light, 0.5), pinnedRowBackgroundColor: styles.alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: styles.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)`,
@@ -450,19 +452,8 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
                 ? `4px 0 8px -6px ${styles.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'
@@ -893,12 +884,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 && (jsxRuntime.jsx(Collapse__default["default"], { 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 = styles.useTheme();
     const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
     const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
-    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,
@@ -998,7 +989,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
 const Memo_MRT_TableBodyRow = react.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, {
@@ -1009,7 +1000,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
@@ -1023,9 +1015,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
         ? reactVirtual.useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: react.useCallback((range) => {
                 const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
@@ -1038,21 +1032,25 @@ 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;
 };
@@ -1391,7 +1389,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();
@@ -1428,8 +1426,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);
@@ -1800,9 +1804,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;
 };
@@ -2361,7 +2369,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);
@@ -2379,14 +2387,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' && (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, commonRowProps, { row: creatingRow, rowIndex: -1 })));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
@@ -2417,12 +2422,13 @@ const MRT_TableBody = (_a) => {
                                 row, rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex, virtualRow: rowVirtualizer
                                     ? rowOrVirtualRow
                                     : undefined });
-                            return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), `${row.id}-${row.index}`)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), `${row.id}-${row.index}`));
+                            const key = `${row.id}-${row.index}`;
+                            return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), key)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), key));
                         }) })))] })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
                 getIsSomeRowsPinned('bottom') && (jsxRuntime.jsx(TableBody__default["default"], 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' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), `${row.id}`)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                    return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                 }) })))] }));
 };
 const Memo_MRT_TableBody = react.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
@@ -2457,9 +2463,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) ||
@@ -2478,7 +2484,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, {
@@ -2495,7 +2501,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) => (jsxRuntime.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) => (jsxRuntime.jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
 };
 
 const MRT_TableHeadCellColumnActionsButton = (_a) => {
@@ -3184,9 +3190,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,
@@ -3229,6 +3235,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 (jsxRuntime.jsxs(Box__default["default"], { className: "MuiTablePagination-root", sx: {
             alignItems: 'center',
             display: 'flex',
@@ -3255,7 +3263,7 @@ const MRT_TablePagination = (_a) => {
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { 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()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(Tooltip__default["default"], { title: localization.goToFirstPage, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) }) })), jsxRuntime.jsx(Tooltip__default["default"], { title: localization.goToPreviousPage, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, {}) }) }), jsxRuntime.jsx(Tooltip__default["default"], { title: localization.goToNextPage, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }) }), showLastButton && (jsxRuntime.jsx(Tooltip__default["default"], { title: localization.goToLastPage, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }) }))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { 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()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(Tooltip__default["default"], { enterDelay: 1000, title: localization.goToFirstPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) }) }) })), jsxRuntime.jsx(Tooltip__default["default"], { enterDelay: 1000, title: localization.goToPreviousPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, {}) }) }) }), jsxRuntime.jsx(Tooltip__default["default"], { enterDelay: 1000, title: localization.goToNextPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }) }) }), showLastButton && (jsxRuntime.jsx(Tooltip__default["default"], { enterDelay: 1000, title: localization.goToLastPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }) }) }))] })] })) : null] }));
 };
 
 const MRT_GlobalFilterTextField = (_a) => {
@@ -3627,7 +3635,7 @@ const MRT_TopToolbar = ({ 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);
@@ -3644,7 +3652,7 @@ const MRT_TableHead = (_a) => {
             }, children: jsxRuntime.jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
                     display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
                     padding: 0,
-                }, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table, virtualColumns: virtualColumns }, headerGroup.id)))) })));
+                }, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
 };
 
 const MRT_Table = (_a) => {
@@ -3667,13 +3675,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 (jsxRuntime.jsxs(Table__default["default"], 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 && jsxRuntime.jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsxRuntime.jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
 };