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

package/README.md

@@ -48,10 +48,12 @@ See all [Props and Options](https://www.material-react-table.com/docs/api)
 
 View additional [storybook examples](https://www.material-react-table.dev/)
 
-## Features (All Features work and are MVP, but are still being polished)
+## Features
 
 _All features can easily be enabled/disabled_
 
+_**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
+
 - [x] < 37kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Aggregation and Grouping (Sum, Average, Count, etc.)
@@ -63,7 +65,7 @@ _All features can easily be enabled/disabled_
 - [x] Column Resizing
 - [x] Customize Icons
 - [x] Customize Styling of internal Mui Components
-- [x] Data Editing (3 different editing modes)
+- [x] Data Editing (4 different editing modes)
 - [x] Density Toggle
 - [x] Detail Panels (Expansion)
 - [x] Filtering (supports client-side and server-side)
@@ -71,7 +73,7 @@ _All features can easily be enabled/disabled_
 - [x] Global Filtering (Search across all columns, rank by best match)
 - [x] Header Groups & Footers
 - [x] Localization (i18n) support
-- [x] Manage your own state
+- [x] Manage your own state or let the table manage it internally for you
 - [x] Pagination (supports client-side and server-side)
 - [x] Row Actions (Your Custom Action Buttons)
 - [x] Row Numbers
@@ -112,33 +114,31 @@ npm install material-react-table
 import React, { useMemo, useRef, useState, useEffect } from 'react';
 import MaterialReactTable from 'material-react-table';
 
+const data = [
+  {
+    name: 'John',
+    age: 30,
+  },
+  {
+    name: 'Sara',
+    age: 25,
+  },
+]
+
 export default function App() {
   const columns = useMemo(
     () => [
       {
         accessorKey: 'name', //simple recommended way to define a column
         header: 'Name',
-        muiTableHeadCellProps: { sx: { color: 'green' } }, //custom props
+        muiTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props
+        Cell: ({ cell}) => <span>{cell.getValue()}</span>, //optional custom cell render
       },
       {
         accessorFn: (row) => row.age, //alternate way
         id: 'age', //id required if you use accessorFn instead of accessorKey
         header: 'Age',
-        Header: <i>Age</i>, //optional custom markup
-      },
-    ],
-    [],
-  );
-
-  const data = useMemo(
-    () => [
-      {
-        name: 'John',
-        age: 30,
-      },
-      {
-        name: 'Sara',
-        age: 25,
+        Header: () => <i>Age</i>, //optional custom header render
       },
     ],
     [],
@@ -170,7 +170,7 @@ export default function App() {
       state={{ rowSelection }} //manage your own state, pass it back to the table (optional)
       tableInstanceRef={tableInstanceRef} //get a reference to the underlying table instance (optional)
    />
-   );
+  );
 }
 ```
 

package/dist/cjs/index.js

@@ -2366,16 +2366,6 @@ const MRT_TableContainer = ({ table }) => {
 const MRT_TablePaper = ({ table }) => {
     const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
-    React.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 })
         : muiTablePaperProps;
@@ -2387,7 +2377,16 @@ const MRT_TablePaper = ({ table }) => {
             }
         }, sx: (theme) => (Object.assign({ transition: 'all 0.2s ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
             ? tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx(theme)
-            : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : 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 }) }),
+            : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), (isFullScreen
+            ? {
+                height: '100vh',
+                margin: 0,
+                maxHeight: '100vh',
+                maxWidth: '100vw',
+                padding: 0,
+                width: '100vw',
+            }
+            : {})) }),
         enableTopToolbar && React__default["default"].createElement(MRT_TopToolbar, { table: table }),
         React__default["default"].createElement(MRT_TableContainer, { table: table }),
         enableBottomToolbar && React__default["default"].createElement(MRT_BottomToolbar, { table: table })));
@@ -2545,6 +2544,22 @@ const MRT_TableRoot = (props) => {
     if (props.tableInstanceRef) {
         props.tableInstanceRef.current = table;
     }
+    const initialBodyHeight = React.useRef();
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            initialBodyHeight.current = document.body.style.height;
+        }
+    }, []);
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            if (table.getState().isFullScreen) {
+                document.body.style.height = '100vh';
+            }
+            else {
+                document.body.style.height = initialBodyHeight.current;
+            }
+        }
+    }, [table.getState().isFullScreen]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Dialog, { PaperComponent: material.Box, TransitionComponent: material.Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React__default["default"].createElement(MRT_TablePaper, { table: table })),