material-react-table 1.4.0-beta.0 → 1.4.0-beta.2

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

@@ -19,7 +19,7 @@ import type { TableRowProps } from '@mui/material/TableRow';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { ToolbarProps } from '@mui/material/Toolbar';
 import type { AggregationFn, Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
-import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
+import type { VirtualizerOptions, Virtualizer } from '@tanstack/react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_Icons } from './icons';
@@ -266,7 +266,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnD
      * @example columnDefType: 'display'
      */
     columnDefType?: 'data' | 'display' | 'group';
-    columnFilterModeOptions?: MRT_FilterOption[] | null;
+    columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
     columns?: MRT_ColumnDef<TData>[];
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -405,7 +405,7 @@ export type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row
  * @link https://www.material-react-table.com/docs/api/props
  */
 export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> & {
-    columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
+    columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
     /**
      * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
      *
@@ -687,17 +687,10 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
     tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
-    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>> | (({ table, }: {
+    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
-    }) => Partial<VirtualizerOptions<HTMLDivElement>>);
-    virtualizerInstanceRef?: MutableRefObject<Virtualizer | null>;
-};
-export type Virtualizer = {
-    virtualItems: VirtualItem[];
-    totalSize: number;
-    scrollToOffset: (index: number, options?: any | undefined) => void;
-    scrollToIndex: (index: number, options?: any | undefined) => void;
-    measure: () => void;
+    }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+    virtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableRowElement> | null>;
 };
 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_TableBodyCell.d.ts

@@ -5,7 +5,7 @@ interface Props {
     enableHover?: boolean;
     numRows: number;
     rowIndex: number;
-    rowRef: RefObject<HTMLDivElement | HTMLTableRowElement>;
+    rowRef: RefObject<HTMLTableRowElement>;
     table: MRT_TableInstance;
 }
 export declare const MRT_TableBodyCell: FC<Props>;

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

@@ -1,11 +1,13 @@
 import React, { FC } from 'react';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
+    measureElement?: (element: HTMLTableRowElement) => void;
     numRows: number;
     row: MRT_Row;
     rowIndex: number;
     table: MRT_TableInstance;
-    virtualRow?: any;
+    virtualRow?: VirtualItem;
 }
 export declare const MRT_TableBodyRow: FC<Props>;
 export declare const Memo_MRT_TableBodyRow: React.NamedExoticComponent<Props>;

package/dist/esm/types/body/MRT_TableBodyRowGrabHandle.d.ts

@@ -2,7 +2,7 @@ import { FC, RefObject } from 'react';
 import { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
-    rowRef: RefObject<HTMLDivElement | HTMLTableRowElement>;
+    rowRef: RefObject<HTMLTableRowElement>;
     table: MRT_TableInstance;
 }
 export declare const MRT_TableBodyRowGrabHandle: FC<Props>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_FilterOption, MRT_Row, MRT_TableInstance, MRT_TableState, MaterialReactTableProps, MRT_Localization } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: Omit<Partial<import("@tanstack/react-table").TableOptions<TData>>, "state" | "data" | "onStateChange" | "initialState" | "getRowId" | "columns" | "defaultColumn" | "globalFilterFn" | "enableRowSelection" | "expandRowsFn"> & {
-    columnFilterModeOptions?: (string | (string & Record<never, never>))[] | null | undefined;
+    columnFilterModeOptions?: (string & MRT_FilterOption)[] | null | undefined;
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     defaultColumn?: Partial<MRT_ColumnDef<TData>> | undefined;
@@ -253,10 +253,10 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     selectAllMode?: "all" | "page" | undefined;
     state?: Partial<MRT_TableState<TData>> | undefined;
     tableInstanceRef?: React.MutableRefObject<MRT_TableInstance<TData> | null> | undefined;
-    virtualizerProps?: Partial<import("react-virtual").Options<HTMLDivElement>> | (({ table, }: {
+    virtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
-    }) => Partial<import("react-virtual").Options<HTMLDivElement>>) | undefined;
-    virtualizerInstanceRef?: React.MutableRefObject<import("..").Virtualizer | null> | undefined;
+    }) => Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>) | undefined;
+    virtualizerInstanceRef?: React.MutableRefObject<import("@tanstack/react-virtual").Virtualizer<HTMLDivElement, HTMLTableRowElement> | null> | undefined;
 } & {
     localization: MRT_Localization;
 }) => 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 { Options, VirtualItem } from 'react-virtual';
+import { VirtualizerOptions, Virtualizer } from '@tanstack/react-virtual';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 
 declare const MRT_AggregationFns: {
@@ -389,7 +389,7 @@ type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TDat
      * @example columnDefType: 'display'
      */
     columnDefType?: 'data' | 'display' | 'group';
-    columnFilterModeOptions?: MRT_FilterOption[] | null;
+    columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
     columns?: MRT_ColumnDef<TData>[];
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -528,7 +528,7 @@ type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand
  * @link https://www.material-react-table.com/docs/api/props
  */
 type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> & {
-    columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
+    columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
     /**
      * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
      *
@@ -810,17 +810,10 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
     tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
-    virtualizerProps?: Partial<Options<HTMLDivElement>> | (({ table, }: {
+    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
-    }) => Partial<Options<HTMLDivElement>>);
-    virtualizerInstanceRef?: MutableRefObject<Virtualizer | null>;
-};
-type Virtualizer = {
-    virtualItems: VirtualItem[];
-    totalSize: number;
-    scrollToOffset: (index: number, options?: any | undefined) => void;
-    scrollToIndex: (index: number, options?: any | undefined) => void;
-    measure: () => void;
+    }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+    virtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableRowElement> | null>;
 };
 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;
 
@@ -882,4 +875,4 @@ interface Props<TData extends Record<string, any> = {}> {
 }
 declare const MRT_ToolbarInternalButtons: <TData extends Record<string, any> = {}>({ table, }: Props<TData>) => JSX.Element;
 
-export { DensityState, MRT_AggregationFn, MRT_AggregationOption, MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TablePagination, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarInternalButtons, MaterialReactTableProps, Virtualizer, MaterialReactTable as default };
+export { DensityState, MRT_AggregationFn, MRT_AggregationOption, MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TablePagination, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarInternalButtons, MaterialReactTableProps, MaterialReactTable as default };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0-beta.0",
+  "version": "1.4.0-beta.2",
   "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.",
@@ -46,7 +46,9 @@
   },
   "scripts": {
     "build": "rm -rf dist locales && rollup -c && size-limit",
+    "dev": "rm -rf dist locales && rollup -c -w",
     "lib:build": "rm -rf dist locales && rollup -c && size-limit",
+    "lib:dev": "rm -rf dist locales && rollup -c -w",
     "lint": "eslint .",
     "size": "size-limit"
   },
@@ -55,7 +57,6 @@
     "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@faker-js/faker": "^7.6.0",
     "@mui/icons-material": "^5.10.16",
     "@mui/material": "^5.10.16",
     "@rollup/plugin-babel": "^6.0.3",
@@ -91,6 +92,6 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.7.0",
     "@tanstack/react-table": "8.7.0",
-    "react-virtual": "^2.10.4"
+    "@tanstack/react-virtual": "^3.0.0-beta.29"
   }
 }

package/src/MaterialReactTable.tsx

@@ -40,8 +40,7 @@ import type {
   TableOptions,
   TableState,
 } from '@tanstack/react-table';
-import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
-// import type { VirtualizerOptions } from '@tanstack/react-virtual';
+import type { VirtualizerOptions, Virtualizer } from '@tanstack/react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from './column.utils';
 import { MRT_FilterFns } from './filterFns';
@@ -361,7 +360,9 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
    * @example columnDefType: 'display'
    */
   columnDefType?: 'data' | 'display' | 'group';
-  columnFilterModeOptions?: MRT_FilterOption[] | null;
+  columnFilterModeOptions?: Array<
+    LiteralUnion<string & MRT_FilterOption>
+  > | null;
   columns?: MRT_ColumnDef<TData>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
@@ -619,7 +620,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     | 'onStateChange'
     | 'state'
   > & {
-    columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
+    columnFilterModeOptions?: Array<
+      LiteralUnion<string & MRT_FilterOption>
+    > | null;
     /**
      * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
      *
@@ -1049,30 +1052,18 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     state?: Partial<MRT_TableState<TData>>;
     tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
     virtualizerProps?:
-      | Partial<VirtualizerOptions<HTMLDivElement>>
+      | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
       | (({
           table,
         }: {
           table: MRT_TableInstance<TData>;
-        }) => Partial<VirtualizerOptions<HTMLDivElement>>);
-    // virtualizerProps?:
-    //   | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
-    //   | (({
-    //       table,
-    //     }: {
-    //       table: MRT_TableInstance<TData>;
-    //     }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
-    virtualizerInstanceRef?: MutableRefObject<Virtualizer | null>;
+        }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+    virtualizerInstanceRef?: MutableRefObject<Virtualizer<
+      HTMLDivElement,
+      HTMLTableRowElement
+    > | null>;
   };
 
-export type Virtualizer = {
-  virtualItems: VirtualItem[];
-  totalSize: number;
-  scrollToOffset: (index: number, options?: any | undefined) => void;
-  scrollToIndex: (index: number, options?: any | undefined) => void;
-  measure: () => void;
-};
-
 const MaterialReactTable = <TData extends Record<string, any> = {}>({
   aggregationFns,
   autoResetExpanded = false,
@@ -1146,6 +1137,8 @@ const MaterialReactTable = <TData extends Record<string, any> = {}>({
     [],
   );
 
+  if (rest.enableRowVirtualization) layoutMode = 'grid';
+
   return (
     <MRT_TableRoot
       aggregationFns={_aggregationFns}

package/src/body/MRT_TableBody.tsx

@@ -1,6 +1,9 @@
 import React, { FC, memo, useMemo } from 'react';
-import { useVirtual } from 'react-virtual'; //stuck on v2 for now
-// import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
+import {
+  useVirtualizer,
+  Virtualizer,
+  VirtualItem,
+} from '@tanstack/react-virtual';
 import TableBody from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
@@ -31,7 +34,8 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
     },
     refs: { tableContainerRef, tablePaperRef },
   } = table;
-  const { columnFilters, globalFilter, pagination, sorting } = getState();
+  const { columnFilters, density, globalFilter, pagination, sorting } =
+    getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
@@ -74,70 +78,51 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
     pagination.pageSize,
   ]);
 
-  const virtualizer = enableRowVirtualization
-    ? useVirtual({
-        size: rows.length,
-        parentRef: tableContainerRef,
-        overscan: 15,
+  const virtualizer:
+    | Virtualizer<HTMLDivElement, HTMLTableRowElement>
+    | undefined = enableRowVirtualization
+    ? useVirtualizer({
+        count: rows.length,
+        estimateSize: () =>
+          density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73,
+        getScrollElement: () => tableContainerRef.current,
+        measureElement: (element) => element?.getBoundingClientRect().height,
+        overscan: 10,
         ...vProps,
       })
-    : ({} as any);
+    : undefined;
 
-  if (virtualizerInstanceRef) {
+  if (virtualizerInstanceRef && virtualizer) {
     virtualizerInstanceRef.current = virtualizer;
   }
 
-  // const virtualizer: Virtualizer = enableRowVirtualization
-  //   ? useVirtualizer({
-  //       count: rows.length,
-  //       estimateSize: () => (density === 'compact' ? 25 : 50),
-  //       getScrollElement: () => tableContainerRef.current as HTMLDivElement,
-  //       overscan: 15,
-  //       ...vProps,
-  //     })
-  //   : ({} as any);
-
-  const virtualRows = enableRowVirtualization ? virtualizer.virtualItems : [];
-
-  // const virtualRows = enableRowVirtualization
-  //   ? virtualizer.getVirtualItems()
-  //   : [];
-
-  let paddingTop = 0;
-  let paddingBottom = 0;
-  if (enableRowVirtualization) {
-    paddingTop = virtualRows.length ? virtualRows[0].start : 0;
-    paddingBottom = virtualRows.length
-      ? virtualizer.totalSize - virtualRows[virtualRows.length - 1].end
-      : 0;
-  }
-  // if (enableRowVirtualization) {
-  //   paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
-  //   paddingBottom = !!virtualRows.length
-  //     ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
-  //     : 0;
-  // }
+  const virtualRows = virtualizer ? virtualizer.getVirtualItems() : undefined;
 
   return (
     <TableBody
-      component={layoutMode === 'grid' ? 'div' : 'tbody'}
-      role="rowgroup"
       {...tableBodyProps}
       sx={(theme) => ({
         display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+        height: virtualizer ? `${virtualizer.getTotalSize()}px` : 'inherit',
+        position: 'relative',
         ...(tableBodyProps?.sx instanceof Function
           ? tableBodyProps?.sx(theme)
           : (tableBodyProps?.sx as any)),
       })}
     >
       {tableBodyProps?.children ?? !rows.length ? (
-        <tr>
-          <td colSpan={table.getVisibleLeafColumns().length}>
+        <tr style={{ display: layoutMode === 'grid' ? 'grid' : 'table-row' }}>
+          <td
+            colSpan={table.getVisibleLeafColumns().length}
+            style={{ display: layoutMode === 'grid' ? 'grid' : 'table-cell' }}
+          >
             <Typography
               sx={{
                 color: 'text.secondary',
                 fontStyle: 'italic',
-                maxWidth: `min(100vw, ${tablePaperRef.current?.clientWidth}px)`,
+                maxWidth: `min(100vw, ${
+                  tablePaperRef.current?.clientWidth ?? 360
+                }px)`,
                 py: '2rem',
                 textAlign: 'center',
                 width: '100%',
@@ -151,38 +136,29 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
         </tr>
       ) : (
         <>
-          {enableRowVirtualization && paddingTop > 0 && (
-            <tr>
-              <td style={{ height: `${paddingTop}px` }} />
-            </tr>
-          )}
-          {(enableRowVirtualization ? virtualRows : rows).map(
-            (rowOrVirtualRow: any, rowIndex: number) => {
-              const row = enableRowVirtualization
-                ? (rows[rowOrVirtualRow.index] as MRT_Row)
-                : (rowOrVirtualRow as MRT_Row);
-              const props = {
-                key: row.id,
-                numRows: rows.length,
-                row,
-                rowIndex: enableRowVirtualization
-                  ? rowOrVirtualRow.index
-                  : rowIndex,
-                table,
-                virtualRow: enableRowVirtualization ? rowOrVirtualRow : null,
-              };
-              return memoMode === 'rows' ? (
-                <Memo_MRT_TableBodyRow {...props} />
-              ) : (
-                <MRT_TableBodyRow {...props} />
-              );
-            },
-          )}
-          {enableRowVirtualization && paddingBottom > 0 && (
-            <tr>
-              <td style={{ height: `${paddingBottom}px` }} />
-            </tr>
-          )}
+          {(virtualRows ?? rows).map((rowOrVirtualRow, rowIndex) => {
+            const row = virtualizer
+              ? rows[rowOrVirtualRow.index]
+              : (rowOrVirtualRow as MRT_Row);
+            const props = {
+              key: row.id,
+              measureElement: virtualizer
+                ? virtualizer.measureElement
+                : undefined,
+              numRows: rows.length,
+              row,
+              rowIndex: virtualizer ? rowOrVirtualRow.index : rowIndex,
+              table,
+              virtualRow: virtualizer
+                ? (rowOrVirtualRow as VirtualItem)
+                : undefined,
+            };
+            return memoMode === 'rows' ? (
+              <Memo_MRT_TableBodyRow {...props} />
+            ) : (
+              <MRT_TableBodyRow {...props} />
+            );
+          })}
         </>
       )}
     </TableBody>

package/src/body/MRT_TableBodyCell.tsx

@@ -23,7 +23,7 @@ interface Props {
   enableHover?: boolean;
   numRows: number;
   rowIndex: number;
-  rowRef: RefObject<HTMLDivElement | HTMLTableRowElement>;
+  rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance;
 }
 
@@ -169,8 +169,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   return (
     <TableCell
-      component={layoutMode === 'grid' ? 'div' : 'td'}
-      role="gridcell"
       {...tableCellProps}
       onDragEnter={handleDragEnter}
       onDoubleClick={handleDoubleClick}

package/src/body/MRT_TableBodyRow.tsx

@@ -3,17 +3,20 @@ 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 '..';
 
 interface Props {
+  measureElement?: (element: HTMLTableRowElement) => void;
   numRows: number;
   row: MRT_Row;
   rowIndex: number;
   table: MRT_TableInstance;
-  virtualRow?: any;
+  virtualRow?: VirtualItem;
 }
 
 export const MRT_TableBodyRow: FC<Props> = ({
+  measureElement,
   numRows,
   row,
   rowIndex,
@@ -47,7 +50,7 @@ export const MRT_TableBodyRow: FC<Props> = ({
     }
   };
 
-  const rowRef = useRef<HTMLDivElement | HTMLTableRowElement | null>(null);
+  const rowRef = useRef<HTMLTableRowElement | null>(null);
 
   const draggingBorder = useMemo(
     () =>
@@ -68,24 +71,28 @@ export const MRT_TableBodyRow: FC<Props> = ({
   return (
     <>
       <TableRow
-        component={layoutMode === 'grid' ? 'div' : 'tr'}
+        data-index={virtualRow?.index}
         hover
         onDragEnter={handleDragEnter}
         selected={row.getIsSelected()}
-        ref={(node: HTMLTableRowElement | HTMLDivElement) => {
-          rowRef.current = node;
-          if (virtualRow?.measureRef) {
-            virtualRow.measureRef = node;
+        ref={(node: HTMLTableRowElement) => {
+          if (node) {
+            rowRef.current = node;
+            measureElement?.(node);
           }
         }}
-        role="row"
         {...tableRowProps}
         sx={(theme) => ({
           backgroundColor: lighten(theme.palette.background.default, 0.06),
           display: layoutMode === 'grid' ? 'flex' : 'table-row',
           opacity:
             draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,
-          transition: 'all 150ms ease-in-out',
+          position: virtualRow ? 'absolute' : undefined,
+          top: virtualRow ? 0 : undefined,
+          transform: virtualRow
+            ? `translateY(${virtualRow?.start}px)`
+            : undefined,
+          transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           '&:hover td': {
             backgroundColor:
               tableRowProps?.hover !== false && getIsSomeColumnsPinned()

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -4,7 +4,7 @@ import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
 interface Props {
   cell: MRT_Cell;
-  rowRef: RefObject<HTMLDivElement | HTMLTableRowElement>;
+  rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance;
 }
 

package/src/body/MRT_TableDetailPanel.tsx

@@ -14,6 +14,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
     getVisibleLeafColumns,
     getState,
     options: {
+      layoutMode,
       muiTableBodyRowProps,
       muiTableDetailPanelProps,
       renderDetailPanel,
@@ -32,7 +33,12 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
       : muiTableDetailPanelProps;
 
   return (
-    <TableRow {...tableRowProps}>
+    <TableRow
+      sx={{
+        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+      }}
+      {...tableRowProps}
+    >
       <TableCell
         colSpan={getVisibleLeafColumns().length}
         {...tableCellProps}

package/src/column.utils.ts

@@ -274,7 +274,6 @@ export const getCommonCellStyles = ({
     table.options.layoutMode === 'grid'
       ? `${column.getSize()} 0 auto`
       : undefined,
-  maxWidth: `min(${column.getSize()}px, fit-content)`,
   minWidth: `max(${column.getSize()}px, ${column.columnDef.minSize ?? 30}px)`,
   width: header?.getSize() ?? column.getSize(),
 });

package/src/footer/MRT_TableFooter.tsx

@@ -12,7 +12,7 @@ export const MRT_TableFooter: FC<Props> = ({ table }) => {
   const {
     getFooterGroups,
     getState,
-    options: { enableStickyFooter, muiTableFooterProps },
+    options: { enableStickyFooter, layoutMode, muiTableFooterProps },
   } = table;
   const { isFullScreen } = getState();
 
@@ -30,6 +30,7 @@ export const MRT_TableFooter: FC<Props> = ({ table }) => {
       sx={(theme) => ({
         backgroundColor: lighten(theme.palette.background.default, 0.06),
         bottom: stickFooter ? 0 : undefined,
+        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
         opacity: stickFooter ? 0.97 : undefined,
         outline: stickFooter
           ? theme.palette.mode === 'light'

package/src/footer/MRT_TableFooterCell.tsx

@@ -11,7 +11,7 @@ interface Props {
 export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
   const {
     getState,
-    options: { muiTableFooterCellProps },
+    options: { layoutMode, muiTableFooterCellProps },
   } = table;
   const { density } = getState();
   const { column } = footer;
@@ -40,7 +40,9 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
       variant="head"
       {...tableCellProps}
       sx={(theme) => ({
+        display: layoutMode === 'grid' ? 'grid' : 'table-cell',
         fontWeight: 'bold',
+        justifyContent: columnDefType === 'group' ? 'center' : undefined,
         p:
           density === 'compact'
             ? '0.5rem'

package/src/footer/MRT_TableFooterRow.tsx

@@ -10,7 +10,7 @@ interface Props {
 
 export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, table }) => {
   const {
-    options: { muiTableFooterRowProps },
+    options: { layoutMode, muiTableFooterRowProps },
   } = table;
 
   // if no content in row, skip row
@@ -30,7 +30,15 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, table }) => {
       : muiTableFooterRowProps;
 
   return (
-    <TableRow {...tableRowProps}>
+    <TableRow
+      {...tableRowProps}
+      sx={(theme) => ({
+        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        ...(tableRowProps?.sx instanceof Function
+          ? tableRowProps?.sx(theme)
+          : (tableRowProps?.sx as any)),
+      })}
+    >
       {footerGroup.headers.map((footer: MRT_Header) => (
         <MRT_TableFooterCell footer={footer} key={footer.id} table={table} />
       ))}