material-react-table 2.0.0-alpha.5 → 2.0.0-beta.0

package/src/table/MRT_TableContainer.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
 import TableContainer from '@mui/material/TableContainer';
+import { alpha, lighten } from '@mui/material/styles';
 import { MRT_Table } from './MRT_Table';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditRowModal } from '../modals';
@@ -21,11 +24,22 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
       createDisplayMode,
       editDisplayMode,
       enableStickyHeader,
+      localization,
+      muiCircularProgressProps,
       muiTableContainerProps,
     },
     refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
   } = table;
-  const { creatingRow, editingRow, isFullScreen } = getState();
+  const {
+    creatingRow,
+    editingRow,
+    isFullScreen,
+    isLoading,
+    showLoadingOverlay,
+  } = getState();
+
+  const loading =
+    (isLoading || showLoadingOverlay) && showLoadingOverlay !== false;
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
@@ -33,6 +47,11 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
     table,
   });
 
+  const circularProgressProps = parseFromValuesOrFunc(
+    muiCircularProgressProps,
+    { table },
+  );
+
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
@@ -52,6 +71,8 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
 
   return (
     <TableContainer
+      aria-busy={loading}
+      aria-describedby="mrt-progress"
       {...tableContainerProps}
       ref={(node: HTMLDivElement) => {
         if (node) {
@@ -74,9 +95,37 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
           : undefined,
         maxWidth: '100%',
         overflow: 'auto',
+        position: 'relative',
         ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
       })}
     >
+      {loading ? (
+        <Box
+          sx={(theme) => ({
+            alignItems: 'center',
+            backgroundColor: alpha(
+              lighten(theme.palette.background.paper, 0.05),
+              0.5,
+            ),
+            bottom: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            left: 0,
+            maxHeight: '100vh',
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            width: '100%',
+            zIndex: 2,
+          })}
+        >
+          <CircularProgress
+            aria-label={localization.noRecordsToDisplay}
+            id="mrt-progress"
+            {...circularProgressProps}
+          />
+        </Box>
+      ) : null}
       <MRT_Table table={table} />
       {(createModalOpen || editModalOpen) && (
         <MRT_EditRowModal open table={table} />

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -16,7 +16,7 @@ export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
     getState,
     options: { muiLinearProgressProps },
   } = table;
-  const { isLoading, showProgressBars } = getState();
+  const { showProgressBars } = getState();
 
   const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
     isTopToolbar,
@@ -25,7 +25,7 @@ export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
 
   return (
     <Collapse
-      in={isLoading || showProgressBars}
+      in={showProgressBars}
       mountOnEnter
       sx={{
         bottom: isTopToolbar ? 0 : undefined,

package/src/toolbar/MRT_TablePagination.tsx

@@ -50,11 +50,10 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
   const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
 
   const {
-    showRowsPerPage = true,
     rowsPerPageOptions = defaultRowsPerPage,
     showFirstButton = showFirstLastPageButtons,
     showLastButton = showFirstLastPageButtons,
-
+    showRowsPerPage = true,
     ...rest
   } = paginationProps ?? {};
 
@@ -84,8 +83,8 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
             {localization.rowsPerPage}
           </InputLabel>
           <Select
-            inputProps={{ 'aria-label': localization.rowsPerPage }}
             id="mrt-rows-per-page"
+            inputProps={{ 'aria-label': localization.rowsPerPage }}
             label={localization.rowsPerPage}
             onChange={(event) => setPageSize(+event.target.value)}
             sx={{ '&::before': { border: 'none' }, mb: 0 }}
@@ -123,7 +122,7 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
       ) : paginationDisplayMode === 'default' ? (
         <>
           <Typography
-            sx={{ mb: 0, mx: '4px', minWidth: '10ch' }}
+            sx={{ mb: 0, minWidth: '10ch', mx: '4px' }}
             variant="body2"
           >{`${
             lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()

package/src/types.ts

@@ -43,6 +43,7 @@ import { type AutocompleteProps } from '@mui/material/Autocomplete';
 import { type ButtonProps } from '@mui/material/Button';
 import { type CheckboxProps } from '@mui/material/Checkbox';
 import { type ChipProps } from '@mui/material/Chip';
+import { type CircularProgressProps } from '@mui/material/CircularProgress';
 import { type DialogProps } from '@mui/material/Dialog';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import { type LinearProgressProps } from '@mui/material/LinearProgress';
@@ -158,7 +159,7 @@ export interface MRT_Localization {
   noResultsFound: string;
   of: string;
   or: string;
-  pin?: string;
+  pin: string;
   pinToLeft: string;
   pinToRight: string;
   resetColumnSize: string;
@@ -260,12 +261,8 @@ export type MRT_TableInstance<TData extends Record<string, any>> = Omit<
   setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
   setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
   setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
-  setHoveredColumn: Dispatch<
-    SetStateAction<{ id: string } | MRT_Column<TData> | null>
-  >;
-  setHoveredRow: Dispatch<
-    SetStateAction<{ id: string } | MRT_Row<TData> | null>
-  >;
+  setHoveredColumn: Dispatch<SetStateAction<Partial<MRT_Column<TData>> | null>>;
+  setHoveredRow: Dispatch<SetStateAction<Partial<MRT_Row<TData>> | null>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
   setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
@@ -288,14 +285,15 @@ export type MRT_TableState<TData extends Record<string, any>> = TableState & {
   editingCell: MRT_Cell<TData> | null;
   editingRow: MRT_Row<TData> | null;
   globalFilterFn: MRT_FilterOption;
-  hoveredColumn: { id: string } | MRT_Column<TData> | null;
-  hoveredRow: { id: string } | MRT_Row<TData> | null;
+  hoveredColumn: Partial<MRT_Column<TData>> | null;
+  hoveredRow: Partial<MRT_Row<TData>> | null;
   isFullScreen: boolean;
   isLoading: boolean;
   isSaving: boolean;
   showAlertBanner: boolean;
   showColumnFilters: boolean;
   showGlobalFilter: boolean;
+  showLoadingOverlay: boolean;
   showProgressBars: boolean;
   showSkeletons: boolean;
   showToolbarDropZone: boolean;
@@ -745,6 +743,9 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
   muiBottomToolbarProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps)
     | ToolbarProps;
+  muiCircularProgressProps?:
+    | ((props: { table: MRT_TableInstance<TData> }) => CircularProgressProps)
+    | CircularProgressProps;
   muiColumnActionsButtonProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -972,8 +973,8 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
     values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
   }) => Promise<void> | void;
   onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
-  onHoveredColumnChange?: OnChangeFn<{ id: string } | MRT_Column<TData> | null>;
-  onHoveredRowChange?: OnChangeFn<{ id: string } | MRT_Row<TData> | null>;
+  onHoveredColumnChange?: OnChangeFn<Partial<MRT_Column<TData>> | null>;
+  onHoveredRowChange?: OnChangeFn<Partial<MRT_Row<TData>> | null>;
   onIsFullScreenChange?: OnChangeFn<boolean>;
   onShowAlertBannerChange?: OnChangeFn<boolean>;
   onShowColumnFiltersChange?: OnChangeFn<boolean>;