material-react-table 2.0.0-beta.2 → 2.0.0-beta.4

package/src/table/MRT_Table.tsx

@@ -4,7 +4,7 @@ import {
   type Virtualizer,
   useVirtualizer,
 } from '@tanstack/react-virtual';
-import Table from '@mui/material/Table';
+import Table, { type TableProps } from '@mui/material/Table';
 import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
 import {
   extraIndexRangeExtractor,
@@ -15,12 +15,13 @@ import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_Table = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getFlatHeaders,
@@ -30,7 +31,6 @@ export const MRT_Table = <TData extends MRT_RowData>({
       columnVirtualizerOptions,
       columns,
       enableColumnPinning,
-      enableColumnResizing,
       enableColumnVirtualization,
       enableStickyHeader,
       enableTableFooter,
@@ -50,7 +50,10 @@ export const MRT_Table = <TData extends MRT_RowData>({
     isFullScreen,
   } = getState();
 
-  const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
+  const tableProps = {
+    ...parseFromValuesOrFunc(muiTableProps, { table }),
+    ...rest,
+  };
 
   const columnVirtualizerProps = parseFromValuesOrFunc(
     columnVirtualizerOptions,
@@ -157,32 +160,23 @@ export const MRT_Table = <TData extends MRT_RowData>({
   };
 
   return (
-    <>
-      <Table
-        stickyHeader={enableStickyHeader || isFullScreen}
-        {...tableProps}
-        style={{ ...columnSizeVars, ...tableProps?.style }}
-        sx={(theme) => ({
-          borderCollapse: 'separate',
-          display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
-          tableLayout:
-            layoutMode === 'semantic' && enableColumnResizing
-              ? 'fixed'
-              : undefined,
-          ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
-        })}
-      >
-        {enableTableHead && <MRT_TableHead {...props} />}
-        {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
-          <Memo_MRT_TableBody
-            columnVirtualizer={columnVirtualizer}
-            {...props}
-          />
-        ) : (
-          <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
-        )}
-        {enableTableFooter && <MRT_TableFooter {...props} />}
-      </Table>
-    </>
+    <Table
+      stickyHeader={enableStickyHeader || isFullScreen}
+      {...tableProps}
+      style={{ ...columnSizeVars, ...tableProps?.style }}
+      sx={(theme) => ({
+        borderCollapse: 'separate',
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+        ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
+      })}
+    >
+      {enableTableHead && <MRT_TableHead {...props} />}
+      {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
+        <Memo_MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
+      ) : (
+        <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
+      )}
+      {enableTableFooter && <MRT_TableFooter {...props} />}
+    </Table>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -1,9 +1,9 @@
 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 TableContainer, {
+  type TableContainerProps,
+} from '@mui/material/TableContainer';
 import { MRT_Table } from './MRT_Table';
+import { MRT_TableLoadingOverlay } from './MRT_TableLoadingOverlay';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditRowModal } from '../modals';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
@@ -11,12 +11,13 @@ import { type MRT_RowData, type MRT_TableInstance } from '../types';
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableContainerProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableContainer = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -24,8 +25,6 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
       createDisplayMode,
       editDisplayMode,
       enableStickyHeader,
-      localization,
-      muiCircularProgressProps,
       muiTableContainerProps,
     },
     refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
@@ -39,18 +38,16 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
   } = getState();
 
   const loading =
-    (isLoading || showLoadingOverlay) && showLoadingOverlay !== false;
+    showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
-  const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
-    table,
-  });
-
-  const circularProgressProps = parseFromValuesOrFunc(
-    muiCircularProgressProps,
-    { table },
-  );
+  const tableContainerProps = {
+    ...parseFromValuesOrFunc(muiTableContainerProps, {
+      table,
+    }),
+    ...rest,
+  };
 
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
@@ -72,7 +69,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
   return (
     <TableContainer
       aria-busy={loading}
-      aria-describedby="mrt-progress"
+      aria-describedby={loading ? 'mrt-progress' : undefined}
       {...tableContainerProps}
       ref={(node: HTMLDivElement) => {
         if (node) {
@@ -99,33 +96,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
         ...(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}
+      {loading ? <MRT_TableLoadingOverlay table={table} /> : null}
       <MRT_Table table={table} />
       {(createModalOpen || editModalOpen) && (
         <MRT_EditRowModal open table={table} />

package/src/table/MRT_TableLoadingOverlay.tsx

@@ -0,0 +1,53 @@
+import Box from '@mui/material/Box';
+import CircularProgress, {
+  type CircularProgressProps,
+} from '@mui/material/CircularProgress';
+import { alpha, lighten } from '@mui/material/styles';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
+
+interface Props<TData extends MRT_RowData> extends CircularProgressProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: { localization, muiCircularProgressProps },
+  } = table;
+
+  const circularProgressProps = {
+    ...parseFromValuesOrFunc(muiCircularProgressProps, { table }),
+    ...rest,
+  };
+
+  return (
+    <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>
+  );
+};

package/src/table/MRT_TablePaper.tsx

@@ -1,16 +1,17 @@
-import Paper from '@mui/material/Paper';
+import Paper, { type PaperProps } from '@mui/material/Paper';
 import { MRT_TableContainer } from './MRT_TableContainer';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends PaperProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TablePaper = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -25,7 +26,10 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
   } = table;
   const { isFullScreen } = getState();
 
-  const tablePaperProps = parseFromValuesOrFunc(muiTablePaperProps, { table });
+  const tablePaperProps = {
+    ...parseFromValuesOrFunc(muiTablePaperProps, { table }),
+    ...rest,
+  };
 
   return (
     <Paper

package/src/table/index.ts

@@ -1,4 +1,5 @@
 export * from '../modals/MRT_EditRowModal';
 export * from './MRT_Table';
 export * from './MRT_TableContainer';
+export * from './MRT_TableLoadingOverlay';
 export * from './MRT_TablePaper';

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -1,5 +1,4 @@
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
+import Box, { type BoxProps } from '@mui/material/Box';
 import { alpha } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
@@ -10,12 +9,13 @@ import { commonToolbarStyles } from './MRT_TopToolbar';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_BottomToolbar = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -33,13 +33,15 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
 
   const isMobile = useMediaQuery('(max-width:720px)');
 
-  const toolbarProps = parseFromValuesOrFunc(muiBottomToolbarProps, { table });
+  const toolbarProps = {
+    ...parseFromValuesOrFunc(muiBottomToolbarProps, { table }),
+    ...rest,
+  };
 
   const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
 
   return (
-    <Toolbar
-      variant="dense"
+    <Box
       {...toolbarProps}
       ref={(node: HTMLDivElement) => {
         if (node) {
@@ -103,6 +105,6 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
             )}
         </Box>
       </Box>
-    </Toolbar>
+    </Box>
   );
 };

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,9 +1,11 @@
 import Collapse from '@mui/material/Collapse';
-import LinearProgress from '@mui/material/LinearProgress';
+import LinearProgress, {
+  type LinearProgressProps,
+} from '@mui/material/LinearProgress';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends LinearProgressProps {
   isTopToolbar: boolean;
   table: MRT_TableInstance<TData>;
 }
@@ -11,21 +13,25 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_LinearProgressBar = <TData extends MRT_RowData>({
   isTopToolbar,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
     options: { muiLinearProgressProps },
   } = table;
-  const { showProgressBars } = getState();
+  const { isSaving, showProgressBars } = getState();
 
-  const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
-    isTopToolbar,
-    table,
-  });
+  const linearProgressProps = {
+    ...parseFromValuesOrFunc(muiLinearProgressProps, {
+      isTopToolbar,
+      table,
+    }),
+    ...rest,
+  };
 
   return (
     <Collapse
-      in={showProgressBars}
+      in={showProgressBars !== false && (showProgressBars || isSaving)}
       mountOnEnter
       sx={{
         bottom: isTopToolbar ? 0 : undefined,

package/src/toolbar/MRT_TablePagination.tsx

@@ -11,7 +11,13 @@ import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData>
+  extends Partial<
+    PaginationProps & {
+      rowsPerPageOptions?: number[];
+      showRowsPerPage?: boolean;
+    }
+  > {
   position?: 'bottom' | 'top';
   table: MRT_TableInstance<TData>;
 }
@@ -19,6 +25,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TablePagination = <TData extends MRT_RowData>({
   position = 'bottom',
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getPrePaginationRowModel,
@@ -39,9 +46,12 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
     showGlobalFilter,
   } = getState();
 
-  const paginationProps = parseFromValuesOrFunc(muiPaginationProps, {
-    table,
-  });
+  const paginationProps = {
+    ...parseFromValuesOrFunc(muiPaginationProps, {
+      table,
+    }),
+    ...rest,
+  };
 
   const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
   const numberOfPages = Math.ceil(totalRowCount / pageSize);
@@ -54,7 +64,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
     showFirstButton = showFirstLastPageButtons,
     showLastButton = showFirstLastPageButtons,
     showRowsPerPage = true,
-    ...rest
+    ..._rest
   } = paginationProps ?? {};
 
   return (
@@ -73,7 +83,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             ? '3rem'
             : undefined,
         position: 'relative',
-        px: '4px',
+        px: '8px',
         py: '12px',
         zIndex: 2,
       }}
@@ -119,13 +129,13 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           )}
           showFirstButton={showFirstButton}
           showLastButton={showLastButton}
-          {...(rest as PaginationProps)}
+          {..._rest}
         />
       ) : paginationDisplayMode === 'default' ? (
         <>
           <Typography
             align="center"
-            sx={{ mb: 0, minWidth: '10ch', mx: '4px' }}
+            sx={{ mb: 0, minWidth: '8ch', mx: '4px' }}
             variant="body2"
           >{`${
             lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import Alert from '@mui/material/Alert';
+import Alert, { type AlertProps } from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
@@ -9,7 +9,7 @@ import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_SelectCheckbox } from '../inputs';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends AlertProps {
   stackAlertBanner?: boolean;
   table: MRT_TableInstance<TData>;
 }
@@ -17,6 +17,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
   stackAlertBanner,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getPrePaginationRowModel,
@@ -36,9 +37,12 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
   } = table;
   const { density, grouping, showAlertBanner } = getState();
 
-  const alertProps = parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
-    table,
-  });
+  const alertProps = {
+    ...parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
+      table,
+    }),
+    ...rest,
+  };
 
   const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
     table,

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -1,16 +1,18 @@
 import { type DragEvent, useEffect } from 'react';
-import Box from '@mui/material/Box';
+import Box, { type BoxProps } from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
 import { alpha } from '@mui/material/styles';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -42,6 +44,7 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
       <Box
         className="Mui-ToolbarDropZone"
         onDragEnter={handleDragEnter}
+        {...rest}
         sx={(theme) => ({
           alignItems: 'center',
           backdropFilter: 'blur(4px)',
@@ -57,6 +60,7 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
           position: 'absolute',
           width: '100%',
           zIndex: 4,
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
         })}
       >
         <Typography fontStyle="italic">

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,17 +1,19 @@
-import Box from '@mui/material/Box';
+import Box, { type BoxProps } from '@mui/material/Box';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -31,11 +33,13 @@ export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
 
   return (
     <Box
-      sx={{
+      {...rest}
+      sx={(theme) => ({
         alignItems: 'center',
         display: 'flex',
         zIndex: 3,
-      }}
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
     >
       {renderToolbarInternalActions?.({
         table,

package/src/toolbar/MRT_TopToolbar.tsx

@@ -1,5 +1,4 @@
 import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
 import { lighten } from '@mui/material/styles';
 import { type Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -15,12 +14,11 @@ import { type MRT_RowData, type MRT_TableInstance } from '../types';
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   alignItems: 'flex-start',
   backgroundColor: lighten(theme.palette.background.default, 0.05),
-  backgroundImage: 'none',
   display: 'grid',
   flexWrap: 'wrap-reverse',
   minHeight: '3.5rem',
   overflow: 'hidden',
-  p: '0 !important',
+  position: 'relative',
   transition: 'all 150ms ease-in-out',
   zIndex: 1,
 });
@@ -58,8 +56,7 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
     isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
 
   return (
-    <Toolbar
-      variant="dense"
+    <Box
       {...toolbarProps}
       ref={(ref: HTMLDivElement) => {
         topToolbarRef.current = ref;
@@ -69,9 +66,9 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
         }
       }}
       sx={(theme) => ({
-        position: isFullScreen ? 'sticky' : undefined,
-        top: isFullScreen ? '0' : undefined,
         ...commonToolbarStyles({ theme }),
+        position: isFullScreen ? 'sticky' : 'relative',
+        top: isFullScreen ? '0' : undefined,
         ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
       })}
     >
@@ -126,6 +123,6 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
           <MRT_TablePagination position="top" table={table} />
         )}
       <MRT_LinearProgressBar isTopToolbar table={table} />
-    </Toolbar>
+    </Box>
   );
 };

package/src/types.ts

@@ -42,6 +42,7 @@ import {
 } from '@tanstack/react-virtual';
 import { type AlertProps } from '@mui/material/Alert';
 import { type AutocompleteProps } from '@mui/material/Autocomplete';
+import { type BoxProps } from '@mui/material/Box';
 import { type ButtonProps } from '@mui/material/Button';
 import { type CheckboxProps } from '@mui/material/Checkbox';
 import { type ChipProps } from '@mui/material/Chip';
@@ -62,7 +63,6 @@ import { type TableFooterProps } from '@mui/material/TableFooter';
 import { type TableHeadProps } from '@mui/material/TableHead';
 import { type TableRowProps } from '@mui/material/TableRow';
 import { type TextFieldProps } from '@mui/material/TextField';
-import { type ToolbarProps } from '@mui/material/Toolbar';
 import { type DatePickerProps } from '@mui/x-date-pickers';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
@@ -771,8 +771,8 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
    */
   memoMode?: 'cells' | 'rows' | 'table-body';
   muiBottomToolbarProps?:
-    | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps)
-    | ToolbarProps;
+    | ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
+    | BoxProps;
   muiCircularProgressProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => CircularProgressProps)
     | CircularProgressProps;
@@ -973,8 +973,8 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     | ((props: { table: MRT_TableInstance<TData> }) => AlertProps)
     | AlertProps;
   muiTopToolbarProps?:
-    | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps)
-    | ToolbarProps;
+    | ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
+    | BoxProps;
   onColumnFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
   onCreatingRowCancel?: (props: {
     row: MRT_Row<TData>;