material-react-table 1.5.1 → 1.5.3

package/dist/esm/types/MaterialReactTable.d.ts

@@ -176,6 +176,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Tab
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
     setShowFilters: Dispatch<SetStateAction<boolean>>;
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
+    setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 };
 export type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
     columnFilterFns: Record<string, MRT_FilterOption>;
@@ -198,6 +199,7 @@ export type MRT_TableState<TData extends Record<string, any> = {}> = TableState
     showGlobalFilter: boolean;
     showProgressBars: boolean;
     showSkeletons: boolean;
+    showToolbarDropZone: boolean;
 };
 export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
     AggregatedCell?: ({ cell, column, row, table, }: {
@@ -636,6 +638,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
+    onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
     positionActionsColumn?: 'first' | 'last';
     positionExpandColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right' | 'none';

package/dist/esm/types/icons.d.ts

@@ -2,7 +2,6 @@ export interface MRT_Icons {
     ArrowDownwardIcon: any;
     ArrowRightIcon: any;
     CancelIcon: any;
-    CheckBoxIcon: any;
     ClearAllIcon: any;
     CloseIcon: any;
     DensityLargeIcon: any;
@@ -15,7 +14,6 @@ export interface MRT_Icons {
     ExpandLessIcon: any;
     ExpandMoreIcon: any;
     FilterAltIcon: any;
-    FilterAltOffIcon: any;
     FilterListIcon: any;
     FilterListOffIcon: any;
     FullscreenExitIcon: any;

package/dist/esm/types/table/MRT_TableRoot.d.ts

@@ -199,6 +199,7 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     onShowAlertBannerChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
     onShowFiltersChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
     onShowGlobalFilterChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
+    onShowToolbarDropZoneChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
     positionActionsColumn?: "first" | "last" | undefined;
     positionExpandColumn?: "first" | "last" | undefined;
     positionGlobalFilter?: "left" | "right" | "none" | undefined;

package/dist/esm/types/toolbar/MRT_BottomToolbar.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
 }

package/dist/index.d.ts

@@ -107,7 +107,6 @@ interface MRT_Icons {
     ArrowDownwardIcon: any;
     ArrowRightIcon: any;
     CancelIcon: any;
-    CheckBoxIcon: any;
     ClearAllIcon: any;
     CloseIcon: any;
     DensityLargeIcon: any;
@@ -120,7 +119,6 @@ interface MRT_Icons {
     ExpandLessIcon: any;
     ExpandMoreIcon: any;
     FilterAltIcon: any;
-    FilterAltOffIcon: any;
     FilterListIcon: any;
     FilterListOffIcon: any;
     FullscreenExitIcon: any;
@@ -299,6 +297,7 @@ type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Table<TDat
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
     setShowFilters: Dispatch<SetStateAction<boolean>>;
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
+    setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 };
 type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
     columnFilterFns: Record<string, MRT_FilterOption>;
@@ -321,6 +320,7 @@ type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
     showGlobalFilter: boolean;
     showProgressBars: boolean;
     showSkeletons: boolean;
+    showToolbarDropZone: boolean;
 };
 type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
     AggregatedCell?: ({ cell, column, row, table, }: {
@@ -759,6 +759,7 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
+    onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
     positionActionsColumn?: 'first' | 'last';
     positionExpandColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right' | 'none';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.1",
+  "version": "1.5.3",
   "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

@@ -222,6 +222,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
   setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
   setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
+  setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 };
 
 export type MRT_TableState<TData extends Record<string, any> = {}> =
@@ -242,6 +243,7 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
     showGlobalFilter: boolean;
     showProgressBars: boolean;
     showSkeletons: boolean;
+    showToolbarDropZone: boolean;
   };
 
 export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
@@ -971,6 +973,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
+    onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
     positionActionsColumn?: 'first' | 'last';
     positionExpandColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right' | 'none';

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -41,11 +41,13 @@ export const MRT_ShowHideColumnsButton = <
           <ViewColumnIcon />
         </IconButton>
       </Tooltip>
-      <MRT_ShowHideColumnsMenu
-        anchorEl={anchorEl}
-        setAnchorEl={setAnchorEl}
-        table={table}
-      />
+      {anchorEl && (
+        <MRT_ShowHideColumnsMenu
+          anchorEl={anchorEl}
+          setAnchorEl={setAnchorEl}
+          table={table}
+        />
+      )}
     </>
   );
 };

package/src/icons.ts

@@ -1,7 +1,6 @@
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
 import DensityLargeIcon from '@mui/icons-material/DensityLarge';
@@ -13,7 +12,6 @@ import EditIcon from '@mui/icons-material/Edit';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
-import FilterAltOffIcon from '@mui/icons-material/FilterAltOff';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
@@ -34,7 +32,6 @@ export interface MRT_Icons {
   ArrowDownwardIcon: any;
   ArrowRightIcon: any;
   CancelIcon: any;
-  CheckBoxIcon: any;
   ClearAllIcon: any;
   CloseIcon: any;
   DensityLargeIcon: any;
@@ -47,7 +44,6 @@ export interface MRT_Icons {
   ExpandLessIcon: any;
   ExpandMoreIcon: any;
   FilterAltIcon: any;
-  FilterAltOffIcon: any;
   FilterListIcon: any;
   FilterListOffIcon: any;
   FullscreenExitIcon: any;
@@ -68,7 +64,6 @@ export const MRT_Default_Icons: MRT_Icons = {
   ArrowDownwardIcon,
   ArrowRightIcon,
   CancelIcon,
-  CheckBoxIcon,
   ClearAllIcon,
   CloseIcon,
   DensityLargeIcon,
@@ -80,7 +75,6 @@ export const MRT_Default_Icons: MRT_Icons = {
   ExpandLessIcon,
   ExpandMoreIcon,
   FilterAltIcon,
-  FilterAltOffIcon,
   FilterListIcon,
   FilterListOffIcon,
   FullscreenExitIcon,

package/src/inputs/MRT_FilterTextField.tsx

@@ -165,7 +165,9 @@ export const MRT_FilterTextField: FC<Props> = ({
     column.setFilterValue(undefined);
     setColumnFilterFns((prev) => ({
       ...prev,
-      [header.id]: 'fuzzy',
+      [header.id]: columnDef.columnFilterModeOptions?.[0]
+        ?? columnFilterModeOptions?.[0] 
+        ?? 'fuzzy',
     }));
   };
 

package/src/table/MRT_TableRoot.tsx

@@ -117,6 +117,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [showGlobalFilter, setShowGlobalFilter] = useState(
     initialState?.showGlobalFilter ?? false,
   );
+  const [showToolbarDropZone, setShowToolbarDropZone] = useState(
+    initialState?.showToolbarDropZone ?? false,
+  );
 
   const displayColumns = useMemo(
     () =>
@@ -284,6 +287,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         showAlertBanner,
         showColumnFilters,
         showGlobalFilter,
+        showToolbarDropZone,
         ...props.state,
       } as TableState,
     }),
@@ -310,6 +314,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
     setShowFilters: props.onShowFiltersChange ?? setShowFilters,
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
+    setShowToolbarDropZone: props.onShowToolbarDropZoneChange ?? setShowToolbarDropZone,
   } as MRT_TableInstance<TData>;
 
   if (props.tableInstanceRef) {

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -5,10 +5,10 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { alpha } from '@mui/material/styles';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { commonToolbarStyles } from './MRT_TopToolbar';
-import { MRT_TableInstance } from '..';
-import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -1,4 +1,4 @@
-import React, { DragEvent } from 'react';
+import React, { DragEvent, useEffect } from 'react';
 import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
@@ -16,25 +16,30 @@ export const MRT_ToolbarDropZone = <TData extends Record<string, any> = {}>({
     getState,
     options: { enableGrouping, localization },
     setHoveredColumn,
+    setShowToolbarDropZone,
   } = table;
 
-  const { draggingColumn, hoveredColumn, grouping } = getState();
+  const { draggingColumn, hoveredColumn, grouping, showToolbarDropZone } =
+    getState();
 
   const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
     setHoveredColumn({ id: 'drop-zone' });
   };
 
-  return (
-    <Fade
-      unmountOnExit
-      mountOnEnter
-      in={
+  useEffect(() => {
+    if (table.options.state?.showToolbarDropZone !== undefined) {
+      setShowToolbarDropZone(
         !!enableGrouping &&
-        !!draggingColumn &&
-        !grouping.includes(draggingColumn.id)
-      }
-    >
+          !!draggingColumn &&
+          !grouping.includes(draggingColumn.id),
+      );
+    }
+  }, [enableGrouping, draggingColumn, grouping]);
+
+  return (
+    <Fade in={showToolbarDropZone}>
       <Box
+        className="Mui-ToolbarDropZone"
         sx={(theme) => ({
           alignItems: 'center',
           backgroundColor: alpha(