@xcelsior/ui-spreadsheets 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xcelsior/ui-spreadsheets",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/ColumnHeaderActions.tsx

@@ -1,4 +1,3 @@
-import type React from 'react';
 import { HiFilter } from 'react-icons/hi';
 import { AiFillHighlight } from 'react-icons/ai';
 import { MdOutlinePushPin, MdPushPin } from 'react-icons/md';
@@ -55,21 +54,8 @@ export function ColumnHeaderActions({
     unpinnedTitle = 'Pin column',
     className,
 }: ColumnHeaderActionsProps) {
-    const handleClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        e.stopPropagation();
-    };
-
     return (
-        <button
-            type="button"
-            className={cn('flex items-center gap-0.5', className)}
-            onClick={handleClick}
-            onKeyDown={handleKeyDown}
-        >
+        <div className={cn('flex items-center gap-0.5', className)}>
             {/* Filter button */}
             {enableFiltering && onFilterClick && (
                 <button
@@ -133,7 +119,7 @@ export function ColumnHeaderActions({
                     )}
                 </button>
             )}
-        </button>
+        </div>
     );
 }
 

package/src/components/Spreadsheet.stories.tsx

@@ -215,6 +215,7 @@ A feature-rich spreadsheet component with Excel-like functionality.
         getRowId: { control: false },
         onCellsEdit: { action: 'onCellsEdit' },
         onSelectionChange: { action: 'onSelectionChange' },
+        onSettingsChange: { action: 'onSettingsChange' },
         onSortChange: { action: 'onSortChange' },
         onFilterChange: { action: 'onFilterChange' },
         onRowClick: { action: 'onRowClick' },

package/src/components/Spreadsheet.tsx

@@ -146,7 +146,8 @@ export function Spreadsheet<T extends Record<string, any>>({
         onSortChange,
         serverSide,
         controlledFilters,
-        controlledSortConfig: controlledSortConfig ?? spreadsheetSettings?.defaultSort,
+        controlledSortConfig,
+        defaultSortConfig: spreadsheetSettings.defaultSort,
     });
 
     // Highlighting hook
@@ -183,6 +184,7 @@ export function Spreadsheet<T extends Record<string, any>>({
     } = useSpreadsheetPinning({
         columns,
         columnGroups,
+        defaultPinnedColumns: initialSettings?.defaultPinnedColumns,
     });
 
     // Comments hook
@@ -271,6 +273,35 @@ export function Spreadsheet<T extends Record<string, any>>({
         }));
     }, [sortConfig]);
 
+    // Sync pinned columns to spreadsheetSettings when pinning changes
+    useEffect(() => {
+        const pinnedColumnIds = Array.from(pinnedColumns.keys());
+        setSpreadsheetSettings((prev) => {
+            // Only update if the arrays are different to avoid unnecessary re-renders
+            const prevIds = prev.defaultPinnedColumns;
+            if (
+                prevIds.length === pinnedColumnIds.length &&
+                prevIds.every((id, idx) => id === pinnedColumnIds[idx])
+            ) {
+                return prev;
+            }
+            return {
+                ...prev,
+                defaultPinnedColumns: pinnedColumnIds,
+            };
+        });
+    }, [pinnedColumns]);
+
+    // Notify parent when settings change (skip initial render)
+    const isInitialMount = useRef(true);
+    useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            return;
+        }
+        onSettingsChange?.(spreadsheetSettings);
+    }, [spreadsheetSettings, onSettingsChange]);
+
     const applyUndo = useCallback(() => {
         const entry = popUndoEntry();
         if (!entry || !onCellsEdit) return;

package/src/components/SpreadsheetCell.tsx

@@ -231,7 +231,7 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
             onKeyDown={handleCellKeyDown}
             data-cell-id={`${rowId}-${column.id}`}
             className={cn(
-                'border border-gray-200 group cursor-pointer select-none',
+                'border border-gray-200 group cursor-pointer transition-colors select-none',
                 compactMode ? 'text-[10px]' : 'text-xs',
                 cellPadding,
                 column.align === 'right' && 'text-right',

package/src/hooks/useSpreadsheetFiltering.ts

@@ -6,6 +6,7 @@ import { isBlankValue } from '../utils';
 export interface UseSpreadsheetFilteringOptions<T> {
     data: T[];
     columns: SpreadsheetColumn<T>[];
+    defaultSortConfig?: SpreadsheetSortConfig | null;
     onFilterChange?: (filters: Record<string, SpreadsheetColumnFilter>) => void;
     onSortChange?: (sortConfig: SpreadsheetSortConfig | null) => void;
     /**
@@ -52,13 +53,14 @@ export function useSpreadsheetFiltering<T extends Record<string, any>>({
     serverSide = false,
     controlledFilters,
     controlledSortConfig,
+    defaultSortConfig,
 }: UseSpreadsheetFilteringOptions<T>): UseSpreadsheetFilteringReturn<T> {
     // Internal state for uncontrolled mode
     const [internalFilters, setInternalFilters] = useState<Record<string, SpreadsheetColumnFilter>>(
         {}
     );
     const [internalSortConfig, setInternalSortConfig] = useState<SpreadsheetSortConfig | null>(
-        null
+        defaultSortConfig ?? null,
     );
     const [activeFilterColumn, setActiveFilterColumn] = useState<string | null>(null);
 

package/src/hooks/useSpreadsheetPinning.ts

@@ -10,7 +10,6 @@ export interface UseSpreadsheetPinningOptions<T> {
     columnGroups?: SpreadsheetColumnGroup[];
     showRowIndex?: boolean;
     defaultPinnedColumns?: string[];
-    defaultPinRowIndex?: boolean;
 }
 
 export interface UseSpreadsheetPinningReturn<T> {
@@ -26,14 +25,11 @@ export interface UseSpreadsheetPinningReturn<T> {
 
     // Actions
     handleTogglePin: (columnId: string) => void;
-    handleToggleRowIndexPin: () => void;
     handleToggleGroupCollapse: (groupId: string) => void;
     setPinnedColumnsFromIds: (columnIds: string[]) => void;
-    setRowIndexPinned: (pinned: boolean) => void;
 
     // Offset calculations
     getColumnLeftOffset: (columnId: string) => number;
-    getRowIndexLeftOffset: () => number;
 
     // Utility
     isColumnPinned: (columnId: string) => boolean;
@@ -45,26 +41,22 @@ export function useSpreadsheetPinning<T>({
     columnGroups,
     showRowIndex = true,
     defaultPinnedColumns = [],
-    defaultPinRowIndex = false,
 }: UseSpreadsheetPinningOptions<T>): UseSpreadsheetPinningReturn<T> {
-    // Initialize pinned columns from defaults (excluding row index which is handled separately)
+    // Initialize pinned columns from defaults (including row index)
     const [pinnedColumns, setPinnedColumns] = useState<Map<string, 'left' | 'right'>>(() => {
         const map = new Map<string, 'left' | 'right'>();
         defaultPinnedColumns.forEach((col) => {
-            if (col !== ROW_INDEX_COLUMN_ID) {
-                map.set(col, 'left');
-            }
+            map.set(col, 'left');
         });
         return map;
     });
 
-    // Check if row index should be pinned from either defaultPinRowIndex or defaultPinnedColumns
-    const [isRowIndexPinned, setIsRowIndexPinned] = useState(
-        defaultPinRowIndex || defaultPinnedColumns.includes(ROW_INDEX_COLUMN_ID)
-    );
     const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
 
-    // Toggle column pin
+    // Derive isRowIndexPinned from pinnedColumns for convenience
+    const isRowIndexPinned = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
+
+    // Toggle column pin (works for any column including row index)
     const handleTogglePin = useCallback((columnId: string) => {
         setPinnedColumns((prev) => {
             const newMap = new Map(prev);
@@ -77,27 +69,13 @@ export function useSpreadsheetPinning<T>({
         });
     }, []);
 
-    // Toggle row index pin
-    const handleToggleRowIndexPin = useCallback(() => {
-        setIsRowIndexPinned((prev) => !prev);
-    }, []);
-
     // Set pinned columns from an array of column IDs
     const setPinnedColumnsFromIds = useCallback((columnIds: string[]) => {
         const map = new Map<string, 'left' | 'right'>();
         columnIds.forEach((col) => {
-            if (col !== ROW_INDEX_COLUMN_ID) {
-                map.set(col, 'left');
-            }
+            map.set(col, 'left');
         });
         setPinnedColumns(map);
-        // Also update row index pinned state
-        setIsRowIndexPinned(columnIds.includes(ROW_INDEX_COLUMN_ID));
-    }, []);
-
-    // Set row index pinned state directly
-    const setRowIndexPinned = useCallback((pinned: boolean) => {
-        setIsRowIndexPinned(pinned);
     }, []);
 
     // Toggle group collapse
@@ -132,8 +110,11 @@ export function useSpreadsheetPinning<T>({
             });
         }
 
-        // If no columns are pinned, return result as-is to preserve original order
-        if (pinnedColumns.size === 0) {
+        // If no columns are pinned (excluding row index), return result as-is to preserve original order
+        const nonRowIndexPinned = Array.from(pinnedColumns.keys()).filter(
+            (id) => id !== ROW_INDEX_COLUMN_ID
+        );
+        if (nonRowIndexPinned.length === 0) {
             return result;
         }
 
@@ -144,10 +125,10 @@ export function useSpreadsheetPinning<T>({
 
         // Maintain the order of pinned columns as they were added
         const pinnedLeftIds = Array.from(pinnedColumns.entries())
-            .filter(([, side]) => side === 'left')
+            .filter(([id, side]) => side === 'left' && id !== ROW_INDEX_COLUMN_ID)
             .map(([id]) => id);
         const pinnedRightIds = Array.from(pinnedColumns.entries())
-            .filter(([, side]) => side === 'right')
+            .filter(([id, side]) => side === 'right' && id !== ROW_INDEX_COLUMN_ID)
             .map(([id]) => id);
 
         for (const column of result) {
@@ -168,32 +149,35 @@ export function useSpreadsheetPinning<T>({
         return [...leftPinned, ...unpinned, ...rightPinned];
     }, [columns, columnGroups, collapsedGroups, pinnedColumns]);
 
-    // Get left offset for row index column
-    const getRowIndexLeftOffset = useCallback((): number => {
-        return 0;
-    }, []);
-
     // Calculate column offset for sticky positioning
     const getColumnLeftOffset = useCallback(
         (columnId: string): number => {
+            // Row index column is always at left: 0 when pinned
+            if (columnId === ROW_INDEX_COLUMN_ID) {
+                return 0;
+            }
+
+            // Get left-pinned columns (excluding row index)
             const pinnedLeft = Array.from(pinnedColumns.entries())
-                .filter(([, side]) => side === 'left')
+                .filter(([id, side]) => side === 'left' && id !== ROW_INDEX_COLUMN_ID)
                 .map(([id]) => id);
             const index = pinnedLeft.indexOf(columnId);
 
             // Base offset includes the row index column if shown and pinned
-            const baseOffset = showRowIndex && isRowIndexPinned ? ROW_INDEX_COLUMN_WIDTH : 0;
+            const isRowIndexPinnedNow = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
+            const baseOffset = showRowIndex && isRowIndexPinnedNow ? ROW_INDEX_COLUMN_WIDTH : 0;
 
             if (index === -1) return baseOffset;
 
             let offset = baseOffset;
             for (let i = 0; i < index; i++) {
                 const col = columns.find((c) => c.id === pinnedLeft[i]);
-                offset += col?.width || col?.minWidth || 100;
+                // Use minWidth || width to match the rendered cell width
+                offset += col?.minWidth || col?.width || 100;
             }
             return offset;
         },
-        [pinnedColumns, columns, showRowIndex, isRowIndexPinned]
+        [pinnedColumns, columns, showRowIndex]
     );
 
     // Check if column is pinned
@@ -218,12 +202,9 @@ export function useSpreadsheetPinning<T>({
         collapsedGroups,
         visibleColumns,
         handleTogglePin,
-        handleToggleRowIndexPin,
         handleToggleGroupCollapse,
         setPinnedColumnsFromIds,
-        setRowIndexPinned,
         getColumnLeftOffset,
-        getRowIndexLeftOffset,
         isColumnPinned,
         getColumnPinSide,
     };