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

package/dist/cjs/types/MaterialReactTable.d.ts

@@ -442,6 +442,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
     enableColumnDragging?: boolean;
     enableColumnFilterModes?: boolean;
     enableColumnOrdering?: boolean;
+    enableColumnVirtualization?: boolean;
     enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
@@ -637,8 +638,8 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
     positionActionsColumn?: 'first' | 'last';
     positionExpandColumn?: 'first' | 'last';
-    positionGlobalFilter?: 'left' | 'right';
-    positionPagination?: 'bottom' | 'top' | 'both';
+    positionGlobalFilter?: 'left' | 'right' | 'none';
+    positionPagination?: 'bottom' | 'top' | 'both' | 'none';
     positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
     positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
     renderBottomToolbar?: ReactNode | (({ table }: {
@@ -690,11 +691,23 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
-    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
-    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
+    columnVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableCellElement> | null>;
+    columnVirtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>> | (({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>);
+    rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableRowElement> | null>;
+    rowVirtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
-    virtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableRowElement> | null>;
+    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
+    /**
+     * @deprecated Use `rowVirtualizerInstanceRef` instead
+     */
+    virtualizerInstanceRef?: any;
+    /**
+     * @deprecated Use `rowVirtualizerProps` instead
+     */
+    virtualizerProps?: any;
 };
 declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 export default MaterialReactTable;

package/dist/cjs/types/body/MRT_TableBody.d.ts

@@ -1,7 +1,12 @@
 import React, { FC } from 'react';
+import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_TableInstance } from '..';
 interface Props {
+    columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     table: MRT_TableInstance;
+    virtualColumns?: VirtualItem[];
+    virtualPaddingLeft?: number;
+    virtualPaddingRight?: number;
 }
 export declare const MRT_TableBody: FC<Props>;
 export declare const Memo_MRT_TableBody: React.NamedExoticComponent<Props>;

package/dist/cjs/types/body/MRT_TableBodyCell.d.ts

@@ -1,12 +1,15 @@
 import React, { FC, RefObject } from 'react';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
     enableHover?: boolean;
+    measureElement?: (element: HTMLTableCellElement) => void;
     numRows: number;
     rowIndex: number;
     rowRef: RefObject<HTMLTableRowElement>;
     table: MRT_TableInstance;
+    virtualCell?: VirtualItem;
 }
 export declare const MRT_TableBodyCell: FC<Props>;
 export declare const Memo_MRT_TableBodyCell: React.NamedExoticComponent<Props>;

package/dist/cjs/types/body/MRT_TableBodyRow.d.ts

@@ -1,12 +1,16 @@
 import React, { FC } from 'react';
-import type { VirtualItem } from '@tanstack/react-virtual';
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
+    columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     measureElement?: (element: HTMLTableRowElement) => void;
     numRows: number;
     row: MRT_Row;
     rowIndex: number;
     table: MRT_TableInstance;
+    virtualColumns?: VirtualItem[];
+    virtualPaddingLeft?: number;
+    virtualPaddingRight?: number;
     virtualRow?: VirtualItem;
 }
 export declare const MRT_TableBodyRow: FC<Props>;

package/dist/cjs/types/footer/MRT_TableFooter.d.ts

@@ -1,7 +1,11 @@
 import { FC } from 'react';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
+    virtualColumns?: VirtualItem[];
+    virtualPaddingLeft?: number;
+    virtualPaddingRight?: number;
 }
 export declare const MRT_TableFooter: FC<Props>;
 export {};

package/dist/cjs/types/footer/MRT_TableFooterRow.d.ts

@@ -1,8 +1,12 @@
 import { FC } from 'react';
+import { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
 interface Props {
     footerGroup: MRT_HeaderGroup;
     table: MRT_TableInstance;
+    virtualColumns?: VirtualItem[];
+    virtualPaddingLeft?: number;
+    virtualPaddingRight?: number;
 }
 export declare const MRT_TableFooterRow: FC<Props>;
 export {};

package/dist/cjs/types/head/MRT_TableHead.d.ts

@@ -1,7 +1,11 @@
 import { FC } from 'react';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
+    virtualColumns?: VirtualItem[];
+    virtualPaddingLeft?: number;
+    virtualPaddingRight?: number;
 }
 export declare const MRT_TableHead: FC<Props>;
 export {};

package/dist/cjs/types/head/MRT_TableHeadRow.d.ts

@@ -1,8 +1,12 @@
 import { FC } from 'react';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
 interface Props {
     headerGroup: MRT_HeaderGroup;
     table: MRT_TableInstance;
+    virtualColumns?: VirtualItem[];
+    virtualPaddingLeft?: number;
+    virtualPaddingRight?: number;
 }
 export declare const MRT_TableHeadRow: FC<Props>;
 export {};

package/dist/cjs/types/table/MRT_TableRoot.d.ts

@@ -20,6 +20,7 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     enableColumnDragging?: boolean | undefined;
     enableColumnFilterModes?: boolean | undefined;
     enableColumnOrdering?: boolean | undefined;
+    enableColumnVirtualization?: boolean | undefined;
     enableDensityToggle?: boolean | undefined;
     enableEditing?: boolean | undefined;
     enableExpandAll?: boolean | undefined;
@@ -200,8 +201,8 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     onShowGlobalFilterChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
     positionActionsColumn?: "first" | "last" | undefined;
     positionExpandColumn?: "first" | "last" | undefined;
-    positionGlobalFilter?: "left" | "right" | undefined;
-    positionPagination?: "bottom" | "top" | "both" | undefined;
+    positionGlobalFilter?: "left" | "right" | "none" | undefined;
+    positionPagination?: "bottom" | "top" | "none" | "both" | undefined;
     positionToolbarAlertBanner?: "bottom" | "top" | "none" | undefined;
     positionToolbarDropZone?: "bottom" | "top" | "none" | "both" | undefined;
     renderBottomToolbar?: React.ReactNode | (({ table }: {
@@ -253,11 +254,17 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     rowNumberMode?: "original" | "static" | undefined;
     selectAllMode?: "all" | "page" | undefined;
     state?: Partial<MRT_TableState<TData>> | undefined;
-    tableInstanceRef?: React.MutableRefObject<MRT_TableInstance<TData> | null> | undefined;
-    virtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
+    columnVirtualizerInstanceRef?: React.MutableRefObject<import("@tanstack/react-virtual").Virtualizer<HTMLDivElement, HTMLTableCellElement> | null> | undefined;
+    columnVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>> | (({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>) | undefined;
+    rowVirtualizerInstanceRef?: React.MutableRefObject<import("@tanstack/react-virtual").Virtualizer<HTMLDivElement, HTMLTableRowElement> | null> | undefined;
+    rowVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>) | undefined;
-    virtualizerInstanceRef?: React.MutableRefObject<import("@tanstack/react-virtual").Virtualizer<HTMLDivElement, HTMLTableRowElement> | null> | undefined;
+    tableInstanceRef?: React.MutableRefObject<MRT_TableInstance<TData> | null> | undefined;
+    virtualizerInstanceRef?: any;
+    virtualizerProps?: any;
 } & {
     localization: MRT_Localization;
 }) => JSX.Element;

package/dist/cjs/types/toolbar/MRT_TablePagination.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
-    position: 'top' | 'bottom';
+    position?: 'top' | 'bottom';
     table: MRT_TableInstance<TData>;
 }
 export declare const MRT_TablePagination: <TData extends Record<string, any> = {}>({ table, position, }: Props<TData>) => JSX.Element;

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

@@ -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;
@@ -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;
     }