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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/index.d.ts

@@ -21,7 +21,7 @@ import { TextFieldProps } from '@mui/material/TextField';
 import { ToolbarProps } from '@mui/material/Toolbar';
 import * as _tanstack_react_table from '@tanstack/react-table';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, AggregationFn, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
-import { VirtualizerOptions, Virtualizer } from '@tanstack/react-virtual';
+import { Virtualizer, VirtualizerOptions } from '@tanstack/react-virtual';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 
 declare const MRT_AggregationFns: {
@@ -565,6 +565,7 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
     enableColumnDragging?: boolean;
     enableColumnFilterModes?: boolean;
     enableColumnOrdering?: boolean;
+    enableColumnVirtualization?: boolean;
     enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
@@ -760,8 +761,8 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
     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 }: {
@@ -813,11 +814,23 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
     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;
 
@@ -854,7 +867,7 @@ interface Props$7<TData extends Record<string, any> = {}> extends IconButtonProp
 declare const MRT_ShowHideColumnsButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$7<TData>) => JSX.Element;
 
 interface Props$6<TData extends Record<string, any> = {}> {
-    position: 'top' | 'bottom';
+    position?: 'top' | 'bottom';
     table: MRT_TableInstance<TData>;
 }
 declare const MRT_TablePagination: <TData extends Record<string, any> = {}>({ table, position, }: Props$6<TData>) => JSX.Element;

package/locales/ru.esm.js

@@ -32,7 +32,7 @@ const MRT_Localization_RU = {
     filterGreaterThanOrEqualTo: 'Больше или равно',
     filterInNumberRange: 'Между',
     filterIncludesString: 'Содержит',
-    filterIncludesStringSensitive: 'Содержит (регистрозависисый)',
+    filterIncludesStringSensitive: 'Содержит (регистрозависимый)',
     filterLessThan: 'Меньше чем',
     filterLessThanOrEqualTo: 'Меньше или равно',
     filterMode: 'Режим фильтра: {filterType}',

package/locales/ru.js

@@ -36,7 +36,7 @@ const MRT_Localization_RU = {
     filterGreaterThanOrEqualTo: 'Больше или равно',
     filterInNumberRange: 'Между',
     filterIncludesString: 'Содержит',
-    filterIncludesStringSensitive: 'Содержит (регистрозависисый)',
+    filterIncludesStringSensitive: 'Содержит (регистрозависимый)',
     filterLessThan: 'Меньше чем',
     filterLessThanOrEqualTo: 'Меньше или равно',
     filterMode: 'Режим фильтра: {filterType}',

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.2",
+  "version": "1.5.0-beta.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -57,17 +57,17 @@
     "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.10.16",
-    "@mui/material": "^5.10.17",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^10.0.1",
     "@size-limit/preset-small-lib": "^8.1.0",
-    "@types/node": "^18.11.11",
+    "@types/node": "^18.11.15",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.46.0",
-    "@typescript-eslint/parser": "^5.46.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
     "eslint": "^8.29.0",
     "eslint-plugin-mui-path-imports": "^0.0.7",
     "react": "^18.2.0",

package/src/MaterialReactTable.tsx

@@ -659,6 +659,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableColumnDragging?: boolean;
     enableColumnFilterModes?: boolean;
     enableColumnOrdering?: boolean;
+    enableColumnVirtualization?: boolean;
     enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
@@ -972,8 +973,8 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     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?:
@@ -1055,18 +1056,39 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
-    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
-    virtualizerProps?:
-      | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
+    columnVirtualizerInstanceRef?: MutableRefObject<Virtualizer<
+      HTMLDivElement,
+      HTMLTableCellElement
+    > | null>;
+    columnVirtualizerProps?:
+      | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>
       | (({
           table,
         }: {
           table: MRT_TableInstance<TData>;
-        }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
-    virtualizerInstanceRef?: MutableRefObject<Virtualizer<
+        }) => Partial<
+          VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>
+        >);
+    rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<
       HTMLDivElement,
       HTMLTableRowElement
     > | null>;
+    rowVirtualizerProps?:
+      | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
+      | (({
+          table,
+        }: {
+          table: MRT_TableInstance<TData>;
+        }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
+    /**
+     * @deprecated Use `rowVirtualizerInstanceRef` instead
+     */
+    virtualizerInstanceRef?: any;
+    /**
+     * @deprecated Use `rowVirtualizerProps` instead
+     */
+    virtualizerProps?: any;
   };
 
 const MaterialReactTable = <TData extends Record<string, any> = {}>({
@@ -1142,7 +1164,7 @@ const MaterialReactTable = <TData extends Record<string, any> = {}>({
     [],
   );
 
-  if (rest.enableRowVirtualization) {
+  if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
     layoutMode = 'grid';
     enableStickyHeader = true;
   }

package/src/_locales/ru.ts

@@ -34,7 +34,7 @@ export const MRT_Localization_RU: MRT_Localization = {
   filterGreaterThanOrEqualTo: 'Больше или равно',
   filterInNumberRange: 'Между',
   filterIncludesString: 'Содержит',
-  filterIncludesStringSensitive: 'Содержит (регистрозависисый)',
+  filterIncludesStringSensitive: 'Содержит (регистрозависимый)',
   filterLessThan: 'Меньше чем',
   filterLessThanOrEqualTo: 'Меньше или равно',
   filterMode: 'Режим фильтра: {filterType}',

package/src/body/MRT_TableBody.tsx

@@ -11,10 +11,20 @@ import { rankGlobalFuzzy } from '../sortingFns';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
+  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   table: MRT_TableInstance;
+  virtualColumns?: VirtualItem[];
+  virtualPaddingLeft?: number;
+  virtualPaddingRight?: number;
 }
 
-export const MRT_TableBody: FC<Props> = ({ table }) => {
+export const MRT_TableBody: FC<Props> = ({
+  columnVirtualizer,
+  table,
+  virtualColumns,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+}) => {
   const {
     getRowModel,
     getPrePaginationRowModel,
@@ -29,6 +39,8 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
       manualSorting,
       memoMode,
       muiTableBodyProps,
+      rowVirtualizerInstanceRef,
+      rowVirtualizerProps,
       virtualizerInstanceRef,
       virtualizerProps,
     },
@@ -42,11 +54,16 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
       ? muiTableBodyProps({ table })
       : muiTableBodyProps;
 
-  const vProps =
+  const vProps_old =
     virtualizerProps instanceof Function
       ? virtualizerProps({ table })
       : virtualizerProps;
 
+  const vProps =
+    rowVirtualizerProps instanceof Function
+      ? rowVirtualizerProps({ table })
+      : rowVirtualizerProps;
+
   const rows = useMemo(() => {
     if (
       enableGlobalFilterRankedResults &&
@@ -78,7 +95,7 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
     pagination.pageSize,
   ]);
 
-  const virtualizer:
+  const rowVirtualizer:
     | Virtualizer<HTMLDivElement, HTMLTableRowElement>
     | undefined = enableRowVirtualization
     ? useVirtualizer({
@@ -88,22 +105,32 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
         getScrollElement: () => tableContainerRef.current,
         measureElement: (element) => 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;
+  //deprecated
+  if (virtualizerInstanceRef && rowVirtualizer) {
+    virtualizerInstanceRef.current = rowVirtualizer;
+  }
+
+  const virtualRows = rowVirtualizer
+    ? rowVirtualizer.getVirtualItems()
+    : undefined;
 
   return (
     <TableBody
       {...tableBodyProps}
       sx={(theme) => ({
         display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
-        height: virtualizer ? `${virtualizer.getTotalSize()}px` : 'inherit',
+        height: rowVirtualizer
+          ? `${rowVirtualizer.getTotalSize()}px`
+          : 'inherit',
         minHeight: !rows.length ? '100px' : undefined,
         position: 'relative',
         ...(tableBodyProps?.sx instanceof Function
@@ -139,19 +166,21 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
         ) : (
           <>
             {(virtualRows ?? rows).map((rowOrVirtualRow, rowIndex) => {
-              const row = virtualizer
+              const row = rowVirtualizer
                 ? rows[rowOrVirtualRow.index]
                 : (rowOrVirtualRow as MRT_Row);
               const props = {
+                columnVirtualizer,
                 key: row.id,
-                measureElement: virtualizer
-                  ? virtualizer.measureElement
-                  : undefined,
+                measureElement: 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 as VirtualItem)
                   : undefined,
               };

package/src/body/MRT_TableBodyCell.tsx

@@ -16,24 +16,29 @@ import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
 import { getCommonCellStyles } from '../column.utils';
+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 const MRT_TableBodyCell: FC<Props> = ({
   cell,
   enableHover,
+  measureElement,
   numRows,
   rowIndex,
   rowRef,
   table,
+  virtualCell,
 }) => {
   const theme = useTheme();
   const {
@@ -169,6 +174,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   return (
     <TableCell
+      data-index={virtualCell?.index}
+      ref={(node: HTMLTableCellElement) => {
+        if (node) {
+          measureElement?.(node);
+        }
+      }}
       {...tableCellProps}
       onDragEnter={handleDragEnter}
       onDoubleClick={handleDoubleClick}
@@ -214,7 +225,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
                 : `${darken(theme.palette.background.default, 0.1)} !important`
               : undefined,
         },
-        ...getCommonCellStyles({ column, table, theme, tableCellProps }),
+        ...getCommonCellStyles({
+          column,
+          table,
+          theme,
+          tableCellProps,
+        }),
         ...draggingBorders,
       })}
     >

package/src/body/MRT_TableBodyRow.tsx

@@ -3,24 +3,32 @@ import TableRow from '@mui/material/TableRow';
 import { darken, lighten, useTheme } from '@mui/material/styles';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import type { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_Row, MRT_TableInstance } from '..';
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import type { MRT_Cell, 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 const MRT_TableBodyRow: FC<Props> = ({
+  columnVirtualizer,
   measureElement,
   numRows,
   row,
   rowIndex,
   table,
+  virtualColumns,
+  virtualPaddingLeft,
+  virtualPaddingRight,
   virtualRow,
 }) => {
   const theme = useTheme();
@@ -108,15 +116,25 @@ export const MRT_TableBodyRow: FC<Props> = ({
           ...draggingBorders,
         })}
       >
-        {row.getVisibleCells().map((cell) => {
+        {virtualPaddingLeft ? (
+          <td style={{ display: 'flex', width: virtualPaddingLeft }} />
+        ) : null}
+        {(virtualColumns ?? row.getVisibleCells()).map((cellOrVirtualCell) => {
+          const cell = columnVirtualizer
+            ? row.getVisibleCells()[(cellOrVirtualCell as VirtualItem).index]
+            : (cellOrVirtualCell as MRT_Cell);
           const props = {
             cell,
             enableHover: tableRowProps?.hover !== false,
             key: cell.id,
+            measureElement: columnVirtualizer?.measureElement,
             numRows,
             rowIndex,
             rowRef,
             table,
+            virtualCell: columnVirtualizer
+              ? (cellOrVirtualCell as VirtualItem)
+              : undefined,
           };
           return memoMode === 'cells' &&
             cell.column.columnDef.columnDefType === 'data' &&
@@ -129,6 +147,9 @@ export const MRT_TableBodyRow: FC<Props> = ({
             <MRT_TableBodyCell {...props} />
           );
         })}
+        {virtualPaddingRight ? (
+          <td style={{ display: 'flex', width: virtualPaddingRight }} />
+        ) : null}
       </TableRow>
       {renderDetailPanel && !row.getIsGrouped() && (
         <MRT_TableDetailPanel