material-react-table 0.27.0 → 0.28.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.27.0",
+  "version": "0.28.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -101,6 +101,6 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
     "@tanstack/react-table": "8.2.6",
-    "react-virtual": "^2.10.4"
+    "@tanstack/react-virtual": "^3.0.0-beta.13"
   }
 }

package/src/MaterialReactTable.tsx

@@ -40,7 +40,7 @@ import type {
   TableOptions,
   TableState,
 } from '@tanstack/react-table';
-import type { Options as VirtualizerOptions } from 'react-virtual';
+import type { VirtualizerOptions } from '@tanstack/react-virtual';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
@@ -779,7 +779,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
-    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
+    virtualizerProps?: Partial<
+      VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>
+    >;
   };
 
 export default <TData extends Record<string, any> = {}>({

package/src/body/MRT_TableBody.tsx

@@ -1,5 +1,5 @@
 import React, { FC, RefObject, useMemo } from 'react';
-import { useVirtual } from 'react-virtual';
+import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
@@ -60,28 +60,27 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
     globalFilter,
   ]);
 
-  const rowVirtualizer = enableRowVirtualization
-    ? useVirtual({
-        // estimateSize: () => (density === 'compact' ? 25 : 50),
+  const rowVirtualizer: Virtualizer = enableRowVirtualization
+    ? useVirtualizer({
+        estimateSize: () => (density === 'compact' ? 25 : 50),
         overscan: density === 'compact' ? 30 : 10,
-        parentRef: tableContainerRef,
-        size: rows.length,
+        getScrollElement: () => tableContainerRef.current as HTMLDivElement,
+        count: rows.length,
         ...virtualizerProps,
       })
     : ({} as any);
 
   const virtualRows = enableRowVirtualization
-    ? rowVirtualizer.virtualItems
+    ? rowVirtualizer.getVirtualItems()
     : [];
 
   let paddingTop = 0;
   let paddingBottom = 0;
   if (enableRowVirtualization) {
-    paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
-    paddingBottom =
-      virtualRows.length > 0
-        ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
-        : 0;
+    paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
+    paddingBottom = !!virtualRows.length
+      ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+      : 0;
   }
 
   return (
@@ -91,6 +90,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
           <td style={{ height: `${paddingTop}px` }} />
         </tr>
       )}
+      {/* @ts-ignore */}
       {(enableRowVirtualization ? virtualRows : rows).map(
         (rowOrVirtualRow: any, rowIndex: number) => {
           const row = enableRowVirtualization