material-react-table 0.4.8 → 0.5.1

package/src/head/MRT_TableHeadCell.tsx

@@ -1,54 +1,27 @@
 import React, { FC } from 'react';
 import {
-  TableCell as MuiTableCell,
+  TableCell,
   TableSortLabel,
-  styled,
-  Divider as MuiDivider,
+  Divider,
   Collapse,
   Tooltip,
+  Box,
 } from '@mui/material';
 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 {
@@ -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,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
-import { TableRow } from '@mui/material';
+import { TableCell, TableRow } from '@mui/material';
 import {
-  MRT_StyledTableHeadCell,
+  commonTableHeadCellStyles,
   MRT_TableHeadCell,
 } from './MRT_TableHeadCell';
 import { useMRT } from '../useMRT';
@@ -18,6 +18,7 @@ interface Props {
 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' &&

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,8 +1,8 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, Tooltip } from '@mui/material';
+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?: MRT_Row;
@@ -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,12 +1,12 @@
 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 { MRT_HeaderGroup } from '..';
 
-const MenuItem = styled(MuiMenuItem)({
+const commonMenuItemStyles = {
   display: 'flex',
   gap: '0.75rem',
-});
+};
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -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,13 +1,8 @@
 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 { MRT_Row } from '..';
 
-const MenuItem = styled(MuiMenuItem)({
-  display: 'flex',
-  gap: '0.75rem',
-});
-
 interface Props {
   anchorEl: HTMLElement | null;
   row: MRT_Row;
@@ -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

@@ -28,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 />}

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> = () => {
@@ -77,16 +44,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>
   );

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,28 +1,10 @@
 import React, { FC } from 'react';
-import { alpha, styled, Toolbar as MuiToolbar } from '@mui/material';
+import { alpha, Toolbar } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 
-const Toolbar = styled(MuiToolbar, {
-  shouldForwardProp: (prop) => prop !== 'fullScreen',
-})<{ fullScreen?: boolean }>(({ fullScreen, theme }) => ({
-  backgroundColor: theme.palette.background.default,
-  backgroundImage: `linear-gradient(${alpha(
-    theme.palette.common.white,
-    0.05,
-  )},${alpha(theme.palette.common.white, 0.05)})`,
-  bottom: fullScreen ? '0' : undefined,
-  display: 'flex',
-  justifyContent: 'space-between',
-  overflowY: 'hidden',
-  padding: '0 0.5rem !important',
-  position: fullScreen ? 'fixed' : undefined,
-  width: 'calc(100% - 1rem)',
-  zIndex: 1,
-}));
-
 interface Props {}
 
 export const MRT_ToolbarBottom: FC<Props> = () => {
@@ -43,7 +25,28 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
       : muiTableToolbarBottomProps;
 
   return (
-    <Toolbar fullScreen={fullScreen} variant="dense" {...toolbarProps}>
+    <Toolbar
+      variant="dense"
+      {...toolbarProps}
+      sx={(theme) =>
+        ({
+          backgroundColor: theme.palette.background.default,
+          backgroundImage: `linear-gradient(${alpha(
+            theme.palette.common.white,
+            0.05,
+          )},${alpha(theme.palette.common.white, 0.05)})`,
+          bottom: fullScreen ? '0' : undefined,
+          display: 'flex',
+          justifyContent: 'space-between',
+          overflowY: 'hidden',
+          p: '0 0.5rem !important',
+          position: fullScreen ? 'fixed' : undefined,
+          width: 'calc(100% - 1rem)',
+          zIndex: 1,
+          ...toolbarProps?.sx,
+        } as any)
+      }
+    >
       {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
         <MRT_ToolbarInternalButtons />
       ) : (

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,17 +1,11 @@
 import React, { FC } from 'react';
-import { styled } from '@mui/material';
-import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
+import { Box } from '@mui/material';
+import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
-import { useMRT } from '../useMRT';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
+import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
-import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
-
-const ToolbarButtonsContainer = styled('div')({
-  display: 'flex',
-  gap: '0.5rem',
-  alignItems: 'center',
-});
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
@@ -41,12 +35,19 @@ export const MRT_ToolbarInternalButtons: FC<Props> = () => {
   }
 
   return (
-    <ToolbarButtonsContainer>
+    <Box
+      sx={{
+        display: 'flex',
+        gap: '0.5rem',
+        alignItems: 'center',
+        p: '0 0.5rem',
+      }}
+    >
       {!disableGlobalFilter && <MRT_ToggleSearchButton />}
       {!disableFilters && <MRT_ToggleFiltersButton />}
       {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
       {!disableDensePaddingToggle && <MRT_ToggleDensePaddingButton />}
       {!disableFullScreenToggle && <MRT_FullScreenToggleButton />}
-    </ToolbarButtonsContainer>
+    </Box>
   );
 };