material-react-table 1.4.0-beta.1 → 1.4.0-beta.3

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,55 +78,33 @@ 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
       {...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)),
@@ -154,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_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,
@@ -68,13 +71,14 @@ export const MRT_TableBodyRow: FC<Props> = ({
   return (
     <>
       <TableRow
+        data-index={virtualRow?.index}
         hover
         onDragEnter={handleDragEnter}
         selected={row.getIsSelected()}
         ref={(node: HTMLTableRowElement) => {
-          rowRef.current = node;
-          if (virtualRow?.measureRef) {
-            virtualRow.measureRef = node;
+          if (node) {
+            rowRef.current = node;
+            measureElement?.(node);
           }
         }}
         {...tableRowProps}
@@ -83,7 +87,12 @@ export const MRT_TableBodyRow: FC<Props> = ({
           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/table/MRT_TableContainer.tsx

@@ -46,11 +46,13 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
   return (
     <TableContainer
       {...tableContainerProps}
-      ref={(ref: HTMLDivElement) => {
-        tableContainerRef.current = ref;
-        if (tableContainerProps?.ref) {
-          //@ts-ignore
-          tableContainerProps.ref.current = ref;
+      ref={(node: HTMLDivElement) => {
+        if (node) {
+          tableContainerRef.current = node;
+          if (tableContainerProps?.ref) {
+            //@ts-ignore
+            tableContainerProps.ref.current = node;
+          }
         }
       }}
       sx={(theme) => ({