material-react-table 0.4.3 → 0.4.6

package/dist/useMRT.d.ts

@@ -1,12 +1,16 @@
 import React, { PropsWithChildren } from 'react';
 import { Row, TableInstance } from 'react-table';
+import { MRT_Icons } from './icons';
+import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
-export interface UseMRT<D extends {} = {}> extends MaterialReactTableProps<D> {
+export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     anyRowsCanExpand: boolean;
     anyRowsExpanded: boolean;
     currentEditingRow: Row<D> | null;
     densePadding: boolean;
     fullScreen: boolean;
+    icons: MRT_Icons;
+    localization: MRT_Localization;
     setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
     setDensePadding: (densePadding: boolean) => void;
     setFullScreen: (fullScreen: boolean) => void;
@@ -15,6 +19,6 @@ export interface UseMRT<D extends {} = {}> extends MaterialReactTableProps<D> {
     showFilters: boolean;
     showSearch: boolean;
     tableInstance: TableInstance<D>;
-}
+};
 export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
 export declare const useMRT: <D extends {}>() => UseMRT<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.3",
+  "version": "0.4.6",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
@@ -57,12 +57,12 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@emotion/react": "^11.8.0",
-    "@emotion/styled": "^11.8.0",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
-    "@faker-js/faker": "^6.0.0-alpha.6",
+    "@faker-js/faker": "^6.0.0-alpha.7",
     "@mui/icons-material": "^5.4.2",
-    "@mui/material": "^5.4.2",
+    "@mui/material": "^5.4.3",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
@@ -86,7 +86,6 @@
     "react-table": "^7.7.0",
     "size-limit": "^7.0.8",
     "storybook-addon-paddings": "^4.2.1",
-    "storybook-addon-performance": "^0.16.1",
     "storybook-dark-mode": "^1.0.9",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",

package/src/MaterialReactTable.tsx

@@ -1,6 +1,7 @@
-import React, { ChangeEvent, MouseEvent, ReactNode } from 'react';
+import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
+  IconButtonProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
@@ -32,8 +33,9 @@ import {
 } from 'react-table';
 import { MaterialReactTableProvider } from './useMRT';
 import { MRT_TableContainer } from './table/MRT_TableContainer';
-import { defaultLocalization, MRT_Localization } from './utils/localization';
 import { MRT_ColumnInterface } from './@types/react-table-config';
+import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
+import { MRT_Default_Icons, MRT_Icons } from './icons';
 
 export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
   UseTableOptions<D> &
@@ -66,9 +68,10 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     enableSelection?: boolean;
     hideTableFooter?: boolean;
     hideTableHead?: boolean;
-    hideToolbarActions?: boolean;
+    hideToolbarInternalActions?: boolean;
     hideToolbarBottom?: boolean;
     hideToolbarTop?: boolean;
+    icons?: Partial<MRT_Icons>;
     isFetching?: boolean;
     isLoading?: boolean;
     localization?: Partial<MRT_Localization>;
@@ -138,6 +141,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
       row: Row<D>,
       selectedRows: Row<D>[],
     ) => void;
+    onSelectAllChange?: (event: ChangeEvent, selectedRows: Row<D>[]) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
@@ -153,11 +157,28 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
       tableInstance: TableInstance<D>,
     ) => ReactNode;
     renderToolbarCustomActions?: (tableInstance: TableInstance<D>) => ReactNode;
+    renderToolbarInternalActions?: (
+      tableInstance: TableInstance<D>,
+      {
+        MRT_ToggleSearchButton,
+        MRT_ToggleFiltersButton,
+        MRT_ShowHideColumnsButton,
+        MRT_ToggleDensePaddingButton,
+        MRT_FullScreenToggleButton,
+      }: {
+        MRT_ToggleSearchButton: FC<IconButtonProps>;
+        MRT_ToggleFiltersButton: FC<IconButtonProps>;
+        MRT_ShowHideColumnsButton: FC<IconButtonProps>;
+        MRT_ToggleDensePaddingButton: FC<IconButtonProps>;
+        MRT_FullScreenToggleButton: FC<IconButtonProps>;
+      },
+    ) => ReactNode;
   };
 
 export default <D extends {}>({
   defaultColumn = { minWidth: 50, maxWidth: 1000 },
-  localization = defaultLocalization,
+  icons,
+  localization,
   positionActionsColumn = 'first',
   positionPagination = 'bottom',
   positionToolbarActions = 'top',
@@ -166,7 +187,8 @@ export default <D extends {}>({
 }: MaterialReactTableProps<D>) => (
   <MaterialReactTableProvider
     defaultColumn={defaultColumn}
-    localization={{ ...defaultLocalization, ...localization }}
+    icons={{ ...MRT_Default_Icons, ...icons }}
+    localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}
     positionPagination={positionPagination}
     positionToolbarActions={positionToolbarActions}

package/src/body/MRT_TableBodyRow.tsx

@@ -27,6 +27,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
     anyRowsCanExpand,
     enableRowActions,
+    enableRowEditing,
     enableRowNumbers,
     enableSelection,
     muiTableBodyRowProps,
@@ -62,9 +63,10 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         {enableRowNumbers && (
           <MRT_StyledTableBodyCell>{row.index + 1}</MRT_StyledTableBodyCell>
         )}
-        {enableRowActions && positionActionsColumn === 'first' && (
-          <MRT_ToggleRowActionMenuButton row={row} />
-        )}
+        {(enableRowActions || enableRowEditing) &&
+          positionActionsColumn === 'first' && (
+            <MRT_ToggleRowActionMenuButton row={row} />
+          )}
         {(anyRowsCanExpand || renderDetailPanel) && (
           <MRT_ExpandButton row={row} />
         )}
@@ -72,9 +74,10 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         {row.cells.map((cell) => (
           <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
         ))}
-        {enableRowActions && positionActionsColumn === 'last' && (
-          <MRT_ToggleRowActionMenuButton row={row} />
-        )}
+        {(enableRowActions || enableRowEditing) &&
+          positionActionsColumn === 'last' && (
+            <MRT_ToggleRowActionMenuButton row={row} />
+          )}
       </TableRow>
       {renderDetailPanel && <MRT_TableDetailPanel row={row} />}
     </>

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,7 +1,5 @@
 import React, { FC } from 'react';
 import { IconButton, styled, Tooltip } from '@mui/material';
-import SaveIcon from '@mui/icons-material/Save';
-import CancelIcon from '@mui/icons-material/Cancel';
 import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
 
@@ -16,6 +14,7 @@ interface Props {
 
 export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
   const {
+    icons: { CancelIcon, SaveIcon },
     localization,
     setCurrentEditingRow,
     onRowEditSubmit,
@@ -34,17 +33,17 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
 
   return (
     <EditActionButtonWrappers>
-      <Tooltip arrow title={localization?.rowActionButtonCancel ?? ''}>
+      <Tooltip arrow title={localization.rowActionButtonCancel}>
         <IconButton
-          aria-label={localization?.rowActionButtonCancel}
+          aria-label={localization.rowActionButtonCancel}
           onClick={handleCancel}
         >
           <CancelIcon />
         </IconButton>
       </Tooltip>
-      <Tooltip arrow title={localization?.rowActionButtonSave ?? ''}>
+      <Tooltip arrow title={localization.rowActionButtonSave}>
         <IconButton
-          aria-label={localization?.rowActionButtonSave}
+          aria-label={localization.rowActionButtonSave}
           color="info"
           onClick={handleSave}
         >

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,21 +1,18 @@
 import React, { FC } from 'react';
-import { IconButton, styled } from '@mui/material';
-import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import { IconButton } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
-const ArrowRightIcon = styled(MuiArrowRightIcon, {
-  shouldForwardProp: (prop) => prop !== 'rotation',
-})<{ rotation?: number }>(({ rotation }) => ({
-  transform: `rotate(${rotation}deg)`,
-  transition: 'transform 0.2s',
-}));
-
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
-  const { tableInstance, localization, anyRowsExpanded, densePadding } =
-    useMRT();
+  const {
+    tableInstance,
+    localization,
+    anyRowsExpanded,
+    densePadding,
+    icons: { DoubleArrowDownIcon },
+  } = useMRT();
 
   return (
     <MRT_TableButtonCell
@@ -24,14 +21,16 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       {...tableInstance.getToggleAllRowsExpandedProps()}
     >
       <IconButton
-        aria-label={localization?.expandAllButtonTitle}
-        title={localization?.expandAllButtonTitle}
+        aria-label={localization.expandAllButtonTitle}
+        title={localization.expandAllButtonTitle}
       >
-        <ArrowRightIcon
-          fontSize="small"
-          rotation={
-            tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
-          }
+        <DoubleArrowDownIcon
+          style={{
+            transform: `rotate(${
+              tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
+            }deg)`,
+            transition: 'transform 0.2s',
+          }}
         />
       </IconButton>
     </MRT_TableButtonCell>

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { IconButton, styled } from '@mui/material';
 import { Row } from 'react-table';
-import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
@@ -12,37 +11,37 @@ const TableCell = styled(MRT_TableButtonCell, {
   textAlign: 'left',
 }));
 
-const ExpandMoreIcon = styled(MuiExpandMoreIcon, {
-  shouldForwardProp: (prop) => prop !== 'rotation',
-})<{ rotation?: number }>(({ rotation }) => ({
-  transform: `rotate(${rotation}deg)`,
-  transition: 'transform 0.2s',
-}));
-
 interface Props {
   row: Row;
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
-  const { localization, densePadding, renderDetailPanel } = useMRT();
+  const {
+    densePadding,
+    icons: { ExpandMoreIcon },
+    localization,
+    renderDetailPanel,
+  } = useMRT();
 
   return (
     <TableCell size="small" densePadding={densePadding} depth={row.depth}>
       <IconButton
-        aria-label={localization?.expandButtonTitle}
+        aria-label={localization.expandButtonTitle}
         disabled={!row.canExpand && !renderDetailPanel}
-        title={localization?.expandButtonTitle}
+        title={localization.expandButtonTitle}
         {...row.getToggleRowExpandedProps()}
       >
         <ExpandMoreIcon
-          fontSize={row.canExpand || renderDetailPanel ? 'medium' : 'small'}
-          rotation={
-            !row.canExpand && !renderDetailPanel
-              ? -90
-              : row.isExpanded
-              ? -180
-              : 0
-          }
+          style={{
+            transform: `rotate(${
+              !row.canExpand && !renderDetailPanel
+                ? -90
+                : row.isExpanded
+                ? -180
+                : 0
+            }deg)`,
+            transition: 'transform 0.2s',
+          }}
         />
       </IconButton>
     </TableCell>

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,22 +1,26 @@
 import React, { FC } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import FilterListIcon from '@mui/icons-material/Fullscreen';
-import FilterListOffIcon from '@mui/icons-material/FullscreenExit';
 
-type Props = {};
+interface Props extends IconButtonProps {}
 
-export const MRT_FullScreenToggleButton: FC<Props> = () => {
-  const { localization, setFullScreen, fullScreen } = useMRT();
+export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
+  const {
+    fullScreen,
+    icons: { FullscreenExitIcon, FullscreenIcon },
+    localization,
+    setFullScreen,
+  } = useMRT();
 
   return (
-    <Tooltip arrow title={localization?.toggleFullScreenButtonTitle ?? ''}>
+    <Tooltip arrow title={localization.toggleFullScreenButtonTitle}>
       <IconButton
-        aria-label={localization?.toggleFilterButtonTitle}
+        aria-label={localization.toggleFilterButtonTitle}
         onClick={() => setFullScreen(!fullScreen)}
         size="small"
+        {...rest}
       >
-        {fullScreen ? <FilterListOffIcon /> : <FilterListIcon />}
+        {fullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -6,8 +6,8 @@ import {
   Tooltip,
   styled,
   Divider,
+  IconButtonProps,
 } from '@mui/material';
-import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 
@@ -17,10 +17,14 @@ const MenuButtons = styled('div')({
   padding: '0 0.5rem 0.5rem 0.5rem',
 });
 
-interface Props {}
+interface Props extends IconButtonProps {}
 
-export const MRT_ShowHideColumnsButton: FC<Props> = () => {
-  const { tableInstance, localization } = useMRT();
+export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
+  const {
+    tableInstance,
+    localization,
+    icons: { ViewColumnIcon },
+  } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -30,11 +34,12 @@ export const MRT_ShowHideColumnsButton: FC<Props> = () => {
 
   return (
     <>
-      <Tooltip arrow title={localization?.showHideColumnsButtonTitle ?? ''}>
+      <Tooltip arrow title={localization.showHideColumnsButtonTitle}>
         <IconButton
-          aria-label={localization?.showHideColumnsButtonTitle}
+          aria-label={localization.showHideColumnsButtonTitle}
           onClick={handleClick}
           size="small"
+          {...rest}
         >
           <ViewColumnIcon />
         </IconButton>
@@ -52,13 +57,13 @@ export const MRT_ShowHideColumnsButton: FC<Props> = () => {
             }
             onClick={() => tableInstance.toggleHideAllColumns(true)}
           >
-            {localization?.columnShowHideMenuHideAll}
+            {localization.columnShowHideMenuHideAll}
           </Button>
           <Button
             disabled={tableInstance.getToggleHideAllColumnsProps().checked}
             onClick={() => tableInstance.toggleHideAllColumns(false)}
           >
-            {localization?.columnShowHideMenuShowAll}
+            {localization.columnShowHideMenuShowAll}
           </Button>
         </MenuButtons>
         <Divider />

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -1,6 +1,5 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton as MuiIconButton, styled } from '@mui/material';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { HeaderGroup } from 'react-table';
@@ -21,7 +20,10 @@ interface Props {
 }
 
 export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
-  const { localization } = useMRT();
+  const {
+    localization,
+    icons: { MoreVertIcon },
+  } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -33,14 +35,20 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
 
   return (
     <>
-      <IconButton
-        aria-label={localization?.columnActionMenuButtonTitle}
-        onClick={handleClick}
-        size="small"
-        title={localization?.columnActionMenuButtonTitle}
+      <Tooltip
+        arrow
+        enterDelay={1000}
+        enterNextDelay={1000}
+        title={localization.columnActionMenuButtonTitle}
       >
-        <MoreVertIcon />
-      </IconButton>
+        <IconButton
+          aria-label={localization.columnActionMenuButtonTitle}
+          onClick={handleClick}
+          size="small"
+        >
+          <MoreVertIcon />
+        </IconButton>
+      </Tooltip>
       <MRT_ColumnActionMenu
         anchorEl={anchorEl}
         column={column}

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,20 +1,24 @@
 import React, { FC } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import DensityMediumIcon from '@mui/icons-material/DensityMedium';
-import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 
-interface Props {}
+interface Props extends IconButtonProps {}
 
-export const MRT_ToggleDensePaddingButton: FC<Props> = () => {
-  const { densePadding, setDensePadding, localization } = useMRT();
+export const MRT_ToggleDensePaddingButton: FC<Props> = ({ ...rest }) => {
+  const {
+    densePadding,
+    setDensePadding,
+    localization,
+    icons: { DensityMediumIcon, DensitySmallIcon },
+  } = useMRT();
 
   return (
-    <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>
+    <Tooltip arrow title={localization.toggleDensePaddingSwitchTitle}>
       <IconButton
-        aria-label={localization?.toggleDensePaddingSwitchTitle}
+        aria-label={localization.toggleDensePaddingSwitchTitle}
         onClick={() => setDensePadding(!densePadding)}
         size="small"
+        {...rest}
       >
         {densePadding ? <DensitySmallIcon /> : <DensityMediumIcon />}
       </IconButton>

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,20 +1,24 @@
 import React, { FC } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 
-type Props = {};
+interface Props extends IconButtonProps {}
 
-export const MRT_ToggleFiltersButton: FC<Props> = () => {
-  const { localization, setShowFilters, showFilters } = useMRT();
+export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
+  const {
+    localization,
+    setShowFilters,
+    showFilters,
+    icons: { FilterListIcon, FilterListOffIcon },
+  } = useMRT();
 
   return (
-    <Tooltip arrow title={localization?.toggleFilterButtonTitle ?? ''}>
+    <Tooltip arrow title={localization.toggleFilterButtonTitle}>
       <IconButton
-        aria-label={localization?.toggleFilterButtonTitle}
+        aria-label={localization.toggleFilterButtonTitle}
         onClick={() => setShowFilters(!showFilters)}
         size="small"
+        {...rest}
       >
         {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}
       </IconButton>

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,7 +1,5 @@
 import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import EditIcon from '@mui/icons-material/Edit';
 import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
@@ -27,11 +25,12 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   const {
     currentEditingRow,
     densePadding,
+    enableRowEditing,
+    icons: {EditIcon, MoreHorizIcon},
     localization,
     renderRowActionMenuItems,
-    enableRowEditing,
-    setCurrentEditingRow,
     renderRowActions,
+    setCurrentEditingRow,
     tableInstance,
   } = useMRT();
 
@@ -58,7 +57,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
         <Tooltip
           placement="right"
           arrow
-          title={localization?.rowActionMenuItemEdit ?? ''}
+          title={localization.rowActionMenuItemEdit}
         >
           <IconButton onClick={handleEdit}>
             <EditIcon />
@@ -67,8 +66,8 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
       ) : renderRowActionMenuItems ? (
         <>
           <IconButton
-            aria-label={localization?.rowActionMenuButtonTitle}
-            title={localization?.rowActionMenuButtonTitle}
+            aria-label={localization.rowActionMenuButtonTitle}
+            title={localization.rowActionMenuButtonTitle}
             onClick={handleOpenRowActionMenu}
             size="small"
           >

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -1,14 +1,17 @@
 import React, { FC } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import SearchIcon from '@mui/icons-material/Search';
-import SearchOffIcon from '@mui/icons-material/SearchOff';
 
-type Props = {};
+interface Props extends IconButtonProps {}
 
-export const MRT_ToggleSearchButton: FC<Props> = () => {
-  const { localization, setShowSearch, showSearch, muiSearchTextFieldProps } =
-    useMRT();
+export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
+  const {
+    icons: { SearchIcon, SearchOffIcon },
+    localization,
+    muiSearchTextFieldProps,
+    setShowSearch,
+    showSearch,
+  } = useMRT();
 
   const handleToggleSearch = () => {
     setShowSearch(!showSearch);
@@ -24,8 +27,8 @@ export const MRT_ToggleSearchButton: FC<Props> = () => {
   };
 
   return (
-    <Tooltip arrow title={localization?.toggleSearchButtonTitle ?? ''}>
-      <IconButton size="small" onClick={handleToggleSearch}>
+    <Tooltip arrow title={localization.toggleSearchButtonTitle}>
+      <IconButton size="small" onClick={handleToggleSearch} {...rest}>
         {showSearch ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>
     </Tooltip>

package/src/footer/MRT_TableFooterRow.tsx

@@ -11,15 +11,16 @@ interface Props {
 
 export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
   const {
-    renderDetailPanel,
-    columns,
     anyRowsCanExpand,
-    enableSelection,
+    columns,
     enableRowActions,
+    enableRowEditing,
     enableRowNumbers,
+    enableSelection,
+    muiTableFooterRowProps,
     positionActionsColumn,
+    renderDetailPanel,
     tableInstance,
-    muiTableFooterRowProps,
   } = useMRT();
 
   //if no content in row, skip row
@@ -42,9 +43,8 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
   return (
     <TableRow {...tableRowProps}>
       {enableRowNumbers && <MRT_TableSpacerCell />}
-      {enableRowActions && positionActionsColumn === 'first' && (
-        <MRT_TableSpacerCell />
-      )}
+      {(enableRowActions || enableRowEditing) &&
+        positionActionsColumn === 'first' && <MRT_TableSpacerCell />}
       {(anyRowsCanExpand || renderDetailPanel) && (
         <MRT_TableSpacerCell
           width={`${
@@ -59,9 +59,8 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
           column={column}
         />
       ))}
-      {enableRowActions && positionActionsColumn === 'last' && (
-        <MRT_TableSpacerCell />
-      )}
+      {(enableRowActions || enableRowEditing) &&
+        positionActionsColumn === 'last' && <MRT_TableSpacerCell />}
     </TableRow>
   );
 };