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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0-alpha.11",
+  "version": "0.7.0-alpha.12",
   "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.",

package/src/MaterialReactTable.tsx

@@ -114,7 +114,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   setIsDensePadding: Dispatch<SetStateAction<boolean>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
-  setShowSearch: Dispatch<SetStateAction<boolean>>;
+  setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
 };
 
 export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
@@ -127,7 +127,7 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
   isDensePadding: boolean;
   isFullScreen: boolean;
   showFilters: boolean;
-  showSearch: boolean;
+  showGlobalFilter: boolean;
   pagination: Partial<PaginationState>;
 };
 
@@ -562,15 +562,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,
@@ -631,6 +622,51 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       selectedRows: MRT_Row<D>[];
       tableInstance: MRT_TableInstance<D>;
     }) => void;
+    onToggleColumnVisibility?: ({
+      column,
+      columnVisibility,
+      tableInstance,
+    }: {
+      column: MRT_ColumnInstance<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';
@@ -665,14 +701,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<

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,17 +15,27 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
       localization,
+      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)}
+        onClick={handleToggleFullScreen}
         size="small"
         {...rest}
       >

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,17 +15,27 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
     options: {
       icons: { DensityMediumIcon, DensitySmallIcon },
       localization,
+      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)}
+        onClick={handleToggleDensePadding}
         size="small"
         {...rest}
       >

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,17 +15,27 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
+      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)}
+        onClick={handleToggleShowFilters}
         size="small"
         {...rest}
       >

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,
+      onToggleShowGlobalFilter,
     },
-    setShowSearch,
+    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
@@ -44,7 +50,7 @@ export const MRT_ToggleSearchButton: FC<Props> = ({
   return (
     <Tooltip arrow title={localization.showHideSearch}>
       <IconButton size="small" onClick={handleToggleSearch} {...rest}>
-        {showSearch ? <SearchOffIcon /> : <SearchIcon />}
+        {showGlobalFilter ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>
     </Tooltip>
   );

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 ?? '');
@@ -61,7 +61,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       : muiSearchTextFieldProps;
 
   return (
-    <Collapse in={showSearch} orientation="horizontal">
+    <Collapse in={showGlobalFilter} orientation="horizontal">
       <TextField
         id={`mrt-${idPrefix}-search-text-field`}
         placeholder={localization.search}

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,7 +34,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onColumnHide?.({
+    onToggleColumnVisibility?.({
       column,
       columnVisibility,
       tableInstance,

package/src/table/MRT_TableRoot.tsx

@@ -52,8 +52,8 @@ 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,
@@ -223,7 +223,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         //@ts-ignore
         pagination,
         showFilters,
-        showSearch,
+        showGlobalFilter,
         ...props.state,
       },
     }),
@@ -233,7 +233,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     setIsDensePadding,
     setIsFullScreen,
     setShowFilters,
-    setShowSearch,
+    setShowGlobalFilter,
   };
 
   return <MRT_TablePaper tableInstance={tableInstance} />;

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 {
@@ -32,7 +32,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
           MRT_ShowHideColumnsButton,
           MRT_ToggleDensePaddingButton,
           MRT_ToggleFiltersButton,
-          MRT_ToggleSearchButton,
+          MRT_ToggleGlobalFilterButton,
           tableInstance,
         })}
       </>
@@ -49,7 +49,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
       }}
     >
       {enableFilters && enableGlobalFilter && (
-        <MRT_ToggleSearchButton tableInstance={tableInstance} />
+        <MRT_ToggleGlobalFilterButton tableInstance={tableInstance} />
       )}
       {enableFilters && enableColumnFilters && (
         <MRT_ToggleFiltersButton tableInstance={tableInstance} />