material-react-table 0.7.0-alpha.8 → 0.7.1

package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import type { MRT_ColumnInstance, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props {
-    column: MRT_ColumnInstance;
+    column: MRT_Column;
     isSubMenu?: boolean;
     tableInstance: MRT_TableInstance;
 }

package/dist/utils.d.ts

@@ -1,12 +1,12 @@
 import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnInterface, MRT_FilterType } from '.';
-export declare const getAllLeafColumnDefs: (columns: MRT_ColumnInterface[]) => MRT_ColumnInterface[];
-export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnInterface<D>, currentFilterTypes: {
+import { MRT_ColumnDef, MRT_FilterType } from '.';
+export declare const getAllLeafColumnDefs: (columns: MRT_ColumnDef[]) => MRT_ColumnDef[];
+export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterTypes: {
     [key: string]: MRT_FilterType;
 }) => ColumnDef<D>;
-export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnInterface<D>, currentFilterTypes: {
+export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterTypes: {
     [key: string]: MRT_FilterType;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnInterface<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterType" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortType" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationType" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterType" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortType" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationType" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0-alpha.8",
+  "version": "0.7.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -60,8 +60,8 @@
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.1",
     "@faker-js/faker": "^6.1.2",
-    "@mui/icons-material": "^5.6.1",
-    "@mui/material": "^5.6.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.2",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.22",
     "@storybook/addon-actions": "^6.4.22",
@@ -74,7 +74,7 @@
     "@storybook/react": "^6.4.22",
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
-    "babel-loader": "^8.2.4",
+    "babel-loader": "^8.2.5",
     "eslint": "^8.13.0",
     "eslint-plugin-react-hooks": "^4.4.0",
     "husky": "^7.0.4",
@@ -97,7 +97,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.0.0-alpha.28",
+    "@tanstack/react-table": "^8.0.0-alpha.44",
     "match-sorter": "^6.3.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -47,18 +47,13 @@ import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FILTER_TYPE } from './enums';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
 
-//@ts-ignore
-global.performance = global.performance || {
-  now: () => new Date().getTime(),
-};
-
 export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
   Omit<
     Options<D>,
     'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
   >
 > & {
-  columns: MRT_ColumnInterface<D>[];
+  columns: MRT_ColumnDef<D>[];
   data: D[];
   initialState?: Partial<MRT_TableState<D>>;
   state?: Partial<MRT_TableState<D>>;
@@ -90,8 +85,8 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   | 'getState'
   | 'options'
 > & {
-  getAllColumns: () => MRT_ColumnInstance<D>[];
-  getAllLeafColumns: () => MRT_ColumnInstance<D>[];
+  getAllColumns: () => MRT_Column<D>[];
+  getAllLeafColumns: () => MRT_Column<D>[];
   getExpandedRowModel: () => MRT_RowModel<D>;
   getPaginationRowModel: () => MRT_RowModel<D>;
   getPrePaginationRowModel: () => MRT_RowModel<D>;
@@ -103,18 +98,18 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
     idPrefix: string;
     filterTypes: { [key in MRT_FILTER_TYPE]: any };
     localization: MRT_Localization;
-    setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
-    setCurrentFilterTypes: Dispatch<
-      SetStateAction<{
-        [key: string]: MRT_FilterType;
-      }>
-    >;
-    setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
-    setIsDensePadding: Dispatch<SetStateAction<boolean>>;
-    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
-    setShowFilters: Dispatch<SetStateAction<boolean>>;
-    setShowSearch: Dispatch<SetStateAction<boolean>>;
   };
+  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
+  setCurrentFilterTypes: Dispatch<
+    SetStateAction<{
+      [key: string]: MRT_FilterType;
+    }>
+  >;
+  setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
+  setIsDensePadding: Dispatch<SetStateAction<boolean>>;
+  setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+  setShowFilters: Dispatch<SetStateAction<boolean>>;
+  setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
 };
 
 export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
@@ -127,11 +122,11 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
   isDensePadding: boolean;
   isFullScreen: boolean;
   showFilters: boolean;
-  showSearch: boolean;
+  showGlobalFilter: boolean;
   pagination: Partial<PaginationState>;
 };
 
-export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
+export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   ColumnDef<D>,
   'header' | 'footer' | 'columns'
 > & {
@@ -175,11 +170,11 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
     tableInstance: MRT_TableInstance<D>;
   }) => ReactNode;
   id: keyof D | string;
-  columns?: MRT_ColumnInterface<D>[];
+  columns?: MRT_ColumnDef<D>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
   enableEditing?: boolean;
-  enabledFilterTypes?: (MRT_FILTER_TYPE | string)[];
+  enabledColumnFilterTypes?: (MRT_FILTER_TYPE | string)[];
   filter?: MRT_FilterType | string | FilterType<D>;
   filterSelectOptions?: (string | { text: string; value: string })[];
   footer?: string;
@@ -218,7 +213,7 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
         column,
       }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
       }) => TableCellProps);
   muiTableHeadCellColumnActionsButtonProps?:
     | IconButtonProps
@@ -227,7 +222,7 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
         column,
       }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
       }) => IconButtonProps);
   muiTableHeadCellFilterTextFieldProps?:
     | TextFieldProps
@@ -236,7 +231,7 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
         column,
       }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
       }) => TextFieldProps);
   muiTableHeadCellProps?:
     | TableCellProps
@@ -245,7 +240,7 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
         column,
       }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
       }) => TableCellProps);
   onCellEditBlur?: ({
     cell,
@@ -274,19 +269,19 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
   }) => void;
 };
 
-export type MRT_ColumnInstance<D extends Record<string, any> = {}> = Omit<
+export type MRT_Column<D extends Record<string, any> = {}> = Omit<
   Column<D>,
   'header' | 'footer' | 'columns'
 > &
-  MRT_ColumnInterface<D> & {
-    columns?: MRT_ColumnInstance<D>[];
+  MRT_ColumnDef<D> & {
+    columns?: MRT_Column<D>[];
   };
 
 export type MRT_Header<D extends Record<string, any> = {}> = Omit<
   Header<D>,
   'column'
 > & {
-  column: MRT_ColumnInstance<D>;
+  column: MRT_Column<D>;
 };
 
 export type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<
@@ -319,7 +314,7 @@ export type MRT_Cell<D extends Record<string, any> = {}> = Omit<
   Cell<D>,
   'column' | 'row'
 > & {
-  column: MRT_ColumnInstance<D>;
+  column: MRT_Column<D>;
   row: MRT_Row<D>;
 };
 
@@ -329,27 +324,26 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   MRT_TableOptions<D> & {
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
-    enableColumnPinning?: boolean;
     enableDensePaddingToggle?: boolean;
+    enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
     enablePagination?: boolean;
     enableRowActions?: boolean;
-    enableStickyHeader?: boolean;
-    enableEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
+    enableStickyHeader?: boolean;
+    enableTableFooter?: boolean;
+    enableTableHead?: boolean;
+    enableToolbarBottom?: boolean;
+    enableToolbarInternalActions?: boolean;
+    enableToolbarTop?: boolean;
     enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
     filterTypes?: { [key in MRT_FILTER_TYPE]: any };
-    hideTableFooter?: boolean;
-    hideTableHead?: boolean;
-    hideToolbarBottom?: boolean;
-    hideToolbarInternalActions?: boolean;
-    hideToolbarTop?: boolean;
     icons?: Partial<MRT_Icons>;
     idPrefix?: string;
-    isReloading?: boolean;
     isLoading?: boolean;
+    isReloading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?:
       | LinearProgressProps
@@ -451,7 +445,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           column,
         }: {
           tableInstance: MRT_TableInstance;
-          column: MRT_ColumnInstance<D>;
+          column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableFooterProps?:
       | TableFooterProps
@@ -476,7 +470,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           column,
         }: {
           tableInstance: MRT_TableInstance;
-          column: MRT_ColumnInstance<D>;
+          column: MRT_Column<D>;
         }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
@@ -485,7 +479,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           column,
         }: {
           tableInstance: MRT_TableInstance;
-          column: MRT_ColumnInstance<D>;
+          column: MRT_Column<D>;
         }) => TextFieldProps);
     muiTableHeadCellProps?:
       | TableCellProps
@@ -494,7 +488,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           column,
         }: {
           tableInstance: MRT_TableInstance;
-          column: MRT_ColumnInstance<D>;
+          column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableHeadProps?:
       | TableHeadProps
@@ -563,15 +557,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       tableInstance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
-    onColumnHide?: ({
-      column,
-      columnVisibility,
-      tableInstance,
-    }: {
-      column: MRT_ColumnInstance<D>;
-      columnVisibility: VisibilityState;
-      tableInstance: MRT_TableInstance<D>;
-    }) => void;
     onDetailPanelClick?: ({
       event,
       row,
@@ -581,7 +566,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onGlobalFilterChange?: ({
+    onGlobalSearchFilterChange?: ({
       event,
       tableInstance,
     }: {
@@ -632,6 +617,51 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       selectedRows: MRT_Row<D>[];
       tableInstance: MRT_TableInstance<D>;
     }) => void;
+    onToggleColumnVisibility?: ({
+      column,
+      columnVisibility,
+      tableInstance,
+    }: {
+      column: MRT_Column<D>;
+      columnVisibility: VisibilityState;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleDensePadding?: ({
+      event,
+      isDensePadding,
+      tableInstance,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      isDensePadding: boolean;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleFullScreen?: ({
+      event,
+      isFullScreen,
+      tableInstance,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      isFullScreen: boolean;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleShowFilters?: ({
+      event,
+      showFilters,
+      tableInstance,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      showFilters: boolean;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleShowGlobalFilter?: ({
+      event,
+      showGlobalFilter,
+      tableInstance,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      showGlobalFilter: boolean;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
@@ -666,14 +696,14 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     }) => ReactNode;
     renderToolbarInternalActions?: ({
       tableInstance,
-      MRT_ToggleSearchButton,
+      MRT_ToggleGlobalFilterButton,
       MRT_ToggleFiltersButton,
       MRT_ShowHideColumnsButton,
       MRT_ToggleDensePaddingButton,
       MRT_FullScreenToggleButton,
     }: {
       tableInstance: MRT_TableInstance<D>;
-      MRT_ToggleSearchButton: FC<
+      MRT_ToggleGlobalFilterButton: FC<
         IconButtonProps & { tableInstance: MRT_TableInstance<D> }
       >;
       MRT_ToggleFiltersButton: FC<
@@ -692,17 +722,25 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   };
 
 export default <D extends Record<string, any> = {}>({
+  autoResetExpanded = false,
   enableColumnActions = true,
   enableColumnFilters = true,
   enableDensePaddingToggle = true,
   enableExpandAll = true,
+  enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
   enableHiding = true,
+  enableMultiRowSelection = true,
   enablePagination = true,
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = true,
+  enableTableFooter = true,
+  enableTableHead = true,
+  enableToolbarBottom = true,
+  enableToolbarInternalActions = true,
+  enableToolbarTop = true,
   icons,
   localization,
   positionActionsColumn = 'first',
@@ -712,17 +750,25 @@ export default <D extends Record<string, any> = {}>({
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MRT_TableRoot
+    autoResetExpanded={autoResetExpanded}
     enableColumnActions={enableColumnActions}
     enableColumnFilters={enableColumnFilters}
     enableDensePaddingToggle={enableDensePaddingToggle}
     enableExpandAll={enableExpandAll}
+    enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
     enableHiding={enableHiding}
+    enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}
     enableSelectAll={enableSelectAll}
     enableSorting={enableSorting}
     enableStickyHeader={enableStickyHeader}
+    enableTableFooter={enableTableFooter}
+    enableTableHead={enableTableHead}
+    enableToolbarBottom={enableToolbarBottom}
+    enableToolbarInternalActions={enableToolbarInternalActions}
+    enableToolbarTop={enableToolbarTop}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}

package/src/body/MRT_TableBodyCell.tsx

@@ -15,7 +15,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     getState,
     options: {
       enableClickToCopy,
-      enableColumnPinning,
+      enablePinning,
       enableEditing,
       isLoading,
       muiTableBodyCellProps,
@@ -73,7 +73,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
             : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace:
-          isDensePadding || (enableColumnPinning && getIsSomeColumnsPinned())
+          isDensePadding || (enablePinning && getIsSomeColumnsPinned())
             ? 'nowrap'
             : 'normal',
         //@ts-ignore
@@ -87,6 +87,8 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
           width={skeletonWidth}
           {...muiTableBodyCellSkeletonProps}
         />
+      ) : column.columnDefType === 'display' ? (
+        column.Cell?.({ cell, tableInstance })
       ) : cell.getIsPlaceholder() ||
         (row.getIsGrouped() &&
           column.id !==
@@ -100,7 +102,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
         column.enableClickToCopy !== false ? (
         <>
           <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
-            {cell.renderCell()}
+            {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
           </MRT_CopyButton>
           {row.getIsGrouped() && <> ({row.subRows?.length})</>}
         </>

package/src/buttons/MRT_EditActionButtons.tsx

@@ -15,8 +15,8 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
       icons: { CancelIcon, SaveIcon },
       localization,
       onEditSubmit,
-      setCurrentEditingRow,
     },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const { currentEditingRow } = getState();

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,18 +15,27 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
       localization,
-      setIsFullScreen,
+      onToggleFullScreen,
     },
+    setIsFullScreen,
   } = tableInstance;
 
   const { isFullScreen } = getState();
 
+  const handleToggleFullScreen = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleFullScreen?.({
+      event,
+      isFullScreen: !isFullScreen,
+      tableInstance,
+    });
+    setIsFullScreen(!isFullScreen);
+  };
+
   return (
     <Tooltip arrow title={localization.toggleFullScreen}>
       <IconButton
         aria-label={localization.showHideFilters}
-        onClick={() => setIsFullScreen(!isFullScreen)}
-        size="small"
+        onClick={handleToggleFullScreen}
         {...rest}
       >
         {isFullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -30,7 +30,6 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({
         <IconButton
           aria-label={localization.showHideColumns}
           onClick={handleClick}
-          size="small"
           {...rest}
         >
           <ViewColumnIcon />

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,18 +15,27 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
     options: {
       icons: { DensityMediumIcon, DensitySmallIcon },
       localization,
-      setIsDensePadding,
+      onToggleDensePadding,
     },
+    setIsDensePadding,
   } = tableInstance;
 
   const { isDensePadding } = getState();
 
+  const handleToggleDensePadding = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleDensePadding?.({
+      event,
+      isDensePadding: !isDensePadding,
+      tableInstance,
+    });
+    setIsDensePadding(!isDensePadding);
+  };
+
   return (
     <Tooltip arrow title={localization.toggleDensePadding}>
       <IconButton
         aria-label={localization.toggleDensePadding}
-        onClick={() => setIsDensePadding(!isDensePadding)}
-        size="small"
+        onClick={handleToggleDensePadding}
         {...rest}
       >
         {isDensePadding ? <DensitySmallIcon /> : <DensityMediumIcon />}

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,18 +15,27 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
-      setShowFilters,
+      onToggleShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { showFilters } = getState();
 
+  const handleToggleShowFilters = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleShowFilters?.({
+      event,
+      showFilters: !showFilters,
+      tableInstance,
+    });
+    setShowFilters(!showFilters);
+  };
+
   return (
     <Tooltip arrow title={localization.showHideFilters}>
       <IconButton
         aria-label={localization.showHideFilters}
-        onClick={() => setShowFilters(!showFilters)}
-        size="small"
+        onClick={handleToggleShowFilters}
         {...rest}
       >
         {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}

package/src/buttons/{MRT_ToggleSearchButton.tsx → MRT_ToggleGlobalFilterButton.tsx}

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -6,7 +6,7 @@ interface Props extends IconButtonProps {
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_ToggleSearchButton: FC<Props> = ({
+export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
   tableInstance,
   ...rest
 }) => {
@@ -17,19 +17,25 @@ export const MRT_ToggleSearchButton: FC<Props> = ({
       idPrefix,
       localization,
       muiSearchTextFieldProps,
-      setShowSearch,
+      onToggleShowGlobalFilter,
     },
+    setShowGlobalFilter,
   } = tableInstance;
 
-  const { showSearch } = getState();
+  const { showGlobalFilter } = getState();
 
   const textFieldProps =
     muiSearchTextFieldProps instanceof Function
       ? muiSearchTextFieldProps({ tableInstance })
       : muiSearchTextFieldProps;
 
-  const handleToggleSearch = () => {
-    setShowSearch(!showSearch);
+  const handleToggleSearch = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleShowGlobalFilter?.({
+      event,
+      showGlobalFilter: !showGlobalFilter,
+      tableInstance,
+    });
+    setShowGlobalFilter(!showGlobalFilter);
     setTimeout(
       () =>
         document
@@ -43,8 +49,8 @@ export const MRT_ToggleSearchButton: FC<Props> = ({
 
   return (
     <Tooltip arrow title={localization.showHideSearch}>
-      <IconButton size="small" onClick={handleToggleSearch} {...rest}>
-        {showSearch ? <SearchOffIcon /> : <SearchIcon />}
+      <IconButton onClick={handleToggleSearch} {...rest}>
+        {showGlobalFilter ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -32,8 +32,8 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
       localization,
       renderRowActionMenuItems,
       renderRowActions,
-      setCurrentEditingRow,
     },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const { currentEditingRow } = getState();