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

package/src/inputs/MRT_FilterTextField.tsx

@@ -32,8 +32,8 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
       idPrefix,
       localization,
       muiTableHeadCellFilterTextFieldProps,
-      setCurrentFilterTypes,
     },
+    setCurrentFilterTypes,
   } = tableInstance;
 
   const { column } = header;
@@ -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

@@ -33,7 +33,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
     },
   } = tableInstance;
 
-  const { globalFilter, showSearch } = getState();
+  const { globalFilter, showGlobalFilter } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
@@ -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,8 +55,13 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
     setGlobalFilter(undefined);
   };
 
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ tableInstance })
+      : muiSearchTextFieldProps;
+
   return (
-    <Collapse in={showSearch} orientation="horizontal">
+    <Collapse in={showGlobalFilter} orientation="horizontal">
       <TextField
         id={`mrt-${idPrefix}-search-text-field`}
         placeholder={localization.search}
@@ -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/localization.ts

@@ -33,6 +33,7 @@ export interface MRT_Localization {
   pinToLeft: string;
   pinToRight: string;
   rowActions: string;
+  rowNumber: string;
   rowNumbers: string;
   save: string;
   search: string;
@@ -89,12 +90,12 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   rowActions: 'Row Actions',
+  rowNumber: '#',
   rowNumbers: 'Row Numbers',
   save: 'Save',
   search: 'Search',
   selectedCountOfRowCountRowsSelected:
     '{selectedCount} of {rowCount} row(s) selected',
-
   select: 'Select',
   showAll: 'Show all',
   showAllColumns: 'Show all columns',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -35,7 +35,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setColumnOrder,
     options: {
       enableColumnFilters,
-      enableColumnPinning,
+      enablePinning,
       enableGrouping,
       enableHiding,
       enableSorting,
@@ -52,8 +52,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       },
       idPrefix,
       localization,
-      setShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { column } = header;
@@ -245,7 +245,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {enableGrouping &&
         column.getCanGroup() && [
           <MenuItem
-            divider={enableColumnPinning}
+            divider={enablePinning}
             key={0}
             onClick={handleGroupByColumn}
             sx={commonMenuItemStyles}
@@ -260,7 +260,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
         ]}
-      {enableColumnPinning &&
+      {enablePinning &&
         column.getCanPin() && [
           <MenuItem
             disabled={column.getIsPinned() === 'left'}

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -39,12 +39,9 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: {
-      enabledGlobalFilterTypes,
-      localization,
-      setCurrentFilterTypes,
-      setCurrentGlobalFilterType,
-    },
+    options: { enabledGlobalFilterTypes, localization },
+    setCurrentFilterTypes,
+    setCurrentGlobalFilterType,
   } = tableInstance;
 
   const { isDensePadding, currentFilterTypes, currentGlobalFilterType } =

package/src/menus/MRT_RowActionMenu.tsx

@@ -25,7 +25,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
     getState,
     options: {
       icons: { EditIcon },
-      enableRowEditing,
+      enableEditing,
       localization,
       renderRowActionMenuItems,
     },
@@ -42,7 +42,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
         dense: isDensePadding,
       }}
     >
-      {enableRowEditing && (
+      {enableEditing && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
           <Box sx={commonListItemStyles}>
             <ListItemIcon>
@@ -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

@@ -16,7 +16,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { onColumnHide },
+    options: { onToggleColumnVisibility },
   } = tableInstance;
 
   const { columnVisibility } = getState();
@@ -34,12 +34,11 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onColumnHide?.(
+    onToggleColumnVisibility?.({
       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 React, { FC, useEffect, useState } from 'react';
+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;
@@ -36,7 +36,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
     getRightTableWidth,
     getState,
     options: {
-      enableColumnPinning,
+      enablePinning,
       enableStickyHeader,
       idPrefix,
       muiTableContainerProps,
@@ -49,10 +49,10 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
 
   const tableContainerProps =
     muiTableContainerProps instanceof Function
-      ? muiTableContainerProps(tableInstance)
+      ? muiTableContainerProps({ tableInstance })
       : muiTableContainerProps;
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
         ? document?.getElementById(`mrt-${idPrefix}-toolbar-top`)
@@ -85,7 +85,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      {enableColumnPinning && getIsSomeColumnsPinned() ? (
+      {enablePinning && getIsSomeColumnsPinned() ? (
         <Box
           sx={{
             display: 'grid',
@@ -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/table/MRT_TableRoot.tsx

@@ -52,10 +52,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [showFilters, setShowFilters] = useState(
     props.initialState?.showFilters ?? false,
   );
-  const [showSearch, setShowSearch] = useState(
-    props.initialState?.showSearch ?? false,
+  const [showGlobalFilter, setShowGlobalFilter] = useState(
+    props.initialState?.showGlobalFilter ?? false,
   );
-
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: props.initialState?.pagination?.pageIndex ?? 0,
     pageSize: props.initialState?.pagination?.pageSize ?? 10,
@@ -92,7 +91,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const displayColumns = useMemo(
     () =>
       [
-        (props.enableRowActions || props.enableRowEditing) &&
+        (props.enableRowActions || props.enableEditing) &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
@@ -142,7 +141,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         props.enableRowNumbers &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => cell.row.index + 1,
-            Header: () => '#',
+            Header: () => props.localization?.rowNumber,
             header: props.localization?.rowNumbers,
             id: 'mrt-row-numbers',
             maxWidth: 40,
@@ -151,14 +150,16 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           }),
       ].filter(Boolean),
     [
+      props.enableEditing,
       props.enableExpandAll,
       props.enableExpanded,
+      props.enableGrouping,
       props.enableRowActions,
-      props.enableRowEditing,
       props.enableRowNumbers,
       props.enableRowSelection,
       props.enableSelectAll,
       props.localization,
+      table,
     ],
   );
 
@@ -175,10 +176,10 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [table, props.columns, currentFilterTypes],
   );
 
-  const data = useMemo(
+  const data: D['Row'][] = useMemo(
     () =>
       props.isLoading && !props.data.length
-        ? [...Array(10).fill(null)].map((_) =>
+        ? [...Array(10).fill(null)].map(() =>
             Object.assign(
               {},
               ...getAllLeafColumnDefs(
@@ -193,44 +194,47 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   );
 
   //@ts-ignore
-  const tableInstance: MRT_TableInstance<{}> = useTable(table, {
-    ...props,
-    //@ts-ignore
-    filterTypes: defaultFilterFNs,
-    globalFilterType: currentGlobalFilterType,
-    columnFilterRowsFn: columnFilterRowsFn,
-    columns,
-    data,
-    expandRowsFn: expandRowsFn,
-    getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
-    globalFilterRowsFn: globalFilterRowsFn,
-    groupRowsFn: groupRowsFn,
-    idPrefix,
-    onPaginationChange: (updater: any) =>
-      setPagination((old) => functionalUpdate(updater, old)),
-    paginateRowsFn: paginateRowsFn,
+  const tableInstance: MRT_TableInstance<{}> = {
+    ...useTable(table, {
+      ...props,
+      columnFilterRowsFn: columnFilterRowsFn,
+      columns,
+      data,
+      expandRowsFn: expandRowsFn,
+      //@ts-ignore
+      filterTypes: defaultFilterFNs,
+      getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
+      globalFilterRowsFn: globalFilterRowsFn,
+      globalFilterType: currentGlobalFilterType,
+      groupRowsFn: groupRowsFn,
+      idPrefix,
+      //@ts-ignore
+      initialState: props.initialState,
+      onPaginationChange: (updater: any) =>
+        setPagination((old) => functionalUpdate(updater, old)),
+      paginateRowsFn: paginateRowsFn,
+      sortRowsFn,
+      state: {
+        currentEditingRow,
+        currentFilterTypes,
+        currentGlobalFilterType,
+        isDensePadding,
+        isFullScreen,
+        //@ts-ignore
+        pagination,
+        showFilters,
+        showGlobalFilter,
+        ...props.state,
+      },
+    }),
     setCurrentEditingRow,
     setCurrentFilterTypes,
     setCurrentGlobalFilterType,
     setIsDensePadding,
     setIsFullScreen,
     setShowFilters,
-    setShowSearch,
-    sortRowsFn,
-    state: {
-      ...props.initialState,
-      currentEditingRow,
-      currentFilterTypes,
-      currentGlobalFilterType,
-      isDensePadding,
-      isFullScreen,
-      //@ts-ignore
-      pagination,
-      showFilters,
-      showSearch,
-      ...props.state,
-    },
-  });
+    setShowGlobalFilter,
+  };
 
   return <MRT_TablePaper 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,17 @@ export const MRT_TablePagination: FC<Props> = ({ tableInstance }) => {
 
   return (
     <TablePagination
+      SelectProps={{
+        sx: { m: '0 1rem 0 1ch' },
+        MenuProps: { MenuListProps: { disablePadding: true } },
+      }}
       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, 15, 20, 25, 30, 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

@@ -4,7 +4,7 @@ import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButto
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
-import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
+import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 import { MRT_TableInstance } from '..';
 
 interface Props {
@@ -15,10 +15,11 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
   const {
     options: {
       enableColumnFilters,
-      enableHiding,
       enableDensePaddingToggle,
-      enableGlobalFilter,
+      enableFilters,
       enableFullScreenToggle,
+      enableGlobalFilter,
+      enableHiding,
       renderToolbarInternalActions,
     },
   } = tableInstance;
@@ -26,12 +27,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_ToggleGlobalFilterButton,
+          tableInstance,
         })}
       </>
     );
@@ -46,10 +48,10 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
         p: '0 0.5rem',
       }}
     >
-      {enableGlobalFilter && (
-        <MRT_ToggleSearchButton tableInstance={tableInstance} />
+      {enableFilters && enableGlobalFilter && (
+        <MRT_ToggleGlobalFilterButton tableInstance={tableInstance} />
       )}
-      {enableColumnFilters && (
+      {enableFilters && enableColumnFilters && (
         <MRT_ToggleFiltersButton tableInstance={tableInstance} />
       )}
       {enableHiding && (

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',