material-react-table 0.3.4 → 0.4.2

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { HeaderGroup } from 'react-table';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import SortIcon from '@mui/icons-material/Sort';
@@ -19,15 +19,19 @@ interface Props {
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 
-export const MRT_ColumnActionMenu: FC<Props> = ({ anchorEl, column, setAnchorEl }) => {
+export const MRT_ColumnActionMenu: FC<Props> = ({
+  anchorEl,
+  column,
+  setAnchorEl,
+}) => {
   const {
     disableColumnHiding,
-    enableColumnGrouping,
+    disableFilters,
     disableSortBy,
+    enableColumnGrouping,
     localization,
-    disableFilters,
     setShowFilters,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const handleClearSort = () => {
     column.clearSortBy();
@@ -61,7 +65,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({ anchorEl, column, setAnchorEl
         document
           .getElementById(
             // @ts-ignore
-            column.muiTableHeadCellFilterTextFieldProps?.id ?? `filter-${column.id}-column`,
+            column.muiTableHeadCellFilterTextFieldProps?.id ??
+              `filter-${column.id}-column`,
           )
           ?.focus(),
       200,
@@ -70,10 +75,18 @@ export const MRT_ColumnActionMenu: FC<Props> = ({ anchorEl, column, setAnchorEl
   };
 
   return (
-    <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={() => setAnchorEl(null)}>
+    <Menu
+      anchorEl={anchorEl}
+      open={!!anchorEl}
+      onClose={() => setAnchorEl(null)}
+    >
       {!disableSortBy &&
         column.canSort && [
-          <MenuItem key={1} disabled={!column.isSorted} onClick={handleClearSort}>
+          <MenuItem
+            key={1}
+            disabled={!column.isSorted}
+            onClick={handleClearSort}
+          >
             <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
           </MenuItem>,
           <MenuItem
@@ -82,7 +95,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({ anchorEl, column, setAnchorEl
             onClick={handleSortAsc}
           >
             <SortIcon />{' '}
-            {localization?.columnActionMenuItemSortAsc?.replace('{column}', String(column.Header))}
+            {localization?.columnActionMenuItemSortAsc?.replace(
+              '{column}',
+              String(column.Header),
+            )}
           </MenuItem>,
           <MenuItem
             key={3}
@@ -90,7 +106,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({ anchorEl, column, setAnchorEl
             onClick={handleSortDesc}
           >
             <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-            {localization?.columnActionMenuItemSortDesc?.replace('{column}', String(column.Header))}
+            {localization?.columnActionMenuItemSortDesc?.replace(
+              '{column}',
+              String(column.Header),
+            )}
           </MenuItem>,
         ]}
       {!disableFilters &&
@@ -98,7 +117,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({ anchorEl, column, setAnchorEl
           <Divider key={0} />,
           <MenuItem key={1} onClick={handleFilterByColumn}>
             <FilterIcon />{' '}
-            {localization?.filterTextFieldPlaceholder?.replace('{column}', String(column.Header))}
+            {localization?.filterTextFieldPlaceholder?.replace(
+              '{column}',
+              String(column.Header),
+            )}
           </MenuItem>,
         ]}
       {enableColumnGrouping &&
@@ -107,7 +129,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({ anchorEl, column, setAnchorEl
           <MenuItem key={2} onClick={handleGroupByColumn}>
             <DynamicFeedIcon />{' '}
             {localization?.[
-              column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy'
+              column.isGrouped
+                ? 'columnActionMenuItemUnGroupBy'
+                : 'columnActionMenuItemGroupBy'
             ]?.replace('{column}', String(column.Header))}
           </MenuItem>,
         ]}
@@ -115,7 +139,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({ anchorEl, column, setAnchorEl
         <Divider key={0} />,
         <MenuItem key={1} onClick={handleHideColumn}>
           <VisibilityOffIcon />{' '}
-          {localization?.columnActionMenuItemHideColumn?.replace('{column}', String(column.Header))}
+          {localization?.columnActionMenuItemHideColumn?.replace(
+            '{column}',
+            String(column.Header),
+          )}
         </MenuItem>,
       ]}
     </Menu>

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
 import EditIcon from '@mui/icons-material/Edit';
 
@@ -16,18 +16,33 @@ interface Props {
   handleEdit: () => void;
 }
 
-export const MRT_RowActionMenu: FC<Props> = ({ anchorEl, row, handleEdit, setAnchorEl }) => {
-  const { enableRowEditing, localization, renderRowActionMenuItems, tableInstance } =
-    useMaterialReactTable();
+export const MRT_RowActionMenu: FC<Props> = ({
+  anchorEl,
+  row,
+  handleEdit,
+  setAnchorEl,
+}) => {
+  const {
+    enableRowEditing,
+    localization,
+    renderRowActionMenuItems,
+    tableInstance,
+  } = useMRT();
 
   return (
-    <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={() => setAnchorEl(null)}>
+    <Menu
+      anchorEl={anchorEl}
+      open={!!anchorEl}
+      onClose={() => setAnchorEl(null)}
+    >
       {enableRowEditing && (
         <MenuItem onClick={handleEdit}>
           <EditIcon /> {localization?.rowActionMenuItemEdit}
         </MenuItem>
       )}
-      {renderRowActionMenuItems?.(row, tableInstance, () => setAnchorEl(null)) ?? null}
+      {renderRowActionMenuItems?.(row, tableInstance, () =>
+        setAnchorEl(null),
+      ) ?? null}
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
-import { FormControlLabel, MenuItem, Switch, Typography } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { ColumnInstance } from 'react-table';
 
 interface Props {
@@ -8,23 +7,33 @@ interface Props {
 }
 
 export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
-  const { maxColumnDepth } = useMaterialReactTable();
+  const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
-  const isMaxDepth = column.depth === maxColumnDepth;
+  const allChildColumnsVisible =
+    isParentHeader &&
+    !!column.columns?.every((childColumn) => childColumn.isVisible);
+
+  const switchChecked = column.isVisible ?? allChildColumnsVisible;
+
+  const handleToggleColumnHidden = (column: ColumnInstance) => {
+    if (isParentHeader) {
+      column?.columns?.forEach?.((childColumn) => {
+        childColumn.toggleHidden(switchChecked);
+      });
+    } else {
+      column.toggleHidden();
+    }
+  };
 
   return (
     <>
-      <MenuItem style={{ paddingLeft: `${column.depth + 1}rem` }}>
-        {isMaxDepth ? (
-          <FormControlLabel
-            checked={column.isVisible}
-            control={<Switch />}
-            label={column.Header as string}
-            onChange={() => isMaxDepth && column.toggleHidden()}
-          />
-        ) : (
-          <Typography>{column.Header}</Typography>
-        )}
+      <MenuItem style={{ paddingLeft: `${(column.depth + 0.5) * 2}rem` }}>
+        <FormControlLabel
+          checked={switchChecked}
+          control={<Switch />}
+          label={column.Header as string}
+          onChange={() => handleToggleColumnHidden(column)}
+        />
       </MenuItem>
       {column.columns?.map((c, i) => (
         <MRT_ShowHideColumnsMenu key={`${i}-${c.id}`} column={c} />

package/src/table/MRT_Table.tsx

@@ -3,12 +3,13 @@ import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_Table: FC<Props> = () => {
-  const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } = useMaterialReactTable();
+  const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } =
+    useMRT();
 
   const tableProps = {
     ...muiTableProps,

package/src/table/MRT_TableContainer.tsx

@@ -1,17 +1,32 @@
 import React, { FC } from 'react';
 import {
-  alpha,
   CircularProgress,
   LinearProgress,
   Paper,
+  TableContainer as MuiTableContainer,
+  alpha,
   styled,
-  TableContainer,
 } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+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 ? 'absolute' : 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),
@@ -26,11 +41,27 @@ const CircularProgressWrapper = styled('div')(({ theme }) => ({
 interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
-  const { muiTableContainerProps, hideToolbarTop, hideToolbarBottom, isLoading, isFetching } =
-    useMaterialReactTable();
+  const {
+    fullScreen,
+    hideToolbarBottom,
+    hideToolbarTop,
+    isFetching,
+    isLoading,
+    muiTableContainerProps,
+    tableInstance,
+  } = useMRT();
+
+  const tableContainerProps =
+    muiTableContainerProps instanceof Function
+      ? muiTableContainerProps(tableInstance)
+      : muiTableContainerProps;
 
   return (
-    <TableContainer component={Paper} {...muiTableContainerProps}>
+    <TableContainer
+      component={Paper}
+      fullScreen={fullScreen}
+      {...tableContainerProps}
+    >
       {!hideToolbarTop && <MRT_ToolbarTop />}
       {isFetching && <LinearProgress />}
       {isLoading && (

package/src/table/MRT_TableSpacerCell.tsx

@@ -1,16 +1,18 @@
 import React, { CSSProperties, FC } from 'react';
 import { TableCell } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {
   width?: CSSProperties['width'];
 }
 
 export const MRT_TableSpacerCell: FC<Props> = ({ width }) => {
-  const { muiTableBodyCellProps } = useMaterialReactTable();
+  const { muiTableBodyCellProps } = useMRT();
 
   const mTableBodyCellrops =
-    muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
+    muiTableBodyCellProps instanceof Function
+      ? muiTableBodyCellProps()
+      : muiTableBodyCellProps;
 
   const tableCellProps = {
     ...mTableBodyCellrops,

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,11 +1,11 @@
 import React, { ChangeEvent, FC } from 'react';
 import { TablePagination } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_TablePagination: FC<Props> = () => {
-  const { tableInstance, muiTablePaginationProps } = useMaterialReactTable();
+  const { tableInstance, muiTablePaginationProps } = useMRT();
 
   const tablePaginationProps =
     muiTablePaginationProps instanceof Function
@@ -25,9 +25,13 @@ export const MRT_TablePagination: FC<Props> = () => {
       onRowsPerPageChange={handleChangeRowsPerPage}
       page={tableInstance.state.pageIndex}
       rowsPerPage={tableInstance.state.pageSize}
-      showFirstButton={tableInstance.rows.length / tableInstance.state.pageSize > 2}
-      showLastButton={tableInstance.rows.length / tableInstance.state.pageSize > 2}
-      style={{ padding: 0 }}
+      showFirstButton={
+        tableInstance.rows.length / tableInstance.state.pageSize > 2
+      }
+      showLastButton={
+        tableInstance.rows.length / tableInstance.state.pageSize > 2
+      }
+      style={{ padding: 0, position: 'relative', zIndex: 2 }}
       {...tablePaginationProps}
     />
   );

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -0,0 +1,102 @@
+import React, { FC, Fragment } from 'react';
+import {
+  Alert as MuiAlert,
+  Chip,
+  Collapse,
+  styled,
+  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> = () => {
+  const {
+    muiTableToolbarAlertBannerProps,
+    tableInstance,
+    positionToolbarAlertBanner,
+    positionToolbarActions,
+    localization,
+    renderToolbarCustomActions,
+  } = useMRT();
+
+  const isMobile = useMediaQuery('(max-width:720px)');
+
+  const alertProps =
+    muiTableToolbarAlertBannerProps instanceof Function
+      ? muiTableToolbarAlertBannerProps(tableInstance)
+      : muiTableToolbarAlertBannerProps;
+
+  const selectMessage =
+    tableInstance.selectedFlatRows.length > 0
+      ? localization?.toolbarAlertSelectionMessage
+          ?.replace(
+            '{selectedCount}',
+            tableInstance.selectedFlatRows.length.toString(),
+          )
+          ?.replace('{rowCount}', tableInstance.flatRows.length.toString())
+      : null;
+
+  const groupedByMessage =
+    tableInstance.state.groupBy.length > 0 ? (
+      <span>
+        {localization?.toolbarAlertGroupedByMessage}{' '}
+        {tableInstance.state.groupBy.map((columnId, index) => (
+          <Fragment key={`${index}-${columnId}`}>
+            {index > 0 ? localization?.toolbarAlertGroupedThenByMessage : ''}
+            <Chip
+              color="secondary"
+              label={
+                tableInstance.allColumns.find(
+                  (column) => column.id === columnId,
+                )?.Header
+              }
+              onDelete={() => tableInstance.toggleGroupBy(columnId, false)}
+            />
+          </Fragment>
+        ))}
+      </span>
+    ) : null;
+
+  const displayAbsolute = !(
+    isMobile ||
+    (positionToolbarAlertBanner === 'bottom' &&
+      positionToolbarActions === 'bottom') ||
+    (positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions)
+  );
+
+  return (
+    <Collapse
+      in={!!selectMessage || !!groupedByMessage}
+      timeout={displayAbsolute ? 0 : 200}
+    >
+      <Alert
+        displayAbsolute={displayAbsolute}
+        icon={false}
+        color="info"
+        {...alertProps}
+      >
+        {selectMessage}
+        {groupedByMessage}
+      </Alert>
+    </Collapse>
+  );
+};

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,12 +1,15 @@
 import React, { FC } from 'react';
 import { styled, Toolbar as MuiToolbar } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_TablePagination } from './MRT_TablePagination';
-import { MRT_ToolbarButtons } from './MRT_ToolbarButtons';
+import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
+import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 
 const Toolbar = styled(MuiToolbar)({
   display: 'flex',
   justifyContent: 'space-between',
+  padding: '0 0.5rem !important',
+  overflowY: 'hidden',
 });
 
 interface Props {}
@@ -18,8 +21,9 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
     muiTableToolbarBottomProps,
     positionPagination,
     positionToolbarActions,
+    positionToolbarAlertBanner,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
@@ -27,15 +31,17 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
       : muiTableToolbarBottomProps;
 
   return (
-    <Toolbar style={{ padding: 0 }} variant="dense" {...toolbarProps}>
+    <Toolbar variant="dense" {...toolbarProps}>
       {!hideToolbarActions && positionToolbarActions === 'bottom' ? (
-        <MRT_ToolbarButtons />
+        <MRT_ToolbarInternalButtons />
       ) : (
         <span />
       )}
-      {!manualPagination && ['bottom', 'both'].includes(positionPagination ?? '') && (
-        <MRT_TablePagination />
-      )}
+      {positionToolbarAlertBanner === 'bottom' && <MRT_ToolbarAlertBanner />}
+      {!manualPagination &&
+        ['bottom', 'both'].includes(positionPagination ?? '') && (
+          <MRT_TablePagination />
+        )}
     </Toolbar>
   );
 };

package/src/toolbar/{MRT_ToolbarButtons.tsx → MRT_ToolbarInternalButtons.tsx}

@@ -2,9 +2,10 @@ import React, { FC } from 'react';
 import { styled } from '@mui/material';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_DensePaddingSwitch } from '../inputs/MRT_DensePaddingSwitch';
 import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
+import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
 
 const ToolbarButtonsContainer = styled('div')({
   display: 'flex',
@@ -14,9 +15,14 @@ const ToolbarButtonsContainer = styled('div')({
 
 interface Props {}
 
-export const MRT_ToolbarButtons: FC<Props> = () => {
-  const { disableFilters, disableColumnHiding, disableDensePaddingToggle, disableGlobalFilter } =
-    useMaterialReactTable();
+export const MRT_ToolbarInternalButtons: FC<Props> = () => {
+  const {
+    disableFilters,
+    disableColumnHiding,
+    disableDensePaddingToggle,
+    disableGlobalFilter,
+    disableFullScreenToggle,
+  } = useMRT();
 
   return (
     <ToolbarButtonsContainer>
@@ -24,6 +30,7 @@ export const MRT_ToolbarButtons: FC<Props> = () => {
       {!disableFilters && <MRT_ToggleFiltersButton />}
       {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
       {!disableDensePaddingToggle && <MRT_DensePaddingSwitch />}
+      {!disableFullScreenToggle && <MRT_FullScreenToggleButton />}
     </ToolbarButtonsContainer>
   );
 };

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,17 +1,18 @@
 import React, { FC } from 'react';
 import { styled, Toolbar as MuiToolbar } from '@mui/material';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
-import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_ToolbarButtons } from './MRT_ToolbarButtons';
+import { useMRT } from '../useMRT';
+import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
+import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 
 const Toolbar = styled(MuiToolbar)({
   display: 'grid',
-  padding: '0.5rem !important',
+  padding: '0 0.5rem !important',
 });
 
 const ToolbarTopRow = styled('div')({
-  padding: '0.5rem',
+  padding: '1rem 0.5rem',
   display: 'flex',
   justifyContent: 'space-between',
 });
@@ -19,6 +20,8 @@ const ToolbarTopRow = styled('div')({
 const ToolbarActionsContainer = styled('div')({
   display: 'flex',
   gap: '0.5rem',
+  position: 'relative',
+  zIndex: 3,
 });
 
 interface Props {}
@@ -31,9 +34,10 @@ export const MRT_ToolbarTop: FC<Props> = () => {
     muiTableToolbarTopProps,
     positionPagination,
     positionToolbarActions,
-    renderToolbarActions,
+    positionToolbarAlertBanner,
+    renderToolbarCustomActions,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const toolbarProps =
     muiTableToolbarTopProps instanceof Function
@@ -42,17 +46,21 @@ export const MRT_ToolbarTop: FC<Props> = () => {
 
   return (
     <Toolbar variant="dense" {...toolbarProps}>
+      {positionToolbarAlertBanner === 'top' && <MRT_ToolbarAlertBanner />}
       <ToolbarTopRow>
-        {renderToolbarActions?.(tableInstance) ?? <span />}
+        {renderToolbarCustomActions?.(tableInstance) ?? <span />}
         <ToolbarActionsContainer>
           {!disableGlobalFilter && <MRT_SearchTextField />}
-          {!hideToolbarActions && positionToolbarActions === 'top' && <MRT_ToolbarButtons />}
+          {!hideToolbarActions && positionToolbarActions === 'top' && (
+            <MRT_ToolbarInternalButtons />
+          )}
         </ToolbarActionsContainer>
       </ToolbarTopRow>
       <div>
-        {!manualPagination && ['top', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination />
-        )}
+        {!manualPagination &&
+          ['top', 'both'].includes(positionPagination ?? '') && (
+            <MRT_TablePagination />
+          )}
       </div>
     </Toolbar>
   );