material-react-table 1.5.1 → 1.5.2

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/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/index.d.ts

@@ -299,6 +299,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 +322,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 +761,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.2",
   "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/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_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(