material-react-table 0.6.1 → 0.6.4

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,
@@ -22,18 +22,24 @@ import {
   useSortBy,
   useTable,
 } from 'react-table';
-import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import type {
+  MRT_ColumnInterface,
+  MRT_FilterType,
+  MRT_Row,
+  MRT_TableInstance,
+} from '.';
 import { MRT_FILTER_TYPE } from './enums';
-import { defaultFilterFNs } from './filtersFNs';
 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;
   anyRowsExpanded: boolean;
   icons: MRT_Icons;
   idPrefix: string;
+  filterTypes: { [key in MRT_FILTER_TYPE]: any };
   localization: MRT_Localization;
   setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
   setCurrentFilterTypes: Dispatch<
@@ -83,38 +89,12 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     props.initialState?.showSearch ?? false,
   );
 
-  const filterTypes = useMemo<{
-    [key in MRT_FILTER_TYPE]: any;
-  }>(
-    () => ({
-      ...defaultFilterFNs,
-      ...props.filterTypes,
-    }),
-    [props.filterTypes],
-  );
-
-  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] ??
@@ -123,25 +103,49 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     ),
   );
 
-  const columns = useMemo(
-    () =>
-      findLowestLevelCols().map((column) => {
-        column.filter =
-          filterTypes[
-            currentFilterTypes[column.accessor as string] as MRT_FILTER_TYPE
-          ];
+  const applyFiltersToColumns = useCallback(
+    (cols: MRT_ColumnInterface[]) =>
+      cols.map((column) => {
+        if (column.columns) {
+          applyFiltersToColumns(column.columns);
+        } else {
+          column.filter =
+            props?.filterTypes?.[
+              currentFilterTypes[column.accessor as string] as MRT_FILTER_TYPE
+            ];
+        }
         return column;
       }),
-    [props.columns, filterTypes, currentFilterTypes],
+    [currentFilterTypes, props.filterTypes],
+  );
+
+  const columns = useMemo(
+    () => applyFiltersToColumns(props.columns),
+    [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,
-      columns,
       // @ts-ignore
-      filterTypes,
-      globalFilter: props.globalFilter ?? 'globalFuzzy',
+      columns,
+      data,
       useControlledState: (state) =>
         useMemo(
           () => ({
@@ -167,7 +171,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
         ),
     },
     ...hooks,
-  ) as MRT_TableInstance<D>;
+  ) as unknown as MRT_TableInstance<D>;
 
   const idPrefix = useMemo(
     () => props.idPrefix ?? Math.random().toString(36).substring(2, 9),

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);
+};