@xcelsior/ui-spreadsheets 1.2.2 → 1.3.1

package/src/components/Spreadsheet.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, startTransition } from 'react';
 import { HiChevronDown, HiChevronRight } from 'react-icons/hi';
 import { AiFillHighlight } from 'react-icons/ai';
 import { FaComment, FaRegComment } from 'react-icons/fa';
@@ -7,7 +7,7 @@ import { cn } from '../utils';
 import { SpreadsheetCell } from './SpreadsheetCell';
 import { SpreadsheetFilterDropdown } from './SpreadsheetFilterDropdown';
 import { SpreadsheetToolbar } from './SpreadsheetToolbar';
-import { SpreadsheetHeader } from './SpreadsheetHeader';
+import { MemoizedSpreadsheetHeader } from './SpreadsheetHeader';
 import { RowIndexColumnHeader } from './RowIndexColumnHeader';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { type SpreadsheetSettings, SpreadsheetSettingsModal } from './SpreadsheetSettingsModal';
@@ -16,17 +16,20 @@ import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
 import { RowContextMenu } from './RowContextMenu';
 import { Pagination } from '@xcelsior/design-system';
 import { useSpreadsheetFiltering } from '../hooks/useSpreadsheetFiltering';
+import { useSpreadsheetDuplicates } from '../hooks/useSpreadsheetDuplicates';
 import { useSpreadsheetHighlighting } from '../hooks/useSpreadsheetHighlighting';
 import {
     useSpreadsheetPinning,
     ROW_INDEX_COLUMN_WIDTH,
     ROW_INDEX_COLUMN_ID,
-    MIN_PINNED_COLUMN_WIDTH,
 } from '../hooks/useSpreadsheetPinning';
 import { useSpreadsheetComments } from '../hooks/useSpreadsheetComments';
 import { useSpreadsheetUndoRedo } from '../hooks/useSpreadsheetUndoRedo';
 import { useSpreadsheetKeyboardShortcuts } from '../hooks/useSpreadsheetKeyboardShortcuts';
 import { useSpreadsheetSelection } from '../hooks/useSpreadsheetSelection';
+import { useSpreadsheetSummary } from '../hooks/useSpreadsheetSummary';
+import { useSpreadsheetColumnResize } from '../hooks/useSpreadsheetColumnResize';
+import { SelectionSummaryBar } from './SelectionSummaryBar';
 import type {
     CellEdit,
     SpreadsheetColumn,
@@ -126,6 +129,8 @@ export function Spreadsheet<T extends Record<string, any>>({
     sortConfig: controlledSortConfig,
     onPageChange,
     filters: controlledFilters,
+    duplicateCheckColumns: propDuplicateCheckColumns,
+    onDuplicateCheckChange,
 }: SpreadsheetProps<T>) {
     // ==================== HOOKS ====================
 
@@ -139,6 +144,41 @@ export function Spreadsheet<T extends Record<string, any>>({
         compactView: initialSettings?.compactView ?? false,
     });
 
+    // Duplicate detection hook
+    const {
+        isCellDuplicate,
+        toggleDuplicateCheck,
+        duplicateCheckColumns,
+        duplicateRowIds,
+        getDuplicateColumnCount,
+    } = useSpreadsheetDuplicates({
+        data,
+        columns,
+        duplicateCheckColumns: propDuplicateCheckColumns ?? [],
+        getRowId,
+    });
+
+    // Callback to handle toggling duplicate check with external notification
+    const handleDuplicateCheckToggle = useCallback(
+        (columnId: string) => {
+            setIsProcessing(true);
+            startTransition(() => {
+                toggleDuplicateCheck(columnId);
+                // Build updated list for external callback
+                const currentCols = Array.from(duplicateCheckColumns);
+                const next = currentCols.includes(columnId)
+                    ? currentCols.filter((id) => id !== columnId)
+                    : [...currentCols, columnId];
+                onDuplicateCheckChange?.(next);
+                setIsProcessing(false);
+            });
+        },
+        [toggleDuplicateCheck, duplicateCheckColumns, onDuplicateCheckChange]
+    );
+
+    // Processing overlay state
+    const [isProcessing, setIsProcessing] = useState(false);
+
     // Filtering and sorting hook
     const {
         filters,
@@ -160,6 +200,8 @@ export function Spreadsheet<T extends Record<string, any>>({
         controlledFilters,
         controlledSortConfig,
         defaultSortConfig: spreadsheetSettings.defaultSort,
+        duplicateRowIds,
+        getRowId,
     });
 
     // Highlighting hook
@@ -176,6 +218,7 @@ export function Spreadsheet<T extends Record<string, any>>({
         setHighlightPickerColumn,
         highlightPickerCell,
         setHighlightPickerCell,
+        recentColors,
     } = useSpreadsheetHighlighting({
         externalRowHighlights,
         onRowHighlight,
@@ -185,6 +228,17 @@ export function Spreadsheet<T extends Record<string, any>>({
         onCellHighlight,
     });
 
+    // Column resize hook (must be before pinning hook so getColumnWidth is available for offset calculations)
+    const { getColumnWidth, getResizeHandleProps, isResizing, columnWidths } = useSpreadsheetColumnResize({
+        initialColumnWidths: initialSettings?.columnWidths,
+        onColumnResize: (columnId, width) => {
+            setSpreadsheetSettings((prev) => ({
+                ...prev,
+                columnWidths: { ...prev.columnWidths, [columnId]: width },
+            }));
+        },
+    });
+
     // Pinning hook
     const {
         pinnedColumns,
@@ -198,11 +252,14 @@ export function Spreadsheet<T extends Record<string, any>>({
         getColumnRightOffset,
         isColumnPinned,
         getColumnPinSide,
+        getPinnedZIndex,
+        measureRef,
     } = useSpreadsheetPinning({
         columns,
         columnGroups,
         defaultPinnedColumns: initialSettings?.defaultPinnedColumns,
         defaultPinnedRightColumns: initialSettings?.defaultPinnedRightColumns,
+        getColumnWidth,
     });
 
     // Comments hook
@@ -252,7 +309,9 @@ export function Spreadsheet<T extends Record<string, any>>({
     // Row selection state
     const [selectedRows, setSelectedRows] = useState<Set<string | number>>(new Set());
     const [lastSelectedRow, setLastSelectedRow] = useState<string | number | null>(null);
-    const [hoveredRow, setHoveredRow] = useState<string | number | null>(null);
+    // hoveredRow uses a ref instead of state to avoid full re-renders on mouse move
+    // Hover styling is handled via CSS tr:hover in the stylesheet
+    const hoveredRowRef = useRef<string | number | null>(null);
 
     // Pagination state (supports both controlled and uncontrolled modes)
     const [internalCurrentPage, setInternalCurrentPage] = useState(1);
@@ -318,6 +377,23 @@ export function Spreadsheet<T extends Record<string, any>>({
         }));
     }, [sortConfig]);
 
+    // Sync pinned columns from external settings (e.g., after hydration from localStorage)
+    // Only fires once when settings arrive with pinned columns that differ from current state
+    const hasSyncedPinnedFromSettings = useRef(false);
+    useEffect(() => {
+        if (hasSyncedPinnedFromSettings.current) return;
+        const settingsPinned = initialSettings?.defaultPinnedColumns;
+        if (settingsPinned && settingsPinned.length > 0) {
+            // Check if current pinnedColumns already matches (initialized correctly)
+            const currentIds = Array.from(pinnedColumns.keys());
+            const hasAllSettingsPinned = settingsPinned.every((id) => pinnedColumns.has(id));
+            if (!hasAllSettingsPinned) {
+                setPinnedColumnsFromIds(settingsPinned);
+            }
+            hasSyncedPinnedFromSettings.current = true;
+        }
+    }, [initialSettings?.defaultPinnedColumns, pinnedColumns, setPinnedColumnsFromIds]);
+
     // Sync pinned columns to spreadsheetSettings when pinning changes
     useEffect(() => {
         const pinnedColumnIds = Array.from(pinnedColumns.keys());
@@ -389,7 +465,7 @@ export function Spreadsheet<T extends Record<string, any>>({
     const paginatedData = useMemo(() => {
         if (serverSide) {
             // In server-side mode, data is already paginated by the server
-            return filteredData;
+            return filteredData.toArray();
         }
         const startIndex = (currentPage - 1) * pageSize;
         return filteredData.slice(startIndex, startIndex + pageSize);
@@ -398,9 +474,14 @@ export function Spreadsheet<T extends Record<string, any>>({
     // Cell selection hook (for multi-cell selection, copy/paste)
     const {
         focusedCell,
+        setFocusedCell,
         editingCell,
         setEditingCell,
+        selectedCellRange,
+        setSelectedCellRange,
         handleCellMouseDown,
+        handleCellMouseEnter,
+        handleMouseUp,
         isCellInSelection,
         getCellSelectionEdge,
         clearSelection,
@@ -409,6 +490,7 @@ export function Spreadsheet<T extends Record<string, any>>({
         enterEditMode,
         copySelectedCells,
         pasteFromSystemClipboard,
+        getSelectedCellValues,
     } = useSpreadsheetSelection({
         data: paginatedData as T[],
         columns: visibleColumns,
@@ -416,6 +498,13 @@ export function Spreadsheet<T extends Record<string, any>>({
         enableCellEditing,
     });
 
+    // Summary hook for selection statistics
+    const selectedCellValues = useMemo(() => getSelectedCellValues(), [getSelectedCellValues]);
+    const { summary: selectionSummary, hasNumericValues } = useSpreadsheetSummary({
+        selectedCellValues,
+        columns: visibleColumns,
+    });
+
     // Escape handler for clearing modals and selection
     const handleEscapeCallback = useCallback(() => {
         if (commentModalCell !== null) {
@@ -523,6 +612,19 @@ export function Spreadsheet<T extends Record<string, any>>({
             onTabNavigation: handleTabNavigation,
             onCopy: copySelectedCells,
             onPaste: handlePaste,
+            onSelectAll: () => {
+                if (paginatedData.length > 0 && visibleColumns.length > 0) {
+                    const firstRow = paginatedData[0];
+                    const lastRow = paginatedData[paginatedData.length - 1];
+                    const firstCol = visibleColumns[0];
+                    const lastCol = visibleColumns[visibleColumns.length - 1];
+                    setSelectedCellRange({
+                        start: { rowId: getRowId(firstRow), columnId: firstCol.id },
+                        end: { rowId: getRowId(lastRow), columnId: lastCol.id },
+                    });
+                    setFocusedCell({ rowId: getRowId(firstRow), columnId: firstCol.id });
+                }
+            },
             hasFocusedCell: focusedCell !== null,
             isEditing: editingCell !== null,
             enabled: true,
@@ -616,19 +718,26 @@ export function Spreadsheet<T extends Record<string, any>>({
         ]
     );
 
-    // Handle cell click - use the selection hook's handler for focus and selection
-    // but also handle entering edit mode for editable cells
+    // Handle cell click - focus only (edit mode requires double-click or F2)
     const handleCellClick = useCallback(
         (rowId: string | number, columnId: string, event: React.MouseEvent) => {
             event.stopPropagation();
             handleCellMouseDown(rowId, columnId, event);
-
-            // Double-click to edit is handled by the selection hook
-            // For single click, we just focus. Edit mode is entered via handleCellMouseDown for editable cells
         },
         [handleCellMouseDown]
     );
 
+    // Handle cell double-click - enter edit mode
+    const handleCellDoubleClick = useCallback(
+        (rowId: string | number, columnId: string) => {
+            const column = columns.find((c) => c.id === columnId);
+            if (column?.editable && enableCellEditing) {
+                setEditingCell({ rowId, columnId });
+            }
+        },
+        [columns, enableCellEditing, setEditingCell]
+    );
+
     const handleCellChange = useCallback(
         (rowId: string | number, columnId: string, newValue: any) => {
             const row = data.find((r) => getRowId(r) === rowId);
@@ -676,8 +785,7 @@ export function Spreadsheet<T extends Record<string, any>>({
         setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
     }, [setHighlightPickerColumn]);
 
-    // Build render items that include placeholder cells for collapsed groups
-    // Pinned columns are moved to the edges: left-pinned first, then unpinned, then right-pinned
+    // Build render items in group order — collapsed groups get a placeholder, columns stay in natural order
     const columnRenderItems = useMemo(() => {
         if (!columnGroups || columnGroups.length === 0) {
             return visibleColumns.map((col) => ({
@@ -694,83 +802,43 @@ export function Spreadsheet<T extends Record<string, any>>({
         };
         type RenderItem = ColumnItem | PlaceholderItem;
 
-        const leftPinnedItems: ColumnItem[] = [];
-        const middleItems: RenderItem[] = [];
-        const rightPinnedItems: ColumnItem[] = [];
+        const items: RenderItem[] = [];
+        const allGroupedIds = new Set(columnGroups.flatMap((g) => g.columns));
 
+        // Add ungrouped columns first (if any appear before the first group)
+        for (const col of visibleColumns) {
+            if (!allGroupedIds.has(col.id)) {
+                items.push({ type: 'column', column: col });
+            }
+        }
+
+        // Add columns by group order
         for (const group of columnGroups) {
             const isCollapsed = collapsedGroups.has(group.id);
+            const groupVisibleCols = visibleColumns.filter((c) => group.columns.includes(c.id));
 
             if (isCollapsed) {
-                middleItems.push({
+                // Add collapsed placeholder
+                items.push({
                     type: 'collapsed-placeholder',
                     groupId: group.id,
                     headerColor: group.headerColor,
                 });
             }
 
-            // Get columns from this group that are visible (preserving original order)
-            const groupVisibleCols = (columns || []).filter((c) => {
-                if (!group.columns.includes(c.id)) return false;
-                if (isCollapsed) return pinnedColumns.has(c.id);
-                return true;
-            });
-
+            // Add visible columns from this group
             for (const col of groupVisibleCols) {
-                const pinSide = pinnedColumns.get(col.id);
-                if (pinSide === 'left') {
-                    leftPinnedItems.push({ type: 'column', column: col });
-                } else if (pinSide === 'right') {
-                    rightPinnedItems.push({ type: 'column', column: col });
-                } else {
-                    middleItems.push({ type: 'column', column: col });
-                }
+                items.push({ type: 'column', column: col });
             }
         }
 
-        // Add any columns not in any group
-        const allGroupedIds = new Set(columnGroups.flatMap((g) => g.columns));
-        for (const col of visibleColumns) {
-            if (!allGroupedIds.has(col.id)) {
-                const pinSide = pinnedColumns.get(col.id);
-                if (pinSide === 'left') {
-                    leftPinnedItems.push({ type: 'column', column: col });
-                } else if (pinSide === 'right') {
-                    rightPinnedItems.push({ type: 'column', column: col });
-                } else {
-                    middleItems.push({ type: 'column', column: col });
-                }
-            }
-        }
+        return items;
+    }, [columnGroups, collapsedGroups, visibleColumns]);
 
-        // Sort pinned items by their order in the pinnedColumns map
-        const pinnedLeftOrder = Array.from(pinnedColumns.entries())
-            .filter(([id, side]) => side === 'left' && id !== ROW_INDEX_COLUMN_ID)
-            .map(([id]) => id);
-        const pinnedRightOrder = Array.from(pinnedColumns.entries())
-            .filter(([, side]) => side === 'right')
-            .map(([id]) => id);
-
-        leftPinnedItems.sort(
-            (a, b) => pinnedLeftOrder.indexOf(a.column.id) - pinnedLeftOrder.indexOf(b.column.id)
-        );
-        rightPinnedItems.sort(
-            (a, b) => pinnedRightOrder.indexOf(a.column.id) - pinnedRightOrder.indexOf(b.column.id)
-        );
-
-        return [...leftPinnedItems, ...middleItems, ...rightPinnedItems];
-    }, [columnGroups, collapsedGroups, columns, pinnedColumns, visibleColumns]);
-
-    // Build group header items that account for pinned columns being moved to edges
+    // Build group header items — columns stay in their groups (freeze panes, no splitting)
     const groupHeaderItems = useMemo(() => {
         if (!columnGroups || columnGroups.length === 0) return null;
 
-        type PinnedGroupHeaderItem = {
-            type: 'pinned-column';
-            columnId: string;
-            headerColor?: string;
-            pinSide: 'left' | 'right';
-        };
         type GroupHeaderItem = {
             type: 'group';
             group: SpreadsheetColumnGroup;
@@ -778,46 +846,16 @@ export function Spreadsheet<T extends Record<string, any>>({
             isCollapsed: boolean;
         };
 
-        const leftPinned: PinnedGroupHeaderItem[] = [];
-        const groups: GroupHeaderItem[] = [];
-        const rightPinned: PinnedGroupHeaderItem[] = [];
+        const items: GroupHeaderItem[] = [];
 
         for (const group of columnGroups) {
             const isCollapsed = collapsedGroups.has(group.id);
-            const groupColumns = (columns || []).filter((c) => group.columns.includes(c.id));
-            const visibleGroupColumns = isCollapsed
-                ? groupColumns.filter((c) => pinnedColumns.has(c.id))
-                : groupColumns;
-
-            let movedLeftCount = 0;
-            let movedRightCount = 0;
-
-            for (const col of visibleGroupColumns) {
-                const pinSide = pinnedColumns.get(col.id);
-                if (pinSide === 'left') {
-                    movedLeftCount++;
-                    leftPinned.push({
-                        type: 'pinned-column',
-                        columnId: col.id,
-                        headerColor: group.headerColor,
-                        pinSide: 'left',
-                    });
-                } else if (pinSide === 'right') {
-                    movedRightCount++;
-                    rightPinned.push({
-                        type: 'pinned-column',
-                        columnId: col.id,
-                        headerColor: group.headerColor,
-                        pinSide: 'right',
-                    });
-                }
-            }
-
-            const remainingCols = visibleGroupColumns.length - movedLeftCount - movedRightCount;
-            const colSpan = remainingCols + (isCollapsed ? 1 : 0);
+            // Count visible columns in this group (from visibleColumns which respects collapse)
+            const visibleCount = visibleColumns.filter((c) => group.columns.includes(c.id)).length;
+            const colSpan = visibleCount + (isCollapsed ? 1 : 0); // +1 for collapsed placeholder
 
             if (colSpan > 0) {
-                groups.push({
+                items.push({
                     type: 'group',
                     group,
                     colSpan,
@@ -826,23 +864,9 @@ export function Spreadsheet<T extends Record<string, any>>({
             }
         }
 
-        // Sort pinned items by their order in the pinnedColumns map
-        const pinnedLeftOrder = Array.from(pinnedColumns.entries())
-            .filter(([id, side]) => side === 'left' && id !== ROW_INDEX_COLUMN_ID)
-            .map(([id]) => id);
-        const pinnedRightOrder = Array.from(pinnedColumns.entries())
-            .filter(([, side]) => side === 'right')
-            .map(([id]) => id);
+        return items;
+    }, [columnGroups, collapsedGroups, visibleColumns]);
 
-        leftPinned.sort(
-            (a, b) => pinnedLeftOrder.indexOf(a.columnId) - pinnedLeftOrder.indexOf(b.columnId)
-        );
-        rightPinned.sort(
-            (a, b) => pinnedRightOrder.indexOf(a.columnId) - pinnedRightOrder.indexOf(b.columnId)
-        );
-
-        return [...leftPinned, ...groups, ...rightPinned];
-    }, [columnGroups, collapsedGroups, columns, pinnedColumns]);
 
     // ==================== RENDER ====================
 
@@ -885,14 +909,18 @@ export function Spreadsheet<T extends Record<string, any>>({
             )}
 
             {/* Table Container */}
-            <div ref={tableRef} className="flex-1 overflow-auto border border-gray-200 rounded">
-                <div
-                    style={{
-                        zoom: zoom / 100,
-                    }}
-                >
-                    <table className="border-separate border-spacing-0 text-xs select-none">
-                        <thead>
+            <div ref={tableRef} className={cn('flex-1 overflow-auto border border-gray-200 rounded spreadsheet-scroll-container relative', isResizing && 'select-none')} onMouseUp={handleMouseUp}>
+                {/* Processing overlay */}
+                {isProcessing && (
+                    <div className="spreadsheet-processing-overlay">
+                        <div className="flex items-center gap-2 text-gray-500">
+                            <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+                            Processing...
+                        </div>
+                    </div>
+                )}
+                    <table ref={measureRef as React.Ref<HTMLTableElement>} className="border-separate border-spacing-0 text-sm select-none" style={zoom !== 100 ? { zoom: zoom / 100 } : undefined}>
+                        <thead className="sticky top-0" style={{ zIndex: 50 }}>
                             {/* Column Group Headers */}
                             {columnGroups && groupHeaderItems && (
                                 <tr>
@@ -904,37 +932,6 @@ export function Spreadsheet<T extends Record<string, any>>({
                                         compactMode={effectiveCompactMode}
                                     />
                                     {groupHeaderItems.map((item) => {
-                                        if (item.type === 'pinned-column') {
-                                            const col = columns.find((c) => c.id === item.columnId);
-                                            const isPinnedLeft = item.pinSide === 'left';
-                                            const pinnedWidth = Math.max(
-                                                col?.minWidth ||
-                                                    col?.width ||
-                                                    MIN_PINNED_COLUMN_WIDTH,
-                                                MIN_PINNED_COLUMN_WIDTH
-                                            );
-                                            return (
-                                                <th
-                                                    key={`pinned-group-${item.columnId}`}
-                                                    className={cn(
-                                                        'border border-gray-200 px-2 py-1.5 text-center font-bold text-gray-700',
-                                                        'z-30'
-                                                    )}
-                                                    style={{
-                                                        backgroundColor:
-                                                            item.headerColor || 'rgb(243 244 246)',
-                                                        position: 'sticky',
-                                                        left: isPinnedLeft
-                                                            ? `${getColumnLeftOffset(item.columnId)}px`
-                                                            : undefined,
-                                                        right: !isPinnedLeft
-                                                            ? `${getColumnRightOffset(item.columnId)}px`
-                                                            : undefined,
-                                                        minWidth: pinnedWidth,
-                                                    }}
-                                                />
-                                            );
-                                        }
                                         const { group, colSpan, isCollapsed } = item;
                                         return (
                                             <th
@@ -985,12 +982,11 @@ export function Spreadsheet<T extends Record<string, any>>({
                                         return (
                                             <th
                                                 key={`${item.groupId}-placeholder`}
-                                                className="border border-gray-200 px-2 py-1 text-center text-gray-400 sticky z-20"
+                                                className="border border-gray-200 px-2 py-1 text-center text-gray-400"
                                                 style={{
                                                     backgroundColor:
                                                         item.headerColor || 'rgb(243 244 246)',
                                                     minWidth: '30px',
-                                                    top: 0,
                                                 }}
                                             >
                                                 ...
@@ -1005,13 +1001,14 @@ export function Spreadsheet<T extends Record<string, any>>({
                                         isColumnPinned(column.id) &&
                                         getColumnPinSide(column.id) === 'right';
                                     return (
-                                        <SpreadsheetHeader
+                                        <MemoizedSpreadsheetHeader
                                             key={column.id}
                                             column={column}
                                             sortConfig={sortConfig}
                                             hasActiveFilter={!!filters[column.id]}
                                             isPinned={isColumnPinned(column.id)}
                                             pinSide={getColumnPinSide(column.id)}
+                                            pinnedZIndex={isColumnPinned(column.id) ? getPinnedZIndex(column.id) : undefined}
                                             leftOffset={
                                                 isPinnedLeft ? getColumnLeftOffset(column.id) : 0
                                             }
@@ -1020,7 +1017,30 @@ export function Spreadsheet<T extends Record<string, any>>({
                                             }
                                             highlightColor={getColumnHighlight(column.id)}
                                             compactMode={effectiveCompactMode}
-                                            onClick={() => handleSort(column.id)}
+                                            onClick={() => {
+                                                // Toggle column selection
+                                                if (paginatedData.length > 0) {
+                                                    const firstRowId = getRowId(paginatedData[0]);
+                                                    const lastRowId = getRowId(paginatedData[paginatedData.length - 1]);
+                                                    // Check if this column is already fully selected — deselect if so
+                                                    const isAlreadySelected =
+                                                        selectedCellRange?.start.columnId === column.id &&
+                                                        selectedCellRange?.end.columnId === column.id &&
+                                                        selectedCellRange?.start.rowId === firstRowId &&
+                                                        selectedCellRange?.end.rowId === lastRowId;
+                                                    if (isAlreadySelected) {
+                                                        setSelectedCellRange(null);
+                                                        setFocusedCell(null);
+                                                    } else {
+                                                        setSelectedCellRange({
+                                                            start: { rowId: firstRowId, columnId: column.id },
+                                                            end: { rowId: lastRowId, columnId: column.id },
+                                                        });
+                                                        setFocusedCell({ rowId: firstRowId, columnId: column.id });
+                                                    }
+                                                }
+                                            }}
+                                            onSortClick={() => handleSort(column.id)}
                                             onFilterClick={() =>
                                                 setActiveFilterColumn(
                                                     activeFilterColumn === column.id
@@ -1034,6 +1054,14 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                     ? () => setHighlightPickerColumn(column.id)
                                                     : undefined
                                             }
+                                            resizeHandleProps={getResizeHandleProps(
+                                                column.id,
+                                                column.width || column.minWidth || 100
+                                            )}
+                                            resolvedWidth={getColumnWidth(column.id)}
+                                            hasDuplicateCheck={duplicateCheckColumns.has(column.id)}
+                                            onDuplicateCheckClick={() => handleDuplicateCheckToggle(column.id)}
+                                            duplicateCount={getDuplicateColumnCount(column.id)}
                                         >
                                             {/* Filter dropdown */}
                                             {activeFilterColumn === column.id && (
@@ -1047,9 +1075,10 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                         )
                                                     }
                                                     onClose={() => setActiveFilterColumn(null)}
+                                                    hasDuplicateCheck={duplicateCheckColumns.has(column.id)}
                                                 />
                                             )}
-                                        </SpreadsheetHeader>
+                                        </MemoizedSpreadsheetHeader>
                                     );
                                 })}
                             </tr>
@@ -1081,7 +1110,6 @@ export function Spreadsheet<T extends Record<string, any>>({
                                 paginatedData.map((row, rowIndex) => {
                                     const rowId = getRowId(row);
                                     const isRowSelected = selectedRows.has(rowId);
-                                    const isRowHovered = hoveredRow === rowId;
                                     const rowHighlight = getRowHighlight(rowId);
                                     const displayIndex =
                                         rowIndex + 1 + (currentPage - 1) * pageSize;
@@ -1089,8 +1117,8 @@ export function Spreadsheet<T extends Record<string, any>>({
                                     return (
                                         <tr
                                             key={rowId}
-                                            onMouseEnter={() => setHoveredRow(rowId)}
-                                            onMouseLeave={() => setHoveredRow(null)}
+                                            onMouseEnter={() => { hoveredRowRef.current = rowId; }}
+                                            onMouseLeave={() => { hoveredRowRef.current = null; }}
                                             onClick={() => {
                                                 onRowClick?.(row, rowIndex);
                                             }}
@@ -1098,42 +1126,36 @@ export function Spreadsheet<T extends Record<string, any>>({
                                         >
                                             {/* Row Index Column */}
                                             <td
+                                                data-column-id="__row_index__"
                                                 onClick={(e) => handleRowSelect(rowId, e)}
                                                 className={cn(
                                                     'border border-gray-200 text-center font-semibold cursor-pointer group',
                                                     effectiveCompactMode
-                                                        ? 'text-[10px] px-1 py-px'
-                                                        : 'text-xs px-2 py-1',
-                                                    isRowIndexPinned ? 'z-20' : 'z-0',
+                                                        ? 'text-xs px-1.5 py-0.5'
+                                                        : 'text-sm px-2.5 py-1.5',
+                                                    'sticky',
                                                     isRowSelected && 'bg-blue-100',
-                                                    !isRowSelected && rowHighlight && '',
-                                                    isRowHovered &&
-                                                        !isRowSelected &&
-                                                        !rowHighlight &&
-                                                        'bg-gray-50'
+                                                    !isRowSelected && rowHighlight && ''
                                                 )}
                                                 style={{
                                                     backgroundColor:
                                                         rowHighlight?.color ||
                                                         (isRowSelected
                                                             ? '#dbeafe'
-                                                            : isRowHovered
-                                                              ? '#f9fafb'
-                                                              : rowIndexHighlightColor || 'white'),
+                                                            : rowIndexHighlightColor || (rowIndex % 2 !== 0 ? '#f9fafb' : 'white')),
                                                     minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
                                                     width: `${ROW_INDEX_COLUMN_WIDTH}px`,
-                                                    ...(isRowIndexPinned && {
-                                                        position: 'sticky' as const,
-                                                        left: 0,
-                                                    }),
+                                                    position: 'sticky' as const,
+                                                    left: 0,
+                                                    zIndex: 40,
                                                 }}
                                             >
-                                                <div className="relative flex items-center justify-center w-full h-full">
-                                                    {/* Row number - centered */}
-                                                    <span>{displayIndex}</span>
+                                                <div className="relative flex items-center w-full h-full">
+                                                    {/* Row number - left aligned to leave room for hover icons */}
+                                                    <span className="pl-1">{displayIndex}</span>
 
-                                                    {/* Action buttons - absolute overlay, spaced between */}
-                                                    <div className="absolute inset-0 flex items-center justify-between">
+                                                    {/* Action buttons - absolute right side to avoid blocking row select */}
+                                                    <div className="absolute inset-y-0 right-0 flex items-center gap-0.5 pr-0.5">
                                                         {/* Context Menu (3-dot menu for row actions) */}
                                                         {rowContextMenuItems &&
                                                             rowContextMenuItems.length > 0 && (
@@ -1310,11 +1332,15 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                         isInSelection={isInSelection}
                                                         selectionEdge={selectionEdge}
                                                         isRowSelected={isRowSelected}
-                                                        isRowHovered={isRowHovered}
+                                                        isRowHovered={false}
                                                         highlightColor={cellOrRowOrColumnHighlight}
+                                                        isDuplicate={isCellDuplicate(rowId, column.id)}
                                                         compactMode={effectiveCompactMode}
+                                                        isOddRow={rowIndex % 2 !== 0}
+                                                        resolvedWidth={getColumnWidth(column.id)}
                                                         isPinned={isColPinned}
                                                         pinSide={colPinSide}
+                                                        pinnedZIndex={isColPinned ? getPinnedZIndex(column.id) : undefined}
                                                         leftOffset={getColumnLeftOffset(column.id)}
                                                         rightOffset={getColumnRightOffset(
                                                             column.id
@@ -1322,6 +1348,12 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                         onClick={(e) =>
                                                             handleCellClick(rowId, column.id, e)
                                                         }
+                                                        onDoubleClick={() =>
+                                                            handleCellDoubleClick(rowId, column.id)
+                                                        }
+                                                        onMouseEnter={() =>
+                                                            handleCellMouseEnter(rowId, column.id)
+                                                        }
                                                         onConfirm={handleConfirmEdit}
                                                         onCancel={handleCancelEdit}
                                                         onHighlight={
@@ -1370,9 +1402,19 @@ export function Spreadsheet<T extends Record<string, any>>({
                             )}
                         </tbody>
                     </table>
-                </div>
             </div>
 
+            {/* Status Bar (address + selection summary) */}
+            <SelectionSummaryBar
+                summary={selectionSummary}
+                focusedCell={focusedCell}
+                columns={visibleColumns}
+                data={paginatedData as T[]}
+                getRowId={getRowId}
+                currentPage={currentPage}
+                pageSize={pageSize}
+            />
+
             {/* Pagination */}
             {showPagination && effectiveTotalItems > 0 && (
                 <Pagination
@@ -1442,6 +1484,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                 <ColorPickerPopover
                     title="Highlight Row"
                     paletteType="row"
+                    recentColors={recentColors}
                     onSelectColor={(color) => handleRowHighlightToggle(highlightPickerRow, color)}
                     onClose={() => setHighlightPickerRow(null)}
                 />
@@ -1456,6 +1499,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                             : `Highlight Column: ${columns.find((c) => c.id === highlightPickerColumn)?.label || ''}`
                     }
                     paletteType="column"
+                    recentColors={recentColors}
                     onSelectColor={(color) =>
                         handleColumnHighlightToggle(highlightPickerColumn, color)
                     }
@@ -1468,6 +1512,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                 <ColorPickerPopover
                     title="Highlight Cell"
                     paletteType="row"
+                    recentColors={recentColors}
                     onSelectColor={(color) =>
                         handleCellHighlightToggle(
                             highlightPickerCell.rowId,