@xcelsior/ui-spreadsheets 1.0.18 → 1.1.0

package/dist/index.d.mts

@@ -283,8 +283,6 @@ 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 */
@@ -295,18 +293,34 @@ 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 */
@@ -606,7 +620,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, onSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, pageSizeOptions, onSave, settings: initialSettings, onSettingsChange, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }
@@ -682,12 +696,6 @@ 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;
 }
 interface SpreadsheetSettingsModalProps {
     /** Whether the modal is open */

package/dist/index.d.ts

@@ -283,8 +283,6 @@ 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 */
@@ -295,18 +293,34 @@ 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 */
@@ -606,7 +620,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, onSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, pageSizeOptions, onSave, settings: initialSettings, onSettingsChange, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }
@@ -682,12 +696,6 @@ 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;
 }
 interface SpreadsheetSettingsModalProps {
     /** Whether the modal is open */

package/dist/index.js

@@ -292,8 +292,8 @@ var SpreadsheetCell = ({
           onKeyDown: handleKeyDown,
           onBlur: () => onConfirm?.(localValue),
           className: cn(
-            "w-full border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500",
-            compactMode ? "px-1 py-0.5" : "px-2 py-1"
+            "w-full border-0 bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-sm",
+            compactMode ? "text-[10px]" : "text-xs"
           ),
           children: column.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option, children: option }, option))
         }
@@ -317,8 +317,8 @@ var SpreadsheetCell = ({
         autoCapitalize: "off",
         spellCheck: false,
         className: cn(
-          "w-full border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 bg-blue-50",
-          compactMode ? "px-1 py-0.5" : "px-2 py-1"
+          "w-full border-0 bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-sm",
+          compactMode ? "text-[10px]" : "text-xs"
         )
       }
     );
@@ -370,7 +370,7 @@ var SpreadsheetCell = ({
       onKeyDown: handleCellKeyDown,
       "data-cell-id": `${rowId}-${column.id}`,
       className: cn(
-        "border border-gray-200 group cursor-pointer transition-colors select-none",
+        "border border-gray-200 group cursor-pointer select-none",
         compactMode ? "text-[10px]" : "text-xs",
         cellPadding,
         column.align === "right" && "text-right",
@@ -393,7 +393,7 @@ var SpreadsheetCell = ({
           {
             className: cn(
               "flex-1 truncate",
-              isEditable && "cursor-text hover:bg-gray-50 px-0.5 rounded min-h-[18px] flex items-center bg-blue-50/50"
+              isEditable && "cursor-text bg-blue-50/50 rounded"
             ),
             title: String(value ?? ""),
             children: renderContent()
@@ -469,6 +469,7 @@ var MemoizedSpreadsheetCell = (0, import_react3.memo)(SpreadsheetCell, (prevProp
   if (prevProps.isPinned !== nextProps.isPinned) return false;
   if (prevProps.leftOffset !== nextProps.leftOffset) return false;
   if (prevProps.rightOffset !== nextProps.rightOffset) return false;
+  if (prevProps.compactMode !== nextProps.compactMode) return false;
   const prevEdge = prevProps.selectionEdge;
   const nextEdge = nextProps.selectionEdge;
   if (prevEdge !== nextEdge) {
@@ -1273,7 +1274,8 @@ SpreadsheetHeader.displayName = "SpreadsheetHeader";
 
 // src/hooks/useSpreadsheetPinning.ts
 var import_react6 = require("react");
-var ROW_INDEX_COLUMN_WIDTH = 56;
+var ROW_INDEX_COLUMN_ID = "__row_index__";
+var ROW_INDEX_COLUMN_WIDTH = 80;
 function useSpreadsheetPinning({
   columns,
   columnGroups,
@@ -1284,11 +1286,15 @@ function useSpreadsheetPinning({
   const [pinnedColumns, setPinnedColumns] = (0, import_react6.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     defaultPinnedColumns.forEach((col) => {
-      map.set(col, "left");
+      if (col !== ROW_INDEX_COLUMN_ID) {
+        map.set(col, "left");
+      }
     });
     return map;
   });
-  const [isRowIndexPinned, setIsRowIndexPinned] = (0, import_react6.useState)(defaultPinRowIndex);
+  const [isRowIndexPinned, setIsRowIndexPinned] = (0, import_react6.useState)(
+    defaultPinRowIndex || defaultPinnedColumns.includes(ROW_INDEX_COLUMN_ID)
+  );
   const [collapsedGroups, setCollapsedGroups] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   const handleTogglePin = (0, import_react6.useCallback)((columnId) => {
     setPinnedColumns((prev) => {
@@ -1304,6 +1310,19 @@ function useSpreadsheetPinning({
   const handleToggleRowIndexPin = (0, import_react6.useCallback)(() => {
     setIsRowIndexPinned((prev) => !prev);
   }, []);
+  const setPinnedColumnsFromIds = (0, import_react6.useCallback)((columnIds) => {
+    const map = /* @__PURE__ */ new Map();
+    columnIds.forEach((col) => {
+      if (col !== ROW_INDEX_COLUMN_ID) {
+        map.set(col, "left");
+      }
+    });
+    setPinnedColumns(map);
+    setIsRowIndexPinned(columnIds.includes(ROW_INDEX_COLUMN_ID));
+  }, []);
+  const setRowIndexPinned = (0, import_react6.useCallback)((pinned) => {
+    setIsRowIndexPinned(pinned);
+  }, []);
   const handleToggleGroupCollapse = (0, import_react6.useCallback)((groupId) => {
     setCollapsedGroups((prev) => {
       const newSet = new Set(prev);
@@ -1388,6 +1407,8 @@ function useSpreadsheetPinning({
     handleTogglePin,
     handleToggleRowIndexPin,
     handleToggleGroupCollapse,
+    setPinnedColumnsFromIds,
+    setRowIndexPinned,
     getColumnLeftOffset,
     getRowIndexLeftOffset,
     isColumnPinned,
@@ -1497,7 +1518,6 @@ var HIGHLIGHT_COLORS = {
     // gray-200
   ]
 };
-var ROW_INDEX_COLUMN_ID = "__row_index__";
 function useSpreadsheetHighlighting({
   externalRowHighlights,
   onRowHighlight
@@ -1665,10 +1685,7 @@ var DEFAULT_SETTINGS = {
   defaultPageSize: 25,
   defaultZoom: 100,
   autoSave: true,
-  compactView: false,
-  showRowIndex: true,
-  pinRowIndex: false,
-  rowIndexHighlightColor: void 0
+  compactView: false
 };
 var SpreadsheetSettingsModal = ({
   isOpen,
@@ -1798,11 +1815,8 @@ var SpreadsheetSettingsModal = ({
                   "button",
                   {
                     type: "button",
-                    onClick: () => setLocalSettings({
-                      ...localSettings,
-                      pinRowIndex: !localSettings.pinRowIndex
-                    }),
-                    className: `flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${localSettings.pinRowIndex !== false ? "bg-blue-50 border-blue-300 text-blue-700" : "bg-gray-50 border-gray-200 text-gray-700 hover:border-blue-300"}`,
+                    onClick: () => togglePinnedColumn("__row_index__"),
+                    className: `flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${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"}`,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
                       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm flex-1 truncate", children: "# (Row Index)" })
@@ -1827,47 +1841,6 @@ var SpreadsheetSettingsModal = ({
                     column.id
                   );
                 })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mt-6 p-4 bg-amber-50 border border-amber-200 rounded-lg", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Row Index Column Highlight" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-600 mb-3", children: "Apply a highlight color to the # (row index) column to make it stand out." }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                  [
-                    "#fef3c7",
-                    "#dbeafe",
-                    "#dcfce7",
-                    "#fce7f3",
-                    "#f3e8ff",
-                    "#e0e7ff",
-                    "#fed7d7",
-                    "#c6f6d5"
-                  ].map((color) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setLocalSettings({
-                        ...localSettings,
-                        rowIndexHighlightColor: localSettings.rowIndexHighlightColor === color ? void 0 : 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"
-                    },
-                    color
-                  )),
-                  localSettings.rowIndexHighlightColor && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setLocalSettings({
-                        ...localSettings,
-                        rowIndexHighlightColor: void 0
-                      }),
-                      className: "text-sm text-red-600 hover:text-red-700 ml-2 px-2 py-1 rounded hover:bg-red-50",
-                      children: "Clear"
-                    }
-                  )
-                ] })
               ] })
             ] }),
             activeTab === "sorting" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
@@ -1913,27 +1886,6 @@ var SpreadsheetSettingsModal = ({
             ] }),
             activeTab === "display" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-5", children: [
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-600", children: "Customize the display and behavior of the spreadsheet." }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Row Index Column" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-3 cursor-pointer", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "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"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm text-gray-700", children: "Show row index (#) column" })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-gray-500 ml-7", children: 'Tip: Use the "Pinned Columns" tab to pin and highlight the row index column.' })
-                ] })
-              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Default Page Size" }),
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -3374,18 +3326,15 @@ function Spreadsheet({
   onRowHighlight,
   showToolbar = true,
   showPagination = true,
-  showRowIndex = true,
   enableRowSelection = true,
   enableCellEditing = true,
   enableComments = true,
   enableHighlighting = true,
   enableUndoRedo = true,
-  defaultPageSize = 25,
   pageSizeOptions = [25, 50, 100, 200],
-  defaultZoom = 100,
-  autoSave,
   onSave,
-  compactMode,
+  settings: initialSettings,
+  onSettingsChange,
   isLoading = false,
   className,
   emptyMessage = "No data available",
@@ -3399,9 +3348,16 @@ function Spreadsheet({
   currentPage: controlledCurrentPage,
   pageSize: controlledPageSize,
   onPageChange,
-  sortConfig: controlledSortConfig,
   filters: controlledFilters
 }) {
+  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react16.useState)({
+    defaultPinnedColumns: initialSettings?.defaultPinnedColumns ?? [],
+    defaultSort: initialSettings?.defaultSort ?? null,
+    defaultPageSize: initialSettings?.defaultPageSize ?? 25,
+    defaultZoom: initialSettings?.defaultZoom ?? 100,
+    autoSave: initialSettings?.autoSave ?? true,
+    compactView: initialSettings?.compactView ?? false
+  });
   const {
     filters,
     sortConfig,
@@ -3420,7 +3376,7 @@ function Spreadsheet({
     onSortChange,
     serverSide,
     controlledFilters,
-    controlledSortConfig
+    controlledSortConfig: spreadsheetSettings?.defaultSort
   });
   const {
     getCellHighlight,
@@ -3445,15 +3401,14 @@ function Spreadsheet({
     collapsedGroups,
     visibleColumns,
     handleTogglePin,
-    handleToggleRowIndexPin,
     handleToggleGroupCollapse,
+    setPinnedColumnsFromIds,
     getColumnLeftOffset,
     isColumnPinned,
     getColumnPinSide
   } = useSpreadsheetPinning({
     columns,
-    columnGroups,
-    showRowIndex
+    columnGroups
   });
   const {
     getCellComments,
@@ -3470,18 +3425,6 @@ function Spreadsheet({
     onAddCellComment
   });
   const [showSettingsModal, setShowSettingsModal] = (0, import_react16.useState)(false);
-  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react16.useState)({
-    defaultPinnedColumns: [],
-    defaultSort: null,
-    defaultPageSize,
-    defaultZoom,
-    autoSave: autoSave ?? true,
-    compactView: compactMode ?? false,
-    showRowIndex,
-    pinRowIndex: false,
-    rowIndexHighlightColor: void 0
-  });
-  const effectiveAutoSave = autoSave ?? spreadsheetSettings.autoSave;
   const {
     canUndo,
     canRedo,
@@ -3496,15 +3439,15 @@ function Spreadsheet({
     markAsChanged
   } = useSpreadsheetUndoRedo({
     enabled: enableUndoRedo,
-    autoSave: effectiveAutoSave,
+    autoSave: spreadsheetSettings.autoSave,
     onSave
   });
   const [selectedRows, setSelectedRows] = (0, import_react16.useState)(/* @__PURE__ */ new Set());
   const [lastSelectedRow, setLastSelectedRow] = (0, import_react16.useState)(null);
   const [hoveredRow, setHoveredRow] = (0, import_react16.useState)(null);
   const [internalCurrentPage, setInternalCurrentPage] = (0, import_react16.useState)(1);
-  const [internalPageSize, setInternalPageSize] = (0, import_react16.useState)(defaultPageSize);
-  const [zoom, setZoom] = (0, import_react16.useState)(defaultZoom);
+  const [internalPageSize, setInternalPageSize] = (0, import_react16.useState)(spreadsheetSettings.defaultPageSize);
+  const [zoom, setZoom] = (0, import_react16.useState)(spreadsheetSettings.defaultZoom);
   const currentPage = controlledCurrentPage ?? internalCurrentPage;
   const pageSize = controlledPageSize ?? internalPageSize;
   const handlePageChange = (0, import_react16.useCallback)(
@@ -3691,8 +3634,7 @@ function Spreadsheet({
     isEditing: editingCell !== null,
     enabled: true
   });
-  const effectiveShowRowIndex = spreadsheetSettings.showRowIndex !== false;
-  const effectiveCompactMode = compactMode ?? spreadsheetSettings.compactView;
+  const effectiveCompactMode = spreadsheetSettings.compactView ?? false;
   const rowIndexHighlightColor = getColumnHighlight(ROW_INDEX_COLUMN_ID);
   const tableRef = (0, import_react16.useRef)(null);
   const effectiveTotalItems = serverSide ? totalItems ?? data.length : filteredData.length;
@@ -3820,7 +3762,7 @@ function Spreadsheet({
         selectedRowCount: selectedRows.size,
         hasUnsavedChanges,
         saveStatus,
-        autoSave: effectiveAutoSave,
+        autoSave: spreadsheetSettings.autoSave,
         hasActiveFilters,
         onClearFilters: clearAllFilters,
         onZoomIn: () => setZoom((z) => Math.min(z + 10, 200)),
@@ -3850,14 +3792,14 @@ function Spreadsheet({
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { className: "w-full border-separate border-spacing-0 text-xs select-none", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("thead", { children: [
             columnGroups && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
-              effectiveShowRowIndex && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 RowIndexColumnHeader,
                 {
                   enableHighlighting,
                   highlightColor: rowIndexHighlightColor,
                   isPinned: isRowIndexPinned,
                   onHighlightClick: handleRowIndexHighlightClick,
-                  onPinClick: handleToggleRowIndexPin,
+                  onPinClick: () => handleTogglePin(ROW_INDEX_COLUMN_ID),
                   hasColumnGroups: true,
                   compactMode: effectiveCompactMode
                 }
@@ -3894,14 +3836,14 @@ function Spreadsheet({
               })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
-              effectiveShowRowIndex && !columnGroups && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              !columnGroups && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 RowIndexColumnHeader,
                 {
                   enableHighlighting,
                   highlightColor: rowIndexHighlightColor,
                   isPinned: isRowIndexPinned,
                   onHighlightClick: handleRowIndexHighlightClick,
-                  onPinClick: handleToggleRowIndexPin,
+                  onPinClick: () => handleTogglePin(ROW_INDEX_COLUMN_ID),
                   hasColumnGroups: false,
                   compactMode: effectiveCompactMode
                 }
@@ -3943,7 +3885,7 @@ function Spreadsheet({
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "td",
             {
-              colSpan: visibleColumns.length + (effectiveShowRowIndex ? 1 : 0),
+              colSpan: visibleColumns.length + 1,
               className: "text-center py-8 text-gray-500",
               children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
@@ -3953,7 +3895,7 @@ function Spreadsheet({
           ) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "td",
             {
-              colSpan: visibleColumns.length + (effectiveShowRowIndex ? 1 : 0),
+              colSpan: visibleColumns.length + 1,
               className: "text-center py-8 text-gray-500",
               children: emptyMessage
             }
@@ -3972,9 +3914,8 @@ function Spreadsheet({
                   onRowClick?.(row, rowIndex);
                 },
                 onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
-                className: "transition-colors",
                 children: [
-                  effectiveShowRowIndex && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "td",
                     {
                       onClick: (e) => handleRowSelect(rowId, e),
@@ -4030,9 +3971,7 @@ function Spreadsheet({
                               type: "button",
                               onClick: (e) => {
                                 e.stopPropagation();
-                                setHighlightPickerRow(
-                                  rowId
-                                );
+                                setHighlightPickerRow(rowId);
                               },
                               className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
                               title: "Highlight row",
@@ -4102,10 +4041,7 @@ function Spreadsheet({
                                 type: "button",
                                 onClick: (e) => {
                                   e.stopPropagation();
-                                  action.onClick(
-                                    row,
-                                    rowId
-                                  );
+                                  action.onClick(row, rowId);
                                 },
                                 className: cn(
                                   "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:bg-gray-200 rounded",
@@ -4288,6 +4224,8 @@ function Spreadsheet({
           if (newSettings.defaultSort?.columnId !== sortConfig?.columnId || newSettings.defaultSort?.direction !== sortConfig?.direction) {
             setSortConfig(newSettings.defaultSort);
           }
+          setPinnedColumnsFromIds(newSettings.defaultPinnedColumns);
+          onSettingsChange?.(newSettings);
         },
         columns: columns || [],
         title: "Spreadsheet Settings",