@xcelsior/ui-spreadsheets 1.1.13 → 1.1.14

package/package.json

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

package/src/components/Spreadsheet.tsx

@@ -21,6 +21,7 @@ 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';
@@ -868,6 +869,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                                         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}`}
@@ -885,7 +887,9 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                         right: !isPinnedLeft
                                                             ? `${getColumnRightOffset(item.columnId)}px`
                                                             : undefined,
-                                                        minWidth: col?.minWidth || col?.width,
+                                                        minWidth: pinnedWidth,
+                                                        width: pinnedWidth,
+                                                        maxWidth: pinnedWidth,
                                                     }}
                                                 />
                                             );

package/src/components/SpreadsheetCell.tsx

@@ -4,6 +4,7 @@ import { AiFillHighlight } from 'react-icons/ai';
 import { FaComment, FaRegComment } from 'react-icons/fa';
 import { cn } from '../utils';
 import type { SpreadsheetCellProps } from '../types';
+import { MIN_PINNED_COLUMN_WIDTH } from '../hooks/useSpreadsheetPinning';
 
 const cellPaddingCompact = 'px-1 py-px';
 const cellPaddingNormal = 'px-2 py-1';
@@ -273,6 +274,12 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
             style={{
                 backgroundColor: isInSelection ? 'rgb(239 246 255)' : getBackgroundColor(),
                 minWidth: column.minWidth || column.width,
+                // Pinned columns must have a fixed width so sticky offsets stay correct.
+                // Enforce MIN_PINNED_COLUMN_WIDTH so header actions always fit.
+                ...(isPinned && {
+                    width: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
+                    maxWidth: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
+                }),
                 ...positionStyles,
                 ...selectionBorderStyles,
             }}

package/src/components/SpreadsheetHeader.tsx

@@ -3,6 +3,7 @@ import { HiChevronDown, HiChevronUp } from 'react-icons/hi';
 import { cn } from '../utils';
 import type { SpreadsheetHeaderProps } from '../types';
 import { ColumnHeaderActions } from './ColumnHeaderActions';
+import { MIN_PINNED_COLUMN_WIDTH } from '../hooks/useSpreadsheetPinning';
 
 const cellPaddingCompact = 'px-1 py-0.5';
 const cellPaddingNormal = 'px-2 py-1.5';
@@ -71,6 +72,12 @@ export const SpreadsheetHeader: React.FC<
             style={{
                 backgroundColor: highlightColor || 'rgb(243 244 246)', // gray-100
                 minWidth: column.minWidth || column.width,
+                // Pinned columns must have a fixed width so sticky offsets stay correct.
+                // Enforce MIN_PINNED_COLUMN_WIDTH so header actions (pin/filter/highlight) always fit.
+                ...(isPinned && {
+                    width: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
+                    maxWidth: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
+                }),
                 top: 0, // For sticky header
                 ...positionStyles,
             }}

package/src/hooks/useSpreadsheetPinning.ts

@@ -4,6 +4,8 @@ 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 = 80;
+// Minimum width for any pinned column to ensure header actions (pin, filter, highlight icons) fit
+export const MIN_PINNED_COLUMN_WIDTH = 100;
 
 export interface UseSpreadsheetPinningOptions<T> {
     columns: SpreadsheetColumn<T>[];
@@ -178,8 +180,10 @@ export function useSpreadsheetPinning<T>({
             let offset = baseOffset;
             for (let i = 0; i < index; i++) {
                 const col = columns.find((c) => c.id === pinnedLeft[i]);
-                // Use minWidth || width to match the rendered cell width
-                offset += col?.minWidth || col?.width || 100;
+                // Pinned columns are clamped to at least MIN_PINNED_COLUMN_WIDTH
+                // so that header actions (pin, filter, highlight icons) always fit
+                const configuredWidth = col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH;
+                offset += Math.max(configuredWidth, MIN_PINNED_COLUMN_WIDTH);
             }
             return offset;
         },
@@ -218,7 +222,8 @@ export function useSpreadsheetPinning<T>({
             let offset = 0;
             for (let i = pinnedRight.length - 1; i > index; i--) {
                 const col = columns.find((c) => c.id === pinnedRight[i]);
-                offset += col?.minWidth || col?.width || 100;
+                const configuredWidth = col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH;
+                offset += Math.max(configuredWidth, MIN_PINNED_COLUMN_WIDTH);
             }
             return offset;
         },