material-react-table 1.4.0-beta.1 → 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';
@@ -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_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/table/MRT_TableRoot.d.ts

@@ -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: {
@@ -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.1",
+  "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';
@@ -1053,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,
@@ -1150,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,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) => ({