material-react-table 0.6.2 → 0.6.3

package/dist/toolbar/MRT_LinearProgressBar.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface Props {
+}
+export declare const MRT_LinearProgressBar: FC<Props>;
+export {};

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -1,4 +1,15 @@
 import { FC } from 'react';
+import { Theme } from '@mui/material';
+import { MRT_TableInstance } from '..';
+export declare const commonToolbarStyles: (theme: Theme, tableInstance: MRT_TableInstance) => {
+    backgroundColor: string;
+    backgroundImage: string;
+    display: string;
+    opacity: number;
+    p: string;
+    width: string;
+    zIndex: number;
+};
 interface Props {
 }
 export declare const MRT_ToolbarTop: FC<Props>;

package/dist/useMRT.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, PropsWithChildren, SetStateAction } from 'react';
 import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
 import { MRT_FILTER_TYPE } from './enums';
 import { MRT_Icons } from './icons';

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { MRT_ColumnInterface } from '.';
+export declare const findLowestLevelCols: (columns: MRT_ColumnInterface[]) => MRT_ColumnInterface<{}>[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.2",
+  "version": "0.6.3",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -90,7 +90,7 @@ export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseRowSelectOptions<D> &
   UseRowStateOptions<D> &
   UseSortByOptions<D> & {
-    columns: (Column<D> & MRT_ColumnInterface)[];
+    columns: MRT_ColumnInterface[];
     data: D[];
     initialState?: Partial<MRT_TableState>;
   };
@@ -107,13 +107,13 @@ export type MRT_TableInstance<D extends {} = {}> = TableInstance<D> &
   UseRowStateInstanceProps<D> &
   UseSortByInstanceProps<D> & {
     columns: (Column<D> & MRT_ColumnInstance<D>)[];
-    headerGroups: MRT_HeaderGroup<D>[];
     footerGroups: MRT_HeaderGroup<D>[];
-    state: MRT_TableState<D>;
-    rows: MRT_Row<D>[];
+    getToggleAllRowsExpandedProps: () => void;
+    headerGroups: MRT_HeaderGroup<D>[];
     page: MRT_Row<D>[];
     resetResizing: () => void;
-    getToggleAllRowsExpandedProps: () => void;
+    rows: MRT_Row<D>[];
+    state: MRT_TableState<D>;
   };
 
 export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
@@ -132,13 +132,13 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
     Footer?: string;
     Header?: string;
-    accessor: string;
-    columns?: (Column<D> & MRT_ColumnInterface<D>)[];
+    accessor?: string;
+    columns?: MRT_ColumnInterface<D>[];
     disableFilters?: boolean;
     editable?: boolean;
     filter?: MRT_FilterType | string | FilterType<D>;
     filterSelectOptions?: (string | { text: string; value: string })[];
-    filterTypes: MRT_FILTER_TYPE[];
+    filterTypes?: (MRT_FILTER_TYPE | string)[];
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
       | ((cell: MRT_Cell<D>) => TextFieldProps);
@@ -380,9 +380,11 @@ export default <D extends {}>({
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MaterialReactTableProvider
+    //@ts-ignore
     defaultColumn={defaultColumn}
-    // @ts-ignore
+    //@ts-ignore
     filterTypes={{ ...defaultFilterFNs, ...filterTypes }}
+    //@ts-ignore
     globalFilter={globalFilter}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}

package/src/body/MRT_TableBody.tsx

@@ -28,7 +28,9 @@ export const MRT_TableBody: FC<Props> = () => {
   return (
     <TableBody
       {...tableBodyProps}
-      sx={{ overflowY: 'hidden', ...tableBodyProps?.sx }}
+      sx={{
+        ...tableBodyProps?.sx,
+      }}
     >
       {rows.map((row: MRT_Row) => {
         tableInstance.prepareRow(row);

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -102,15 +102,16 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleShowAllColumns = () => {
+    tableInstance.toggleHideAllColumns(false);
+    setAnchorEl(null);
+  };
+
   const handleOpenFilterModeMenu = (event: React.MouseEvent<HTMLElement>) => {
     event.stopPropagation();
     setFilterMenuAnchorEl(event.currentTarget);
   };
 
-  const handleShowAllColumns = () => {
-    tableInstance.toggleHideAllColumns(false);
-  };
-
   const handleOpenShowHideColumnsMenu = (
     event: React.MouseEvent<HTMLElement>,
   ) => {

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: 'hidden',
         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)].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);
+};