material-react-table 0.6.2 → 0.6.5

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -3,6 +3,7 @@ import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { ColumnInstance } from 'react-table';
 import type { MRT_ColumnInstance } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import { useMRT } from '../useMRT';
 
 interface Props {
   column: MRT_ColumnInstance;
@@ -13,6 +14,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   column,
   isSubMenu,
 }) => {
+  const { onColumnHide, tableInstance } = useMRT();
   const isParentHeader = !!column?.columns?.length;
 
   const allChildColumnsVisible =
@@ -29,6 +31,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleHidden();
     }
+    onColumnHide?.(column, tableInstance.state.hiddenColumns);
   };
 
   return (

package/src/table/MRT_TableContainer.tsx

@@ -1,11 +1,5 @@
-import React, { FC, useEffect, useRef } from 'react';
-import {
-  LinearProgress,
-  Paper,
-  TableContainer,
-  Collapse,
-  Box,
-} from '@mui/material';
+import React, { FC, useEffect } from 'react';
+import { Paper, TableContainer, Box } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Table } from './MRT_Table';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
@@ -17,28 +11,17 @@ export const MRT_TableContainer: FC<Props> = () => {
   const {
     hideToolbarBottom,
     hideToolbarTop,
-    isFetching,
-    isLoading,
-    muiLinearProgressProps,
     muiTableContainerProps,
     tableInstance,
   } = useMRT();
   const fullScreen = tableInstance.state.fullScreen;
-  const originalBodyOverflowStyle = useRef<string | undefined>();
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      originalBodyOverflowStyle.current = document?.body?.style?.overflow;
-    }
-  }, []);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
       if (fullScreen) {
         document.body.style.overflow = 'hidden';
       } else {
-        document.body.style.overflow =
-          originalBodyOverflowStyle.current ?? 'auto';
+        document.body.style.overflow = 'auto';
       }
     }
   }, [fullScreen]);
@@ -48,11 +31,6 @@ export const MRT_TableContainer: FC<Props> = () => {
       ? muiTableContainerProps(tableInstance)
       : muiTableContainerProps;
 
-  const linearProgressProps =
-    muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps(tableInstance)
-      : muiLinearProgressProps;
-
   return (
     <TableContainer
       component={Paper}
@@ -62,6 +40,7 @@ export const MRT_TableContainer: FC<Props> = () => {
         height: fullScreen ? '100%' : undefined,
         left: fullScreen ? '0' : undefined,
         m: fullScreen ? '0' : undefined,
+        overflowY: !fullScreen ? 'hidden' : undefined,
         position: fullScreen ? 'fixed' : undefined,
         right: fullScreen ? '0' : undefined,
         top: fullScreen ? '0' : undefined,
@@ -72,9 +51,6 @@ export const MRT_TableContainer: FC<Props> = () => {
       }}
     >
       {!hideToolbarTop && <MRT_ToolbarTop />}
-      <Collapse in={isFetching || isLoading} unmountOnExit>
-        <LinearProgress {...linearProgressProps} />
-      </Collapse>
       <Box
         sx={{
           maxWidth: '100%',

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { Collapse, LinearProgress } from '@mui/material';
+import { useMRT } from '../useMRT';
+
+interface Props {}
+
+export const MRT_LinearProgressBar: FC<Props> = () => {
+  const { muiLinearProgressProps, isFetching, isLoading, tableInstance } =
+    useMRT();
+
+  const linearProgressProps =
+    muiLinearProgressProps instanceof Function
+      ? muiLinearProgressProps(tableInstance)
+      : muiLinearProgressProps;
+
+  return (
+    <Collapse in={isFetching || isLoading} unmountOnExit>
+      <LinearProgress
+        aria-label="Loading"
+        aria-busy="true"
+        {...linearProgressProps}
+      />
+    </Collapse>
+  );
+};

package/src/toolbar/MRT_TablePagination.tsx

@@ -34,7 +34,7 @@ export const MRT_TablePagination: FC<Props> = () => {
       }
       {...tablePaginationProps}
       sx={{
-        p: 0,
+        m: '0 0.5rem',
         position: 'relative',
         zIndex: 2,
         ...tablePaginationProps?.sx,

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,9 +1,11 @@
 import React, { FC } from 'react';
-import { alpha, Toolbar } from '@mui/material';
+import { Box, Toolbar } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
+import { commonToolbarStyles } from './MRT_ToolbarTop';
 
 interface Props {}
 
@@ -29,33 +31,28 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
       {...toolbarProps}
       sx={(theme) =>
         ({
-          backgroundColor: theme.palette.background.default,
-          backgroundImage: `linear-gradient(${alpha(
-            theme.palette.common.white,
-            0.05,
-          )},${alpha(theme.palette.common.white, 0.05)})`,
           bottom: tableInstance.state.fullScreen ? '0' : undefined,
-          display: 'flex',
-          justifyContent: 'space-between',
-          overflowY: 'hidden',
-          p: '0 0.5rem !important',
           position: tableInstance.state.fullScreen ? 'fixed' : undefined,
-          width: 'calc(100% - 1rem)',
-          zIndex: 1,
+          ...commonToolbarStyles(theme, tableInstance),
           ...toolbarProps?.sx,
         } as any)
       }
     >
-      {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
-        <MRT_ToolbarInternalButtons />
-      ) : (
-        <span />
-      )}
-      {positionToolbarAlertBanner === 'bottom' && <MRT_ToolbarAlertBanner />}
-      {!manualPagination &&
-        ['bottom', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination />
+      <MRT_LinearProgressBar />
+      <Box
+        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+      >
+        {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
+          <MRT_ToolbarInternalButtons />
+        ) : (
+          <span />
         )}
+        {positionToolbarAlertBanner === 'bottom' && <MRT_ToolbarAlertBanner />}
+        {!manualPagination &&
+          ['bottom', 'both'].includes(positionPagination ?? '') && (
+            <MRT_TablePagination />
+          )}
+      </Box>
     </Toolbar>
   );
 };

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,10 +1,28 @@
 import React, { FC } from 'react';
-import { alpha, Box, Toolbar } from '@mui/material';
+import { alpha, Box, Theme, Toolbar } from '@mui/material';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 import { useMRT } from '../useMRT';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
+import { MRT_TableInstance } from '..';
+
+export const commonToolbarStyles = (
+  theme: Theme,
+  tableInstance: MRT_TableInstance,
+) => ({
+  backgroundColor: theme.palette.background.default,
+  backgroundImage: `linear-gradient(${alpha(
+    theme.palette.common.white,
+    0.05,
+  )},${alpha(theme.palette.common.white, 0.05)})`,
+  display: 'grid',
+  opacity: tableInstance.state.fullScreen ? 0.95 : 1,
+  p: '0 !important',
+  width: '100%',
+  zIndex: 1,
+});
 
 interface Props {}
 
@@ -32,17 +50,9 @@ export const MRT_ToolbarTop: FC<Props> = () => {
       {...toolbarProps}
       sx={(theme) =>
         ({
-          backgroundColor: theme.palette.background.default,
-          backgroundImage: `linear-gradient(${alpha(
-            theme.palette.common.white,
-            0.05,
-          )},${alpha(theme.palette.common.white, 0.05)})`,
-          display: 'grid',
-          p: '0 !important',
           position: tableInstance.state.fullScreen ? 'sticky' : undefined,
           top: tableInstance.state.fullScreen ? '0' : undefined,
-          width: '100%',
-          zIndex: 1,
+          ...commonToolbarStyles(theme, tableInstance),
           ...toolbarProps?.sx,
         } as any)
       }
@@ -76,6 +86,7 @@ export const MRT_ToolbarTop: FC<Props> = () => {
             <MRT_TablePagination />
           )}
       </div>
+      <MRT_LinearProgressBar />
     </Toolbar>
   );
 };

package/src/useMRT.tsx

@@ -1,13 +1,13 @@
 import React, {
   Context,
+  Dispatch,
   PropsWithChildren,
+  SetStateAction,
   createContext,
+  useCallback,
   useContext,
   useMemo,
   useState,
-  Dispatch,
-  SetStateAction,
-  useCallback,
 } from 'react';
 import {
   PluginHook,
@@ -32,6 +32,7 @@ import { MRT_FILTER_TYPE } from './enums';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
+import { findLowestLevelCols } from './utils';
 
 export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
   anyRowsCanExpand: boolean;
@@ -88,28 +89,12 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     props.initialState?.showSearch ?? false,
   );
 
-  const findLowestLevelCols = useCallback(() => {
-    let lowestLevelColumns: any[] = props.columns;
-    let currentCols: any[] = props.columns;
-    while (!!currentCols.length && currentCols.some((col) => col.columns)) {
-      const nextCols = currentCols
-        .filter((col) => !!col.columns)
-        .map((col) => col.columns)
-        .flat();
-      if (nextCols.every((col) => !col.columns)) {
-        lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
-      }
-      currentCols = nextCols;
-    }
-    return lowestLevelColumns.filter((col) => !col.columns);
-  }, [props.columns]);
-
   const [currentFilterTypes, setCurrentFilterTypes] = useState<{
     [key: string]: MRT_FilterType;
   }>(() =>
     Object.assign(
       {},
-      ...findLowestLevelCols().map((c) => ({
+      ...findLowestLevelCols(props.columns).map((c) => ({
         [c.accessor as string]:
           c.filter ??
           props?.initialState?.filters?.[c.accessor as any] ??
@@ -139,12 +124,28 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     [props.columns, applyFiltersToColumns],
   );
 
+  const data = useMemo(
+    () =>
+      !props.isLoading || !!props.data.length
+        ? props.data
+        : [...Array(10).fill(null)].map((_) =>
+            Object.assign(
+              {},
+              ...findLowestLevelCols(props.columns).map((c) => ({
+                [c.accessor as string]: null,
+              })),
+            ),
+          ),
+    [props.data, props.isLoading],
+  );
+
   const tableInstance = useTable(
     // @ts-ignore
     {
       ...props,
       // @ts-ignore
       columns,
+      data,
       useControlledState: (state) =>
         useMemo(
           () => ({

package/src/utils.ts

@@ -0,0 +1,17 @@
+import { MRT_ColumnInterface } from '.';
+
+export const findLowestLevelCols = (columns: MRT_ColumnInterface[]) => {
+  let lowestLevelColumns: MRT_ColumnInterface[] = columns;
+  let currentCols: MRT_ColumnInterface[] | undefined = columns;
+  while (!!currentCols?.length && currentCols.some((col) => col.columns)) {
+    const nextCols: MRT_ColumnInterface[] = currentCols
+      .filter((col) => !!col.columns)
+      .map((col) => col.columns)
+      .flat() as MRT_ColumnInterface[];
+    if (nextCols.every((col) => !col?.columns)) {
+      lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
+    }
+    currentCols = nextCols;
+  }
+  return lowestLevelColumns.filter((col) => !col.columns);
+};