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

package/dist/MaterialReactTable.d.ts

@@ -45,7 +45,7 @@ export declare 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 declare type MRT_TableState<D extends Record<string, any> = {}> = Omit<TableState, 'pagination'> & {
     currentEditingRow: MRT_Row<D> | null;
@@ -54,7 +54,7 @@ export declare type MRT_TableState<D extends Record<string, any> = {}> = Omit<Ta
     isDensePadding: boolean;
     isFullScreen: boolean;
     showFilters: boolean;
-    showSearch: boolean;
+    showGlobalFilter: boolean;
     pagination: Partial<PaginationState>;
 };
 export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'header' | 'footer' | 'columns'> & {
@@ -277,11 +277,6 @@ export declare 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, tableInstance, }: {
         event: MouseEvent<HTMLTableCellElement>;
         row: MRT_Row<D>;
@@ -316,6 +311,31 @@ export declare 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';
@@ -336,9 +356,9 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     renderToolbarCustomActions?: ({ tableInstance, }: {
         tableInstance: MRT_TableInstance<D>;
     }) => ReactNode;
-    renderToolbarInternalActions?: ({ tableInstance, MRT_ToggleSearchButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
+    renderToolbarInternalActions?: ({ tableInstance, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
         tableInstance: MRT_TableInstance<D>;
-        MRT_ToggleSearchButton: FC<IconButtonProps & {
+        MRT_ToggleGlobalFilterButton: FC<IconButtonProps & {
             tableInstance: MRT_TableInstance<D>;
         }>;
         MRT_ToggleFiltersButton: FC<IconButtonProps & {

package/dist/buttons/{MRT_ToggleSearchButton.d.ts → MRT_ToggleGlobalFilterButton.d.ts}

@@ -4,5 +4,5 @@ import { MRT_TableInstance } from '..';
 interface Props extends IconButtonProps {
     tableInstance: MRT_TableInstance;
 }
-export declare const MRT_ToggleSearchButton: FC<Props>;
+export declare const MRT_ToggleGlobalFilterButton: FC<Props>;
 export {};

package/dist/material-react-table.cjs.development.js

@@ -518,7 +518,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       isSubMenu = _ref.isSubMenu,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
-      onColumnHide = tableInstance.options.onColumnHide;
+      onToggleColumnVisibility = tableInstance.options.onToggleColumnVisibility;
 
   var _getState = getState(),
       columnVisibility = _getState.columnVisibility;
@@ -538,7 +538,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       column.toggleVisibility();
     }
 
-    onColumnHide == null ? void 0 : onColumnHide({
+    onToggleColumnVisibility == null ? void 0 : onToggleColumnVisibility({
       column: column,
       columnVisibility: columnVisibility,
       tableInstance: tableInstance
@@ -1163,7 +1163,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
-      showSearch = _getState.showSearch;
+      showGlobalFilter = _getState.showGlobalFilter;
 
   var _useState = React.useState(null),
       anchorEl = _useState[0],
@@ -1196,7 +1196,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     tableInstance: tableInstance
   }) : muiSearchTextFieldProps;
   return React__default.createElement(material.Collapse, {
-    "in": showSearch,
+    "in": showGlobalFilter,
     orientation: "horizontal"
   }, React__default.createElement(material.TextField, Object.assign({
     id: "mrt-" + idPrefix + "-search-text-field",
@@ -1258,19 +1258,27 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
       FullscreenExitIcon = _tableInstance$option2.FullscreenExitIcon,
       FullscreenIcon = _tableInstance$option2.FullscreenIcon,
       localization = _tableInstance$option.localization,
+      onToggleFullScreen = _tableInstance$option.onToggleFullScreen,
       setIsFullScreen = tableInstance.setIsFullScreen;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
+  var handleToggleFullScreen = function handleToggleFullScreen(event) {
+    onToggleFullScreen == null ? void 0 : onToggleFullScreen({
+      event: event,
+      isFullScreen: !isFullScreen,
+      tableInstance: tableInstance
+    });
+    setIsFullScreen(!isFullScreen);
+  };
+
   return React__default.createElement(material.Tooltip, {
     arrow: true,
     title: localization.toggleFullScreen
   }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.showHideFilters,
-    onClick: function onClick() {
-      return setIsFullScreen(!isFullScreen);
-    },
+    onClick: handleToggleFullScreen,
     size: "small"
   }, rest), isFullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
 };
@@ -1317,19 +1325,27 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
       DensityMediumIcon = _tableInstance$option2.DensityMediumIcon,
       DensitySmallIcon = _tableInstance$option2.DensitySmallIcon,
       localization = _tableInstance$option.localization,
+      onToggleDensePadding = _tableInstance$option.onToggleDensePadding,
       setIsDensePadding = tableInstance.setIsDensePadding;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
 
+  var handleToggleDensePadding = function handleToggleDensePadding(event) {
+    onToggleDensePadding == null ? void 0 : onToggleDensePadding({
+      event: event,
+      isDensePadding: !isDensePadding,
+      tableInstance: tableInstance
+    });
+    setIsDensePadding(!isDensePadding);
+  };
+
   return React__default.createElement(material.Tooltip, {
     arrow: true,
     title: localization.toggleDensePadding
   }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.toggleDensePadding,
-    onClick: function onClick() {
-      return setIsDensePadding(!isDensePadding);
-    },
+    onClick: handleToggleDensePadding,
     size: "small"
   }, rest), isDensePadding ? React__default.createElement(DensitySmallIcon, null) : React__default.createElement(DensityMediumIcon, null)));
 };
@@ -1345,25 +1361,33 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
       FilterListIcon = _tableInstance$option2.FilterListIcon,
       FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
       localization = _tableInstance$option.localization,
+      onToggleShowFilters = _tableInstance$option.onToggleShowFilters,
       setShowFilters = tableInstance.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
 
+  var handleToggleShowFilters = function handleToggleShowFilters(event) {
+    onToggleShowFilters == null ? void 0 : onToggleShowFilters({
+      event: event,
+      showFilters: !showFilters,
+      tableInstance: tableInstance
+    });
+    setShowFilters(!showFilters);
+  };
+
   return React__default.createElement(material.Tooltip, {
     arrow: true,
     title: localization.showHideFilters
   }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.showHideFilters,
-    onClick: function onClick() {
-      return setShowFilters(!showFilters);
-    },
+    onClick: handleToggleShowFilters,
     size: "small"
   }, rest), showFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null)));
 };
 
 var _excluded$4 = ["tableInstance"];
-var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
+var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   var tableInstance = _ref.tableInstance,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
@@ -1375,17 +1399,23 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
       idPrefix = _tableInstance$option.idPrefix,
       localization = _tableInstance$option.localization,
       muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      setShowSearch = tableInstance.setShowSearch;
+      onToggleShowGlobalFilter = _tableInstance$option.onToggleShowGlobalFilter,
+      setShowGlobalFilter = tableInstance.setShowGlobalFilter;
 
   var _getState = getState(),
-      showSearch = _getState.showSearch;
+      showGlobalFilter = _getState.showGlobalFilter;
 
   var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
     tableInstance: tableInstance
   }) : muiSearchTextFieldProps;
 
-  var handleToggleSearch = function handleToggleSearch() {
-    setShowSearch(!showSearch);
+  var handleToggleSearch = function handleToggleSearch(event) {
+    onToggleShowGlobalFilter == null ? void 0 : onToggleShowGlobalFilter({
+      event: event,
+      showGlobalFilter: !showGlobalFilter,
+      tableInstance: tableInstance
+    });
+    setShowGlobalFilter(!showGlobalFilter);
     setTimeout(function () {
       var _document$getElementB, _textFieldProps$id;
 
@@ -1399,7 +1429,7 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
   }, React__default.createElement(material.IconButton, Object.assign({
     size: "small",
     onClick: handleToggleSearch
-  }, rest), showSearch ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
+  }, rest), showGlobalFilter ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
 };
 
 var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
@@ -1419,7 +1449,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
       MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
       MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
-      MRT_ToggleSearchButton: MRT_ToggleSearchButton,
+      MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
       tableInstance: tableInstance
     }));
   }
@@ -1431,7 +1461,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       alignItems: 'center',
       p: '0 0.5rem'
     }
-  }, enableFilters && enableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, {
+  }, enableFilters && enableGlobalFilter && React__default.createElement(MRT_ToggleGlobalFilterButton, {
     tableInstance: tableInstance
   }), enableFilters && enableColumnFilters && React__default.createElement(MRT_ToggleFiltersButton, {
     tableInstance: tableInstance
@@ -2818,9 +2848,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showFilters = _useState4[0],
       setShowFilters = _useState4[1];
 
-  var _useState5 = React.useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearch) != null ? _props$initialState$s2 : false),
-      showSearch = _useState5[0],
-      setShowSearch = _useState5[1];
+  var _useState5 = React.useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showGlobalFilter) != null ? _props$initialState$s2 : false),
+      showGlobalFilter = _useState5[0],
+      setShowGlobalFilter = _useState5[1];
 
   var _useState6 = React.useState({
     pageIndex: (_props$initialState$p = (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.pagination) == null ? void 0 : _props$initialState5$.pageIndex) != null ? _props$initialState$p : 0,
@@ -2961,7 +2991,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       //@ts-ignore
       pagination: pagination,
       showFilters: showFilters,
-      showSearch: showSearch
+      showGlobalFilter: showGlobalFilter
     }, props.state)
   })), {
     setCurrentEditingRow: setCurrentEditingRow,
@@ -2970,7 +3000,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setIsDensePadding: setIsDensePadding,
     setIsFullScreen: setIsFullScreen,
     setShowFilters: setShowFilters,
-    setShowSearch: setShowSearch
+    setShowGlobalFilter: setShowGlobalFilter
   });
 
   return React__default.createElement(MRT_TablePaper, {