material-react-table 0.17.0 → 0.18.1

package/src/table/MRT_TableRoot.tsx

@@ -73,6 +73,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [isFullScreen, setIsFullScreen] = useState(
     initialState?.isFullScreen ?? false,
   );
+  const [showAlertBanner, setShowAlertBanner] = useState(
+    props.initialState?.showAlertBanner ?? false,
+  );
   const [showFilters, setShowFilters] = useState(
     initialState?.showFilters ?? false,
   );
@@ -241,6 +244,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         currentGlobalFilterFn,
         density,
         isFullScreen,
+        showAlertBanner,
         showFilters,
         showGlobalFilter,
         ...props.state,
@@ -256,34 +260,11 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
     setDensity: props.onDensityChange ?? setDensity,
     setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
+    setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
     setShowFilters: props.onShowFiltersChange ?? setShowFilters,
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
   } as MRT_TableInstance;
 
-  useEffect(() => {
-    props?.onColumnOrderChanged?.({
-      columnOrder: instance.getState().columnOrder,
-      //@ts-ignore
-      instance,
-    });
-  }, [instance.getState().columnOrder]);
-
-  useEffect(() => {
-    props?.onColumnPinningChanged?.({
-      columnPinning: instance.getState().columnPinning,
-      //@ts-ignore
-      instance,
-    });
-  }, [instance.getState().columnPinning]);
-
-  useEffect(() => {
-    props?.onColumnVisibilityChanged?.({
-      columnPinning: instance.getState().columnVisibility,
-      //@ts-ignore
-      instance,
-    });
-  }, [instance.getState().columnVisibility]);
-
   return (
     <>
       <Dialog

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,5 +1,5 @@
 import React, { FC, Fragment } from 'react';
-import { Alert, Box, Chip, Collapse } from '@mui/material';
+import { Alert, AlertTitle, Box, Chip, Collapse } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
@@ -18,7 +18,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
     options: { localization, muiTableToolbarAlertBannerProps },
   } = instance;
 
-  const { grouping } = getState();
+  const { grouping, showAlertBanner } = getState();
 
   const alertProps =
     muiTableToolbarAlertBannerProps instanceof Function
@@ -57,12 +57,13 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
 
   return (
     <Collapse
-      in={!!selectMessage || !!groupedByMessage}
+      in={showAlertBanner || !!selectMessage || !!groupedByMessage}
       timeout={stackAlertBanner ? 200 : 0}
     >
       <Alert
         color="info"
         icon={false}
+        {...alertProps}
         sx={{
           borderRadius: 0,
           fontSize: '1rem',
@@ -75,9 +76,13 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
           zIndex: 2,
           ...alertProps?.sx,
         }}
-        {...alertProps}
       >
+        {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
         <Box sx={{ p: '0.5rem 1rem' }}>
+          {alertProps?.children}
+          {alertProps?.children && (selectMessage || groupedByMessage) && (
+            <br />
+          )}
           {selectMessage}
           {selectMessage && groupedByMessage && <br />}
           {groupedByMessage}