material-react-table 0.33.4 → 0.34.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.33.4",
+  "version": "0.34.0",
   "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.",
@@ -19,8 +19,8 @@
   "bugs": {
     "url": "https://github.com/KevinVandy/material-react-table/issues"
   },
-  "main": "dist/cjs/index.min.js",
-  "module": "dist/esm/material-react-table.esm.min.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/material-react-table.esm.js",
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
@@ -28,11 +28,11 @@
   ],
   "size-limit": [
     {
-      "path": "dist/cjs/index.min.js",
+      "path": "dist/cjs/index.js",
       "limit": "50 KB"
     },
     {
-      "path": "dist/esm/material-react-table.esm.min.js",
+      "path": "dist/esm/material-react-table.esm.js",
       "limit": "50 KB"
     }
   ],
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.10.0",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.3",
+    "@mui/material": "^5.10.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",
@@ -68,7 +68,7 @@
     "@storybook/addon-storysource": "^6.5.10",
     "@storybook/addons": "^6.5.10",
     "@storybook/react": "^6.5.10",
-    "@types/react": "^18.0.15",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
     "eslint": "^8.21.0",
@@ -81,7 +81,6 @@
     "rollup": "^2.77.2",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-terser": "^7.0.2",
     "size-limit": "^8.0.0",
     "storybook-dark-mode": "^1.1.0",
     "tslib": "^2.4.0",
@@ -96,7 +95,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.5.10",
-    "@tanstack/react-virtual": "^3.0.0-beta.17"
+    "@tanstack/react-table": "8.5.11",
+    "react-virtual": "^2.10.4"
   }
 }

package/src/MaterialReactTable.tsx

@@ -2,7 +2,6 @@ import React, {
   ChangeEvent,
   Dispatch,
   DragEvent,
-  FC,
   FocusEvent,
   ReactNode,
   SetStateAction,
@@ -41,7 +40,8 @@ import type {
   TableOptions,
   TableState,
 } from '@tanstack/react-table';
-import type { VirtualizerOptions } from '@tanstack/react-virtual';
+import type { Options as VirtualizerOptions } from 'react-virtual';
+// import type { VirtualizerOptions } from '@tanstack/react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filterFns';
@@ -779,28 +779,8 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }) => ReactNode;
     renderToolbarInternalActions?: ({
       table,
-      MRT_ToggleGlobalFilterButton,
-      MRT_ToggleFiltersButton,
-      MRT_ShowHideColumnsButton,
-      MRT_ToggleDensePaddingButton,
-      MRT_FullScreenToggleButton,
     }: {
       table: MRT_TableInstance<TData>;
-      MRT_ToggleGlobalFilterButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_ToggleFiltersButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_ShowHideColumnsButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_ToggleDensePaddingButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_FullScreenToggleButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
     }) => ReactNode;
     renderTopToolbarCustomActions?: ({
       table,
@@ -813,12 +793,19 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
     virtualizerProps?:
-      | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
+      | Partial<VirtualizerOptions<HTMLDivElement>>
       | (({
           table,
         }: {
           table: MRT_TableInstance<TData>;
-        }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+        }) => Partial<VirtualizerOptions<HTMLDivElement>>);
+    // virtualizerProps?:
+    //   | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
+    //   | (({
+    //       table,
+    //     }: {
+    //       table: MRT_TableInstance<TData>;
+    //     }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
   };
 
 export default <TData extends Record<string, any> = {}>({

package/src/body/MRT_TableBody.tsx

@@ -1,5 +1,6 @@
 import React, { FC, RefObject, useMemo } from 'react';
-import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
+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';
@@ -23,7 +24,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
       virtualizerProps,
     },
   } = table;
-  const { density, globalFilter, pagination, sorting } = getState();
+  const { globalFilter, pagination, sorting } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
@@ -61,28 +62,47 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
     globalFilter,
   ]);
 
-  const rowVirtualizer: Virtualizer = enableRowVirtualization
-    ? useVirtualizer({
-        count: rows.length,
-        estimateSize: () => (density === 'compact' ? 25 : 50),
-        getScrollElement: () => tableContainerRef.current as HTMLDivElement,
-        overscan: 10,
+  const rowVirtualizer = enableRowVirtualization
+    ? useVirtual({
+        size: rows.length,
+        parentRef: tableContainerRef,
+        overscan: 15,
         ...vProps,
       })
     : ({} as any);
 
+  // const rowVirtualizer: Virtualizer = enableRowVirtualization
+  //   ? useVirtualizer({
+  //       count: rows.length,
+  //       estimateSize: () => (density === 'compact' ? 25 : 50),
+  //       getScrollElement: () => tableContainerRef.current as HTMLDivElement,
+  //       overscan: 15,
+  //       ...vProps,
+  //     })
+  //   : ({} as any);
+
   const virtualRows = enableRowVirtualization
-    ? rowVirtualizer.getVirtualItems()
+    ? rowVirtualizer.virtualItems
     : [];
 
+  // const virtualRows = enableRowVirtualization
+  //   ? rowVirtualizer.getVirtualItems()
+  //   : [];
+
   let paddingTop = 0;
   let paddingBottom = 0;
   if (enableRowVirtualization) {
     paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
     paddingBottom = !!virtualRows.length
-      ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+      ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
       : 0;
   }
+  // if (enableRowVirtualization) {
+  //   paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
+  //   paddingBottom = !!virtualRows.length
+  //     ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+  //     : 0;
+  // }
 
   return (
     <TableBody {...tableBodyProps}>
@@ -91,7 +111,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

package/src/body/MRT_TableBodyCell.tsx

@@ -156,7 +156,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const draggingBorder =
     currentDraggingColumn?.id === column.id
-      ? `1px dashed ${theme.palette.divider}`
+      ? `1px dashed ${theme.palette.text.secondary}`
       : currentHoveredColumn?.id === column.id
       ? `2px dashed ${theme.palette.primary.main}`
       : undefined;

package/src/body/MRT_TableBodyRow.tsx

@@ -35,7 +35,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
 
   const draggingBorder =
     currentDraggingRow?.id === row.id
-      ? `1px dashed ${theme.palette.divider}`
+      ? `1px dashed ${theme.palette.text.secondary}`
       : currentHoveredRow?.id === row.id
       ? `2px dashed ${theme.palette.primary.main}`
       : undefined;

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -1,13 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { Box, IconButton, Tooltip } from '@mui/material';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
-interface Props {
-  column: MRT_Column;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  column: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnPinningButtons: FC<Props> = ({ column, table }) => {
+export const MRT_ColumnPinningButtons = <
+  TData extends Record<string, any> = {},
+>({
+  column,
+  table,
+}: Props<TData>) => {
   const {
     options: {
       icons: { PushPinIcon },

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FullScreenToggleButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_FullScreenToggleButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,20 +1,20 @@
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
-import React, { DragEventHandler, FC } from 'react';
+import React, { DragEventHandler } from 'react';
 import { MRT_TableInstance } from '..';
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   iconButtonProps?: IconButtonProps;
   onDragStart: DragEventHandler<HTMLButtonElement>;
   onDragEnd: DragEventHandler<HTMLButtonElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GrabHandleButton: FC<Props> = ({
+export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
   iconButtonProps,
   onDragEnd,
   onDragStart,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     options: {
       icons: { DragHandleIcon },

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,13 +1,19 @@
-import React, { FC, MouseEvent, useState } from 'react';
+import React, { MouseEvent, useState } from 'react';
 import { IconButton, Tooltip, IconButtonProps } from '@mui/material';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ShowHideColumnsButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     options: {
       icons: { ViewColumnIcon },

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleDensePaddingButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ToggleDensePaddingButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ToggleFiltersButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleGlobalFilterButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ToggleGlobalFilterButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/head/MRT_TableHeadCell.tsx

@@ -83,7 +83,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
 
   const draggingBorder =
     currentDraggingColumn?.id === column.id
-      ? `1px dashed ${theme.palette.divider}`
+      ? `1px dashed ${theme.palette.text.secondary}`
       : currentHoveredColumn?.id === column.id
       ? `2px dashed ${theme.palette.primary.main}`
       : undefined;

package/src/index.tsx

@@ -3,7 +3,21 @@ export default MaterialReactTable;
 export * from './MaterialReactTable';
 
 import type { MRT_Icons } from './icons';
-export type { MRT_Icons };
-
 import type { MRT_Localization } from './localization';
-export type { MRT_Localization };
+export type { MRT_Localization, MRT_Icons };
+
+import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
+import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
+import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
+import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
+import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
+import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+
+export {
+  MRT_FullScreenToggleButton,
+  MRT_GlobalFilterTextField,
+  MRT_ShowHideColumnsButton,
+  MRT_ToggleDensePaddingButton,
+  MRT_ToggleFiltersButton,
+  MRT_ToggleGlobalFilterButton,
+};

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -1,6 +1,5 @@
 import React, {
   ChangeEvent,
-  FC,
   MouseEvent,
   useCallback,
   useState,
@@ -16,11 +15,15 @@ import {
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { MRT_TableInstance } from '..';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GlobalFilterTextField: FC<Props> = ({ table }) => {
+export const MRT_GlobalFilterTextField = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+}: Props<TData>) => {
   const {
     getState,
     setGlobalFilter,

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, Menu, MenuItem } from '@mui/material';
 import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
@@ -97,21 +97,21 @@ export const internalFilterOptions = (
   },
 ];
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header;
   onSelect?: () => void;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterOptionMenu: FC<Props> = ({
+export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   anchorEl,
   header,
   onSelect,
   setAnchorEl,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,22 +1,24 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import type { MRT_Column, MRT_TableInstance } from '..';
 import { getDefaultColumnOrderIds } from '../column.utils';
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsMenu: FC<Props> = ({
+export const MRT_ShowHideColumnsMenu = <
+  TData extends Record<string, any> = {},
+>({
   anchorEl,
   isSubMenu,
   setAnchorEl,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getAllColumns,
     getAllLeafColumns,
@@ -60,10 +62,10 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     getCenterLeafColumns(),
     getLeftLeafColumns(),
     getRightLeafColumns(),
-  ]) as MRT_Column[];
+  ]) as MRT_Column<TData>[];
 
   const [currentHoveredColumn, setCurrentHoveredColumn] =
-    useState<MRT_Column | null>(null);
+    useState<MRT_Column<TData> | null>(null);
 
   return (
     <Menu

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,8 +1,8 @@
 import React, {
   Dispatch,
   DragEvent,
-  FC,
   SetStateAction,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -18,23 +18,25 @@ import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { reorderColumn } from '../column.utils';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
-interface Props {
-  allColumns: MRT_Column[];
-  column: MRT_Column;
-  currentHoveredColumn: MRT_Column | null;
+interface Props<TData extends Record<string, any> = {}> {
+  allColumns: MRT_Column<TData>[];
+  column: MRT_Column<TData>;
+  currentHoveredColumn: MRT_Column<TData> | null;
   isSubMenu?: boolean;
-  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
-  table: MRT_TableInstance;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
+export const MRT_ShowHideColumnsMenuItems = <
+  TData extends Record<string, any> = {},
+>({
   allColumns,
   currentHoveredColumn,
   setCurrentHoveredColumn,
   column,
   isSubMenu,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -54,9 +56,9 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     (columnDefType === 'group' &&
       column.getLeafColumns().some((col) => col.getIsVisible()));
 
-  const handleToggleColumnHidden = (column: MRT_Column) => {
+  const handleToggleColumnHidden = (column: MRT_Column<TData>) => {
     if (columnDefType === 'group') {
-      column?.columns?.forEach?.((childColumn: MRT_Column) => {
+      column?.columns?.forEach?.((childColumn: MRT_Column<TData>) => {
         childColumn.toggleVisibility(!switchChecked);
       });
     } else {
@@ -64,7 +66,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     }
   };
 
-  const menuItemRef = React.useRef<HTMLElement>(null);
+  const menuItemRef = useRef<HTMLElement>(null);
 
   const [isDragging, setIsDragging] = useState(false);
 
@@ -172,7 +174,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           )}
         </Box>
       </MenuItem>
-      {column.columns?.map((c: MRT_Column, i) => (
+      {column.columns?.map((c: MRT_Column<TData>, i) => (
         <MRT_ShowHideColumnsMenuItems
           allColumns={allColumns}
           column={c}

package/src/table/MRT_TableContainer.tsx

@@ -1,4 +1,11 @@
-import React, { FC, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, {
+  FC,
+  RefObject,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { TableContainer } from '@mui/material';
 import { MRT_Table } from './MRT_Table';
 import type { MRT_TableInstance } from '..';
@@ -29,6 +36,9 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
       ? muiTableContainerProps({ table })
       : muiTableContainerProps;
 
+  const tableContainerRef =
+    tableContainerProps?.ref ?? useRef<HTMLDivElement>(null);
+
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
@@ -45,8 +55,6 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
 
-  const tableContainerRef = useRef<HTMLDivElement>(null);
-
   return (
     <TableContainer
       ref={tableContainerRef}
@@ -69,7 +77,10 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
         ...tableContainerProps?.style,
       }}
     >
-      <MRT_Table tableContainerRef={tableContainerRef} table={table} />
+      <MRT_Table
+        tableContainerRef={tableContainerRef as RefObject<HTMLDivElement>}
+        table={table}
+      />
     </TableContainer>
   );
 };