material-react-table 0.19.0 → 0.20.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.19.0",
+  "version": "0.20.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.",
@@ -61,7 +61,7 @@
     "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.6",
+    "@mui/material": "^5.8.7",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
@@ -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-virtual": "^2.10.4"
+    "react-dnd-html5-backend": "^16.0.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -39,7 +39,7 @@ import {
   TableOptions,
   TableState,
 } from '@tanstack/react-table';
-import { 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';
@@ -685,7 +685,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
-    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
+    virtualizerProps?: any;
   };
 
 export default <D 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 } from '@tanstack/react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import type { MRT_Row, MRT_TableInstance } from '..';
@@ -61,20 +61,29 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
   ]);
 
   const rowVirtualizer = enableRowVirtualization
-    ? useVirtual({
-        overscan: density === 'compact' ? 20 : 10,
-        size: rows.length,
-        parentRef: tableContainerRef,
+    ? useVirtualizer({
+        count: rows.length,
+        estimateSize: () => (density === 'compact' ? 25 : 50),
+        getScrollElement: () => tableContainerRef.current,
+        overscan: density === 'compact' ? 30 : 10,
         ...virtualizerProps,
       })
-    : ({} as any);
+    : {};
 
-  const { virtualItems: virtualRows } = rowVirtualizer;
-  const paddingTop = virtualRows?.length > 0 ? virtualRows[0].start : 0;
-  const paddingBottom =
-    virtualRows?.length > 0
-      ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
-      : 0;
+  const virtualRows = enableRowVirtualization
+    ? rowVirtualizer.getVirtualItems()
+    : [];
+
+  let paddingTop = 0;
+  let paddingBottom = 0;
+  if (enableRowVirtualization) {
+    paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+    paddingBottom =
+      virtualRows.length > 0
+        ? rowVirtualizer.getTotalSize() -
+          virtualRows[virtualRows.length - 1].end
+        : 0;
+  }
 
   return (
     <TableBody {...tableBodyProps}>
@@ -83,7 +92,6 @@ 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