@xcelsior/ui-spreadsheets 1.3.5 → 1.4.0

package/.omc/state/idle-notif-cooldown.json

@@ -1,3 +1,3 @@
 {
-  "lastSentAt": "2026-03-31T06:22:45.213Z"
+  "lastSentAt": "2026-04-08T02:53:32.151Z"
 }

package/dist/index.d.mts

@@ -362,6 +362,8 @@ interface SpreadsheetProps<T = any> {
         compactView?: boolean;
         /** Persisted column widths (columnId → width in px) */
         columnWidths?: Record<string, number>;
+        /** Column IDs that are hidden from view */
+        hiddenColumns?: string[];
     };
     /** Callback when spreadsheet settings are changed by the user */
     onSettingsChange?: (settings: {
@@ -372,6 +374,7 @@ interface SpreadsheetProps<T = any> {
         defaultPinnedColumns?: string[];
         defaultPinnedRightColumns?: string[];
         defaultSort?: SpreadsheetSortConfig | null;
+        hiddenColumns?: string[];
     }) => void;
     /** Loading state */
     isLoading?: boolean;
@@ -565,6 +568,8 @@ interface SpreadsheetHeaderProps {
     onDuplicateCheckClick?: () => void;
     /** Number of rows with duplicate values (shown as badge when > 0) */
     duplicateCount?: number;
+    /** Callback when hide column is clicked */
+    onHideClick?: () => void;
     /** Resize handle props from useSpreadsheetColumnResize */
     resizeHandleProps?: {
         onMouseDown: (e: React$1.MouseEvent) => void;
@@ -676,6 +681,12 @@ interface SpreadsheetToolbarProps {
     showFiltersPanel?: boolean;
     /** Callback to toggle the active filters panel */
     onToggleFiltersPanel?: () => void;
+    /** Number of hidden columns (shows indicator when > 0) */
+    hiddenColumnCount?: number;
+    /** Callback to show all hidden columns */
+    onShowAllColumns?: () => void;
+    /** Callback to open column visibility settings */
+    onManageColumns?: () => void;
     /** Custom className */
     className?: string;
 }
@@ -839,6 +850,8 @@ interface SpreadsheetSettings {
     columnWidths?: Record<string, number>;
     /** Column IDs with duplicate checking enabled */
     duplicateCheckColumns?: string[];
+    /** Column IDs that are hidden from view */
+    hiddenColumns?: string[];
 }
 interface SpreadsheetSettingsModalProps {
     /** Whether the modal is open */
@@ -851,6 +864,8 @@ interface SpreadsheetSettingsModalProps {
     onSave: (settings: SpreadsheetSettings) => void;
     /** Available columns for pinning/sorting */
     columns: SpreadsheetColumn[];
+    /** Column groups for organized visibility toggles */
+    columnGroups?: SpreadsheetColumnGroup[];
     /** Title for the modal */
     title?: string;
     /** Available page size options */

package/dist/index.d.ts

@@ -362,6 +362,8 @@ interface SpreadsheetProps<T = any> {
         compactView?: boolean;
         /** Persisted column widths (columnId → width in px) */
         columnWidths?: Record<string, number>;
+        /** Column IDs that are hidden from view */
+        hiddenColumns?: string[];
     };
     /** Callback when spreadsheet settings are changed by the user */
     onSettingsChange?: (settings: {
@@ -372,6 +374,7 @@ interface SpreadsheetProps<T = any> {
         defaultPinnedColumns?: string[];
         defaultPinnedRightColumns?: string[];
         defaultSort?: SpreadsheetSortConfig | null;
+        hiddenColumns?: string[];
     }) => void;
     /** Loading state */
     isLoading?: boolean;
@@ -565,6 +568,8 @@ interface SpreadsheetHeaderProps {
     onDuplicateCheckClick?: () => void;
     /** Number of rows with duplicate values (shown as badge when > 0) */
     duplicateCount?: number;
+    /** Callback when hide column is clicked */
+    onHideClick?: () => void;
     /** Resize handle props from useSpreadsheetColumnResize */
     resizeHandleProps?: {
         onMouseDown: (e: React$1.MouseEvent) => void;
@@ -676,6 +681,12 @@ interface SpreadsheetToolbarProps {
     showFiltersPanel?: boolean;
     /** Callback to toggle the active filters panel */
     onToggleFiltersPanel?: () => void;
+    /** Number of hidden columns (shows indicator when > 0) */
+    hiddenColumnCount?: number;
+    /** Callback to show all hidden columns */
+    onShowAllColumns?: () => void;
+    /** Callback to open column visibility settings */
+    onManageColumns?: () => void;
     /** Custom className */
     className?: string;
 }
@@ -839,6 +850,8 @@ interface SpreadsheetSettings {
     columnWidths?: Record<string, number>;
     /** Column IDs with duplicate checking enabled */
     duplicateCheckColumns?: string[];
+    /** Column IDs that are hidden from view */
+    hiddenColumns?: string[];
 }
 interface SpreadsheetSettingsModalProps {
     /** Whether the modal is open */
@@ -851,6 +864,8 @@ interface SpreadsheetSettingsModalProps {
     onSave: (settings: SpreadsheetSettings) => void;
     /** Available columns for pinning/sorting */
     columns: SpreadsheetColumn[];
+    /** Column groups for organized visibility toggles */
+    columnGroups?: SpreadsheetColumnGroup[];
     /** Title for the modal */
     title?: string;
     /** Available page size options */

package/dist/index.js

@@ -141,6 +141,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);
 }
@@ -1369,6 +1372,9 @@ var SpreadsheetToolbar = ({
   onClearFilter,
   showFiltersPanel,
   onToggleFiltersPanel,
+  hiddenColumnCount = 0,
+  onShowAllColumns,
+  onManageColumns,
   className
 }) => {
   const [showMoreMenu, setShowMoreMenu] = import_react5.default.useState(false);
@@ -1588,6 +1594,31 @@ var SpreadsheetToolbar = ({
                 ]
               }
             ),
+            hiddenColumnCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "font-medium", children: [
+                hiddenColumnCount,
+                " hidden"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onShowAllColumns,
+                  className: "text-amber-800 underline hover:text-amber-900 transition-colors",
+                  children: "Show"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-amber-300", children: "|" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onManageColumns,
+                  className: "text-amber-800 underline hover:text-amber-900 transition-colors",
+                  children: "Manage"
+                }
+              )
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", ref: menuRef, children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                 "button",
@@ -1711,7 +1742,8 @@ function ColumnHeaderActions({
   resolvedWidth,
   enableDuplicateCheck = false,
   hasDuplicateCheck = false,
-  onDuplicateCheckClick
+  onDuplicateCheckClick,
+  onHideClick
 }) {
   const [overflowOpen, setOverflowOpen] = (0, import_react6.useState)(false);
   const overflowRef = (0, import_react6.useRef)(null);
@@ -1859,7 +1891,26 @@ function ColumnHeaderActions({
                     "Check Duplicates"
                   ]
                 }
-              )
+              ),
+              onHideClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border-t border-gray-100 my-1" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "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__ */ (0, import_jsx_runtime5.jsx)(HiEyeOff, { className: "h-3.5 w-3.5 shrink-0" }),
+                      "Hide column"
+                    ]
+                  }
+                )
+              ] })
             ]
           }
         ),
@@ -1947,6 +1998,19 @@ function ColumnHeaderActions({
         title: "Check duplicates",
         children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiExclamation, { className: "h-3 w-3" })
       }
+    ),
+    onHideClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "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__ */ (0, import_jsx_runtime5.jsx)(HiEyeOff, { className: "h-3 w-3" })
+      }
     )
   ] });
 }
@@ -1975,6 +2039,7 @@ var SpreadsheetHeader = ({
   hasDuplicateCheck = false,
   onDuplicateCheckClick,
   duplicateCount,
+  onHideClick,
   resizeHandleProps,
   resolvedWidth,
   topOffset = 0,
@@ -2058,7 +2123,8 @@ var SpreadsheetHeader = ({
               resolvedWidth,
               enableDuplicateCheck: true,
               hasDuplicateCheck,
-              onDuplicateCheckClick
+              onDuplicateCheckClick,
+              onHideClick
             }
           )
         ] }),
@@ -2110,7 +2176,8 @@ function useSpreadsheetPinning({
   showRowIndex = true,
   defaultPinnedColumns = [],
   defaultPinnedRightColumns = [],
-  getColumnWidth
+  getColumnWidth,
+  hiddenColumns = []
 }) {
   const [pinnedColumns, setPinnedColumns] = (0, import_react8.useState)(() => {
     const map = /* @__PURE__ */ new Map();
@@ -2197,9 +2264,13 @@ function useSpreadsheetPinning({
       return newSet;
     });
   }, []);
+  const hiddenColumnsSet = (0, import_react8.useMemo)(() => new Set(hiddenColumns), [hiddenColumns]);
   const visibleColumns = (0, import_react8.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));
@@ -2209,7 +2280,7 @@ function useSpreadsheetPinning({
       });
     }
     return result;
-  }, [columns, columnGroups, collapsedGroups, pinnedColumns]);
+  }, [columns, columnGroups, collapsedGroups, pinnedColumns, hiddenColumnsSet]);
   (0, import_react8.useEffect)(() => {
     requestAnimationFrame(() => measureColumnWidths());
   }, [measureColumnWidths, visibleColumns, pinnedColumns]);
@@ -2479,14 +2550,24 @@ var SpreadsheetSettingsModal = ({
   settings,
   onSave,
   columns,
+  columnGroups,
   title = "Spreadsheet Settings",
   pageSizeOptions = [25, 50, 100, 200]
 }) => {
-  const [activeTab, setActiveTab] = (0, import_react10.useState)("columns");
+  const [activeTab, setActiveTab] = (0, import_react10.useState)("visibility");
   const [localSettings, setLocalSettings] = (0, import_react10.useState)(settings);
   (0, import_react10.useEffect)(() => {
     setLocalSettings(settings);
   }, [settings]);
+  const hiddenColumnsSet = (0, import_react10.useMemo)(
+    () => new Set(localSettings.hiddenColumns ?? []),
+    [localSettings.hiddenColumns]
+  );
+  const ungroupedColumns = (0, import_react10.useMemo)(() => {
+    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);
@@ -2534,7 +2615,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 }
@@ -2557,7 +2654,7 @@ var SpreadsheetSettingsModal = ({
             "aria-label": "Close settings"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-white rounded-lg w-[90%] max-w-[700px] max-h-[90vh] flex flex-col shadow-xl relative z-10", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-6 py-5 border-b border-gray-200 flex items-center justify-between", children: [
             /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiCog, { className: "h-6 w-6 text-blue-600" }),
@@ -2587,6 +2684,131 @@ var SpreadsheetSettingsModal = ({
             tab.id
           )) }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 overflow-auto p-6", children: [
+            activeTab === "visibility" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-4 bg-amber-50 border border-amber-200 rounded-lg mb-4 flex gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiEyeOff, { className: "h-4 w-4 text-amber-600 shrink-0 mt-0.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm font-semibold text-gray-900 mb-1", children: "Column Visibility" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ml-1 font-medium text-amber-700", children: [
+                      hiddenCount,
+                      " column",
+                      hiddenCount !== 1 ? "s" : "",
+                      " hidden."
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2 mb-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "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__ */ (0, import_jsx_runtime9.jsx)(
+                  "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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        "div",
+                        {
+                          className: "w-3 h-3 rounded-sm",
+                          style: { backgroundColor: group.headerColor }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium text-gray-900", children: group.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-xs text-gray-500", children: [
+                        "(",
+                        groupCols.length - hiddenInGroup,
+                        "/",
+                        groupCols.length,
+                        ")"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        "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__ */ (0, import_jsx_runtime9.jsx)(
+                        "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__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)(
+                      "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__ */ (0, import_jsx_runtime9.jsx)(HiEyeOff, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiEye, { className: "h-4 w-4 shrink-0" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm flex-1 truncate", children: column.label })
+                        ]
+                      },
+                      column.id
+                    );
+                  }) })
+                ] }, group.id);
+              }),
+              ungroupedColumns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-4", children: [
+                columnGroups?.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center gap-2 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium text-gray-900", children: "Other" }) }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)(
+                    "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__ */ (0, import_jsx_runtime9.jsx)(HiEyeOff, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiEye, { className: "h-4 w-4 shrink-0" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm flex-1 truncate", children: column.label })
+                      ]
+                    },
+                    column.id
+                  );
+                }) })
+              ] })
+            ] }),
             activeTab === "columns" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg mb-4 flex gap-3", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiViewBoards, { className: "h-4 w-4 text-blue-600 shrink-0 mt-0.5" }),
@@ -4671,7 +4893,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,
@@ -4698,6 +4921,15 @@ function Spreadsheet({
     },
     [toggleDuplicateCheck, duplicateCheckColumns, onDuplicateCheckChange]
   );
+  const handleHideColumn = (0, import_react23.useCallback)(
+    (columnId) => {
+      setSpreadsheetSettings((prev) => ({
+        ...prev,
+        hiddenColumns: [...prev.hiddenColumns ?? [], columnId]
+      }));
+    },
+    []
+  );
   const [isProcessing, setIsProcessing] = (0, import_react23.useState)(false);
   const {
     filters,
@@ -4772,7 +5004,8 @@ function Spreadsheet({
     columnGroups,
     defaultPinnedColumns: initialSettings?.defaultPinnedColumns,
     defaultPinnedRightColumns: initialSettings?.defaultPinnedRightColumns,
-    getColumnWidth
+    getColumnWidth,
+    hiddenColumns: spreadsheetSettings.hiddenColumns
   });
   const {
     getCellComments,
@@ -5280,7 +5513,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__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: tableRef, className: cn("flex-1 overflow-auto border border-gray-200 rounded spreadsheet-scroll-container relative", isResizing && "select-none"), onMouseUp: handleMouseUp, children: [
@@ -5388,6 +5626,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,
@@ -5833,6 +6072,7 @@ function Spreadsheet({
           onSettingsChange?.(newSettings);
         },
         columns: columns || [],
+        columnGroups,
         title: "Spreadsheet Settings",
         pageSizeOptions
       }