material-react-table 0.7.0-alpha.1 → 0.7.0-alpha.2

package/src/body/MRT_TableDetailPanel.tsx

@@ -20,12 +20,12 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps(row)
+      ? muiTableBodyRowProps({ row, tableInstance })
       : muiTableBodyRowProps;
 
   const tableCellProps =
     muiTableDetailPanelProps instanceof Function
-      ? muiTableDetailPanelProps(row)
+      ? muiTableDetailPanelProps({ row, tableInstance })
       : muiTableDetailPanelProps;
 
   return (
@@ -33,7 +33,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
       <TableCell
         colSpan={getVisibleFlatColumns().length + 10}
         onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-          onDetailPanelClick?.(event, row)
+          onDetailPanelClick?.({ event, row, tableInstance })
         }
         {...tableCellProps}
         sx={{
@@ -44,7 +44,9 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
           ...tableCellProps?.sx,
         }}
       >
-        <Collapse in={row.getIsExpanded()}>{renderDetailPanel?.(row)}</Collapse>
+        <Collapse in={row.getIsExpanded()}>
+          {renderDetailPanel?.({ row, tableInstance })}
+        </Collapse>
       </TableCell>
     </TableRow>
   );

package/src/buttons/MRT_CopyButton.tsx

@@ -27,12 +27,12 @@ export const MRT_CopyButton: FC<Props> = ({
 
   const mTableBodyCellCopyButtonProps =
     muiTableBodyCellCopyButtonProps instanceof Function
-      ? muiTableBodyCellCopyButtonProps(cell)
+      ? muiTableBodyCellCopyButtonProps({ cell, tableInstance })
       : muiTableBodyCellCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =
     cell.column.muiTableBodyCellCopyButtonProps instanceof Function
-      ? cell.column.muiTableBodyCellCopyButtonProps(cell)
+      ? cell.column.muiTableBodyCellCopyButtonProps({ cell, tableInstance })
       : cell.column.muiTableBodyCellCopyButtonProps;
 
   const buttonProps = {

package/src/buttons/MRT_EditActionButtons.tsx

@@ -19,13 +19,15 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
     },
   } = tableInstance;
 
+  const { currentEditingRow } = getState();
+
   const handleCancel = () => {
     row.values = (row.original as RowValues) ?? {};
     setCurrentEditingRow(null);
   };
 
-  const handleSave = async () => {
-    await onRowEditSubmit?.(getState().currentEditingRow ?? row);
+  const handleSave = () => {
+    onRowEditSubmit?.({ row: currentEditingRow ?? row, tableInstance });
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ExpandButton.tsx

@@ -22,7 +22,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, tableInstance }) => {
 
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     row.toggleExpanded();
-    onRowExpandChange?.(event, row);
+    onRowExpandChange?.({ event, row, tableInstance });
   };
 
   return (

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -32,12 +32,15 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
 
   const mTableHeadCellColumnActionsButtonProps =
     muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? muiTableHeadCellColumnActionsButtonProps(column)
+      ? muiTableHeadCellColumnActionsButtonProps({ column, tableInstance })
       : muiTableHeadCellColumnActionsButtonProps;
 
   const mcTableHeadCellColumnActionsButtonProps =
     column.muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? column.muiTableHeadCellColumnActionsButtonProps(column)
+      ? column.muiTableHeadCellColumnActionsButtonProps({
+          column,
+          tableInstance,
+        })
       : column.muiTableHeadCellColumnActionsButtonProps;
 
   const iconButtonProps = {

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -54,7 +54,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
   return (
     <>
       {renderRowActions ? (
-        <>{renderRowActions(row, tableInstance)}</>
+        <>{renderRowActions({ row, tableInstance })}</>
       ) : row.id === currentEditingRow?.id ? (
         <MRT_EditActionButtons row={row} tableInstance={tableInstance} />
       ) : !renderRowActionMenuItems && enableRowEditing ? (

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -23,13 +23,18 @@ export const MRT_ToggleSearchButton: FC<Props> = ({
 
   const { showSearch } = getState();
 
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ tableInstance })
+      : muiSearchTextFieldProps;
+
   const handleToggleSearch = () => {
     setShowSearch(!showSearch);
     setTimeout(
       () =>
         document
           .getElementById(
-            muiSearchTextFieldProps?.id ?? `mrt-${idPrefix}-search-text-field`,
+            textFieldProps?.id ?? `mrt-${idPrefix}-search-text-field`,
           )
           ?.focus(),
       200,

package/src/footer/MRT_TableFooter.tsx

@@ -19,7 +19,7 @@ export const MRT_TableFooter: FC<Props> = ({ pinned, tableInstance }) => {
 
   const tableFooterProps =
     muiTableFooterProps instanceof Function
-      ? muiTableFooterProps(tableInstance)
+      ? muiTableFooterProps({ tableInstance })
       : muiTableFooterProps;
 
   const getFooterGroupsMap = {

package/src/footer/MRT_TableFooterCell.tsx

@@ -19,12 +19,12 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
 
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function
-      ? muiTableFooterCellProps(column)
+      ? muiTableFooterCellProps({ column, tableInstance })
       : muiTableFooterCellProps;
 
   const mcTableFooterCellProps =
     column.muiTableFooterCellProps instanceof Function
-      ? column.muiTableFooterCellProps(column)
+      ? column.muiTableFooterCellProps({ column, tableInstance })
       : column.muiTableFooterCellProps;
 
   const tableCellProps = {

package/src/footer/MRT_TableFooterRow.tsx

@@ -26,7 +26,7 @@ export const MRT_TableFooterRow: FC<Props> = ({
 
   const mTableFooterRowProps =
     muiTableFooterRowProps instanceof Function
-      ? muiTableFooterRowProps(footerGroup)
+      ? muiTableFooterRowProps({ footerGroup, tableInstance })
       : muiTableFooterRowProps;
 
   const tableRowProps = {

package/src/head/MRT_TableHead.tsx

@@ -19,7 +19,7 @@ export const MRT_TableHead: FC<Props> = ({ pinned, tableInstance }) => {
 
   const tableHeadProps =
     muiTableHeadProps instanceof Function
-      ? muiTableHeadProps(tableInstance)
+      ? muiTableHeadProps({ tableInstance })
       : muiTableHeadProps;
 
   const getHeaderGroupsMap = {

package/src/head/MRT_TableHeadCell.tsx

@@ -40,12 +40,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
 
   const mTableHeadCellProps =
     muiTableHeadCellProps instanceof Function
-      ? muiTableHeadCellProps(column)
+      ? muiTableHeadCellProps({ column, tableInstance })
       : muiTableHeadCellProps;
 
   const mcTableHeadCellProps =
     column.muiTableHeadCellProps instanceof Function
-      ? column.muiTableHeadCellProps(column)
+      ? column.muiTableHeadCellProps({ column, tableInstance })
       : column.muiTableHeadCellProps;
 
   const tableCellProps = {
@@ -57,35 +57,28 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
   const sortTooltip = !!column.getIsSorted()
     ? column.getIsSorted() === 'desc'
       ? localization.clearSort
-      : localization.sortByColumnDesc.replace(
-          '{column}',
-          column.header as string,
-        )
-    : localization.sortByColumnAsc.replace('{column}', column.header as string);
+      : localization.sortByColumnDesc.replace('{column}', column.header)
+    : localization.sortByColumnAsc.replace('{column}', column.header);
 
-  // const filterType = getState()?.currentFilterTypes?.[id];
+  const filterType = getState()?.currentFilterTypes?.[header.id];
 
-  const filterTooltip = '';
-  // !!getColumnFilterValue()
-  //   ? localization.filteringByColumn
-  //       .replace('{column}', String(headerString))
-  //       .replace(
-  //         '{filterType}',
-  //         filterType instanceof Function
-  //           ? ''
-  //           : // @ts-ignore
-  //             localization[
-  //               `filter${
-  //                 filterType.charAt(0).toUpperCase() + filterType.slice(1)
-  //               }`
-  //             ],
-  //       )
-  //       .replace(
-  //         '{filterValue}',
-  //         getColumnFilterValue() as string,
-  //       )
-  //       .replace('" "', '')
-  //   : localization.showHideFilters;
+  const filterTooltip = !!column.getColumnFilterValue()
+    ? localization.filteringByColumn
+        .replace('{column}', String(column.header))
+        .replace(
+          '{filterType}',
+          filterType instanceof Function
+            ? ''
+            : // @ts-ignore
+              localization[
+                `filter${
+                  filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                }`
+              ],
+        )
+        .replace('{filterValue}', column.getColumnFilterValue() as string)
+        .replace('" "', '')
+    : localization.showHideFilters;
 
   const headerElement =
     column?.Header?.({

package/src/head/MRT_TableHeadRow.tsx

@@ -15,7 +15,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, tableInstance }) => {
 
   const mTableHeadRowProps =
     muiTableHeadRowProps instanceof Function
-      ? muiTableHeadRowProps(headerGroup)
+      ? muiTableHeadRowProps({ headerGroup, tableInstance })
       : muiTableHeadRowProps;
 
   const tableRowProps = {

package/src/inputs/MRT_EditCellTextField.tsx

@@ -10,7 +10,7 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: { muiTableBodyCellEditTextFieldProps },
+    options: { enableRowEditing, muiTableBodyCellEditTextFieldProps },
   } = tableInstance;
 
   const { column, row } = cell;
@@ -22,17 +22,17 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       //   ...getState().currentEditingRow,
       // });
     }
-    column.onCellEditChange?.(event, cell);
+    column.onCellEditChange?.({ event, cell, tableInstance });
   };
 
   const mTableBodyCellEditTextFieldProps =
     muiTableBodyCellEditTextFieldProps instanceof Function
-      ? muiTableBodyCellEditTextFieldProps(cell)
+      ? muiTableBodyCellEditTextFieldProps({ cell, tableInstance })
       : muiTableBodyCellEditTextFieldProps;
 
   const mcTableBodyCellEditTextFieldProps =
     column.muiTableBodyCellEditTextFieldProps instanceof Function
-      ? column.muiTableBodyCellEditTextFieldProps(cell)
+      ? column.muiTableBodyCellEditTextFieldProps({ cell, tableInstance })
       : column.muiTableBodyCellEditTextFieldProps;
 
   const textFieldProps = {
@@ -40,9 +40,9 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
     ...mcTableBodyCellEditTextFieldProps,
   };
 
-  // if (enableEditing && Edit) {
-  //   return <>{Edit({ ...textFieldProps, cell })}</>;
-  // }
+  if (enableRowEditing && column.enableEditing !== false && column.Edit) {
+    return <>{column.Edit?.({ cell, tableInstance })}</>;
+  }
 
   return (
     <TextField

package/src/inputs/MRT_FilterTextField.tsx

@@ -44,12 +44,12 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
 
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? muiTableHeadCellFilterTextFieldProps(column)
+      ? muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
       : muiTableHeadCellFilterTextFieldProps;
 
   const mcTableHeadCellFilterTextFieldProps =
     column.muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? column.muiTableHeadCellFilterTextFieldProps(column)
+      ? column.muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
       : column.muiTableHeadCellFilterTextFieldProps;
 
   const textFieldProps = {

package/src/inputs/MRT_SearchTextField.tsx

@@ -41,7 +41,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   const handleChange = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterChange?.(event);
+      onGlobalFilterChange?.({ event, tableInstance });
     }, 200),
     [],
   );
@@ -55,6 +55,11 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
     setGlobalFilter(undefined);
   };
 
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ tableInstance })
+      : muiSearchTextFieldProps;
+
   return (
     <Collapse in={showSearch} orientation="horizontal">
       <TextField
@@ -97,8 +102,8 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
             </InputAdornment>
           ),
         }}
-        {...muiSearchTextFieldProps}
-        sx={{ justifySelf: 'end', ...muiSearchTextFieldProps?.sx }}
+        {...textFieldProps}
+        sx={{ justifySelf: 'end', ...textFieldProps?.sx }}
       />
       <MRT_FilterTypeMenu
         anchorEl={anchorEl}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -32,27 +32,29 @@ export const MRT_SelectCheckbox: FC<Props> = ({
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
       getToggleAllRowsSelectedProps?.()?.onChange?.(event as any);
-      onSelectAllChange?.(
+      onSelectAllChange?.({
         event,
-        event.target.checked ? getRowModel().flatRows : [],
-      );
+        selectedRows: event.target.checked ? getRowModel().flatRows : [],
+        tableInstance,
+      });
     } else if (row) {
       row?.getToggleSelectedProps()?.onChange?.(event as any);
-      onSelectChange?.(
+      onSelectChange?.({
         event,
         row,
-        event.target.checked
+        selectedRows: event.target.checked
           ? [...getSelectedRowModel().flatRows, row]
           : getSelectedRowModel().flatRows.filter(
               (selectedRow) => selectedRow.id !== row.id,
             ),
-      );
+        tableInstance,
+      });
     }
   };
 
   const mTableBodyRowSelectCheckboxProps =
     muiSelectCheckboxProps instanceof Function
-      ? muiSelectCheckboxProps(selectAll, row, tableInstance)
+      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, tableInstance })
       : muiSelectCheckboxProps;
 
   const rtSelectCheckboxProps = selectAll

package/src/menus/MRT_RowActionMenu.tsx

@@ -52,9 +52,11 @@ export const MRT_RowActionMenu: FC<Props> = ({
           </Box>
         </MenuItem>
       )}
-      {renderRowActionMenuItems?.(row, tableInstance, () =>
-        setAnchorEl(null),
-      ) ?? null}
+      {renderRowActionMenuItems?.({
+        row,
+        tableInstance,
+        closeMenu: () => setAnchorEl(null),
+      })}
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -34,12 +34,11 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onColumnHide?.(
+    onColumnHide?.({
       column,
-      Object.entries(columnVisibility)
-        .filter((entry) => entry[1])
-        .map((entry) => entry[0]),
-    );
+      columnVisibility,
+      tableInstance,
+    });
   };
 
   return (

package/src/table/MRT_Table.tsx

@@ -23,7 +23,7 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
 
   const mTableProps =
     muiTableProps instanceof Function
-      ? muiTableProps(tableInstance)
+      ? muiTableProps({ tableInstance })
       : muiTableProps;
 
   const tableProps = {

package/src/table/MRT_TableContainer.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useLayoutEffect, useState } from 'react';
-import { alpha, Box, SxProps, TableContainer, Theme } from '@mui/material';
-import { MRT_Table } from './MRT_Table';
+import { alpha, Box, TableContainer, Theme } from '@mui/material';
+import { SystemStyleObject } from '@mui/material/node_modules/@mui/system';
 import { MRT_TableInstance } from '..';
+import { MRT_Table } from './MRT_Table';
 
 const commonBoxStyles = ({
   pinned,
@@ -11,18 +12,17 @@ const commonBoxStyles = ({
   pinned?: 'left' | 'right';
   theme: Theme;
   visible?: boolean;
-}) =>
-  ({
-    display: 'grid',
-    minWidth: visible ? '200px' : 0,
-    overflowX: 'auto',
-    boxShadow:
-      pinned === 'left'
-        ? `0 1px 12px ${alpha(theme.palette.common.black, 0.5)}`
-        : pinned === 'right'
-        ? `0 -1px 12px ${alpha(theme.palette.common.black, 0.5)}`
-        : 'none',
-  } as SxProps<Theme>);
+}): SystemStyleObject<Theme> => ({
+  display: 'grid',
+  minWidth: visible ? '200px' : 0,
+  overflowX: 'auto',
+  boxShadow:
+    pinned === 'left'
+      ? `0 1px 12px ${alpha(theme.palette.common.black, 0.5)}`
+      : pinned === 'right'
+      ? `0 -1px 12px ${alpha(theme.palette.common.black, 0.5)}`
+      : 'none',
+});
 
 interface Props {
   tableInstance: MRT_TableInstance;
@@ -49,7 +49,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
 
   const tableContainerProps =
     muiTableContainerProps instanceof Function
-      ? muiTableContainerProps(tableInstance)
+      ? muiTableContainerProps({ tableInstance })
       : muiTableContainerProps;
 
   useLayoutEffect(() => {
@@ -93,7 +93,6 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           }}
         >
           <Box
-            // @ts-ignore
             sx={(theme: Theme) =>
               commonBoxStyles({
                 pinned: 'left',
@@ -104,13 +103,10 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           >
             <MRT_Table pinned="left" tableInstance={tableInstance} />
           </Box>
-          <Box // @ts-ignore
-            sx={(theme: Theme) => commonBoxStyles({ theme })}
-          >
+          <Box sx={(theme: Theme) => commonBoxStyles({ theme })}>
             <MRT_Table pinned="center" tableInstance={tableInstance} />
           </Box>
           <Box
-            // @ts-ignore
             sx={(theme: Theme) =>
               commonBoxStyles({
                 pinned: 'right',

package/src/table/MRT_TablePaper.tsx

@@ -29,7 +29,7 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
 
   const tablePaperProps =
     muiTablePaperProps instanceof Function
-      ? muiTablePaperProps(tableInstance)
+      ? muiTablePaperProps({ tableInstance })
       : muiTablePaperProps;
 
   return (
@@ -37,18 +37,22 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
       elevation={2}
       {...tablePaperProps}
       sx={{
-        bottom: isFullScreen ? '0' : undefined,
+        transition: 'all 0.2s ease-in-out',
+        ...tablePaperProps?.sx,
+      }}
+      style={{
         height: isFullScreen ? '100%' : undefined,
         left: isFullScreen ? '0' : undefined,
-        m: isFullScreen ? '0' : undefined,
+        margin: isFullScreen ? '0' : undefined,
+        maxHeight: isFullScreen ? '100%' : undefined,
+        maxWidth: isFullScreen ? '100%' : undefined,
         overflowY: !isFullScreen ? 'hidden' : undefined,
         position: isFullScreen ? 'fixed' : undefined,
         right: isFullScreen ? '0' : undefined,
         top: isFullScreen ? '0' : undefined,
-        transition: 'all 0.2s ease-in-out',
         width: isFullScreen ? '100vw' : undefined,
         zIndex: isFullScreen ? 1200 : 1,
-        ...tablePaperProps?.sx,
+        bottom: isFullScreen ? '0' : undefined,
       }}
     >
       {!hideToolbarTop && <MRT_ToolbarTop tableInstance={tableInstance} />}

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -13,7 +13,7 @@ export const MRT_LinearProgressBar: FC<Props> = ({ tableInstance }) => {
 
   const linearProgressProps =
     muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps(tableInstance)
+      ? muiLinearProgressProps({ tableInstance })
       : muiLinearProgressProps;
 
   return (

package/src/toolbar/MRT_TablePagination.tsx

@@ -21,7 +21,7 @@ export const MRT_TablePagination: FC<Props> = ({ tableInstance }) => {
 
   const tablePaginationProps =
     muiTablePaginationProps instanceof Function
-      ? muiTablePaginationProps(tableInstance)
+      ? muiTablePaginationProps({ tableInstance })
       : muiTablePaginationProps;
 
   const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
@@ -33,13 +33,14 @@ export const MRT_TablePagination: FC<Props> = ({ tableInstance }) => {
 
   return (
     <TablePagination
+      SelectProps={{ sx: { m: '0 1rem 0 1ch' } }}
       component="div"
       count={getPrePaginationRowModel().rows.length}
       onPageChange={(_: any, newPage: number) => setPageIndex(newPage)}
       onRowsPerPageChange={handleChangeRowsPerPage}
       page={pageIndex}
       rowsPerPage={pageSize}
-      SelectProps={{ sx: { m: '0 1rem 0 1ch' } }}
+      rowsPerPageOptions={[5, 10, 20, 25, 50, 100]}
       showFirstButton={showFirstLastPageButtons}
       showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -27,7 +27,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
 
   const alertProps =
     muiTableToolbarAlertBannerProps instanceof Function
-      ? muiTableToolbarAlertBannerProps(tableInstance)
+      ? muiTableToolbarAlertBannerProps({ tableInstance })
       : muiTableToolbarAlertBannerProps;
 
   const selectMessage =
@@ -96,6 +96,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
       >
         <Box sx={{ p: '0.5rem 1rem' }}>
           {selectMessage}
+          <br />
           {groupedByMessage}
         </Box>
       </Alert>

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -29,7 +29,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
 
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
-      ? muiTableToolbarBottomProps(tableInstance)
+      ? muiTableToolbarBottomProps({ tableInstance })
       : muiTableToolbarBottomProps;
 
   return (

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -26,12 +26,13 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
   if (renderToolbarInternalActions) {
     return (
       <>
-        {renderToolbarInternalActions(tableInstance, {
-          MRT_ToggleSearchButton,
-          MRT_ToggleFiltersButton,
+        {renderToolbarInternalActions({
+          MRT_FullScreenToggleButton,
           MRT_ShowHideColumnsButton,
           MRT_ToggleDensePaddingButton,
-          MRT_FullScreenToggleButton,
+          MRT_ToggleFiltersButton,
+          MRT_ToggleSearchButton,
+          tableInstance,
         })}
       </>
     );

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -43,7 +43,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
 
   const toolbarProps =
     muiTableToolbarTopProps instanceof Function
-      ? muiTableToolbarTopProps(tableInstance)
+      ? muiTableToolbarTopProps({ tableInstance })
       : muiTableToolbarTopProps;
 
   return (
@@ -70,7 +70,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
           justifyContent: 'space-between',
         }}
       >
-        {renderToolbarCustomActions?.(tableInstance) ?? <span />}
+        {renderToolbarCustomActions?.({ tableInstance }) ?? <span />}
         <Box
           sx={{
             display: 'flex',