material-react-table 0.20.0 → 0.21.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.20.0",
+  "version": "0.21.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.",
@@ -99,8 +99,8 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
     "@tanstack/react-table": "8.1.3",
-    "@tanstack/react-virtual": "^3.0.0-beta.2",
     "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1"
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-virtual": "^2.10.4"
   }
 }

package/src/MaterialReactTable.tsx

@@ -39,7 +39,7 @@ import {
   TableOptions,
   TableState,
 } from '@tanstack/react-table';
-// import type { VirtualizerOptions } from '@tanstack/react-virtual';
+import { Options as VirtualizerOptions } from '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';
@@ -685,7 +685,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
-    virtualizerProps?: any;
+    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
   };
 
 export default <D extends Record<string, any> = {}>({

package/src/body/MRT_TableBody.tsx

@@ -1,9 +1,9 @@
 import React, { FC, RefObject, useMemo } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtual } from 'react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import type { MRT_Row, MRT_TableInstance } from '..';
 import { rankGlobalFuzzy } from '../sortingFns';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
@@ -61,17 +61,17 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
   ]);
 
   const rowVirtualizer = enableRowVirtualization
-    ? useVirtualizer({
-        count: rows.length,
-        estimateSize: () => (density === 'compact' ? 25 : 50),
-        getScrollElement: () => tableContainerRef.current,
+    ? useVirtual({
+        // estimateSize: () => (density === 'compact' ? 25 : 50),
         overscan: density === 'compact' ? 30 : 10,
+        parentRef: tableContainerRef,
+        size: rows.length,
         ...virtualizerProps,
       })
-    : {};
+    : ({} as any);
 
   const virtualRows = enableRowVirtualization
-    ? rowVirtualizer.getVirtualItems()
+    ? rowVirtualizer.virtualItems
     : [];
 
   let paddingTop = 0;
@@ -80,8 +80,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
     paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
     paddingBottom =
       virtualRows.length > 0
-        ? rowVirtualizer.getTotalSize() -
-          virtualRows[virtualRows.length - 1].end
+        ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
         : 0;
   }