@xcelsior/ui-spreadsheets 1.3.5 → 1.4.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Spreadsheet.tsx
-import { useCallback as useCallback11, useEffect as useEffect8, useMemo as useMemo7, useRef as useRef10, useState as useState16, startTransition } from "react";
+import { useCallback as useCallback11, useEffect as useEffect8, useMemo as useMemo8, useRef as useRef10, useState as useState16, startTransition } from "react";
 
 // ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/lib/esm/iconBase.js
 import React2 from "react";
@@ -96,6 +96,9 @@ function HiDotsVertical(props) {
 function HiExclamation(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", "clipRule": "evenodd" } }] })(props);
 }
+function HiEyeOff(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z", "clipRule": "evenodd" } }, { "tag": "path", "attr": { "d": "M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" } }] })(props);
+}
 function HiEye(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M10 12a2 2 0 100-4 2 2 0 000 4z" } }, { "tag": "path", "attr": { "fillRule": "evenodd", "d": "M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z", "clipRule": "evenodd" } }] })(props);
 }
@@ -1324,6 +1327,9 @@ var SpreadsheetToolbar = ({
   onClearFilter,
   showFiltersPanel,
   onToggleFiltersPanel,
+  hiddenColumnCount = 0,
+  onShowAllColumns,
+  onManageColumns,
   className
 }) => {
   const [showMoreMenu, setShowMoreMenu] = React3.useState(false);
@@ -1543,6 +1549,31 @@ var SpreadsheetToolbar = ({
                 ]
               }
             ),
+            hiddenColumnCount > 0 && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 px-2.5 py-1.5 bg-amber-50 border border-amber-200 rounded text-xs text-amber-700", children: [
+              /* @__PURE__ */ jsxs4("span", { className: "font-medium", children: [
+                hiddenColumnCount,
+                " hidden"
+              ] }),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: onShowAllColumns,
+                  className: "text-amber-800 underline hover:text-amber-900 transition-colors",
+                  children: "Show"
+                }
+              ),
+              /* @__PURE__ */ jsx4("span", { className: "text-amber-300", children: "|" }),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: onManageColumns,
+                  className: "text-amber-800 underline hover:text-amber-900 transition-colors",
+                  children: "Manage"
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsxs4("div", { className: "relative", ref: menuRef, children: [
               /* @__PURE__ */ jsxs4(
                 "button",
@@ -1644,7 +1675,7 @@ function MdOutlinePushPin(props) {
 }
 
 // src/components/ColumnHeaderActions.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ColumnHeaderActions({
   enableFiltering = false,
   enableHighlighting = false,
@@ -1666,7 +1697,8 @@ function ColumnHeaderActions({
   resolvedWidth,
   enableDuplicateCheck = false,
   hasDuplicateCheck = false,
-  onDuplicateCheckClick
+  onDuplicateCheckClick,
+  onHideClick
 }) {
   const [overflowOpen, setOverflowOpen] = useState3(false);
   const overflowRef = useRef3(null);
@@ -1814,7 +1846,26 @@ function ColumnHeaderActions({
                     "Check Duplicates"
                   ]
                 }
-              )
+              ),
+              onHideClick && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                /* @__PURE__ */ jsx5("div", { className: "border-t border-gray-100 my-1" }),
+                /* @__PURE__ */ jsxs5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onHideClick();
+                      setOverflowOpen(false);
+                    },
+                    className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-gray-100 text-left text-gray-700",
+                    children: [
+                      /* @__PURE__ */ jsx5(HiEyeOff, { className: "h-3.5 w-3.5 shrink-0" }),
+                      "Hide column"
+                    ]
+                  }
+                )
+              ] })
             ]
           }
         ),
@@ -1902,6 +1953,19 @@ function ColumnHeaderActions({
         title: "Check duplicates",
         children: /* @__PURE__ */ jsx5(HiExclamation, { className: "h-3 w-3" })
       }
+    ),
+    onHideClick && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onHideClick();
+        },
+        className: "p-0.5 hover:bg-gray-200 rounded text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity",
+        title: "Hide column",
+        children: /* @__PURE__ */ jsx5(HiEyeOff, { className: "h-3 w-3" })
+      }
     )
   ] });
 }
@@ -1930,6 +1994,7 @@ var SpreadsheetHeader = ({
   hasDuplicateCheck = false,
   onDuplicateCheckClick,
   duplicateCount,
+  onHideClick,
   resizeHandleProps,
   resolvedWidth,
   topOffset = 0,
@@ -2013,7 +2078,8 @@ var SpreadsheetHeader = ({
               resolvedWidth,
               enableDuplicateCheck: true,
               hasDuplicateCheck,
-              onDuplicateCheckClick
+              onDuplicateCheckClick,
+              onHideClick
             }
           )
         ] }),
@@ -2065,7 +2131,8 @@ function useSpreadsheetPinning({
   showRowIndex = true,
   defaultPinnedColumns = [],
   defaultPinnedRightColumns = [],
-  getColumnWidth
+  getColumnWidth,
+  hiddenColumns = []
 }) {
   const [pinnedColumns, setPinnedColumns] = useState4(() => {
     const map = /* @__PURE__ */ new Map();
@@ -2152,9 +2219,13 @@ function useSpreadsheetPinning({
       return newSet;
     });
   }, []);
+  const hiddenColumnsSet = useMemo(() => new Set(hiddenColumns), [hiddenColumns]);
   const visibleColumns = useMemo(() => {
     if (!columns || !Array.isArray(columns) || columns.length === 0) return [];
     let result = [...columns];
+    if (hiddenColumnsSet.size > 0) {
+      result = result.filter((column) => !hiddenColumnsSet.has(column.id));
+    }
     if (columnGroups && Array.isArray(columnGroups)) {
       result = result.filter((column) => {
         const group = columnGroups.find((g) => g.columns.includes(column.id));
@@ -2164,7 +2235,7 @@ function useSpreadsheetPinning({
       });
     }
     return result;
-  }, [columns, columnGroups, collapsedGroups, pinnedColumns]);
+  }, [columns, columnGroups, collapsedGroups, pinnedColumns, hiddenColumnsSet]);
   useEffect4(() => {
     requestAnimationFrame(() => measureColumnWidths());
   }, [measureColumnWidths, visibleColumns, pinnedColumns]);
@@ -2418,7 +2489,7 @@ function ColorPickerPopover({
 ColorPickerPopover.displayName = "ColorPickerPopover";
 
 // src/components/SpreadsheetSettingsModal.tsx
-import { useState as useState6, useEffect as useEffect5 } from "react";
+import { useState as useState6, useEffect as useEffect5, useMemo as useMemo2 } from "react";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_SETTINGS = {
   defaultPinnedColumns: [],
@@ -2434,14 +2505,24 @@ var SpreadsheetSettingsModal = ({
   settings,
   onSave,
   columns,
+  columnGroups,
   title = "Spreadsheet Settings",
   pageSizeOptions = [25, 50, 100, 200]
 }) => {
-  const [activeTab, setActiveTab] = useState6("columns");
+  const [activeTab, setActiveTab] = useState6("visibility");
   const [localSettings, setLocalSettings] = useState6(settings);
   useEffect5(() => {
     setLocalSettings(settings);
   }, [settings]);
+  const hiddenColumnsSet = useMemo2(
+    () => new Set(localSettings.hiddenColumns ?? []),
+    [localSettings.hiddenColumns]
+  );
+  const ungroupedColumns = useMemo2(() => {
+    if (!columnGroups?.length) return columns;
+    const groupedIds = new Set(columnGroups.flatMap((g) => g.columns));
+    return columns.filter((c) => !groupedIds.has(c.id));
+  }, [columns, columnGroups]);
   if (!isOpen) return null;
   const handleSave = () => {
     onSave(localSettings);
@@ -2489,7 +2570,23 @@ var SpreadsheetSettingsModal = ({
       onSave(newSettings);
     }
   };
+  const hiddenCount = hiddenColumnsSet.size;
+  const toggleColumnVisibility = (columnId) => {
+    const isHidden = hiddenColumnsSet.has(columnId);
+    const newHidden = isHidden ? (localSettings.hiddenColumns ?? []).filter((id) => id !== columnId) : [...localSettings.hiddenColumns ?? [], columnId];
+    setLocalSettings({ ...localSettings, hiddenColumns: newHidden });
+  };
+  const setGroupVisibility = (groupColumnIds, visible) => {
+    const currentHidden = new Set(localSettings.hiddenColumns ?? []);
+    if (visible) {
+      groupColumnIds.forEach((id) => currentHidden.delete(id));
+    } else {
+      groupColumnIds.forEach((id) => currentHidden.add(id));
+    }
+    setLocalSettings({ ...localSettings, hiddenColumns: Array.from(currentHidden) });
+  };
   const tabs = [
+    { id: "visibility", label: `Column Visibility${hiddenCount > 0 ? ` (${hiddenCount})` : ""}`, Icon: HiEyeOff },
     { id: "columns", label: "Pinned Columns", Icon: HiViewBoards },
     { id: "sorting", label: "Default Sorting", Icon: HiSortAscending },
     { id: "display", label: "Display Options", Icon: HiEye }
@@ -2512,7 +2609,7 @@ var SpreadsheetSettingsModal = ({
             "aria-label": "Close settings"
           }
         ),
-        /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-lg w-[90%] max-w-[700px] max-h-[90vh] flex flex-col shadow-xl relative z-10", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-lg w-[70%] max-w-1/2 max-h-[70vh] flex flex-col shadow-xl relative z-10", children: [
           /* @__PURE__ */ jsxs9("div", { className: "px-6 py-5 border-b border-gray-200 flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ jsx9(HiCog, { className: "h-6 w-6 text-blue-600" }),
@@ -2542,6 +2639,131 @@ var SpreadsheetSettingsModal = ({
             tab.id
           )) }),
           /* @__PURE__ */ jsxs9("div", { className: "flex-1 overflow-auto p-6", children: [
+            activeTab === "visibility" && /* @__PURE__ */ jsxs9("div", { children: [
+              /* @__PURE__ */ jsxs9("div", { className: "p-4 bg-amber-50 border border-amber-200 rounded-lg mb-4 flex gap-3", children: [
+                /* @__PURE__ */ jsx9(HiEyeOff, { className: "h-4 w-4 text-amber-600 shrink-0 mt-0.5" }),
+                /* @__PURE__ */ jsxs9("div", { children: [
+                  /* @__PURE__ */ jsx9("p", { className: "text-sm font-semibold text-gray-900 mb-1", children: "Column Visibility" }),
+                  /* @__PURE__ */ jsxs9("p", { className: "text-sm text-gray-600", children: [
+                    "Toggle columns on or off. Hidden columns are removed from the table but their data is preserved.",
+                    hiddenCount > 0 && /* @__PURE__ */ jsxs9("span", { className: "ml-1 font-medium text-amber-700", children: [
+                      hiddenCount,
+                      " column",
+                      hiddenCount !== 1 ? "s" : "",
+                      " hidden."
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs9("div", { className: "flex gap-2 mb-4", children: [
+                /* @__PURE__ */ jsx9(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setLocalSettings({ ...localSettings, hiddenColumns: [] }),
+                    className: "px-3 py-1.5 text-xs font-medium text-green-700 bg-green-50 border border-green-200 rounded-lg hover:bg-green-100 transition-colors",
+                    children: "Show All"
+                  }
+                ),
+                /* @__PURE__ */ jsx9(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setLocalSettings({
+                      ...localSettings,
+                      hiddenColumns: columns.map((c) => c.id)
+                    }),
+                    className: "px-3 py-1.5 text-xs font-medium text-red-700 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors",
+                    children: "Hide All"
+                  }
+                )
+              ] }),
+              columnGroups?.map((group) => {
+                const groupCols = columns.filter((c) => group.columns.includes(c.id));
+                if (groupCols.length === 0) return null;
+                const hiddenInGroup = groupCols.filter((c) => hiddenColumnsSet.has(c.id)).length;
+                const allHidden = hiddenInGroup === groupCols.length;
+                const allVisible = hiddenInGroup === 0;
+                return /* @__PURE__ */ jsxs9("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mb-2", children: [
+                    /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx9(
+                        "div",
+                        {
+                          className: "w-3 h-3 rounded-sm",
+                          style: { backgroundColor: group.headerColor }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-gray-900", children: group.label }),
+                      /* @__PURE__ */ jsxs9("span", { className: "text-xs text-gray-500", children: [
+                        "(",
+                        groupCols.length - hiddenInGroup,
+                        "/",
+                        groupCols.length,
+                        ")"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs9("div", { className: "flex gap-1", children: [
+                      /* @__PURE__ */ jsx9(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setGroupVisibility(group.columns, true),
+                          disabled: allVisible,
+                          className: "px-2 py-0.5 text-xs text-green-700 hover:bg-green-50 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+                          children: "Show all"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx9(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setGroupVisibility(group.columns, false),
+                          disabled: allHidden,
+                          className: "px-2 py-0.5 text-xs text-red-700 hover:bg-red-50 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+                          children: "Hide all"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2", children: groupCols.map((column) => {
+                    const isHidden = hiddenColumnsSet.has(column.id);
+                    return /* @__PURE__ */ jsxs9(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => toggleColumnVisibility(column.id),
+                        className: `flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${isHidden ? "bg-gray-100 border-gray-200 text-gray-400" : "bg-green-50 border-green-300 text-green-800"}`,
+                        children: [
+                          isHidden ? /* @__PURE__ */ jsx9(HiEyeOff, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsx9(HiEye, { className: "h-4 w-4 shrink-0" }),
+                          /* @__PURE__ */ jsx9("span", { className: "text-sm flex-1 truncate", children: column.label })
+                        ]
+                      },
+                      column.id
+                    );
+                  }) })
+                ] }, group.id);
+              }),
+              ungroupedColumns.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "mb-4", children: [
+                columnGroups?.length ? /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-2 mb-2", children: /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-gray-900", children: "Other" }) }) : null,
+                /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2", children: ungroupedColumns.map((column) => {
+                  const isHidden = hiddenColumnsSet.has(column.id);
+                  return /* @__PURE__ */ jsxs9(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggleColumnVisibility(column.id),
+                      className: `flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${isHidden ? "bg-gray-100 border-gray-200 text-gray-400" : "bg-green-50 border-green-300 text-green-800"}`,
+                      children: [
+                        isHidden ? /* @__PURE__ */ jsx9(HiEyeOff, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsx9(HiEye, { className: "h-4 w-4 shrink-0" }),
+                        /* @__PURE__ */ jsx9("span", { className: "text-sm flex-1 truncate", children: column.label })
+                      ]
+                    },
+                    column.id
+                  );
+                }) })
+              ] })
+            ] }),
             activeTab === "columns" && /* @__PURE__ */ jsxs9("div", { children: [
               /* @__PURE__ */ jsxs9("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg mb-4 flex gap-3", children: [
                 /* @__PURE__ */ jsx9(HiViewBoards, { className: "h-4 w-4 text-blue-600 shrink-0 mt-0.5" }),
@@ -2972,7 +3194,7 @@ function ShortcutRow({ label, keys }) {
 KeyboardShortcutsModal.displayName = "KeyboardShortcutsModal";
 
 // src/components/RowContextMenu.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { ContextMenu, ContextMenuItem } from "@xcelsior/design-system";
 import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function RowContextMenu({
@@ -2982,7 +3204,7 @@ function RowContextMenu({
   compactMode = false,
   className
 }) {
-  const visibleItems = useMemo2(() => {
+  const visibleItems = useMemo3(() => {
     return items.filter((item) => !item.visible || item.visible(row));
   }, [items, row]);
   if (visibleItems.length === 0) {
@@ -3038,7 +3260,7 @@ RowContextMenu.displayName = "RowContextMenu";
 import { Pagination } from "@xcelsior/design-system";
 
 // src/hooks/useSpreadsheetFiltering.ts
-import { useCallback as useCallback4, useMemo as useMemo3, useState as useState8 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo4, useState as useState8 } from "react";
 import { FilterChain, LazyArray } from "@xcelsior/utils";
 function useSpreadsheetFiltering({
   data,
@@ -3239,7 +3461,7 @@ function useSpreadsheetFiltering({
     },
     [sortConfig?.columnId]
   );
-  const filteredData = useMemo3(() => {
+  const filteredData = useMemo4(() => {
     if (!data || !Array.isArray(data)) return LazyArray.empty();
     if (serverSide) {
       return LazyArray.from(data);
@@ -3340,7 +3562,7 @@ function useSpreadsheetFiltering({
 }
 
 // src/hooks/useSpreadsheetDuplicates.ts
-import { useCallback as useCallback5, useMemo as useMemo4, useState as useState9 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo5, useState as useState9 } from "react";
 function normalizeValue(value) {
   if (value === null || value === void 0 || value === "") {
     return "__blank__";
@@ -3359,10 +3581,10 @@ function useSpreadsheetDuplicates({
   const [localDuplicateCheckColumns, setLocalDuplicateCheckColumns] = useState9(
     () => new Set(duplicateCheckColumns)
   );
-  const duplicateCheckColumnsSet = useMemo4(() => {
+  const duplicateCheckColumnsSet = useMemo5(() => {
     return new Set(duplicateCheckColumns);
   }, [duplicateCheckColumns]);
-  const { duplicateRowIds, valueCounts } = useMemo4(() => {
+  const { duplicateRowIds, valueCounts } = useMemo5(() => {
     const duplicateRowIds2 = /* @__PURE__ */ new Map();
     const valueCounts2 = /* @__PURE__ */ new Map();
     const activeColumns = duplicateCheckColumnsSet.size > 0 ? duplicateCheckColumnsSet : localDuplicateCheckColumns;
@@ -3965,7 +4187,7 @@ function useSpreadsheetKeyboardShortcuts({
 }
 
 // src/hooks/useSpreadsheetSelection.ts
-import { useCallback as useCallback9, useState as useState14, useRef as useRef8, useMemo as useMemo5 } from "react";
+import { useCallback as useCallback9, useState as useState14, useRef as useRef8, useMemo as useMemo6 } from "react";
 function useSpreadsheetSelection({
   data,
   columns,
@@ -3979,14 +4201,14 @@ function useSpreadsheetSelection({
   const [isDragging, setIsDragging] = useState14(false);
   const [clipboardData, setClipboardData] = useState14(null);
   const anchorCell = useRef8(null);
-  const rowIndexMap = useMemo5(() => {
+  const rowIndexMap = useMemo6(() => {
     const map = /* @__PURE__ */ new Map();
     data.forEach((row, index) => {
       map.set(getRowId(row), index);
     });
     return map;
   }, [data, getRowId]);
-  const columnIndexMap = useMemo5(() => {
+  const columnIndexMap = useMemo6(() => {
     const map = /* @__PURE__ */ new Map();
     columns.forEach((col, index) => {
       map.set(col.id, index);
@@ -4385,12 +4607,12 @@ function useSpreadsheetSelection({
 }
 
 // src/hooks/useSpreadsheetSummary.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 function useSpreadsheetSummary({
   selectedCellValues,
   columns
 }) {
-  const summary = useMemo6(() => {
+  const summary = useMemo7(() => {
     if (selectedCellValues.length === 0) return null;
     const numericValues = [];
     for (const { position, value } of selectedCellValues) {
@@ -4512,7 +4734,7 @@ function useSpreadsheetColumnResize({
 }
 
 // src/components/SelectionSummaryBar.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function SelectionSummaryBar({
   summary,
   focusedCell,
@@ -4539,7 +4761,7 @@ function SelectionSummaryBar({
   }
   if (!addressDisplay && !summary) return null;
   return /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between px-3 py-1.5 bg-gray-50 border-t border-gray-200 text-xs text-gray-600", children: [
-    /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-2 min-w-0", children: addressDisplay && /* @__PURE__ */ jsxs13(Fragment3, { children: [
+    /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-2 min-w-0", children: addressDisplay && /* @__PURE__ */ jsxs13(Fragment4, { children: [
       /* @__PURE__ */ jsx13("span", { className: "font-medium text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200 shrink-0", children: addressDisplay }),
       valueDisplay && /* @__PURE__ */ jsx13("span", { className: "text-gray-700 truncate", title: valueDisplay, children: valueDisplay })
     ] }) }),
@@ -4626,7 +4848,8 @@ function Spreadsheet({
     defaultPageSize: initialSettings?.defaultPageSize ?? 25,
     defaultZoom: initialSettings?.defaultZoom ?? 100,
     autoSave: initialSettings?.autoSave ?? true,
-    compactView: initialSettings?.compactView ?? false
+    compactView: initialSettings?.compactView ?? false,
+    hiddenColumns: initialSettings?.hiddenColumns ?? []
   });
   const {
     isCellDuplicate,
@@ -4653,6 +4876,15 @@ function Spreadsheet({
     },
     [toggleDuplicateCheck, duplicateCheckColumns, onDuplicateCheckChange]
   );
+  const handleHideColumn = useCallback11(
+    (columnId) => {
+      setSpreadsheetSettings((prev) => ({
+        ...prev,
+        hiddenColumns: [...prev.hiddenColumns ?? [], columnId]
+      }));
+    },
+    []
+  );
   const [isProcessing, setIsProcessing] = useState16(false);
   const {
     filters,
@@ -4727,7 +4959,8 @@ function Spreadsheet({
     columnGroups,
     defaultPinnedColumns: initialSettings?.defaultPinnedColumns,
     defaultPinnedRightColumns: initialSettings?.defaultPinnedRightColumns,
-    getColumnWidth
+    getColumnWidth,
+    hiddenColumns: spreadsheetSettings.hiddenColumns
   });
   const {
     getCellComments,
@@ -4883,7 +5116,7 @@ function Spreadsheet({
     }
     markAsChanged();
   }, [popRedoEntry, onCellsEdit, markAsChanged]);
-  const paginatedData = useMemo7(() => {
+  const paginatedData = useMemo8(() => {
     if (serverSide) {
       return filteredData.toArray();
     }
@@ -4915,7 +5148,7 @@ function Spreadsheet({
     getRowId,
     enableCellEditing
   });
-  const selectedCellValues = useMemo7(() => getSelectedCellValues(), [getSelectedCellValues]);
+  const selectedCellValues = useMemo8(() => getSelectedCellValues(), [getSelectedCellValues]);
   const { summary: selectionSummary, hasNumericValues } = useSpreadsheetSummary({
     selectedCellValues,
     columns: visibleColumns
@@ -5154,7 +5387,7 @@ function Spreadsheet({
   const handleRowIndexHighlightClick = useCallback11(() => {
     setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
   }, [setHighlightPickerColumn]);
-  const columnRenderItems = useMemo7(() => {
+  const columnRenderItems = useMemo8(() => {
     if (!columnGroups || columnGroups.length === 0) {
       return visibleColumns.map((col) => ({
         type: "column",
@@ -5184,7 +5417,7 @@ function Spreadsheet({
     }
     return items;
   }, [columnGroups, collapsedGroups, visibleColumns]);
-  const groupHeaderItems = useMemo7(() => {
+  const groupHeaderItems = useMemo8(() => {
     if (!columnGroups || columnGroups.length === 0) return null;
     const items = [];
     for (const group of columnGroups) {
@@ -5235,7 +5468,12 @@ function Spreadsheet({
         onSave: handleSave,
         onSettings: () => setShowSettingsModal(true),
         onShowShortcuts: () => setShowKeyboardShortcuts(true),
-        menuItems: toolbarMenuItems
+        menuItems: toolbarMenuItems,
+        hiddenColumnCount: spreadsheetSettings.hiddenColumns?.length ?? 0,
+        onShowAllColumns: () => {
+          setSpreadsheetSettings((prev) => ({ ...prev, hiddenColumns: [] }));
+        },
+        onManageColumns: () => setShowSettingsModal(true)
       }
     ),
     /* @__PURE__ */ jsxs14("div", { ref: tableRef, className: cn("flex-1 overflow-auto border border-gray-200 rounded spreadsheet-scroll-container relative", isResizing && "select-none"), onMouseUp: handleMouseUp, children: [
@@ -5343,6 +5581,7 @@ function Spreadsheet({
                     activeFilterColumn === column.id ? null : column.id
                   ),
                   onPinClick: () => handleTogglePin(column.id),
+                  onHideClick: () => handleHideColumn(column.id),
                   onHighlightClick: enableHighlighting ? () => setHighlightPickerColumn(column.id) : void 0,
                   resizeHandleProps: getResizeHandleProps(
                     column.id,
@@ -5788,6 +6027,7 @@ function Spreadsheet({
           onSettingsChange?.(newSettings);
         },
         columns: columns || [],
+        columnGroups,
         title: "Spreadsheet Settings",
         pageSizeOptions
       }