material-react-table 2.3.1 → 2.4.1

package/dist/index.js

@@ -71,6 +71,8 @@ var Chip = require('@mui/material/Chip');
 var InputAdornment = require('@mui/material/InputAdornment');
 var utils = require('@mui/material/utils');
 var DatePicker = require('@mui/x-date-pickers/DatePicker');
+var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
+var TimePicker = require('@mui/x-date-pickers/TimePicker');
 var FormHelperText = require('@mui/material/FormHelperText');
 var Slider = require('@mui/material/Slider');
 var Stack = require('@mui/material/Stack');
@@ -384,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);
@@ -428,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)`,
@@ -448,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'
@@ -891,11 +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, virtualPaddingLeft, virtualPaddingRight, 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 { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     const isPinned = enableRowPinning && row.getIsPinned();
     const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
         row,
@@ -995,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, {
@@ -1006,22 +1000,26 @@ 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
     const averageColumnWidth = react.useMemo(() => {
         var _a, _b, _c, _d;
-        if (!enableColumnVirtualization || (columnVirtualizerProps === null || columnVirtualizerProps === void 0 ? void 0 : columnVirtualizerProps.estimateSize))
+        if (!enableColumnVirtualization || (columnVirtualizerProps === null || columnVirtualizerProps === void 0 ? void 0 : columnVirtualizerProps.estimateSize)) {
             return 0;
+        }
         const columnsWidths = (_d = (_c = (_b = (_a = table
             .getRowModel()
             .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);
@@ -1034,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;
 };
@@ -1171,7 +1173,8 @@ const MRT_EditActionButtons = (_a) => {
             });
         }
     };
-    return (jsxRuntime.jsx(Box__default["default"], { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.cancel, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.cancel, onClick: handleCancel, children: jsxRuntime.jsx(CancelIcon, {}) }) }), jsxRuntime.jsx(Tooltip__default["default"], { title: localization.save, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsxRuntime.jsx(CircularProgress__default["default"], { size: 18 }) : jsxRuntime.jsx(SaveIcon, {}) }) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button__default["default"], { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxRuntime.jsxs(Button__default["default"], { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsxRuntime.jsx(CircularProgress__default["default"], { color: "inherit", size: 18 }), localization.save] })] })) }));
+    return (jsxRuntime.jsx(Box__default["default"], { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.cancel, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.cancel, onClick: handleCancel, children: jsxRuntime.jsx(CancelIcon, {}) }) }), ((isCreating && onCreatingRowSave) ||
+                    (isEditing && onEditingRowSave)) && (jsxRuntime.jsx(Tooltip__default["default"], { title: localization.save, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsxRuntime.jsx(CircularProgress__default["default"], { size: 18 }) : jsxRuntime.jsx(SaveIcon, {}) }) }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button__default["default"], { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxRuntime.jsxs(Button__default["default"], { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsxRuntime.jsx(CircularProgress__default["default"], { color: "inherit", size: 18 }), localization.save] })] })) }));
 };
 
 const mrtFilterOptions = (localization) => [
@@ -1263,7 +1266,7 @@ const mrtFilterOptions = (localization) => [
 const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
 const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
-const rangeVariants = ['range-slider', 'date-range', 'range'];
+const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
 const MRT_FilterOptionMenu = (_a) => {
     var _b, _c, _d, _e;
     var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
@@ -1386,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();
@@ -1423,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);
@@ -1779,14 +1788,15 @@ const useMRT_Effects = (table) => {
     }, [density]);
 };
 
-const useMRT_RowVirtualizer = (table) => {
+const useMRT_RowVirtualizer = (table, rows) => {
+    var _a;
     const { getRowModel, getState, options: { enableRowVirtualization, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef }, } = table;
     const { density, draggingRow } = getState();
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
     });
     const rowVirtualizer = enableRowVirtualization
-        ? reactVirtual.useVirtualizer(Object.assign({ count: getRowModel().rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
+        ? reactVirtual.useVirtualizer(Object.assign({ count: (_a = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _a !== void 0 ? _a : getRowModel().rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
                 navigator.userAgent.indexOf('Firefox') === -1
                 ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
                 : undefined, overscan: 4, rangeExtractor: react.useCallback((range) => {
@@ -1794,9 +1804,13 @@ const useMRT_RowVirtualizer = (table) => {
                 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;
 };
@@ -1815,7 +1829,7 @@ const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), {
 const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
     Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
 
-const useMRT_Rows = (table) => {
+const useMRT_Rows = (table, pinnedRowIds = []) => {
     const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, rowPinningDisplayMode, }, } = table;
     const { expanded, globalFilter, pagination, rowPinning, sorting } = getState();
     const shouldRankRows = react.useMemo(() => getCanRankRows(table) &&
@@ -1830,9 +1844,6 @@ const useMRT_Rows = (table) => {
         manualSorting,
         sorting,
     ]);
-    const pinnedRowIds = react.useMemo(() => getRowModel()
-        .rows.filter((row) => row.getIsPinned())
-        .map((r) => r.id), [rowPinning, table.getRowModel().rows]);
     const rows = react.useMemo(() => {
         let rows = [];
         if (!shouldRankRows) {
@@ -2358,7 +2369,7 @@ const useMRT_TableOptions = (_a) => {
 
 const MRT_TableBody = (_a) => {
     var _b, _c, _d, _e, _f, _g;
-    var { columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["columnVirtualizer", "table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
+    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);
@@ -2366,21 +2377,21 @@ const MRT_TableBody = (_a) => {
         ((_b = tableHeadRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
         0;
     const tableFooterHeight = (enableStickyFooter && ((_c = tableFooterRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight)) || 0;
-    const pinnedRowIds = react.useMemo(() => getRowModel()
-        .rows.filter((row) => row.getIsPinned())
-        .map((r) => r.id), [rowPinning, table.getRowModel().rows]);
-    const rows = useMRT_Rows(table);
-    const rowVirtualizer = useMRT_RowVirtualizer(table);
-    const virtualRows = rowVirtualizer
-        ? rowVirtualizer.getVirtualItems()
-        : undefined;
+    const pinnedRowIds = react.useMemo(() => {
+        var _a, _b;
+        if (!((_a = rowPinning.bottom) === null || _a === void 0 ? void 0 : _a.length) && !((_b = rowPinning.top) === null || _b === void 0 ? void 0 : _b.length))
+            return [];
+        return getRowModel()
+            .rows.filter((row) => row.getIsPinned())
+            .map((r) => r.id);
+    }, [rowPinning, getRowModel().rows]);
+    const rows = useMRT_Rows(table, pinnedRowIds);
+    const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
+    const { virtualRows } = rowVirtualizer !== null && rowVirtualizer !== void 0 ? rowVirtualizer : {};
     const commonRowProps = {
         columnVirtualizer,
         numRows: rows.length,
         table,
-        virtualColumns,
-        virtualPaddingLeft,
-        virtualPaddingRight,
     };
     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')) &&
@@ -2411,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);
@@ -2451,8 +2463,9 @@ const MRT_TableFooterCell = (_a) => {
 
 const MRT_TableFooterRow = (_a) => {
     var _b;
-    var { footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["footerGroup", "table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
+    var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
     const { options: { layoutMode, muiTableFooterRowProps }, } = table;
+    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) ||
@@ -2471,7 +2484,7 @@ const MRT_TableFooterRow = (_a) => {
 };
 
 const MRT_TableFooter = (_a) => {
-    var { table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
+    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, {
@@ -2488,11 +2501,11 @@ 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, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, 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) => {
-    var _b;
+    var _b, _c;
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
     const { column } = header;
@@ -2512,7 +2525,7 @@ const MRT_TableHeadCellColumnActionsButton = (_a) => {
     })), rest);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.columnActions, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
                             opacity: 1,
-                        }, height: '2rem', m: '-8px -4px', opacity: 0.3, transition: 'all 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsxRuntime.jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } }) })) }), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
+                        }, height: '2rem', m: '-8px -4px', opacity: 0.3, transition: 'all 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } })) })) }), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterCheckbox = (_a) => {
@@ -2545,9 +2558,9 @@ const MRT_FilterCheckbox = (_a) => {
 };
 
 const MRT_FilterTextField = (_a) => {
-    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
-    const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
+    const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { filterVariant } = columnDef;
@@ -2563,7 +2576,15 @@ const MRT_FilterTextField = (_a) => {
         column,
         table,
     }));
-    const isDateFilter = filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date');
+    const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, {
+        column,
+        table,
+    }));
+    const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, {
+        column,
+        table,
+    }));
+    const isDateFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time'));
     const isAutocompleteFilter = filterVariant === 'autocomplete';
     const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) || rangeFilterIndex !== undefined;
     const isSelectFilter = filterVariant === 'select';
@@ -2730,12 +2751,22 @@ const MRT_FilterTextField = (_a) => {
                         : !filterChipLabel
                             ? '120px'
                             : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isDateFilter ? (jsxRuntime.jsx(DatePicker.DatePicker, Object.assign({ onChange: (newDate) => {
-                    handleChange(newDate);
-                }, value: filterValue || null }, datePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_m = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_o = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.textField),
-                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleChange(getValueAndLabel(newValue).value), options: (_p = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _p !== void 0 ? _p : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+    const commonDatePickerProps = {
+        onChange: (newDate) => {
+            handleChange(newDate);
+        },
+        value: filterValue || null,
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsxRuntime.jsx(TimePicker.TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_o = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.textField),
+                } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsxRuntime.jsx(DateTimePicker.DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_q = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.textField),
+                } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsxRuntime.jsx(DatePicker.DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_s = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _s === void 0 ? void 0 : _s.textField),
+                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], 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 (jsxRuntime.jsx(TextField__default["default"], 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 }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ SelectProps: {
@@ -2750,7 +2781,7 @@ const MRT_FilterTextField = (_a) => {
                 }, onChange: handleTextFieldChange, select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
                     jsxRuntime.jsx(MenuItem__default["default"], { disabled: true, divider: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
-                        (_q = textFieldProps.children) !== null && _q !== void 0 ? _q : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
+                        (_u = textFieldProps.children) !== null && _u !== void 0 ? _u : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
                             var _a;
                             const { label, value } = getValueAndLabel(option);
                             return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
@@ -3159,8 +3190,9 @@ const MRT_TableHeadCell = (_a) => {
 };
 
 const MRT_TableHeadRow = (_a) => {
-    var { headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["headerGroup", "table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
+    var { columnVirtualizer, headerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table"]);
     const { options: { layoutMode, muiTableHeadRowProps }, } = table;
+    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadRowProps, {
         headerGroup,
         table,
@@ -3203,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',
@@ -3229,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(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) })), 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(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }), showLastButton && (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) => {
@@ -3601,7 +3635,7 @@ const MRT_TopToolbar = ({ table, }) => {
 };
 
 const MRT_TableHead = (_a) => {
-    var { table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
+    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);
@@ -3618,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, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, 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) => {
@@ -3641,18 +3675,11 @@ const MRT_Table = (_a) => {
         return colSizes;
     }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
     const columnVirtualizer = useMRT_ColumnVirtualizer(table);
-    const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
-    const virtualColumns = columnVirtualizer
-        ? columnVirtualizer.getVirtualItems()
-        : undefined;
     const commonTableGroupProps = {
+        columnVirtualizer,
         table,
-        virtualColumns,
-        virtualPaddingLeft,
-        virtualPaddingRight,
     };
-    const commonTableBodyProps = Object.assign(Object.assign({}, commonTableGroupProps), { columnVirtualizer });
-    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({}, commonTableBodyProps))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({}, commonTableBodyProps))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
+    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))] })));
 };
 
 const MRT_TableLoadingOverlay = (_a) => {