material-react-table 1.4.2 → 1.5.0-beta.0

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

@@ -54,7 +54,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import Collapse from '@mui/material/Collapse';
 import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
-import debounce from '@mui/material/utils/debounce';
+import { debounce } from '@mui/material/utils';
 import LinearProgress from '@mui/material/LinearProgress';
 import TablePagination from '@mui/material/TablePagination';
 import Alert from '@mui/material/Alert';
@@ -62,12 +62,12 @@ import AlertTitle from '@mui/material/AlertTitle';
 import Chip from '@mui/material/Chip';
 import Fade from '@mui/material/Fade';
 import TableContainer from '@mui/material/TableContainer';
+import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import TableSortLabel from '@mui/material/TableSortLabel';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import TableBody from '@mui/material/TableBody';
 import Skeleton from '@mui/material/Skeleton';
 import TableFooter from '@mui/material/TableFooter';
@@ -1131,7 +1131,7 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
         React.createElement(LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps))));
 };
 
-const MRT_TablePagination = ({ table, position, }) => {
+const MRT_TablePagination = ({ table, position = 'bottom', }) => {
     const { getPrePaginationRowModel, getState, setPageIndex, setPageSize, options: { muiTablePaginationProps, enableToolbarInternalActions, localization, rowCount, }, } = table;
     const { pagination: { pageSize = 10, pageIndex = 0 }, showGlobalFilter, } = getState();
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
@@ -1447,7 +1447,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { options: { enableColumnFilterModes, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, manualFiltering, muiTableHeadCellFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
@@ -1478,13 +1478,13 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
         : '';
     const filterPlaceholder = !isRangeFilter
-        ? (_c = localization.filterByColumn) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))
+        ? (_c = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.placeholder) !== null && _c !== void 0 ? _c : (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))
         : rangeFilterIndex === 0
             ? localization.min
             : rangeFilterIndex === 1
                 ? localization.max
                 : '';
-    const allowedColumnFilterOptions = (_d = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _d !== void 0 ? _d : columnFilterModeOptions;
+    const allowedColumnFilterOptions = (_e = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _e !== void 0 ? _e : columnFilterModeOptions;
     const showChangeModeButton = enableColumnFilterModes &&
         columnDef.enableColumnFilterModes !== false &&
         !rangeFilterIndex &&
@@ -1554,7 +1554,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         isMounted.current = true;
     }, [column.getFilterValue()]);
     if (columnDef.Filter) {
-        return (React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, rangeFilterIndex, table })));
+        return (React.createElement(React.Fragment, null, (_f = columnDef.Filter) === null || _f === void 0 ? void 0 : _f.call(columnDef, { column, header, rangeFilterIndex, table })));
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(TextField, Object.assign({ fullWidth: true, inputProps: {
@@ -1566,7 +1566,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 title: filterPlaceholder,
             }, helperText: showChangeModeButton ? (React.createElement("label", null, localization.filterMode.replace('{filterType}', 
             // @ts-ignore
-            localization[`filter${((_f = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _f === void 0 ? void 0 : _f.toUpperCase()) +
+            localization[`filter${((_g = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) +
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]))) : null, FormHelperTextProps: {
                 sx: {
                     fontSize: '0.75rem',
@@ -1583,7 +1583,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                                 React.createElement(FilterListIcon, null)))),
                     filterChipLabel && (React.createElement(Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : null,
                 endAdornment: !filterChipLabel && (React.createElement(InputAdornment, { position: "end" },
-                    React.createElement(Tooltip, { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '' },
+                    React.createElement(Tooltip, { arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '' },
                         React.createElement("span", null,
                             React.createElement(IconButton, { "aria-label": localization.clearFilter, disabled: !(filterValue === null || filterValue === void 0 ? void 0 : filterValue.length), onClick: handleClear, size: "small", sx: {
                                     height: '1.75rem',
@@ -1620,8 +1620,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 ? textFieldProps.sx(theme)
                 : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))) }),
             (isSelectFilter || isMultiSelectFilter) && (React.createElement(MenuItem, { divider: true, disabled: true, hidden: true, value: "" },
-                React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder))), (_h = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _h === void 0 ? void 0 :
-            _h.map((option) => {
+                React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder))), (_j = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _j === void 0 ? void 0 :
+            _j.map((option) => {
                 var _a;
                 let value;
                 let text;
@@ -1830,7 +1830,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
             }, IconComponent: ArrowDownwardIcon })));
 };
 
-const MRT_TableHeadCell = ({ header, table }) => {
+const MRT_TableHeadCell = ({ header, table, }) => {
     var _a, _b, _c, _d;
     const theme = useTheme();
     const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
@@ -1962,17 +1962,25 @@ const MRT_TableHeadCell = ({ header, table }) => {
         column.getCanFilter() && (React.createElement(MRT_TableHeadCellFilterContainer, { header: header, table: table }))));
 };
 
-const MRT_TableHeadRow = ({ headerGroup, table }) => {
+const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     const { options: { layoutMode, muiTableHeadRowProps }, } = table;
     const tableRowProps = muiTableHeadRowProps instanceof Function
         ? muiTableHeadRowProps({ headerGroup, table })
         : muiTableHeadRowProps;
     return (React.createElement(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
             ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
-            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), headerGroup.headers.map((header) => (React.createElement(MRT_TableHeadCell, { header: header, key: header.id, table: table })))));
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }),
+        virtualPaddingLeft ? (React.createElement("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
+        (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
+            const header = virtualColumns
+                ? headerGroup.headers[headerOrVirtualHeader.index]
+                : headerOrVirtualHeader;
+            return (React.createElement(MRT_TableHeadCell, { header: header, key: header.id, table: table }));
+        }),
+        virtualPaddingRight ? (React.createElement("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null));
 };
 
-const MRT_TableHead = ({ table }) => {
+const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     const { getHeaderGroups, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps }, } = table;
     const { isFullScreen } = getState();
     const tableHeadProps = muiTableHeadProps instanceof Function
@@ -1981,7 +1989,7 @@ const MRT_TableHead = ({ table }) => {
     const stickyHeader = enableStickyHeader || isFullScreen;
     return (React.createElement(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
             ? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
-            : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
+            : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight })))));
 };
 
 const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
@@ -2120,7 +2128,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
                 : (_b = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : cell.renderValue()));
 };
 
-const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table, }) => {
+const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
     var _a, _b;
     const theme = useTheme();
     const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
@@ -2192,7 +2200,11 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    return (React.createElement(TableCell, Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
+    return (React.createElement(TableCell, Object.assign({ "data-index": virtualCell === null || virtualCell === void 0 ? void 0 : virtualCell.index, ref: (node) => {
+            if (node) {
+                measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
+            }
+        } }, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -2218,7 +2230,12 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
                         ? `${lighten(theme.palette.background.default, 0.2)} !important`
                         : `${darken(theme.palette.background.default, 0.1)} !important`
                     : undefined,
-            } }, getCommonCellStyles({ column, table, theme, tableCellProps })), draggingBorders)) }),
+            } }, getCommonCellStyles({
+            column,
+            table,
+            theme,
+            tableCellProps,
+        })), draggingBorders)) }),
         React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
             rowNumberMode === 'static' &&
             column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
@@ -2260,7 +2277,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, table, virtualRow, }) => {
                 : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React.createElement(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
 };
 
-const MRT_TableBodyRow = ({ measureElement, numRows, row, rowIndex, table, virtualRow, }) => {
+const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
     const theme = useTheme();
     const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
@@ -2299,37 +2316,50 @@ const MRT_TableBodyRow = ({ measureElement, numRows, row, rowIndex, table, virtu
                         : undefined,
                 } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
                 ? tableRowProps.sx(theme)
-                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }), row.getVisibleCells().map((cell) => {
-            const props = {
-                cell,
-                enableHover: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false,
-                key: cell.id,
-                numRows,
-                rowIndex,
-                rowRef,
-                table,
-            };
-            return memoMode === 'cells' &&
-                cell.column.columnDef.columnDefType === 'data' &&
-                !draggingColumn &&
-                !draggingRow &&
-                (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
-                (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (React.createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React.createElement(MRT_TableBodyCell, Object.assign({}, props)));
-        })),
+                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }),
+            virtualPaddingLeft ? (React.createElement("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
+            (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
+                const cell = columnVirtualizer
+                    ? row.getVisibleCells()[cellOrVirtualCell.index]
+                    : cellOrVirtualCell;
+                const props = {
+                    cell,
+                    enableHover: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false,
+                    key: cell.id,
+                    measureElement: columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement,
+                    numRows,
+                    rowIndex,
+                    rowRef,
+                    table,
+                    virtualCell: columnVirtualizer
+                        ? cellOrVirtualCell
+                        : undefined,
+                };
+                return memoMode === 'cells' &&
+                    cell.column.columnDef.columnDefType === 'data' &&
+                    !draggingColumn &&
+                    !draggingRow &&
+                    (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
+                    (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (React.createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React.createElement(MRT_TableBodyCell, Object.assign({}, props)));
+            }),
+            virtualPaddingRight ? (React.createElement("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null),
         renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, table: table, virtualRow: virtualRow }))));
 };
 const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row);
 
-const MRT_TableBody = ({ table }) => {
+const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     var _a, _b, _c;
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualFiltering, manualSorting, memoMode, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualFiltering, manualSorting, memoMode, muiTableBodyProps, rowVirtualizerInstanceRef, rowVirtualizerProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
     const { columnFilters, density, globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
         : muiTableBodyProps;
-    const vProps = virtualizerProps instanceof Function
+    const vProps_old = virtualizerProps instanceof Function
         ? virtualizerProps({ table })
         : virtualizerProps;
+    const vProps = rowVirtualizerProps instanceof Function
+        ? rowVirtualizerProps({ table })
+        : rowVirtualizerProps;
     const rows = useMemo(() => {
         if (enableGlobalFilterRankedResults &&
             globalFilter &&
@@ -2355,14 +2385,22 @@ const MRT_TableBody = ({ table }) => {
         pagination.pageIndex,
         pagination.pageSize,
     ]);
-    const virtualizer = enableRowVirtualization
-        ? useVirtualizer(Object.assign({ count: rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height, overscan: 4 }, vProps))
+    const rowVirtualizer = enableRowVirtualization
+        ? useVirtualizer(Object.assign(Object.assign({ count: rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height, overscan: 4 }, vProps_old), vProps))
         : undefined;
-    if (virtualizerInstanceRef && virtualizer) {
-        virtualizerInstanceRef.current = virtualizer;
+    if (rowVirtualizerInstanceRef && rowVirtualizer) {
+        rowVirtualizerInstanceRef.current = rowVirtualizer;
+    }
+    //deprecated
+    if (virtualizerInstanceRef && rowVirtualizer) {
+        virtualizerInstanceRef.current = rowVirtualizer;
     }
-    const virtualRows = virtualizer ? virtualizer.getVirtualItems() : undefined;
-    return (React.createElement(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: virtualizer ? `${virtualizer.getTotalSize()}px` : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
+    const virtualRows = rowVirtualizer
+        ? rowVirtualizer.getVirtualItems()
+        : undefined;
+    return (React.createElement(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: rowVirtualizer
+                ? `${rowVirtualizer.getTotalSize()}px`
+                : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
             ? tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx(theme)
             : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))) }), (_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : (!rows.length ? (React.createElement("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' } },
         React.createElement("td", { colSpan: table.getVisibleLeafColumns().length, style: { display: layoutMode === 'grid' ? 'grid' : 'table-cell' } },
@@ -2376,19 +2414,21 @@ const MRT_TableBody = ({ table }) => {
                 } }, globalFilter || columnFilters.length
                 ? localization.noResultsFound
                 : localization.noRecordsToDisplay)))) : (React.createElement(React.Fragment, null, (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
-        const row = virtualizer
+        const row = rowVirtualizer
             ? rows[rowOrVirtualRow.index]
             : rowOrVirtualRow;
         const props = {
+            columnVirtualizer,
             key: row.id,
-            measureElement: virtualizer
-                ? virtualizer.measureElement
-                : undefined,
+            measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
             numRows: rows.length,
             row,
-            rowIndex: virtualizer ? rowOrVirtualRow.index : rowIndex,
+            rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
             table,
-            virtualRow: virtualizer
+            virtualColumns,
+            virtualPaddingLeft,
+            virtualPaddingRight,
+            virtualRow: rowVirtualizer
                 ? rowOrVirtualRow
                 : undefined,
         };
@@ -2397,7 +2437,7 @@ const MRT_TableBody = ({ table }) => {
 };
 const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
-const MRT_TableFooterCell = ({ footer, table }) => {
+const MRT_TableFooterCell = ({ footer, table, }) => {
     var _a, _b, _c;
     const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
     const { density } = getState();
@@ -2415,7 +2455,12 @@ const MRT_TableFooterCell = ({ footer, table }) => {
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
-                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({ column, table, theme, tableCellProps }))) }),
+                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({
+            column,
+            table,
+            theme,
+            tableCellProps,
+        }))) }),
         React.createElement(React.Fragment, null, footer.isPlaceholder
             ? null
             : (_c = (_b = (columnDef.Footer instanceof Function
@@ -2427,7 +2472,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
                 : columnDef.Footer)) !== null && _b !== void 0 ? _b : columnDef.footer) !== null && _c !== void 0 ? _c : null)));
 };
 
-const MRT_TableFooterRow = ({ footerGroup, table }) => {
+const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     var _a;
     const { options: { layoutMode, muiTableFooterRowProps }, } = table;
     // if no content in row, skip row
@@ -2438,12 +2483,20 @@ const MRT_TableFooterRow = ({ footerGroup, table }) => {
     const tableRowProps = muiTableFooterRowProps instanceof Function
         ? muiTableFooterRowProps({ footerGroup, table })
         : muiTableFooterRowProps;
-    return (React.createElement(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row' }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+    return (React.createElement(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
             ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
-            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), footerGroup.headers.map((footer) => (React.createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }),
+        virtualPaddingLeft ? (React.createElement("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
+        (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
+            const footer = virtualColumns
+                ? footerGroup.headers[footerOrVirtualFooter.index]
+                : footerOrVirtualFooter;
+            return (React.createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table }));
+        }),
+        virtualPaddingRight ? (React.createElement("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null));
 };
 
-const MRT_TableFooter = ({ table }) => {
+const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, } = table;
     const { isFullScreen } = getState();
     const tableFooterProps = muiTableFooterProps instanceof Function
@@ -2456,21 +2509,74 @@ const MRT_TableFooter = ({ table }) => {
                     : `1px solid ${theme.palette.grey[700]}`
                 : undefined, position: stickFooter ? 'sticky' : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
             ? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
-            : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React.createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
+            : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React.createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight })))));
 };
 
 const MRT_Table = ({ table }) => {
-    const { getState, options: { enableColumnResizing, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, } = table;
-    const { isFullScreen } = getState();
+    var _a, _b;
+    const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerProps, enableColumnResizing, enableColumnVirtualization, enablePinning, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
+    const { isFullScreen, columnPinning, columnVisibility } = getState();
     const tableProps = muiTableProps instanceof Function
         ? muiTableProps({ table })
         : muiTableProps;
-    return (React.createElement(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: enableColumnResizing ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
+    const vProps = columnVirtualizerProps instanceof Function
+        ? columnVirtualizerProps({ table })
+        : columnVirtualizerProps;
+    //get first 16 column widths and average them
+    const averageColumnWidth = useMemo(() => {
+        var _a, _b, _c, _d;
+        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.25)) !== null && _d !== void 0 ? _d : [];
+        return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
+    }, [table.getRowModel().rows, columnPinning, columnVisibility]);
+    const pinnedColumnIndexes = useMemo(() => enableColumnVirtualization && enablePinning
+        ? [
+            ...table.getLeftFlatHeaders().map((h) => h.column.getPinnedIndex()),
+            ...table
+                .getRightFlatHeaders()
+                .map((h) => table.getVisibleFlatColumns().length -
+                h.column.getPinnedIndex() -
+                1),
+        ]
+        : [], [columnPinning, enableColumnVirtualization, enablePinning]);
+    const columnVirtualizer = enableColumnVirtualization
+        ? useVirtualizer(Object.assign({ count: table.getRowModel().rows[0].getVisibleCells().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, measureElement: (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width, overscan: 3, rangeExtractor: useCallback((range) => [
+                ...new Set([
+                    ...pinnedColumnIndexes,
+                    ...defaultRangeExtractor(range),
+                ]),
+            ].sort((a, b) => a - b), [pinnedColumnIndexes]) }, vProps))
+        : undefined;
+    if (columnVirtualizerInstanceRef && columnVirtualizer) {
+        columnVirtualizerInstanceRef.current = columnVirtualizer;
+    }
+    const virtualColumns = columnVirtualizer
+        ? columnVirtualizer.getVirtualItems()
+        : undefined;
+    let virtualPaddingLeft;
+    let virtualPaddingRight;
+    if (columnVirtualizer && (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)) {
+        virtualPaddingLeft = (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)
+            ? ((_a = virtualColumns[0]) === null || _a === void 0 ? void 0 : _a.start) || 0
+            : 0;
+        virtualPaddingRight = (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)
+            ? columnVirtualizer.getTotalSize() -
+                (((_b = virtualColumns[virtualColumns.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0)
+            : 0;
+    }
+    const props = {
+        table,
+        virtualColumns,
+        virtualPaddingLeft,
+        virtualPaddingRight,
+    };
+    return (React.createElement(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
-        enableTableHead && React.createElement(MRT_TableHead, { table: table }),
-        memoMode === 'table-body' ? (React.createElement(Memo_MRT_TableBody, { table: table })) : (React.createElement(MRT_TableBody, { table: table })),
-        enableTableFooter && React.createElement(MRT_TableFooter, { table: table })));
+        enableTableHead && React.createElement(MRT_TableHead, Object.assign({}, props)),
+        memoMode === 'table-body' ? (React.createElement(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (React.createElement(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))),
+        enableTableFooter && React.createElement(MRT_TableFooter, Object.assign({}, props))));
 };
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -2825,7 +2931,7 @@ const MaterialReactTable = (_a) => {
     const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
     const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), []);
     const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), []);
-    if (rest.enableRowVirtualization) {
+    if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
         layoutMode = 'grid';
         enableStickyHeader = true;
     }