material-react-table 2.0.0-beta.1 → 2.0.0-beta.11

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -1,21 +1,21 @@
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import { alpha } from '@mui/material/styles';
+import { alpha } from '@mui/material';
+import Box, { type BoxProps } from '@mui/material/Box';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
-import { commonToolbarStyles } from './MRT_TopToolbar';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { getCommonToolbarStyles } from '../style.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_BottomToolbar = <TData extends Record<string, any>>({
+export const MRT_BottomToolbar = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -33,13 +33,15 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
 
   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) {
@@ -51,11 +53,11 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
         }
       }}
       sx={(theme) => ({
-        ...commonToolbarStyles({ theme }),
+        ...getCommonToolbarStyles({ table, theme }),
         bottom: isFullScreen ? '0' : undefined,
         boxShadow: `0 1px 2px -1px ${alpha(
-          theme.palette.common.black,
-          0.1,
+          theme.palette.grey[700],
+          0.5,
         )} inset`,
         left: 0,
         position: isFullScreen ? 'fixed' : 'relative',
@@ -103,6 +105,6 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
             )}
         </Box>
       </Box>
-    </Toolbar>
+    </Box>
   );
 };

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,31 +1,37 @@
 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_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends LinearProgressProps {
   isTopToolbar: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
+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

@@ -7,18 +7,25 @@ import PaginationItem from '@mui/material/PaginationItem';
 import Select from '@mui/material/Select';
 import Typography from '@mui/material/Typography';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends MRT_RowData>
+  extends Partial<
+    PaginationProps & {
+      rowsPerPageOptions?: number[];
+      showRowsPerPage?: boolean;
+    }
+  > {
   position?: 'bottom' | 'top';
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
+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 Record<string, any> = {}>({
     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 Record<string, any> = {}>({
     showFirstButton = showFirstLastPageButtons,
     showLastButton = showFirstLastPageButtons,
     showRowsPerPage = true,
-    ...rest
+    ..._rest
   } = paginationProps ?? {};
 
   return (
@@ -73,7 +83,7 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
             ? '3rem'
             : undefined,
         position: 'relative',
-        px: '4px',
+        px: '8px',
         py: '12px',
         zIndex: 2,
       }}
@@ -119,13 +129,13 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
           )}
           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';
@@ -7,16 +7,17 @@ import Collapse from '@mui/material/Collapse';
 import Stack from '@mui/material/Stack';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_SelectCheckbox } from '../inputs';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends AlertProps {
   stackAlertBanner?: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
+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 Record<string, any>>({
   } = 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 { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarDropZone = <TData extends Record<string, any>>({
+export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -42,6 +44,7 @@ export const MRT_ToolbarDropZone = <TData extends Record<string, any>>({
       <Box
         className="Mui-ToolbarDropZone"
         onDragEnter={handleDragEnter}
+        {...rest}
         sx={(theme) => ({
           alignItems: 'center',
           backdropFilter: 'blur(4px)',
@@ -57,6 +60,7 @@ export const MRT_ToolbarDropZone = <TData extends Record<string, any>>({
           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 { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarInternalButtons = <TData extends Record<string, any>>({
+export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -31,11 +33,13 @@ export const MRT_ToolbarInternalButtons = <TData extends Record<string, any>>({
 
   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,7 +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';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TablePagination } from './MRT_TablePagination';
@@ -10,26 +7,14 @@ import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
-import { type MRT_TableInstance } from '../types';
+import { getCommonToolbarStyles } from '../style.utils';
+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',
-  transition: 'all 150ms ease-in-out',
-  zIndex: 1,
-});
-
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TopToolbar = <TData extends Record<string, any>>({
+export const MRT_TopToolbar = <TData extends MRT_RowData>({
   table,
 }: Props<TData>) => {
   const {
@@ -58,8 +43,7 @@ export const MRT_TopToolbar = <TData extends Record<string, any>>({
     isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
 
   return (
-    <Toolbar
-      variant="dense"
+    <Box
       {...toolbarProps}
       ref={(ref: HTMLDivElement) => {
         topToolbarRef.current = ref;
@@ -69,9 +53,9 @@ export const MRT_TopToolbar = <TData extends Record<string, any>>({
         }
       }}
       sx={(theme) => ({
-        position: isFullScreen ? 'sticky' : undefined,
+        ...getCommonToolbarStyles({ table, theme }),
+        position: isFullScreen ? 'sticky' : 'relative',
         top: isFullScreen ? '0' : undefined,
-        ...commonToolbarStyles({ theme }),
         ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
       })}
     >
@@ -89,6 +73,7 @@ export const MRT_TopToolbar = <TData extends Record<string, any>>({
           alignItems: 'flex-start',
           boxSizing: 'border-box',
           display: 'flex',
+          gap: '0.5rem',
           justifyContent: 'space-between',
           p: '0.5rem',
           position: stackAlertBanner ? 'relative' : 'absolute',
@@ -104,8 +89,10 @@ export const MRT_TopToolbar = <TData extends Record<string, any>>({
         {enableToolbarInternalActions ? (
           <Box
             sx={{
+              alignItems: 'center',
               display: 'flex',
               flexWrap: 'wrap-reverse',
+              gap: '0.5rem',
               justifyContent: 'flex-end',
             }}
           >
@@ -126,6 +113,6 @@ export const MRT_TopToolbar = <TData extends Record<string, any>>({
           <MRT_TablePagination position="top" table={table} />
         )}
       <MRT_LinearProgressBar isTopToolbar table={table} />
-    </Toolbar>
+    </Box>
   );
 };