material-react-table 0.3.1 → 0.3.5

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,11 +1,12 @@
 import React, { FC } from 'react';
 import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
-import { ColumnInstance } from 'react-table';
+import { useMRT } from '../useMRT';
+import { HeaderGroup } from 'react-table';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import SortIcon from '@mui/icons-material/Sort';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+import FilterIcon from '@mui/icons-material/FilterList';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -14,7 +15,7 @@ const MenuItem = styled(MuiMenuItem)({
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: ColumnInstance;
+  column: HeaderGroup;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 
@@ -25,10 +26,12 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 }) => {
   const {
     disableColumnHiding,
-    enableColumnGrouping,
+    disableFilters,
     disableSortBy,
+    enableColumnGrouping,
     localization,
-  } = useMaterialReactTable();
+    setShowFilters,
+  } = useMRT();
 
   const handleClearSort = () => {
     column.clearSortBy();
@@ -55,6 +58,22 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleFilterByColumn = () => {
+    setShowFilters(true);
+    setTimeout(
+      () =>
+        document
+          .getElementById(
+            // @ts-ignore
+            column.muiTableHeadCellFilterTextFieldProps?.id ??
+              `filter-${column.id}-column`,
+          )
+          ?.focus(),
+      200,
+    );
+    setAnchorEl(null);
+  };
+
   return (
     <Menu
       anchorEl={anchorEl}
@@ -75,7 +94,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             disabled={column.isSorted && !column.isSortedDesc}
             onClick={handleSortAsc}
           >
-            <SortIcon /> {localization?.columnActionMenuItemSortAsc}
+            <SortIcon />{' '}
+            {localization?.columnActionMenuItemSortAsc?.replace(
+              '{column}',
+              String(column.Header),
+            )}
           </MenuItem>,
           <MenuItem
             key={3}
@@ -83,25 +106,45 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             onClick={handleSortDesc}
           >
             <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-            {localization?.columnActionMenuItemSortDesc}
+            {localization?.columnActionMenuItemSortDesc?.replace(
+              '{column}',
+              String(column.Header),
+            )}
+          </MenuItem>,
+        ]}
+      {!disableFilters &&
+        column.canFilter && [
+          <Divider key={0} />,
+          <MenuItem key={1} onClick={handleFilterByColumn}>
+            <FilterIcon />{' '}
+            {localization?.filterTextFieldPlaceholder?.replace(
+              '{column}',
+              String(column.Header),
+            )}
+          </MenuItem>,
+        ]}
+      {enableColumnGrouping &&
+        column.canGroupBy && [
+          <Divider key={1} />,
+          <MenuItem key={2} onClick={handleGroupByColumn}>
+            <DynamicFeedIcon />{' '}
+            {localization?.[
+              column.isGrouped
+                ? 'columnActionMenuItemUnGroupBy'
+                : 'columnActionMenuItemGroupBy'
+            ]?.replace('{column}', String(column.Header))}
           </MenuItem>,
-          <Divider key={4} />,
         ]}
-      {!disableColumnHiding && (
-        <MenuItem onClick={handleHideColumn}>
-          <VisibilityOffIcon /> {localization?.columnActionMenuItemHideColumn}
-        </MenuItem>
-      )}
-      {enableColumnGrouping && column.canGroupBy && (
-        <MenuItem disabled={column.isGrouped} onClick={handleGroupByColumn}>
-          <DynamicFeedIcon /> {localization?.columnActionMenuItemGroupBy}
-        </MenuItem>
-      )}
-      {enableColumnGrouping && column.canGroupBy && (
-        <MenuItem disabled={!column.isGrouped} onClick={handleGroupByColumn}>
-          <DynamicFeedIcon /> {localization?.columnActionMenuItemUnGroupBy}
-        </MenuItem>
-      )}
+      {!disableColumnHiding && [
+        <Divider key={0} />,
+        <MenuItem key={1} onClick={handleHideColumn}>
+          <VisibilityOffIcon />{' '}
+          {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';
 
@@ -13,25 +13,21 @@ interface Props {
   anchorEl: HTMLElement | null;
   row: Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  handleEdit: () => void;
 }
 
 export const MRT_RowActionMenu: FC<Props> = ({
   anchorEl,
   row,
+  handleEdit,
   setAnchorEl,
 }) => {
   const {
     enableRowEditing,
     localization,
     renderRowActionMenuItems,
-    setCurrentEditingRowId,
     tableInstance,
-  } = useMaterialReactTable();
-
-  const handleEdit = () => {
-    setCurrentEditingRowId(row.id);
-    setAnchorEl(null);
-  };
+  } = useMRT();
 
   return (
     <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,13 +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();
+    useMRT();
 
   const tableProps = {
     ...muiTableProps,

package/src/table/MRT_TableButtonCell.tsx

@@ -0,0 +1,9 @@
+import { styled, TableCell as MuiTableCell } from '@mui/material';
+
+export const MRT_TableButtonCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding',
+})<{ densePadding?: boolean }>(({ densePadding }) => ({
+  padding: densePadding ? '1px' : '0.6rem',
+  textAlign: 'center',
+  transition: 'all 0.2s ease-in-out',
+}));

package/src/table/MRT_TableContainer.tsx

@@ -1,20 +1,67 @@
 import React, { FC } from 'react';
-import { LinearProgress, Paper, TableContainer } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import {
+  CircularProgress,
+  LinearProgress,
+  Paper,
+  TableContainer as MuiTableContainer,
+  alpha,
+  styled,
+} 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 ? 'absolute' : undefined,
+  right: fullScreen ? '0' : undefined,
+  top: fullScreen ? '0' : undefined,
+  transition: 'all 0.2s ease-in-out',
+  width: fullScreen ? '100vw' : undefined,
+}));
+
+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> = () => {
-  const { muiTableContainerProps, hideToolbarTop, hideToolbarBottom, isFetching } =
-    useMaterialReactTable();
+  const {
+    muiTableContainerProps,
+    hideToolbarTop,
+    hideToolbarBottom,
+    fullScreen,
+    isLoading,
+    isFetching,
+  } = useMRT();
 
   return (
-    <TableContainer component={Paper} {...muiTableContainerProps}>
+    <TableContainer
+      component={Paper}
+      fullScreen={fullScreen}
+      {...muiTableContainerProps}
+    >
       {!hideToolbarTop && <MRT_ToolbarTop />}
       {isFetching && <LinearProgress />}
+      {isLoading && (
+        <CircularProgressWrapper>
+          <CircularProgress aria-busy="true" aria-label="Loading data" />
+        </CircularProgressWrapper>
+      )}
       <MRT_Table />
       {!hideToolbarBottom && <MRT_ToolbarBottom />}
     </TableContainer>

package/src/table/MRT_TableSpacerCell.tsx

@@ -1,24 +1,24 @@
 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 mTableBodyRowProps =
+  const mTableBodyCellrops =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps()
       : muiTableBodyCellProps;
 
   const tableCellProps = {
-    ...mTableBodyRowProps,
+    ...mTableBodyCellrops,
     style: {
       width,
-      ...(mTableBodyRowProps?.style ?? {}),
+      ...(mTableBodyCellrops?.style ?? {}),
     },
   };
 

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
@@ -31,6 +31,7 @@ export const MRT_TablePagination: FC<Props> = () => {
       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,41 +1,29 @@
 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)({
-  padding: 0,
   display: 'flex',
   justifyContent: 'space-between',
+  padding: '0 0.5rem !important',
+  overflowY: 'hidden',
 });
 
 interface Props {}
 
 export const MRT_ToolbarBottom: FC<Props> = () => {
   const {
-    disableGlobalFilter,
-    disableColumnHiding,
+    hideToolbarActions,
     manualPagination,
+    muiTableToolbarBottomProps,
     positionPagination,
-    disableFilters,
-    hideToolbarActions,
     positionToolbarActions,
-    muiTableToolbarBottomProps,
-    title,
+    positionToolbarAlertBanner,
     tableInstance,
-  } = useMaterialReactTable();
-
-  // if no features in the toolbar are enabled, don't render anything
-  if (
-    !muiTableToolbarBottomProps &&
-    !title &&
-    disableColumnHiding &&
-    disableFilters &&
-    disableGlobalFilter
-  ) {
-    return null;
-  }
+  } = useMRT();
 
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
@@ -45,10 +33,11 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
   return (
     <Toolbar variant="dense" {...toolbarProps}>
       {!hideToolbarActions && positionToolbarActions === 'bottom' ? (
-        <MRT_ToolbarButtons />
+        <MRT_ToolbarInternalButtons />
       ) : (
         <span />
       )}
+      {positionToolbarAlertBanner === 'bottom' && <MRT_ToolbarAlertBanner />}
       {!manualPagination &&
         ['bottom', 'both'].includes(positionPagination ?? '') && (
           <MRT_TablePagination />

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

@@ -2,8 +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',
@@ -13,15 +15,22 @@ const ToolbarButtonsContainer = styled('div')({
 
 interface Props {}
 
-export const MRT_ToolbarButtons: FC<Props> = () => {
-  const { disableFilters, disableColumnHiding, disableDensePaddingToggle } =
-    useMaterialReactTable();
+export const MRT_ToolbarInternalButtons: FC<Props> = () => {
+  const {
+    disableFilters,
+    disableColumnHiding,
+    disableDensePaddingToggle,
+    disableGlobalFilter,
+    disableFullScreenToggle,
+  } = useMRT();
 
   return (
     <ToolbarButtonsContainer>
+      {!disableGlobalFilter && <MRT_ToggleSearchButton />}
       {!disableFilters && <MRT_ToggleFiltersButton />}
       {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
       {!disableDensePaddingToggle && <MRT_DensePaddingSwitch />}
+      {!disableFullScreenToggle && <MRT_FullScreenToggleButton />}
     </ToolbarButtonsContainer>
   );
 };

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,16 +1,18 @@
 import React, { FC } from 'react';
-import { styled, Toolbar as MuiToolbar, Typography } from '@mui/material';
+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 0.5rem !important',
 });
 
 const ToolbarTopRow = styled('div')({
-  padding: '0.5rem',
+  padding: '1rem 0.5rem',
   display: 'flex',
   justifyContent: 'space-between',
 });
@@ -18,6 +20,8 @@ const ToolbarTopRow = styled('div')({
 const ToolbarActionsContainer = styled('div')({
   display: 'flex',
   gap: '0.5rem',
+  position: 'relative',
+  zIndex: 3,
 });
 
 interface Props {}
@@ -25,28 +29,15 @@ interface Props {}
 export const MRT_ToolbarTop: FC<Props> = () => {
   const {
     disableGlobalFilter,
-    disableColumnHiding,
-    muiTableTitleProps,
-    disableFilters,
+    hideToolbarActions,
     manualPagination,
-    positionPagination,
     muiTableToolbarTopProps,
-    hideToolbarActions,
+    positionPagination,
     positionToolbarActions,
-    title,
+    positionToolbarAlertBanner,
+    renderToolbarCustomActions,
     tableInstance,
-  } = useMaterialReactTable();
-
-  // if no features in the toolbar are enabled, don't render anything
-  if (
-    !muiTableToolbarTopProps &&
-    !title &&
-    disableColumnHiding &&
-    disableFilters &&
-    disableGlobalFilter
-  ) {
-    return null;
-  }
+  } = useMRT();
 
   const toolbarProps =
     muiTableToolbarTopProps instanceof Function
@@ -55,18 +46,13 @@ export const MRT_ToolbarTop: FC<Props> = () => {
 
   return (
     <Toolbar variant="dense" {...toolbarProps}>
+      {positionToolbarAlertBanner === 'top' && <MRT_ToolbarAlertBanner />}
       <ToolbarTopRow>
-        {title ? (
-          <Typography variant="h5" {...muiTableTitleProps}>
-            {title}
-          </Typography>
-        ) : (
-          <span />
-        )}
+        {renderToolbarCustomActions?.(tableInstance) ?? <span />}
         <ToolbarActionsContainer>
           {!disableGlobalFilter && <MRT_SearchTextField />}
           {!hideToolbarActions && positionToolbarActions === 'top' && (
-            <MRT_ToolbarButtons />
+            <MRT_ToolbarInternalButtons />
           )}
         </ToolbarActionsContainer>
       </ToolbarTopRow>