gantt-task-react-v 1.4.8 → 1.5.0

package/dist/components/task-list/column-visibility-toggle/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Column } from "../../../types";
+interface ColumnVisibilityToggleProps {
+    allColumns: readonly Column[];
+    onColumnVisibilityChange?: (columnId: string, hidden: boolean) => void;
+}
+export declare const ColumnVisibilityToggle: React.NamedExoticComponent<ColumnVisibilityToggleProps>;
+export {};

package/dist/components/task-list/index.d.ts

@@ -1,6 +1,6 @@
 import type { MouseEvent, RefObject } from "react";
 import React from "react";
-import { AllowReorderTask, ChildByLevelMap, Column, DateSetup, DependencyMap, Distances, GanttRenderIconsProps, MapTaskToNestedIndex, OnResizeColumn, Task, RenderTask, TableRenderBottomProps } from "../../types";
+import { AllowReorderTask, ChildByLevelMap, Column, DateSetup, DependencyMap, Distances, GanttRenderIconsProps, MapTaskToNestedIndex, OnColumnVisibilityChange, OnResizeColumn, Task, RenderTask, TableRenderBottomProps } from "../../types";
 export type TaskListProps = {
     ganttRef: RefObject<HTMLDivElement>;
     /** Ref to the horizontal scroll wrapper (used for containing popups) */
@@ -39,6 +39,8 @@ export type TaskListProps = {
     taskListRef: RefObject<HTMLDivElement>;
     tasks: readonly RenderTask[];
     onResizeColumn?: OnResizeColumn;
+    canToggleColumns?: boolean;
+    onColumnVisibilityChange?: OnColumnVisibilityChange;
     tableBottom?: TableRenderBottomProps;
 };
 export declare const TaskList: React.NamedExoticComponent<TaskListProps>;

package/dist/gantt-task-react.es.js

@@ -4589,7 +4589,7 @@ const tooltipDefaultContainerTexts = "_tooltipDefaultContainerTexts_16o9s_17";
 const tooltipDefaultContainerParagraph = "_tooltipDefaultContainerParagraph_16o9s_31";
 const tooltipDetailsContainer = "_tooltipDetailsContainer_16o9s_47";
 const tooltipDetailsContainerHidden = "_tooltipDetailsContainerHidden_16o9s_71";
-const styles$m = {
+const styles$n = {
   tooltipDefaultContainer,
   tooltipDefaultContainerTexts,
   tooltipDefaultContainerParagraph,
@@ -4632,26 +4632,26 @@ const StandardTooltipContent = ({ task }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$m.tooltipDefaultContainer,
+      className: styles$n.tooltipDefaultContainer,
       style: { fontSize: "var(--gantt-font-size)" },
       children: [
         /* @__PURE__ */ jsx("b", { style: { fontSize: "var(--gantt-font-size)" }, children: `${task.name}: ${task.start.getDate()}-${task.start.getMonth() + 1}-${task.start.getFullYear()} - ${task.end.getDate()}-${task.end.getMonth() + 1}-${task.end.getFullYear()}` }),
-        /* @__PURE__ */ jsxs("div", { className: styles$m.tooltipDefaultContainerTexts, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$n.tooltipDefaultContainerTexts, children: [
           task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ jsx(
             "p",
             {
-              className: styles$m.tooltipDefaultContainerParagraph,
+              className: styles$n.tooltipDefaultContainerParagraph,
               children: `${locale.tooltip.duration},: ${~~((task.end.getTime() - task.start.getTime()) / (1e3 * 60 * 60 * 24))} ${locale.suffix.days}`
             }
           ),
-          !!locale.tooltip.progress && /* @__PURE__ */ jsx("p", { className: styles$m.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
+          !!locale.tooltip.progress && /* @__PURE__ */ jsx("p", { className: styles$n.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
         ] })
       ]
     }
   );
 };
 const scroll = "_scroll_hp3qb_1";
-const styles$l = {
+const styles$m = {
   scroll
 };
 const VerticalScroll = ({
@@ -4672,7 +4672,7 @@ const VerticalScroll = ({
         marginLeft: rtl ? void 0 : "-1rem",
         pointerEvents: isChangeInProgress ? "none" : void 0
       },
-      className: styles$l.scroll,
+      className: styles$m.scroll,
       onScroll,
       ref: verticalScrollbarRef,
       children: /* @__PURE__ */ jsx("div", { style: { height: ganttFullHeight, width: 1 } })
@@ -4750,7 +4750,7 @@ const dragging = "_dragging_16z6n_15";
 const taskListExpander = "_taskListExpander_16z6n_23";
 const taskListEmptyExpander = "_taskListEmptyExpander_16z6n_45";
 const taskName = "_taskName_16z6n_55";
-const styles$k = {
+const styles$l = {
   taskListNameWrapper,
   dragging,
   taskListExpander,
@@ -4827,7 +4827,7 @@ const TitleColumn = ({
     "div",
     {
       "data-testid": `title-table-cell-${name}`,
-      className: `${styles$k.taskListNameWrapper}`,
+      className: `${styles$l.taskListNameWrapper}`,
       style: {
         paddingLeft: depth * nestedTaskNameOffset
       },
@@ -4836,7 +4836,7 @@ const TitleColumn = ({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `gantt-expander ${styles$k.taskListExpander} ${!hasChildren ? styles$k.taskListEmptyExpander : ""}`,
+            className: `gantt-expander ${styles$l.taskListExpander} ${!hasChildren ? styles$l.taskListEmptyExpander : ""}`,
             style: {
               left: depth * nestedTaskNameOffset
             },
@@ -4847,7 +4847,7 @@ const TitleColumn = ({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: styles$k.taskName,
+            className: styles$l.taskName,
             style: { fontWeight: isProject ? "bold" : "regular" },
             children: [
               isShowTaskNumbers && /* @__PURE__ */ jsxs("b", { children: [
@@ -4902,7 +4902,7 @@ const DependenciesColumn = ({
   return /* @__PURE__ */ jsx(Fragment, { children: dependencies.map(({ name }) => name).join(", ") });
 };
 const button = "_button_l55x0_1";
-const styles$j = {
+const styles$k = {
   button
 };
 const DeleteIcon = (props) => /* @__PURE__ */ jsxs(
@@ -4936,7 +4936,7 @@ const DeleteColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$j.button,
+      className: styles$k.button,
       children: (icons == null ? void 0 : icons.renderDeleteIcon) ? icons.renderDeleteIcon() : /* @__PURE__ */ jsx(DeleteIcon, {})
     }
   );
@@ -4971,7 +4971,7 @@ const EditColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$j.button,
+      className: styles$k.button,
       children: (icons == null ? void 0 : icons.renderEditIcon) ? icons.renderEditIcon() : /* @__PURE__ */ jsx(EditIcon, {})
     }
   );
@@ -5012,7 +5012,7 @@ const AddColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$j.button,
+      className: styles$k.button,
       children: (icons == null ? void 0 : icons.renderAddIcon) ? icons.renderAddIcon() : /* @__PURE__ */ jsx(AddIcon, {})
     }
   );
@@ -5515,6 +5515,131 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
     onColumnResizeStart
   ];
 };
+const toggleWrapper = "_toggleWrapper_rjfhl_1";
+const toggleButton = "_toggleButton_rjfhl_15";
+const dropdown = "_dropdown_rjfhl_51";
+const dropdownItem = "_dropdownItem_rjfhl_85";
+const checkbox = "_checkbox_rjfhl_141";
+const columnLabel = "_columnLabel_rjfhl_157";
+const dropdownTitle = "_dropdownTitle_rjfhl_169";
+const divider = "_divider_rjfhl_211";
+const styles$j = {
+  toggleWrapper,
+  toggleButton,
+  dropdown,
+  dropdownItem,
+  checkbox,
+  columnLabel,
+  dropdownTitle,
+  divider
+};
+const ColumnsIcon = ({ className }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M2 3.5h12M2 8h12M2 12.5h12",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5 3.5v9M11 3.5v9",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeDasharray: "1 2"
+        }
+      )
+    ]
+  }
+);
+const ColumnVisibilityToggleInner = ({
+  allColumns,
+  onColumnVisibilityChange
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  const toggleDropdown = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const handleToggle = useCallback(
+    (columnId, currentlyHidden) => {
+      if (onColumnVisibilityChange) {
+        onColumnVisibilityChange(columnId, !currentlyHidden);
+      }
+    },
+    [onColumnVisibilityChange]
+  );
+  useEffect(() => {
+    if (!isOpen)
+      return void 0;
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const toggleableColumns = allColumns.filter((col) => col.title);
+  if (toggleableColumns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles$j.toggleWrapper, ref: wrapperRef, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: styles$j.toggleButton,
+        onClick: toggleDropdown,
+        title: "Toggle column visibility",
+        type: "button",
+        children: /* @__PURE__ */ jsx(ColumnsIcon, {})
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: styles$j.dropdown, children: [
+      /* @__PURE__ */ jsx("div", { className: styles$j.dropdownTitle, children: "Columns" }),
+      /* @__PURE__ */ jsx("div", { className: styles$j.divider }),
+      toggleableColumns.map((column) => {
+        const isVisible = !column.hidden;
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: styles$j.dropdownItem,
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: styles$j.checkbox,
+                  checked: isVisible,
+                  onChange: () => handleToggle(column.id, !!column.hidden)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: styles$j.columnLabel, children: column.title || column.id })
+            ]
+          },
+          column.id
+        );
+      })
+    ] })
+  ] });
+};
+const ColumnVisibilityToggle = memo(ColumnVisibilityToggleInner);
 const ganttTable = "_ganttTable_5goa0_3";
 const ganttTable_Header = "_ganttTable_Header_5goa0_15";
 const ganttTable_HeaderMoveTask = "_ganttTable_HeaderMoveTask_5goa0_27";
@@ -5532,9 +5657,12 @@ const styles$i = {
 const TaskListTableHeadersDefaultInner = ({
   headerHeight,
   columns,
+  allColumns,
   canResizeColumns,
   canMoveTasks,
-  onColumnResizeStart
+  canToggleColumns,
+  onColumnResizeStart,
+  onColumnVisibilityChange
 }) => {
   const pinnedStyles = useMemo(() => {
     const result = {};
@@ -5628,7 +5756,21 @@ const TaskListTableHeadersDefaultInner = ({
                   }
                 )
               ] }, index2);
-            })
+            }),
+            canToggleColumns && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$i.ganttTable_HeaderItem,
+                style: { minWidth: 28, maxWidth: 28 },
+                children: /* @__PURE__ */ jsx(
+                  ColumnVisibilityToggle,
+                  {
+                    allColumns,
+                    onColumnVisibilityChange
+                  }
+                )
+              }
+            )
           ]
         }
       )
@@ -10787,10 +10929,12 @@ const TaskListInner = ({
   tasks,
   onResizeColumn,
   canReorderTasks,
+  canToggleColumns,
+  onColumnVisibilityChange,
   tableBottom
 }) => {
   const [
-    columns,
+    allColumns,
     taskListWidth,
     tableWidth,
     onTableResizeStart,
@@ -10801,6 +10945,10 @@ const TaskListInner = ({
     onResizeColumn,
     ganttRef
   );
+  const columns = useMemo(
+    () => allColumns.filter((col) => !col.hidden),
+    [allColumns]
+  );
   const renderedIndexes = useOptimizedList(
     taskListContainerRef,
     "scrollTop",
@@ -10885,7 +11033,10 @@ const TaskListInner = ({
               canMoveTasks: canReorderTasks,
               headerHeight: distances.headerHeight,
               columns,
+              allColumns,
+              canToggleColumns: !!canToggleColumns,
               onColumnResizeStart,
+              onColumnVisibilityChange,
               canResizeColumns
             }
           ),
@@ -12741,9 +12892,9 @@ const Milestone = ({
     relationHandles
   ] });
 };
-const barLabel = "_barLabel_1ca31_1";
-const barLabelHidden = "_barLabelHidden_1ca31_27";
-const barLabelOutside = "_barLabelOutside_1ca31_37";
+const barLabel = "_barLabel_81831_1";
+const barLabelHidden = "_barLabelHidden_81831_27";
+const barLabelOutside = "_barLabelOutside_81831_37";
 const style = {
   barLabel,
   barLabelHidden,
@@ -21153,6 +21304,7 @@ const Gantt = (props) => {
 };
 export {
   AddColumn,
+  ColumnVisibilityToggle,
   DateEndColumn,
   DateStartColumn,
   DeleteColumn,

package/dist/gantt-task-react.umd.js

@@ -4606,7 +4606,7 @@
   const tooltipDefaultContainerParagraph = "_tooltipDefaultContainerParagraph_16o9s_31";
   const tooltipDetailsContainer = "_tooltipDetailsContainer_16o9s_47";
   const tooltipDetailsContainerHidden = "_tooltipDetailsContainerHidden_16o9s_71";
-  const styles$m = {
+  const styles$n = {
     tooltipDefaultContainer,
     tooltipDefaultContainerTexts,
     tooltipDefaultContainerParagraph,
@@ -4649,26 +4649,26 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: styles$m.tooltipDefaultContainer,
+        className: styles$n.tooltipDefaultContainer,
         style: { fontSize: "var(--gantt-font-size)" },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: "var(--gantt-font-size)" }, children: `${task.name}: ${task.start.getDate()}-${task.start.getMonth() + 1}-${task.start.getFullYear()} - ${task.end.getDate()}-${task.end.getMonth() + 1}-${task.end.getFullYear()}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$m.tooltipDefaultContainerTexts, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$n.tooltipDefaultContainerTexts, children: [
             task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
-                className: styles$m.tooltipDefaultContainerParagraph,
+                className: styles$n.tooltipDefaultContainerParagraph,
                 children: `${locale.tooltip.duration},: ${~~((task.end.getTime() - task.start.getTime()) / (1e3 * 60 * 60 * 24))} ${locale.suffix.days}`
               }
             ),
-            !!locale.tooltip.progress && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$m.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
+            !!locale.tooltip.progress && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$n.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
           ] })
         ]
       }
     );
   };
   const scroll = "_scroll_hp3qb_1";
-  const styles$l = {
+  const styles$m = {
     scroll
   };
   const VerticalScroll = ({
@@ -4689,7 +4689,7 @@
           marginLeft: rtl ? void 0 : "-1rem",
           pointerEvents: isChangeInProgress ? "none" : void 0
         },
-        className: styles$l.scroll,
+        className: styles$m.scroll,
         onScroll,
         ref: verticalScrollbarRef,
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ganttFullHeight, width: 1 } })
@@ -4767,7 +4767,7 @@
   const taskListExpander = "_taskListExpander_16z6n_23";
   const taskListEmptyExpander = "_taskListEmptyExpander_16z6n_45";
   const taskName = "_taskName_16z6n_55";
-  const styles$k = {
+  const styles$l = {
     taskListNameWrapper,
     dragging,
     taskListExpander,
@@ -4844,7 +4844,7 @@
       "div",
       {
         "data-testid": `title-table-cell-${name}`,
-        className: `${styles$k.taskListNameWrapper}`,
+        className: `${styles$l.taskListNameWrapper}`,
         style: {
           paddingLeft: depth * nestedTaskNameOffset
         },
@@ -4853,7 +4853,7 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: `gantt-expander ${styles$k.taskListExpander} ${!hasChildren ? styles$k.taskListEmptyExpander : ""}`,
+              className: `gantt-expander ${styles$l.taskListExpander} ${!hasChildren ? styles$l.taskListEmptyExpander : ""}`,
               style: {
                 left: depth * nestedTaskNameOffset
               },
@@ -4864,7 +4864,7 @@
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: styles$k.taskName,
+              className: styles$l.taskName,
               style: { fontWeight: isProject ? "bold" : "regular" },
               children: [
                 isShowTaskNumbers && /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
@@ -4919,7 +4919,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dependencies.map(({ name }) => name).join(", ") });
   };
   const button = "_button_l55x0_1";
-  const styles$j = {
+  const styles$k = {
     button
   };
   const DeleteIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4953,7 +4953,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$j.button,
+        className: styles$k.button,
         children: (icons == null ? void 0 : icons.renderDeleteIcon) ? icons.renderDeleteIcon() : /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {})
       }
     );
@@ -4988,7 +4988,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$j.button,
+        className: styles$k.button,
         children: (icons == null ? void 0 : icons.renderEditIcon) ? icons.renderEditIcon() : /* @__PURE__ */ jsxRuntime.jsx(EditIcon, {})
       }
     );
@@ -5029,7 +5029,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$j.button,
+        className: styles$k.button,
         children: (icons == null ? void 0 : icons.renderAddIcon) ? icons.renderAddIcon() : /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {})
       }
     );
@@ -5532,6 +5532,131 @@
       onColumnResizeStart
     ];
   };
+  const toggleWrapper = "_toggleWrapper_rjfhl_1";
+  const toggleButton = "_toggleButton_rjfhl_15";
+  const dropdown = "_dropdown_rjfhl_51";
+  const dropdownItem = "_dropdownItem_rjfhl_85";
+  const checkbox = "_checkbox_rjfhl_141";
+  const columnLabel = "_columnLabel_rjfhl_157";
+  const dropdownTitle = "_dropdownTitle_rjfhl_169";
+  const divider = "_divider_rjfhl_211";
+  const styles$j = {
+    toggleWrapper,
+    toggleButton,
+    dropdown,
+    dropdownItem,
+    checkbox,
+    columnLabel,
+    dropdownTitle,
+    divider
+  };
+  const ColumnsIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M2 3.5h12M2 8h12M2 12.5h12",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M5 3.5v9M11 3.5v9",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeDasharray: "1 2"
+          }
+        )
+      ]
+    }
+  );
+  const ColumnVisibilityToggleInner = ({
+    allColumns,
+    onColumnVisibilityChange
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const wrapperRef = React.useRef(null);
+    const toggleDropdown = React.useCallback(() => {
+      setIsOpen((prev) => !prev);
+    }, []);
+    const handleToggle = React.useCallback(
+      (columnId, currentlyHidden) => {
+        if (onColumnVisibilityChange) {
+          onColumnVisibilityChange(columnId, !currentlyHidden);
+        }
+      },
+      [onColumnVisibilityChange]
+    );
+    React.useEffect(() => {
+      if (!isOpen)
+        return void 0;
+      const handleClickOutside = (event) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [isOpen]);
+    const toggleableColumns = allColumns.filter((col) => col.title);
+    if (toggleableColumns.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$j.toggleWrapper, ref: wrapperRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: styles$j.toggleButton,
+          onClick: toggleDropdown,
+          title: "Toggle column visibility",
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ColumnsIcon, {})
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$j.dropdown, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$j.dropdownTitle, children: "Columns" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$j.divider }),
+        toggleableColumns.map((column) => {
+          const isVisible = !column.hidden;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              className: styles$j.dropdownItem,
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: styles$j.checkbox,
+                    checked: isVisible,
+                    onChange: () => handleToggle(column.id, !!column.hidden)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$j.columnLabel, children: column.title || column.id })
+              ]
+            },
+            column.id
+          );
+        })
+      ] })
+    ] });
+  };
+  const ColumnVisibilityToggle = React.memo(ColumnVisibilityToggleInner);
   const ganttTable = "_ganttTable_5goa0_3";
   const ganttTable_Header = "_ganttTable_Header_5goa0_15";
   const ganttTable_HeaderMoveTask = "_ganttTable_HeaderMoveTask_5goa0_27";
@@ -5549,9 +5674,12 @@
   const TaskListTableHeadersDefaultInner = ({
     headerHeight,
     columns,
+    allColumns,
     canResizeColumns,
     canMoveTasks,
-    onColumnResizeStart
+    canToggleColumns,
+    onColumnResizeStart,
+    onColumnVisibilityChange
   }) => {
     const pinnedStyles = React.useMemo(() => {
       const result = {};
@@ -5645,7 +5773,21 @@
                     }
                   )
                 ] }, index2);
-              })
+              }),
+              canToggleColumns && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: styles$i.ganttTable_HeaderItem,
+                  style: { minWidth: 28, maxWidth: 28 },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ColumnVisibilityToggle,
+                    {
+                      allColumns,
+                      onColumnVisibilityChange
+                    }
+                  )
+                }
+              )
             ]
           }
         )
@@ -10804,10 +10946,12 @@
     tasks,
     onResizeColumn,
     canReorderTasks,
+    canToggleColumns,
+    onColumnVisibilityChange,
     tableBottom
   }) => {
     const [
-      columns,
+      allColumns,
       taskListWidth,
       tableWidth,
       onTableResizeStart,
@@ -10818,6 +10962,10 @@
       onResizeColumn,
       ganttRef
     );
+    const columns = React.useMemo(
+      () => allColumns.filter((col) => !col.hidden),
+      [allColumns]
+    );
     const renderedIndexes = useOptimizedList(
       taskListContainerRef,
       "scrollTop",
@@ -10902,7 +11050,10 @@
                 canMoveTasks: canReorderTasks,
                 headerHeight: distances.headerHeight,
                 columns,
+                allColumns,
+                canToggleColumns: !!canToggleColumns,
                 onColumnResizeStart,
+                onColumnVisibilityChange,
                 canResizeColumns
               }
             ),
@@ -12758,9 +12909,9 @@
       relationHandles
     ] });
   };
-  const barLabel = "_barLabel_1ca31_1";
-  const barLabelHidden = "_barLabelHidden_1ca31_27";
-  const barLabelOutside = "_barLabelOutside_1ca31_37";
+  const barLabel = "_barLabel_81831_1";
+  const barLabelHidden = "_barLabelHidden_81831_27";
+  const barLabelOutside = "_barLabelOutside_81831_37";
   const style = {
     barLabel,
     barLabelHidden,
@@ -21169,6 +21320,7 @@
     ) }) });
   };
   exports2.AddColumn = AddColumn;
+  exports2.ColumnVisibilityToggle = ColumnVisibilityToggle;
   exports2.DateEndColumn = DateEndColumn;
   exports2.DateStartColumn = DateStartColumn;
   exports2.DeleteColumn = DeleteColumn;

package/dist/index.d.ts

@@ -7,8 +7,9 @@ export { DateStartColumn } from "./components/task-list/task-list-table-columns/
 export { DeleteColumn } from "./components/task-list/task-list-table-columns/delete-column";
 export { DependenciesColumn } from "./components/task-list/task-list-table-columns/dependencies-column";
 export { TitleColumn } from "./components/task-list/task-list-table-columns/title-column";
-export { TaskResponsiveLabel, TaskCenterLabel, TaskOutlineLabel } from "./components/task-item/task-label";
+export { TaskResponsiveLabel, TaskCenterLabel, TaskOutlineLabel, } from "./components/task-item/task-label";
 export { useTaskListColumnsBuilder } from "./components/task-list/task-list-table-columns/use-task-list-columns-builder";
+export { ColumnVisibilityToggle } from "./components/task-list/column-visibility-toggle";
 export * from "./components/context-menu-options";
 export * from "./constants";
 export * from "./types";

package/dist/style.css

@@ -122,6 +122,119 @@
   width: 20px;
   height: 20px;
 }
+._toggleWrapper_rjfhl_1 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+._toggleButton_rjfhl_15 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  color: var(--gantt-table-header-color, #555);
+  padding: 2px;
+}
+
+._toggleButton_rjfhl_15:hover {
+  background-color: var(--gantt-table-hover-action-color, rgba(0, 0, 0, 0.08));
+}
+
+._dropdown_rjfhl_51 {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 100;
+  min-width: 180px;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--gantt-table-header-background-color, #fff);
+  border: 1px solid
+    var(--gantt-table-divider-color, var(--gantt-divider-color, #e0e0e0));
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  padding: 4px 0;
+  margin-top: 4px;
+}
+
+._dropdownItem_rjfhl_85 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: var(--gantt-font-size, 12px);
+  font-family: var(
+    --gantt-font-family,
+    Arial,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif
+  );
+  color: var(--gantt-table-header-color, #333);
+  white-space: nowrap;
+  user-select: none;
+}
+
+._dropdownItem_rjfhl_85:hover {
+  background-color: var(--gantt-table-hover-action-color, rgba(0, 0, 0, 0.04));
+}
+
+._checkbox_rjfhl_141 {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--gantt-bar-background-color, #4e87c4);
+  cursor: pointer;
+  margin: 0;
+}
+
+._columnLabel_rjfhl_157 {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+._dropdownTitle_rjfhl_169 {
+  padding: 6px 12px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--gantt-table-header-color, #999);
+  font-family: var(
+    --gantt-font-family,
+    Arial,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif
+  );
+}
+
+._divider_rjfhl_211 {
+  height: 1px;
+  margin: 4px 0;
+  background: var(
+    --gantt-table-divider-color,
+    var(--gantt-divider-color, #e0e0e0)
+  );
+}
 /*noinspection CssUnresolvedCustomProperty*/
 ._ganttTable_5goa0_3 {
   display: table;
@@ -560,7 +673,7 @@
 ._milestoneBackground_vcirf_11 {
   user-select: none;
 }
-._barLabel_1ca31_1 {
+._barLabel_81831_1 {
   fill: #fff;
   text-anchor: middle;
   font-weight: lighter;
@@ -573,14 +686,18 @@
   pointer-events: none;
 }
 
-._barLabelHidden_1ca31_27 {
+._barLabelHidden_81831_27 {
   display: none;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._barLabelOutside_1ca31_37 {
+._barLabelOutside_81831_37 {
   fill: var(--gantt-secondary-text-color);
   text-anchor: start;
+  stroke: white;
+  stroke-width: 4px;
+  stroke-linejoin: round;
+  paint-order: stroke;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;

package/dist/types/internal-types.d.ts

@@ -193,9 +193,12 @@ export type TaskListTableRowProps = {
 export interface TaskListHeaderProps {
     headerHeight: number;
     columns: readonly Column[];
+    allColumns: readonly Column[];
     canMoveTasks: boolean;
     canResizeColumns: boolean;
+    canToggleColumns: boolean;
     onColumnResizeStart: (columnIndex: number, clientX: number) => void;
+    onColumnVisibilityChange?: (columnId: string, hidden: boolean) => void;
 }
 export type MinAndMaxChildsOfTask = [
     [

package/dist/types/public-types.d.ts

@@ -156,6 +156,10 @@ export interface GanttTaskListProps {
      * Can resize columns
      */
     canResizeColumns?: boolean;
+    /**
+     * Show column visibility toggle button in the header
+     */
+    canToggleColumns?: boolean;
     /**
      *  Custom icons
      */
@@ -172,6 +176,10 @@ export interface GanttTaskListProps {
      * Can reorder tasks
      */
     onResizeColumn?: OnResizeColumn;
+    /**
+     * Callback when column visibility is toggled
+     */
+    onColumnVisibilityChange?: OnColumnVisibilityChange;
     /**
      * Render bottom table content
      */
@@ -438,8 +446,13 @@ export type Column = {
      * Pinned columns stay visible while scrolling horizontally.
      */
     pinned?: "left" | "right";
+    /**
+     * Hide this column from the table. Defaults to false.
+     */
+    hidden?: boolean;
 };
 export type OnResizeColumn = (nextColumns: readonly Column[], columnIndex: number, deltaWidth: number) => void;
+export type OnColumnVisibilityChange = (columnId: string, hidden: boolean) => void;
 export type ChangeAction = {
     type: "add-childs";
     parent: Task;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",