material-react-table 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/esm/menus/MRT_FilterOptionMenu.d.ts

@@ -6,7 +6,8 @@ interface Props<TData extends Record<string, any> = {}> {
     header?: MRT_Header<TData>;
     onSelect?: () => void;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
+    setFilterValue?: (filterValue: any) => void;
     table: MRT_TableInstance<TData>;
 }
-export declare const MRT_FilterOptionMenu: <TData extends Record<string, any> = {}>({ anchorEl, header, onSelect, setAnchorEl, table, }: Props<TData>) => JSX.Element;
+export declare const MRT_FilterOptionMenu: <TData extends Record<string, any> = {}>({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/index.d.ts

@@ -660,6 +660,9 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
     positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
+    renderBottomToolbar?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode | ReactNode[];
     renderBottomToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
@@ -696,6 +699,9 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     renderToolbarInternalActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderTopToolbar?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode | ReactNode[];
     renderTopToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -783,6 +783,11 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
     positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
+    renderBottomToolbar?: ({
+      table,
+    }: {
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode | ReactNode[];
     renderBottomToolbarCustomActions?: ({
       table,
     }: {
@@ -847,6 +852,11 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }: {
       table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderTopToolbar?: ({
+      table,
+    }: {
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode | ReactNode[];
     renderTopToolbarCustomActions?: ({
       table,
     }: {

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -23,7 +23,7 @@ export const MRT_ToggleGlobalFilterButton = <
     refs: { searchInputRef },
     setShowGlobalFilter,
   } = table;
-  const { showGlobalFilter } = getState();
+  const { globalFilter, showGlobalFilter } = getState();
 
   const handleToggleSearch = () => {
     setShowGlobalFilter(!showGlobalFilter);
@@ -32,7 +32,12 @@ export const MRT_ToggleGlobalFilterButton = <
 
   return (
     <Tooltip arrow title={rest?.title ?? localization.showHideSearch}>
-      <IconButton onClick={handleToggleSearch} {...rest} title={undefined}>
+      <IconButton
+        disabled={!!globalFilter}
+        onClick={handleToggleSearch}
+        {...rest}
+        title={undefined}
+      >
         {showGlobalFilter ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>
     </Tooltip>

package/src/inputs/MRT_FilterTextField.tsx

@@ -3,7 +3,6 @@ import React, {
   FC,
   MouseEvent,
   useCallback,
-  useEffect,
   useState,
 } from 'react';
 import {
@@ -170,10 +169,6 @@ export const MRT_FilterTextField: FC<Props> = ({
     setAnchorEl(event.currentTarget);
   };
 
-  useEffect(() => {
-    handleClear();
-  }, [columnDef._filterFn]);
-
   if (columnDef.Filter) {
     return <>{columnDef.Filter?.({ column, header, table })}</>;
   }
@@ -374,6 +369,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         header={header}
         setAnchorEl={setAnchorEl}
         table={table}
+        setFilterValue={setFilterValue}
       />
     </>
   );

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -119,6 +119,7 @@ export const MRT_GlobalFilterTextField = <
         anchorEl={anchorEl}
         setAnchorEl={setAnchorEl}
         table={table}
+        onSelect={handleClear}
       />
     </Collapse>
   );

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -102,6 +102,7 @@ interface Props<TData extends Record<string, any> = {}> {
   header?: MRT_Header<TData>;
   onSelect?: () => void;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  setFilterValue?: (filterValue: any) => void;
   table: MRT_TableInstance<TData>;
 }
 
@@ -110,6 +111,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   header,
   onSelect,
   setAnchorEl,
+  setFilterValue,
   table,
 }: Props<TData>) => {
   const {
@@ -152,10 +154,25 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
       }));
       if (['empty', 'notEmpty'].includes(option as string)) {
         column.setFilterValue(' ');
-      } else if (option === 'between') {
+      } else if (
+        columnDef?.filterVariant === 'multi-select' ||
+        ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(
+          option as string,
+        )
+      ) {
+        column.setFilterValue([]);
+        setFilterValue?.([]);
+      } else if (
+        columnDef?.filterVariant === 'range' ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(
+          option as MRT_FilterOption,
+        )
+      ) {
         column.setFilterValue(['', '']);
+        setFilterValue?.('');
       } else {
         column.setFilterValue('');
+        setFilterValue?.('');
       }
     } else {
       setGlobalFilterFn(option);

package/src/table/MRT_TablePaper.tsx

@@ -12,7 +12,13 @@ interface Props {
 export const MRT_TablePaper: FC<Props> = ({ table }) => {
   const {
     getState,
-    options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps },
+    options: {
+      enableBottomToolbar,
+      enableTopToolbar,
+      muiTablePaperProps,
+      renderBottomToolbar,
+      renderTopToolbar,
+    },
     refs: { tablePaperRef },
   } = table;
   const { isFullScreen } = getState();
@@ -53,9 +59,13 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
           : {}),
       }}
     >
-      {enableTopToolbar && <MRT_TopToolbar table={table} />}
+      {(enableTopToolbar && renderTopToolbar?.({ table })) ?? (
+        <MRT_TopToolbar table={table} />
+      )}
       <MRT_TableContainer table={table} />
-      {enableBottomToolbar && <MRT_BottomToolbar table={table} />}
+      {(enableBottomToolbar && renderBottomToolbar?.({ table })) ?? (
+        <MRT_BottomToolbar table={table} />
+      )}
     </Paper>
   );
 };