material-react-table 0.4.7 → 0.5.0

package/src/head/MRT_TableHeadCell.tsx

@@ -1,58 +1,31 @@
 import React, { FC } from 'react';
 import {
-  TableCell as MuiTableCell,
+  TableCell,
   TableSortLabel,
-  styled,
-  Divider as MuiDivider,
+  Divider,
   Collapse,
   Tooltip,
+  Box,
 } from '@mui/material';
-import { HeaderGroup } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
+import { MRT_HeaderGroup } from '..';
 
-export const MRT_StyledTableHeadCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) =>
-    prop !== 'densePadding' && prop !== 'enableColumnResizing',
-})<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
-  ({ densePadding, enableColumnResizing }) => ({
-    fontWeight: 'bold',
-    height: '100%',
-    padding: densePadding ? '0.5rem' : '1rem',
-    paddingTop: densePadding ? '0.75rem' : '1.25rem',
-    transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
-    verticalAlign: 'text-top',
-  }),
-);
-
-const TableCellWrapper = styled('div')({
-  alignContent: 'space-between',
-  display: 'grid',
+export const commonTableHeadCellStyles = (
+  densePadding: boolean,
+  enableColumnResizing?: boolean,
+) => ({
+  fontWeight: 'bold',
   height: '100%',
-});
-
-const TableCellTopContents = styled('div')({
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'flex-start',
-});
-
-const CellFlexItem = styled('span')({
-  alignItems: 'center',
-  display: 'flex',
-  flexWrap: 'nowrap',
-});
-
-const Divider = styled(MuiDivider)({
-  borderRightWidth: '2px',
-  borderRadius: '2px',
-  maxHeight: '2rem',
+  p: densePadding ? '0.5rem' : '1rem',
+  pt: densePadding ? '0.75rem' : '1.25rem',
+  transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+  verticalAlign: 'text-top',
 });
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
@@ -85,8 +58,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
     ...column.getHeaderProps(),
     style: {
       ...column.getHeaderProps().style,
-      ...(mTableHeadCellProps?.style ?? {}),
-      ...(mcTableHeadCellProps?.style ?? {}),
+      ...mTableHeadCellProps?.style,
+      ...mcTableHeadCellProps?.style,
     },
   };
 
@@ -103,17 +76,30 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
       );
 
   return (
-    <MRT_StyledTableHeadCell
+    <TableCell
       align={isParentHeader ? 'center' : 'left'}
-      densePadding={densePadding}
-      enableColumnResizing={enableColumnResizing}
       {...tableCellProps}
+      sx={{
+        ...commonTableHeadCellStyles(densePadding, enableColumnResizing),
+        ...tableCellProps?.sx,
+      }}
     >
-      <TableCellWrapper>
-        <TableCellTopContents
-          style={{ justifyContent: isParentHeader ? 'center' : undefined }}
+      <Box
+        sx={{ alignContent: 'space-between', display: 'grid', height: '100%' }}
+      >
+        <Box
+          sx={{
+            alignItems: 'flex-start',
+            display: 'flex',
+            justifyContent: isParentHeader ? 'center' : 'space-between',
+            width: '100%',
+          }}
         >
-          <CellFlexItem {...column.getSortByToggleProps()} title={undefined}>
+          <Box
+            {...column.getSortByToggleProps()}
+            sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}
+            title={undefined}
+          >
             {column.render('Header')}
             {!isParentHeader && column.canSort && (
               <Tooltip arrow title={sortTooltip}>
@@ -124,8 +110,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
                 />
               </Tooltip>
             )}
-          </CellFlexItem>
-          <CellFlexItem>
+          </Box>
+          <Box
+            sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}
+          >
             {!disableColumnActions && !isParentHeader && (
               <MRT_ToggleColumnActionMenuButton column={column} />
             )}
@@ -135,16 +123,21 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
                 orientation="vertical"
                 onDoubleClick={() => tableInstance.resetResizing()}
                 {...column.getResizerProps()}
+                sx={{
+                  borderRightWidth: '2px',
+                  borderRadius: '2px',
+                  maxHeight: '2rem',
+                }}
               />
             )}
-          </CellFlexItem>
-        </TableCellTopContents>
+          </Box>
+        </Box>
         {!disableFilters && column.canFilter && (
           <Collapse in={showFilters}>
             <MRT_FilterTextField column={column} />
           </Collapse>
         )}
-      </TableCellWrapper>
-    </MRT_StyledTableHeadCell>
+      </Box>
+    </TableCell>
   );
 };

package/src/head/MRT_TableHeadCellActions.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
+import { TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_StyledTableHeadCell } from './MRT_TableHeadCell';
+import { commonTableHeadCellStyles } from './MRT_TableHeadCell';
 
 interface Props {}
 
@@ -8,11 +9,11 @@ export const MRT_TableHeadCellActions: FC<Props> = () => {
   const { densePadding, localization } = useMRT();
 
   return (
-    <MRT_StyledTableHeadCell
-      densePadding={densePadding}
+    <TableCell
       style={{ textAlign: 'center' }}
+      sx={{ ...commonTableHeadCellStyles(densePadding), textAlign: 'center' }}
     >
       {localization.actionsHeadColumnTitle}
-    </MRT_StyledTableHeadCell>
+    </TableCell>
   );
 };

package/src/head/MRT_TableHeadRow.tsx

@@ -1,8 +1,7 @@
 import React, { FC, useMemo } from 'react';
-import { TableRow } from '@mui/material';
-import { HeaderGroup } from 'react-table';
+import { TableCell, TableRow } from '@mui/material';
 import {
-  MRT_StyledTableHeadCell,
+  commonTableHeadCellStyles,
   MRT_TableHeadCell,
 } from './MRT_TableHeadCell';
 import { useMRT } from '../useMRT';
@@ -10,14 +9,16 @@ import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { MRT_TableHeadCellActions } from './MRT_TableHeadCellActions';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  headerGroup: HeaderGroup;
+  headerGroup: MRT_HeaderGroup;
 }
 
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
+    densePadding,
     disableExpandAll,
     enableRowActions,
     enableRowEditing,
@@ -44,7 +45,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
     ...headerGroup.getHeaderGroupProps(),
     style: {
       ...headerGroup.getHeaderGroupProps().style,
-      ...(mTableHeadRowProps?.style ?? {}),
+      ...mTableHeadRowProps?.style,
     },
   };
 
@@ -54,7 +55,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <MRT_StyledTableHeadCell>#</MRT_StyledTableHeadCell>
+          <TableCell sx={{...commonTableHeadCellStyles(densePadding)}}>#</TableCell>
         ))}
       {(enableRowActions || enableRowEditing) &&
         positionActionsColumn === 'first' &&
@@ -81,7 +82,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
           <MRT_TableSpacerCell width="1rem" />
         )
       ) : null}
-      {headerGroup.headers.map((column: HeaderGroup) => (
+      {headerGroup.headers.map((column: MRT_HeaderGroup) => (
         <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
       ))}
       {(enableRowActions || enableRowEditing) &&

package/src/index.tsx

@@ -1,3 +1,5 @@
 import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
 export * from './MaterialReactTable';
+
+

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,10 +1,10 @@
 import React, { ChangeEvent, FC } from 'react';
 import { TextField } from '@mui/material';
-import { Cell } from 'react-table';
 import { useMRT } from '../useMRT';
+import { MRT_Cell } from '..';
 
 interface Props {
-  cell: Cell;
+  cell: MRT_Cell;
 }
 
 export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,10 +1,11 @@
 import React, { ChangeEvent, FC, useState } from 'react';
 import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
-import { HeaderGroup, useAsyncDebounce } from 'react-table';
+import { useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_FilterTextField: FC<Props> = ({ column }) => {

package/src/inputs/MRT_SearchTextField.tsx

@@ -1,18 +1,8 @@
 import React, { ChangeEvent, FC, useState } from 'react';
-import {
-  Collapse,
-  IconButton,
-  InputAdornment,
-  styled,
-  TextField as MuiTextField,
-} from '@mui/material';
+import { Collapse, IconButton, InputAdornment, TextField } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { useAsyncDebounce } from 'react-table';
 
-const TextField = styled(MuiTextField)({
-  justifySelf: 'end',
-});
-
 interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
@@ -72,6 +62,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
           ),
         }}
         {...muiSearchTextFieldProps}
+        sx={{ justifySelf: 'end', ...muiSearchTextFieldProps?.sx }}
       />
     </Collapse>
   );

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,11 +1,11 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, Tooltip } from '@mui/material';
-import { Row } from 'react-table';
+import { Checkbox, TableCell, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+import { MRT_Row } from '..';
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
-  row?: Row;
+  row?: MRT_Row;
   selectAll?: boolean;
 }
 
@@ -33,7 +33,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
     : row?.getToggleRowSelectedProps();
 
   return (
-    <MRT_TableButtonCell densePadding={densePadding}>
+    <TableCell sx={commonTableBodyButtonCellStyles(densePadding)} >
       <Tooltip
         arrow
         enterDelay={1000}
@@ -55,6 +55,6 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
           title={undefined}
         />
       </Tooltip>
-    </MRT_TableButtonCell>
+    </TableCell>
   );
 };

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,16 +1,16 @@
 import React, { FC } from 'react';
-import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
+import { Divider, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { HeaderGroup } from 'react-table';
+import { MRT_HeaderGroup } from '..';
 
-const MenuItem = styled(MuiMenuItem)({
+const commonMenuItemStyles = {
   display: 'flex',
   gap: '0.75rem',
-});
+};
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 
@@ -88,6 +88,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             key={1}
             disabled={!column.isSorted}
             onClick={handleClearSort}
+            sx={commonMenuItemStyles}
           >
             <ClearAllIcon /> {localization.columnActionMenuItemClearSort}
           </MenuItem>,
@@ -95,6 +96,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             key={2}
             disabled={column.isSorted && !column.isSortedDesc}
             onClick={handleSortAsc}
+            sx={commonMenuItemStyles}
           >
             <SortIcon />{' '}
             {localization.columnActionMenuItemSortAsc?.replace(
@@ -106,6 +108,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             key={3}
             disabled={column.isSorted && column.isSortedDesc}
             onClick={handleSortDesc}
+            sx={commonMenuItemStyles}
           >
             <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
             {localization.columnActionMenuItemSortDesc?.replace(
@@ -117,7 +120,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {!disableFilters &&
         column.canFilter && [
           <Divider key={0} />,
-          <MenuItem key={1} onClick={handleFilterByColumn}>
+          <MenuItem
+            key={1}
+            onClick={handleFilterByColumn}
+            sx={commonMenuItemStyles}
+          >
             <FilterListIcon />{' '}
             {localization.filterTextFieldPlaceholder?.replace(
               '{column}',
@@ -128,7 +135,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {enableColumnGrouping &&
         column.canGroupBy && [
           <Divider key={1} />,
-          <MenuItem key={2} onClick={handleGroupByColumn}>
+          <MenuItem
+            key={2}
+            onClick={handleGroupByColumn}
+            sx={commonMenuItemStyles}
+          >
             <DynamicFeedIcon />{' '}
             {localization[
               column.isGrouped
@@ -139,7 +150,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         ]}
       {!disableColumnHiding && [
         <Divider key={0} />,
-        <MenuItem key={1} onClick={handleHideColumn}>
+        <MenuItem key={1} onClick={handleHideColumn} sx={commonMenuItemStyles}>
           <VisibilityOffIcon />{' '}
           {localization.columnActionMenuItemHideColumn?.replace(
             '{column}',

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,16 +1,11 @@
 import React, { FC } from 'react';
-import { Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
+import { Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { Row } from 'react-table';
-
-const MenuItem = styled(MuiMenuItem)({
-  display: 'flex',
-  gap: '0.75rem',
-});
+import { MRT_Row } from '..';
 
 interface Props {
   anchorEl: HTMLElement | null;
-  row: Row;
+  row: MRT_Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   handleEdit: () => void;
 }
@@ -36,7 +31,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
       onClose={() => setAnchorEl(null)}
     >
       {enableRowEditing && (
-        <MenuItem onClick={handleEdit}>
+        <MenuItem sx={{ display: 'flex', gap: '0.75rem' }} onClick={handleEdit}>
           <EditIcon /> {localization.rowActionMenuItemEdit}
         </MenuItem>
       )}

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { ColumnInstance } from 'react-table';
+import { MRT_ColumnInstance } from '..';
 
 interface Props {
-  column: ColumnInstance;
+  column: MRT_ColumnInstance;
 }
 
 export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
@@ -27,7 +28,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
 
   return (
     <>
-      <MenuItem style={{ paddingLeft: `${(column.depth + 0.5) * 2}rem` }}>
+      <MenuItem sx={{ pl: `${(column.depth + 0.5) * 2}rem` }}>
         <FormControlLabel
           checked={switchChecked}
           control={<Switch />}
@@ -35,7 +36,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>
-      {column.columns?.map((c, i) => (
+      {column.columns?.map((c: MRT_ColumnInstance, i) => (
         <MRT_ShowHideColumnsMenu key={`${i}-${c.id}`} column={c} />
       ))}
     </>

package/src/table/MRT_Table.tsx

@@ -16,7 +16,7 @@ export const MRT_Table: FC<Props> = () => {
     ...tableInstance.getTableProps(),
     style: {
       ...tableInstance.getTableProps().style,
-      ...(muiTableProps?.style ?? {}),
+      ...muiTableProps?.style,
     },
   };
 

package/src/table/MRT_TableContainer.tsx

@@ -1,43 +1,10 @@
 import React, { FC, useEffect, useRef } from 'react';
-import {
-  CircularProgress,
-  LinearProgress,
-  Paper,
-  TableContainer as MuiTableContainer,
-  alpha,
-  styled,
-} from '@mui/material';
+import { LinearProgress, Paper, TableContainer, Collapse } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Table } from './MRT_Table';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
 import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 
-const TableContainer = styled(MuiTableContainer, {
-  shouldForwardProp: (prop) => prop !== 'fullScreen',
-})<{ fullScreen?: boolean; component: any }>(({ fullScreen }) => ({
-  bottom: fullScreen ? '0' : undefined,
-  height: fullScreen ? '100%' : undefined,
-  left: fullScreen ? '0' : undefined,
-  margin: fullScreen ? '0' : undefined,
-  position: fullScreen ? 'fixed' : undefined,
-  right: fullScreen ? '0' : undefined,
-  top: fullScreen ? '0' : undefined,
-  transition: 'all 0.2s ease-in-out',
-  width: fullScreen ? '100vw' : undefined,
-  zIndex: fullScreen ? 1200 : 1,
-}));
-
-const CircularProgressWrapper = styled('div')(({ theme }) => ({
-  alignItems: 'center',
-  backgroundColor: alpha(theme.palette.background.paper, 0.5),
-  display: 'grid',
-  height: '100%',
-  justifyContent: 'center',
-  margin: 'auto',
-  position: 'absolute',
-  width: 'calc(100% - 2rem)',
-}));
-
 interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
@@ -62,9 +29,8 @@ export const MRT_TableContainer: FC<Props> = () => {
     if (typeof window !== 'undefined') {
       if (fullScreen) {
         document.body.style.overflow = 'hidden';
-      } else {
-        document.body.style.overflow =
-          originalBodyOverflowStyle.current ?? 'auto';
+      } else if (originalBodyOverflowStyle.current) {
+        document.body.style.overflow = originalBodyOverflowStyle.current;
       }
     }
   }, [fullScreen]);
@@ -77,16 +43,25 @@ export const MRT_TableContainer: FC<Props> = () => {
   return (
     <TableContainer
       component={Paper}
-      fullScreen={fullScreen}
       {...tableContainerProps}
+      sx={{
+        bottom: fullScreen ? '0' : undefined,
+        height: fullScreen ? '100%' : undefined,
+        left: fullScreen ? '0' : undefined,
+        m: fullScreen ? '0' : undefined,
+        position: fullScreen ? 'fixed' : undefined,
+        right: fullScreen ? '0' : undefined,
+        top: fullScreen ? '0' : undefined,
+        transition: 'all 0.2s ease-in-out',
+        width: fullScreen ? '100vw' : undefined,
+        zIndex: fullScreen ? 1200 : 1,
+        ...tableContainerProps?.sx,
+      }}
     >
       {!hideToolbarTop && <MRT_ToolbarTop />}
-      {isFetching && <LinearProgress />}
-      {isLoading && (
-        <CircularProgressWrapper>
-          <CircularProgress aria-busy="true" aria-label="Loading data" />
-        </CircularProgressWrapper>
-      )}
+      <Collapse in={isFetching || isLoading} unmountOnExit>
+        <LinearProgress />
+      </Collapse>
       <MRT_Table />
       {!hideToolbarBottom && <MRT_ToolbarBottom />}
     </TableContainer>

package/src/table/MRT_TableSpacerCell.tsx

@@ -17,10 +17,11 @@ export const MRT_TableSpacerCell: FC<Props> = ({ width }) => {
   const tableCellProps = {
     ...mTableBodyCellrops,
     style: {
-      width,
-      ...(mTableBodyCellrops?.style ?? {}),
+      ...mTableBodyCellrops?.style,
     },
   };
 
-  return <TableCell {...tableCellProps} />;
+  return (
+    <TableCell {...tableCellProps} sx={{ width, ...tableCellProps?.sx }} />
+  );
 };

package/src/toolbar/MRT_TablePagination.tsx

@@ -32,8 +32,13 @@ export const MRT_TablePagination: FC<Props> = () => {
       showLastButton={
         tableInstance.rows.length / tableInstance.state.pageSize > 2
       }
-      style={{ padding: 0, position: 'relative', zIndex: 2 }}
       {...tablePaginationProps}
+      sx={{
+        p: 0,
+        position: 'relative',
+        zIndex: 2,
+        ...tablePaginationProps?.sx,
+      }}
     />
   );
 };

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,31 +1,7 @@
 import React, { FC, Fragment } from 'react';
-import {
-  Alert as MuiAlert,
-  Chip,
-  Collapse,
-  styled,
-  useMediaQuery,
-} from '@mui/material';
+import { Alert, Box, Chip, Collapse, useMediaQuery } from '@mui/material';
 import { useMRT } from '../useMRT';
 
-const Alert = styled(MuiAlert, {
-  shouldForwardProp: (prop) =>
-    prop !== 'displayAbsolute' && prop !== 'toolbarPosition',
-})<{ displayAbsolute?: boolean; toolbarPosition?: 'top' | 'bottom' }>(
-  ({ displayAbsolute, toolbarPosition }) => ({
-    borderRadius: 0,
-    fontSize: '1rem',
-    left: 0,
-    marginLeft: !displayAbsolute ? '-0.5rem' : undefined,
-    padding: toolbarPosition === 'bottom' ? '0 1rem' : '0.5rem 1.25rem',
-    position: displayAbsolute ? 'absolute' : 'relative',
-    right: 0,
-    top: 0,
-    width: `calc(100% - ${displayAbsolute ? '2.5rem' : '1.5rem'})`,
-    zIndex: 2,
-  }),
-);
-
 interface Props {}
 
 export const MRT_ToolbarAlertBanner: FC<Props> = () => {
@@ -89,13 +65,27 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
       timeout={displayAbsolute ? 0 : 200}
     >
       <Alert
-        displayAbsolute={displayAbsolute}
-        icon={false}
         color="info"
+        icon={false}
+        sx={{
+          borderRadius: 0,
+          fontSize: '1rem',
+          left: 0,
+          p: 0,
+          position: displayAbsolute ? 'absolute' : 'relative',
+          right: 0,
+          minHeight: '3.5rem',
+          top: 0,
+          width: '100%',
+          zIndex: 2,
+          ...alertProps?.sx,
+        }}
         {...alertProps}
       >
-        {selectMessage}
-        {groupedByMessage}
+        <Box sx={{ p: '0.5rem 1rem' }}>
+          {selectMessage}
+          {groupedByMessage}
+        </Box>
       </Alert>
     </Collapse>
   );