@xcelsior/ui-spreadsheets 1.3.4 → 1.4.0

package/src/components/SpreadsheetSettingsModal.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { HiX, HiCog, HiViewBoards, HiSortAscending, HiEye } from 'react-icons/hi';
-import type { SpreadsheetColumn, SpreadsheetSortConfig } from '../types';
+import { useState, useEffect, useMemo } from 'react';
+import { HiX, HiCog, HiViewBoards, HiSortAscending, HiEye, HiEyeOff } from 'react-icons/hi';
+import type { SpreadsheetColumn, SpreadsheetColumnGroup, SpreadsheetSortConfig } from '../types';
 
 /**
  * Settings configuration for the Spreadsheet
@@ -22,6 +22,8 @@ export interface SpreadsheetSettings {
     columnWidths?: Record<string, number>;
     /** Column IDs with duplicate checking enabled */
     duplicateCheckColumns?: string[];
+    /** Column IDs that are hidden from view */
+    hiddenColumns?: string[];
 }
 
 export interface SpreadsheetSettingsModalProps {
@@ -35,6 +37,8 @@ export 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 */
@@ -71,10 +75,11 @@ export const SpreadsheetSettingsModal: React.FC<SpreadsheetSettingsModalProps> =
     settings,
     onSave,
     columns,
+    columnGroups,
     title = 'Spreadsheet Settings',
     pageSizeOptions = [25, 50, 100, 200],
 }) => {
-    const [activeTab, setActiveTab] = useState<'columns' | 'sorting' | 'display'>('columns');
+    const [activeTab, setActiveTab] = useState<'visibility' | 'columns' | 'sorting' | 'display'>('visibility');
     const [localSettings, setLocalSettings] = useState<SpreadsheetSettings>(settings);
 
     // Update local settings when parent settings change
@@ -82,6 +87,18 @@ export const SpreadsheetSettingsModal: React.FC<SpreadsheetSettingsModalProps> =
         setLocalSettings(settings);
     }, [settings]);
 
+    const hiddenColumnsSet = useMemo(
+        () => new Set(localSettings.hiddenColumns ?? []),
+        [localSettings.hiddenColumns]
+    );
+
+    /** Columns not assigned to any group */
+    const ungroupedColumns = 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 = () => {
@@ -137,7 +154,28 @@ export const SpreadsheetSettingsModal: React.FC<SpreadsheetSettingsModalProps> =
         }
     };
 
+    const hiddenCount = hiddenColumnsSet.size;
+
+    const toggleColumnVisibility = (columnId: string) => {
+        const isHidden = hiddenColumnsSet.has(columnId);
+        const newHidden = isHidden
+            ? (localSettings.hiddenColumns ?? []).filter((id) => id !== columnId)
+            : [...(localSettings.hiddenColumns ?? []), columnId];
+        setLocalSettings({ ...localSettings, hiddenColumns: newHidden });
+    };
+
+    const setGroupVisibility = (groupColumnIds: string[], visible: boolean) => {
+        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' as const, label: `Column Visibility${hiddenCount > 0 ? ` (${hiddenCount})` : ''}`, Icon: HiEyeOff },
         { id: 'columns' as const, label: 'Pinned Columns', Icon: HiViewBoards },
         { id: 'sorting' as const, label: 'Default Sorting', Icon: HiSortAscending },
         { id: 'display' as const, label: 'Display Options', Icon: HiEye },
@@ -158,7 +196,7 @@ export const SpreadsheetSettingsModal: React.FC<SpreadsheetSettingsModalProps> =
                 onKeyDown={(e) => e.key === 'Escape' && onClose()}
                 aria-label="Close settings"
             />
-            <div className="bg-white rounded-lg w-[90%] max-w-[700px] max-h-[90vh] flex flex-col shadow-xl relative z-10">
+            <div className="bg-white rounded-lg w-[70%] max-w-1/2 max-h-[70vh] flex flex-col shadow-xl relative z-10">
                 {/* Header */}
                 <div className="px-6 py-5 border-b border-gray-200 flex items-center justify-between">
                     <div className="flex items-center gap-3">
@@ -197,6 +235,160 @@ export const SpreadsheetSettingsModal: React.FC<SpreadsheetSettingsModalProps> =
 
                 {/* Content */}
                 <div className="flex-1 overflow-auto p-6">
+                    {/* Column Visibility Tab */}
+                    {activeTab === 'visibility' && (
+                        <div>
+                            <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg mb-4 flex gap-3">
+                                <HiEyeOff className="h-4 w-4 text-amber-600 shrink-0 mt-0.5" />
+                                <div>
+                                    <p className="text-sm font-semibold text-gray-900 mb-1">
+                                        Column Visibility
+                                    </p>
+                                    <p className="text-sm text-gray-600">
+                                        Toggle columns on or off. Hidden columns are removed from the table but their data is preserved.
+                                        {hiddenCount > 0 && (
+                                            <span className="ml-1 font-medium text-amber-700">
+                                                {hiddenCount} column{hiddenCount !== 1 ? 's' : ''} hidden.
+                                            </span>
+                                        )}
+                                    </p>
+                                </div>
+                            </div>
+
+                            {/* Show All / Hide All quick actions */}
+                            <div className="flex gap-2 mb-4">
+                                <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"
+                                >
+                                    Show All
+                                </button>
+                                <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"
+                                >
+                                    Hide All
+                                </button>
+                            </div>
+
+                            {/* Grouped columns */}
+                            {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 (
+                                    <div key={group.id} className="mb-4">
+                                        <div className="flex items-center justify-between mb-2">
+                                            <div className="flex items-center gap-2">
+                                                <div
+                                                    className="w-3 h-3 rounded-sm"
+                                                    style={{ backgroundColor: group.headerColor }}
+                                                />
+                                                <span className="text-sm font-medium text-gray-900">
+                                                    {group.label}
+                                                </span>
+                                                <span className="text-xs text-gray-500">
+                                                    ({groupCols.length - hiddenInGroup}/{groupCols.length})
+                                                </span>
+                                            </div>
+                                            <div className="flex gap-1">
+                                                <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"
+                                                >
+                                                    Show all
+                                                </button>
+                                                <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"
+                                                >
+                                                    Hide all
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+                                            {groupCols.map((column) => {
+                                                const isHidden = hiddenColumnsSet.has(column.id);
+                                                return (
+                                                    <button
+                                                        key={column.id}
+                                                        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'
+                                                        }`}
+                                                    >
+                                                        {isHidden ? (
+                                                            <HiEyeOff className="h-4 w-4 shrink-0" />
+                                                        ) : (
+                                                            <HiEye className="h-4 w-4 shrink-0" />
+                                                        )}
+                                                        <span className="text-sm flex-1 truncate">
+                                                            {column.label}
+                                                        </span>
+                                                    </button>
+                                                );
+                                            })}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+
+                            {/* Ungrouped columns */}
+                            {ungroupedColumns.length > 0 && (
+                                <div className="mb-4">
+                                    {columnGroups?.length ? (
+                                        <div className="flex items-center gap-2 mb-2">
+                                            <span className="text-sm font-medium text-gray-900">Other</span>
+                                        </div>
+                                    ) : null}
+                                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+                                        {ungroupedColumns.map((column) => {
+                                            const isHidden = hiddenColumnsSet.has(column.id);
+                                            return (
+                                                <button
+                                                    key={column.id}
+                                                    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'
+                                                    }`}
+                                                >
+                                                    {isHidden ? (
+                                                        <HiEyeOff className="h-4 w-4 shrink-0" />
+                                                    ) : (
+                                                        <HiEye className="h-4 w-4 shrink-0" />
+                                                    )}
+                                                    <span className="text-sm flex-1 truncate">
+                                                        {column.label}
+                                                    </span>
+                                                </button>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
                     {/* Pinned Columns Tab */}
                     {activeTab === 'columns' && (
                         <div>

package/src/components/SpreadsheetToolbar.tsx

@@ -68,6 +68,9 @@ export const SpreadsheetToolbar: React.FC<SpreadsheetToolbarProps> = ({
     onClearFilter,
     showFiltersPanel,
     onToggleFiltersPanel,
+    hiddenColumnCount = 0,
+    onShowAllColumns,
+    onManageColumns,
     className,
 }) => {
     const [showMoreMenu, setShowMoreMenu] = React.useState(false);
@@ -309,6 +312,28 @@ export const SpreadsheetToolbar: React.FC<SpreadsheetToolbarProps> = ({
                         </button>
                     )}
 
+                    {/* Hidden columns indicator */}
+                    {hiddenColumnCount > 0 && (
+                        <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">
+                            <span className="font-medium">{hiddenColumnCount} hidden</span>
+                            <button
+                                type="button"
+                                onClick={onShowAllColumns}
+                                className="text-amber-800 underline hover:text-amber-900 transition-colors"
+                            >
+                                Show
+                            </button>
+                            <span className="text-amber-300">|</span>
+                            <button
+                                type="button"
+                                onClick={onManageColumns}
+                                className="text-amber-800 underline hover:text-amber-900 transition-colors"
+                            >
+                                Manage
+                            </button>
+                        </div>
+                    )}
+
                     {/* More menu dropdown */}
                     <div className="relative" ref={menuRef}>
                         <button
@@ -323,7 +348,7 @@ export const SpreadsheetToolbar: React.FC<SpreadsheetToolbarProps> = ({
 
                         {/* Dropdown Menu */}
                         {showMoreMenu && (
-                            <div className="absolute right-0 top-full mt-1 bg-white border border-gray-200 shadow-lg rounded py-1 min-w-[180px] z-50">
+                            <div className="absolute right-0 top-full mt-1 bg-white border border-gray-200 shadow-lg rounded py-1 min-w-[180px] z-[60]">
                                 {onSettings && (
                                     <button
                                         type={'button'}

package/src/hooks/useSpreadsheetPinning.ts

@@ -15,6 +15,8 @@ export interface UseSpreadsheetPinningOptions<T> {
     defaultPinnedRightColumns?: string[];
     /** Function to get the current (possibly resized) width for a column */
     getColumnWidth?: (columnId: string, defaultWidth?: number) => number | undefined;
+    /** Column IDs that are hidden from view */
+    hiddenColumns?: string[];
 }
 
 export interface UseSpreadsheetPinningReturn<T> {
@@ -40,6 +42,7 @@ export function useSpreadsheetPinning<T>({
     defaultPinnedColumns = [],
     defaultPinnedRightColumns = [],
     getColumnWidth,
+    hiddenColumns = [],
 }: UseSpreadsheetPinningOptions<T>): UseSpreadsheetPinningReturn<T> {
     const [pinnedColumns, setPinnedColumns] = useState<Map<string, 'left' | 'right'>>(() => {
         const map = new Map<string, 'left' | 'right'>();
@@ -139,12 +142,20 @@ export function useSpreadsheetPinning<T>({
         });
     }, []);
 
-    // Visible columns — filtered by collapse, natural order preserved
+    // Stable reference for hidden columns set
+    const hiddenColumnsSet = useMemo(() => new Set(hiddenColumns), [hiddenColumns]);
+
+    // Visible columns — filtered by hidden columns and collapse, natural order preserved
     const visibleColumns = useMemo(() => {
         if (!columns || !Array.isArray(columns) || columns.length === 0) return [];
 
         let result: SpreadsheetColumn<T>[] = [...columns];
 
+        // Filter out hidden 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));
@@ -155,7 +166,7 @@ export function useSpreadsheetPinning<T>({
         }
 
         return result;
-    }, [columns, columnGroups, collapsedGroups, pinnedColumns]);
+    }, [columns, columnGroups, collapsedGroups, pinnedColumns, hiddenColumnsSet]);
 
     // Measure after render when layout changes
     useEffect(() => {

package/src/types.ts

@@ -415,6 +415,8 @@ export 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: {
@@ -425,6 +427,7 @@ export interface SpreadsheetProps<T = any> {
         defaultPinnedColumns?: string[];
         defaultPinnedRightColumns?: string[];
         defaultSort?: SpreadsheetSortConfig | null;
+        hiddenColumns?: string[];
     }) => void;
     /** Loading state */
     isLoading?: boolean;
@@ -623,6 +626,8 @@ export 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.MouseEvent) => void;
@@ -763,6 +768,12 @@ export 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;
 }