material-react-table 1.0.0-beta.7 → 1.0.0-beta.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "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.",

package/src/table/MRT_TablePaper.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import { Paper } from '@mui/material';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
@@ -17,16 +17,6 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
   } = table;
   const { isFullScreen } = getState();
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      if (isFullScreen) {
-        document.body.style.height = '100vh';
-      } else {
-        document.body.style.height = 'auto';
-      }
-    }
-  }, [isFullScreen]);
-
   const tablePaperProps =
     muiTablePaperProps instanceof Function
       ? muiTablePaperProps({ table })
@@ -51,12 +41,16 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
       })}
       style={{
         ...tablePaperProps?.style,
-        height: isFullScreen ? '100vh' : undefined,
-        margin: isFullScreen ? '0' : undefined,
-        maxHeight: isFullScreen ? '100vh' : undefined,
-        maxWidth: isFullScreen ? '100vw' : undefined,
-        padding: isFullScreen ? '0' : undefined,
-        width: isFullScreen ? '100vw' : undefined,
+        ...(isFullScreen
+          ? {
+              height: '100vh',
+              margin: 0,
+              maxHeight: '100vh',
+              maxWidth: '100vw',
+              padding: 0,
+              width: '100vw',
+            }
+          : {}),
       }}
     >
       {enableTopToolbar && <MRT_TopToolbar table={table} />}

package/src/table/MRT_TableRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   TableState,
   getCoreRowModel,
@@ -315,6 +315,24 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     props.tableInstanceRef.current = table;
   }
 
+  const initialBodyHeight = useRef<string>();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      initialBodyHeight.current = document.body.style.height;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if (table.getState().isFullScreen) {
+        document.body.style.height = '100vh';
+      } else {
+        document.body.style.height = initialBodyHeight.current as string;
+      }
+    }
+  }, [table.getState().isFullScreen]);
+
   return (
     <>
       <Dialog