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

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';
@@ -245,7 +245,9 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             ? 'sticky'
             : undefined, right: column.getIsPinned() === 'right'
             ? `${getTotalRight(table, column)}px`
-            : undefined, transition: `all ${column.getIsResizing() ? 0 : '150ms'} ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+            : undefined, transition: table.options.enableColumnVirtualization || column.getIsResizing()
+            ? 'none'
+            : `all 150ms ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
         ? tableCellProps.sx(theme)
         : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { flex: table.options.layoutMode === 'grid'
             ? `${column.getSize()} 0 auto`
@@ -1131,7 +1133,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;
@@ -1962,17 +1964,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 +1991,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 +2130,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 +2202,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 +2232,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 +2279,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 +2318,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 +2387,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;
     }
-    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
+    //deprecated
+    if (virtualizerInstanceRef && rowVirtualizer) {
+        virtualizerInstanceRef.current = rowVirtualizer;
+    }
+    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 +2416,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,
         };
@@ -2415,7 +2457,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 +2474,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 +2485,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 +2511,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;
@@ -2663,12 +2771,9 @@ const MRT_TableRoot = (props) => {
                 ...Array(((_d = (_c = props.state) === null || _c === void 0 ? void 0 : _c.pagination) === null || _d === void 0 ? void 0 : _d.pageSize) ||
                     ((_e = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) === null || _e === void 0 ? void 0 : _e.pageSize) ||
                     10).fill(null),
-            ].map(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
-                var _a, _b;
-                return ({
-                    [(_b = (_a = col.id) !== null && _a !== void 0 ? _a : col.accessorKey) !== null && _b !== void 0 ? _b : '']: null,
-                });
-            })))
+            ].map(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => ({
+                [getColumnId(col)]: null,
+            }))))
             : props.data;
     }, [props.data, (_s = props.state) === null || _s === void 0 ? void 0 : _s.isLoading, (_t = props.state) === null || _t === void 0 ? void 0 : _t.showSkeletons]);
     //@ts-ignore
@@ -2817,19 +2922,26 @@ const MRT_Localization_EN = {
 };
 
 const MaterialReactTable = (_a) => {
-    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["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"]);
-    const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), []);
+    var _b;
+    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["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", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
+    const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
     const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
     const _filterFns = useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
     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) {
+    const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
+    const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
+    if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
         layoutMode = 'grid';
         enableStickyHeader = true;
     }
-    return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
+    if (!((_b = rest.data) === null || _b === void 0 ? void 0 : _b.length)) {
+        manualFiltering = true;
+        manualGrouping = true;
+        manualPagination = true;
+        manualSorting = true;
+    }
+    return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
 };
 
 export { MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MaterialReactTable as default };