@xcelsior/ui-spreadsheets 1.0.18 → 1.1.0

package/src/components/SpreadsheetSettingsModal.tsx

@@ -18,12 +18,6 @@ export interface SpreadsheetSettings {
     autoSave?: boolean;
     /** Whether compact view is enabled */
     compactView?: boolean;
-    /** Whether to show row index column */
-    showRowIndex?: boolean;
-    /** Whether row index column is pinned */
-    pinRowIndex?: boolean;
-    /** Row index column highlight color */
-    rowIndexHighlightColor?: string;
 }
 
 export interface SpreadsheetSettingsModalProps {
@@ -50,9 +44,6 @@ const DEFAULT_SETTINGS: SpreadsheetSettings = {
     defaultZoom: 100,
     autoSave: true,
     compactView: false,
-    showRowIndex: true,
-    pinRowIndex: false,
-    rowIndexHighlightColor: undefined,
 };
 
 /**
@@ -221,17 +212,12 @@ export const SpreadsheetSettingsModal: React.FC<SpreadsheetSettingsModalProps> =
                                 Select which columns should be pinned to the left by default.
                             </p>
                             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
-                                {/* Row Index Column - Special handling */}
+                                {/* Row Index Column */}
                                 <button
                                     type="button"
-                                    onClick={() =>
-                                        setLocalSettings({
-                                            ...localSettings,
-                                            pinRowIndex: !localSettings.pinRowIndex,
-                                        })
-                                    }
+                                    onClick={() => togglePinnedColumn('__row_index__')}
                                     className={`flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${
-                                        localSettings.pinRowIndex !== false
+                                        localSettings.defaultPinnedColumns.includes('__row_index__')
                                             ? 'bg-blue-50 border-blue-300 text-blue-700'
                                             : 'bg-gray-50 border-gray-200 text-gray-700 hover:border-blue-300'
                                     }`}
@@ -263,69 +249,6 @@ export const SpreadsheetSettingsModal: React.FC<SpreadsheetSettingsModalProps> =
                                     );
                                 })}
                             </div>
-
-                            {/* Row Index Highlight */}
-                            <div className="mt-6 p-4 bg-amber-50 border border-amber-200 rounded-lg">
-                                <p className="text-sm font-semibold text-gray-900 mb-3">
-                                    Row Index Column Highlight
-                                </p>
-                                <p className="text-sm text-gray-600 mb-3">
-                                    Apply a highlight color to the # (row index) column to make it
-                                    stand out.
-                                </p>
-                                <div className="flex items-center gap-2 flex-wrap">
-                                    {[
-                                        '#fef3c7',
-                                        '#dbeafe',
-                                        '#dcfce7',
-                                        '#fce7f3',
-                                        '#f3e8ff',
-                                        '#e0e7ff',
-                                        '#fed7d7',
-                                        '#c6f6d5',
-                                    ].map((color) => (
-                                        <button
-                                            key={color}
-                                            type="button"
-                                            onClick={() =>
-                                                setLocalSettings({
-                                                    ...localSettings,
-                                                    rowIndexHighlightColor:
-                                                        localSettings.rowIndexHighlightColor ===
-                                                        color
-                                                            ? undefined
-                                                            : color,
-                                                })
-                                            }
-                                            className={`w-8 h-8 rounded-lg border-2 transition-all ${
-                                                localSettings.rowIndexHighlightColor === color
-                                                    ? 'border-blue-600 scale-110 ring-2 ring-blue-300'
-                                                    : 'border-gray-300 hover:border-gray-400'
-                                            }`}
-                                            style={{ backgroundColor: color }}
-                                            title={
-                                                localSettings.rowIndexHighlightColor === color
-                                                    ? 'Remove highlight'
-                                                    : 'Apply highlight'
-                                            }
-                                        />
-                                    ))}
-                                    {localSettings.rowIndexHighlightColor && (
-                                        <button
-                                            type="button"
-                                            onClick={() =>
-                                                setLocalSettings({
-                                                    ...localSettings,
-                                                    rowIndexHighlightColor: undefined,
-                                                })
-                                            }
-                                            className="text-sm text-red-600 hover:text-red-700 ml-2 px-2 py-1 rounded hover:bg-red-50"
-                                        >
-                                            Clear
-                                        </button>
-                                    )}
-                                </div>
-                            </div>
                         </div>
                     )}
 
@@ -393,36 +316,6 @@ export const SpreadsheetSettingsModal: React.FC<SpreadsheetSettingsModalProps> =
                                 Customize the display and behavior of the spreadsheet.
                             </p>
 
-                            {/* Row Index Options */}
-                            <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-                                <p className="text-sm font-semibold text-gray-900 mb-3">
-                                    Row Index Column
-                                </p>
-                                <div className="space-y-3">
-                                    {/* Show Row Index */}
-                                    <label className="flex items-center gap-3 cursor-pointer">
-                                        <input
-                                            type="checkbox"
-                                            checked={localSettings.showRowIndex !== false}
-                                            onChange={(e) =>
-                                                setLocalSettings({
-                                                    ...localSettings,
-                                                    showRowIndex: e.target.checked,
-                                                })
-                                            }
-                                            className="w-4 h-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                                        />
-                                        <span className="text-sm text-gray-700">
-                                            Show row index (#) column
-                                        </span>
-                                    </label>
-                                    <p className="text-xs text-gray-500 ml-7">
-                                        Tip: Use the "Pinned Columns" tab to pin and highlight the
-                                        row index column.
-                                    </p>
-                                </div>
-                            </div>
-
                             {/* Page Size */}
                             <div>
                                 <label className="block text-sm font-medium text-gray-900 mb-2">

package/src/hooks/index.ts

@@ -7,7 +7,6 @@ export {
 export {
     useSpreadsheetHighlighting,
     HIGHLIGHT_COLORS,
-    ROW_INDEX_COLUMN_ID,
     type UseSpreadsheetHighlightingOptions,
     type UseSpreadsheetHighlightingReturn,
 } from './useSpreadsheetHighlighting';
@@ -15,7 +14,6 @@ export {
 export {
     useSpreadsheetPinning,
     ROW_INDEX_COLUMN_WIDTH,
-    ROW_INDEX_COLUMN_ID as PINNING_ROW_INDEX_COLUMN_ID,
     type UseSpreadsheetPinningOptions,
     type UseSpreadsheetPinningReturn,
 } from './useSpreadsheetPinning';

package/src/hooks/useSpreadsheetHighlighting.ts

@@ -68,9 +68,6 @@ export interface UseSpreadsheetHighlightingReturn {
     clearAllHighlights: () => void;
 }
 
-// Special column ID for row index
-export const ROW_INDEX_COLUMN_ID = '__row_index__';
-
 export function useSpreadsheetHighlighting({
     externalRowHighlights,
     onRowHighlight,

package/src/hooks/useSpreadsheetPinning.ts

@@ -3,7 +3,7 @@ import type { SpreadsheetColumn, SpreadsheetColumnGroup } from '../types';
 
 // Special column ID for row index
 export const ROW_INDEX_COLUMN_ID = '__row_index__';
-export const ROW_INDEX_COLUMN_WIDTH = 56;
+export const ROW_INDEX_COLUMN_WIDTH = 80;
 
 export interface UseSpreadsheetPinningOptions<T> {
     columns: SpreadsheetColumn<T>[];
@@ -28,6 +28,8 @@ export interface UseSpreadsheetPinningReturn<T> {
     handleTogglePin: (columnId: string) => void;
     handleToggleRowIndexPin: () => void;
     handleToggleGroupCollapse: (groupId: string) => void;
+    setPinnedColumnsFromIds: (columnIds: string[]) => void;
+    setRowIndexPinned: (pinned: boolean) => void;
 
     // Offset calculations
     getColumnLeftOffset: (columnId: string) => number;
@@ -45,16 +47,21 @@ export function useSpreadsheetPinning<T>({
     defaultPinnedColumns = [],
     defaultPinRowIndex = false,
 }: UseSpreadsheetPinningOptions<T>): UseSpreadsheetPinningReturn<T> {
-    // Initialize pinned columns from defaults
+    // Initialize pinned columns from defaults (excluding row index which is handled separately)
     const [pinnedColumns, setPinnedColumns] = useState<Map<string, 'left' | 'right'>>(() => {
         const map = new Map<string, 'left' | 'right'>();
         defaultPinnedColumns.forEach((col) => {
-            map.set(col, 'left');
+            if (col !== ROW_INDEX_COLUMN_ID) {
+                map.set(col, 'left');
+            }
         });
         return map;
     });
 
-    const [isRowIndexPinned, setIsRowIndexPinned] = useState(defaultPinRowIndex);
+    // 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
@@ -75,6 +82,24 @@ export function useSpreadsheetPinning<T>({
         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');
+            }
+        });
+        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
     const handleToggleGroupCollapse = useCallback((groupId: string) => {
         setCollapsedGroups((prev) => {
@@ -195,6 +220,8 @@ export function useSpreadsheetPinning<T>({
         handleTogglePin,
         handleToggleRowIndexPin,
         handleToggleGroupCollapse,
+        setPinnedColumnsFromIds,
+        setRowIndexPinned,
         getColumnLeftOffset,
         getRowIndexLeftOffset,
         isColumnPinned,

package/src/types.ts

@@ -344,8 +344,6 @@ export interface SpreadsheetProps<T = any> {
     showToolbar?: boolean;
     /** Whether to show pagination */
     showPagination?: boolean;
-    /** Whether to show row index column (#) */
-    showRowIndex?: boolean;
     /** Whether to enable row selection */
     enableRowSelection?: boolean;
     /** Whether to enable cell editing */
@@ -356,18 +354,34 @@ export interface SpreadsheetProps<T = any> {
     enableHighlighting?: boolean;
     /** Whether to enable undo/redo */
     enableUndoRedo?: boolean;
-    /** Initial page size */
-    defaultPageSize?: number;
     /** Available page size options */
     pageSizeOptions?: number[];
-    /** Initial zoom level */
-    defaultZoom?: number;
-    /** Whether to auto-save changes */
-    autoSave?: boolean;
     /** Callback when changes are saved (called for both auto-save and manual save) */
     onSave?: () => void | Promise<void>;
-    /** Whether to use compact mode (smaller cells) */
-    compactMode?: boolean;
+    /** Initial settings (optional). All settings can be changed by user in the settings modal. */
+    settings?: {
+        /** Default pinned column IDs */
+        defaultPinnedColumns?: string[];
+        /** Default sort configuration */
+        defaultSort?: SpreadsheetSortConfig | null;
+        /** Default page size */
+        defaultPageSize?: number;
+        /** Default zoom level */
+        defaultZoom?: number;
+        /** Whether auto-save is enabled */
+        autoSave?: boolean;
+        /** Whether compact view is enabled */
+        compactView?: boolean;
+    };
+    /** Callback when spreadsheet settings are changed by the user */
+    onSettingsChange?: (settings: {
+        compactView?: boolean;
+        autoSave?: boolean;
+        defaultPageSize?: number;
+        defaultZoom?: number;
+        defaultPinnedColumns?: string[];
+        defaultSort?: SpreadsheetSortConfig | null;
+    }) => void;
     /** Loading state */
     isLoading?: boolean;
     /** Custom className */