@xcelsior/ui-spreadsheets 1.1.10 → 1.1.12

package/package.json

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

package/src/components/Spreadsheet.stories.tsx

@@ -1591,6 +1591,127 @@ export const WithCheckboxColumns: Story = {
     },
 };
 
+// Pinned columns with many columns and column groups
+interface StockData {
+    id: number;
+    ticker: string;
+    company: string;
+    sector: string;
+    industry: string;
+    marketCap: number;
+    price: number;
+    change: number;
+    changePercent: number;
+    volume: number;
+    avgVolume: number;
+    pe: number;
+    eps: number;
+    dividend: number;
+    beta: number;
+    week52High: number;
+    week52Low: number;
+    revenue: number;
+    profit: number;
+}
+
+const tickers = ['AAPL', 'MSFT', 'GOOGL', 'AMZN', 'META', 'TSLA', 'NVDA', 'JPM', 'V', 'JNJ', 'WMT', 'PG', 'MA', 'UNH', 'HD', 'DIS', 'BAC', 'XOM', 'PFE', 'KO', 'PEP', 'CSCO', 'ADBE', 'NFLX', 'INTC', 'CRM', 'ABT', 'NKE', 'MRK', 'TMO', 'ORCL', 'ACN', 'MDT', 'COST', 'LLY', 'AVGO', 'TXN', 'NEE', 'UNP', 'DHR', 'QCOM', 'PM', 'BMY', 'RTX', 'HON', 'UPS', 'LOW', 'AMGN', 'SBUX', 'IBM'];
+const companies = ['Apple Inc.', 'Microsoft Corp.', 'Alphabet Inc.', 'Amazon.com Inc.', 'Meta Platforms', 'Tesla Inc.', 'NVIDIA Corp.', 'JPMorgan Chase', 'Visa Inc.', 'Johnson & Johnson', 'Walmart Inc.', 'Procter & Gamble', 'Mastercard', 'UnitedHealth', 'Home Depot', 'Walt Disney', 'Bank of America', 'Exxon Mobil', 'Pfizer Inc.', 'Coca-Cola', 'PepsiCo Inc.', 'Cisco Systems', 'Adobe Inc.', 'Netflix Inc.', 'Intel Corp.', 'Salesforce', 'Abbott Labs', 'Nike Inc.', 'Merck & Co.', 'Thermo Fisher', 'Oracle Corp.', 'Accenture', 'Medtronic', 'Costco', 'Eli Lilly', 'Broadcom', 'Texas Instruments', 'NextEra Energy', 'Union Pacific', 'Danaher', 'Qualcomm', 'Philip Morris', 'Bristol-Myers', 'Raytheon', 'Honeywell', 'UPS', 'Lowes', 'Amgen', 'Starbucks', 'IBM'];
+const sectors = ['Technology', 'Healthcare', 'Financials', 'Consumer', 'Energy', 'Industrials'];
+const industries = ['Software', 'Hardware', 'Biotech', 'Banking', 'Retail', 'Semiconductors', 'Pharma', 'Media', 'Oil & Gas', 'Aerospace'];
+
+const sampleStocks: StockData[] = Array.from({ length: 50 }, (_, i) => ({
+    id: i + 1,
+    ticker: tickers[i],
+    company: companies[i],
+    sector: sectors[i % sectors.length],
+    industry: industries[i % industries.length],
+    marketCap: Math.round((50 + Math.random() * 2950) * 1e9),
+    price: Math.round((20 + Math.random() * 480) * 100) / 100,
+    change: Math.round((Math.random() * 20 - 10) * 100) / 100,
+    changePercent: Math.round((Math.random() * 10 - 5) * 100) / 100,
+    volume: Math.round(Math.random() * 50e6),
+    avgVolume: Math.round(Math.random() * 40e6),
+    pe: Math.round((5 + Math.random() * 60) * 100) / 100,
+    eps: Math.round((0.5 + Math.random() * 15) * 100) / 100,
+    dividend: Math.round(Math.random() * 5 * 100) / 100,
+    beta: Math.round((0.5 + Math.random() * 1.5) * 100) / 100,
+    week52High: Math.round((100 + Math.random() * 400) * 100) / 100,
+    week52Low: Math.round((20 + Math.random() * 200) * 100) / 100,
+    revenue: Math.round(Math.random() * 400e9),
+    profit: Math.round(Math.random() * 80e9),
+}));
+
+const stockColumns: SpreadsheetColumn<StockData>[] = [
+    { id: 'ticker', label: 'Ticker', width: 80, sortable: true, filterable: true },
+    { id: 'company', label: 'Company', width: 180, sortable: true, filterable: true },
+    { id: 'sector', label: 'Sector', width: 120, sortable: true, filterable: true, type: 'select', options: sectors },
+    { id: 'industry', label: 'Industry', width: 140, sortable: true, filterable: true },
+    { id: 'marketCap', label: 'Market Cap', width: 130, sortable: true, type: 'number', align: 'right', render: (v) => `$${(v / 1e9).toFixed(1)}B` },
+    { id: 'price', label: 'Price', width: 90, sortable: true, type: 'number', align: 'right', render: (v) => `$${v.toFixed(2)}` },
+    { id: 'change', label: 'Change', width: 90, sortable: true, type: 'number', align: 'right', render: (v) => `${v >= 0 ? '+' : ''}${v.toFixed(2)}` },
+    { id: 'changePercent', label: 'Change %', width: 100, sortable: true, type: 'number', align: 'right', render: (v) => `${v >= 0 ? '+' : ''}${v.toFixed(2)}%` },
+    { id: 'volume', label: 'Volume', width: 110, sortable: true, type: 'number', align: 'right', render: (v) => `${(v / 1e6).toFixed(1)}M` },
+    { id: 'avgVolume', label: 'Avg Volume', width: 110, sortable: true, type: 'number', align: 'right', render: (v) => `${(v / 1e6).toFixed(1)}M` },
+    { id: 'pe', label: 'P/E', width: 80, sortable: true, type: 'number', align: 'right' },
+    { id: 'eps', label: 'EPS', width: 80, sortable: true, type: 'number', align: 'right', render: (v) => `$${v.toFixed(2)}` },
+    { id: 'dividend', label: 'Dividend %', width: 100, sortable: true, type: 'number', align: 'right', render: (v) => `${v.toFixed(2)}%` },
+    { id: 'beta', label: 'Beta', width: 70, sortable: true, type: 'number', align: 'right' },
+    { id: 'week52High', label: '52W High', width: 100, sortable: true, type: 'number', align: 'right', render: (v) => `$${v.toFixed(2)}` },
+    { id: 'week52Low', label: '52W Low', width: 100, sortable: true, type: 'number', align: 'right', render: (v) => `$${v.toFixed(2)}` },
+    { id: 'revenue', label: 'Revenue', width: 120, sortable: true, type: 'number', align: 'right', render: (v) => `$${(v / 1e9).toFixed(1)}B` },
+    { id: 'profit', label: 'Net Income', width: 120, sortable: true, type: 'number', align: 'right', render: (v) => `$${(v / 1e9).toFixed(1)}B` },
+];
+
+const stockColumnGroups: SpreadsheetColumnGroup[] = [
+    { id: 'identity', label: 'Identity', columns: ['ticker', 'company'], collapsible: true, headerColor: '#dbeafe' },
+    { id: 'classification', label: 'Classification', columns: ['sector', 'industry'], collapsible: true, headerColor: '#fef3c7' },
+    { id: 'market', label: 'Market Data', columns: ['marketCap', 'price', 'change', 'changePercent', 'volume', 'avgVolume'], collapsible: true, headerColor: '#d1fae5' },
+    { id: 'fundamentals', label: 'Fundamentals', columns: ['pe', 'eps', 'dividend', 'beta'], collapsible: true, headerColor: '#fce7f3' },
+    { id: 'range', label: '52-Week Range', columns: ['week52High', 'week52Low'], collapsible: true, headerColor: '#e0e7ff' },
+    { id: 'financials', label: 'Financials', columns: ['revenue', 'profit'], collapsible: true, headerColor: '#fef9c3' },
+];
+
+export const PinnedColumnsWithGroups: Story = {
+    render: () => {
+        return (
+            <div className="p-4">
+                <div className="mb-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
+                    <h3 className="font-semibold text-blue-900 mb-2">
+                        Pinned Columns with Column Groups
+                    </h3>
+                    <p className="text-sm text-blue-700 mb-3">
+                        This example tests pinned columns with many columns and column groups.
+                        Ticker and Company are pinned to the left. Scroll horizontally to verify
+                        pinned columns stay in place. Try collapsing groups and pinning/unpinning
+                        columns.
+                    </p>
+                    <ul className="text-sm text-blue-700 space-y-1 ml-4 list-disc">
+                        <li><strong>Ticker & Company</strong> are pinned to the left</li>
+                        <li><strong>19 columns</strong> across 6 collapsible groups</li>
+                        <li>Click the pin icon on any column header to pin/unpin</li>
+                        <li>Collapse groups to verify pinned columns from collapsed groups still work</li>
+                    </ul>
+                </div>
+
+                <Spreadsheet
+                    data={sampleStocks}
+                    columns={stockColumns}
+                    columnGroups={stockColumnGroups}
+                    getRowId={(row) => row.id}
+                    settings={{
+                        defaultPinnedColumns: ['__row_index__', 'ticker', 'company'],
+                    }}
+                    showToolbar
+                    showPagination
+                    enableRowSelection
+                    enableCellEditing={false}
+                    pageSizeOptions={[25, 50]}
+                />
+            </div>
+        );
+    },
+};
+
 // With Right-Pinned Columns
 export const WithRightPinnedColumns: Story = {
     render: () => {

package/src/components/Spreadsheet.tsx

@@ -26,7 +26,7 @@ import { useSpreadsheetComments } from '../hooks/useSpreadsheetComments';
 import { useSpreadsheetUndoRedo } from '../hooks/useSpreadsheetUndoRedo';
 import { useSpreadsheetKeyboardShortcuts } from '../hooks/useSpreadsheetKeyboardShortcuts';
 import { useSpreadsheetSelection } from '../hooks/useSpreadsheetSelection';
-import type { CellEdit, SpreadsheetColumn, SpreadsheetProps } from '../types';
+import type { CellEdit, SpreadsheetColumn, SpreadsheetColumnGroup, SpreadsheetProps } from '../types';
 
 type SingleCellEdit = {
     rowId: string | number;
@@ -635,6 +635,7 @@ export function Spreadsheet<T extends Record<string, any>>({
     }, [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
     const columnRenderItems = useMemo(() => {
         if (!columnGroups || columnGroups.length === 0) {
             return visibleColumns.map((col) => ({
@@ -643,20 +644,19 @@ export function Spreadsheet<T extends Record<string, any>>({
             }));
         }
 
-        const items: Array<
-            | { type: 'column'; column: SpreadsheetColumn<T> }
-            | {
-                  type: 'collapsed-placeholder';
-                  groupId: string;
-                  headerColor?: string;
-              }
-        > = [];
+        type ColumnItem = { type: 'column'; column: SpreadsheetColumn<T> };
+        type PlaceholderItem = { type: 'collapsed-placeholder'; groupId: string; headerColor?: string };
+        type RenderItem = ColumnItem | PlaceholderItem;
+
+        const leftPinnedItems: ColumnItem[] = [];
+        const middleItems: RenderItem[] = [];
+        const rightPinnedItems: ColumnItem[] = [];
 
         for (const group of columnGroups) {
             const isCollapsed = collapsedGroups.has(group.id);
 
             if (isCollapsed) {
-                items.push({
+                middleItems.push({
                     type: 'collapsed-placeholder',
                     groupId: group.id,
                     headerColor: group.headerColor,
@@ -671,7 +671,14 @@ export function Spreadsheet<T extends Record<string, any>>({
             });
 
             for (const col of groupVisibleCols) {
-                items.push({ type: 'column', column: col });
+                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 });
+                }
             }
         }
 
@@ -681,13 +688,118 @@ export function Spreadsheet<T extends Record<string, any>>({
         );
         for (const col of visibleColumns) {
             if (!allGroupedIds.has(col.id)) {
-                items.push({ type: 'column', column: col });
+                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;
+        // 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
+    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;
+            colSpan: number;
+            isCollapsed: boolean;
+        };
+
+        const leftPinned: PinnedGroupHeaderItem[] = [];
+        const groups: GroupHeaderItem[] = [];
+        const rightPinned: PinnedGroupHeaderItem[] = [];
+
+        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);
+
+            if (colSpan > 0) {
+                groups.push({
+                    type: 'group',
+                    group,
+                    colSpan,
+                    isCollapsed,
+                });
+            }
+        }
+
+        // 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);
+
+        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 ====================
 
     return (
@@ -733,7 +845,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                     <table className="w-full border-separate border-spacing-0 text-xs select-none">
                         <thead>
                             {/* Column Group Headers */}
-                            {columnGroups && (
+                            {columnGroups && groupHeaderItems && (
                                 <tr>
                                     {/* Row index column header (rowSpan=2 for groups) */}
                                     <RowIndexColumnHeader
@@ -745,19 +857,41 @@ export function Spreadsheet<T extends Record<string, any>>({
                                         hasColumnGroups={true}
                                         compactMode={effectiveCompactMode}
                                     />
-                                    {columnGroups.map((group) => {
-                                        const groupColumns = (columns || []).filter((c) =>
-                                            group.columns.includes(c.id)
-                                        );
-                                        const isCollapsed = collapsedGroups.has(group.id);
-                                        const visibleGroupColumns = isCollapsed
-                                            ? groupColumns.filter((c) => pinnedColumns.has(c.id))
-                                            : groupColumns;
-                                        const colSpan = Math.max(
-                                            1,
-                                            visibleGroupColumns.length + (isCollapsed ? 1 : 0)
-                                        );
-
+                                    {groupHeaderItems.map((item) => {
+                                        if (item.type === 'pinned-column') {
+                                            const col = columns.find(
+                                                (c) => c.id === item.columnId
+                                            );
+                                            const isPinnedLeft = item.pinSide === 'left';
+                                            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:
+                                                            col?.minWidth || col?.width,
+                                                        width:
+                                                            col?.minWidth || col?.width,
+                                                        maxWidth:
+                                                            col?.minWidth || col?.width,
+                                                    }}
+                                                />
+                                            );
+                                        }
+                                        const { group, colSpan, isCollapsed } = item;
                                         return (
                                             <th
                                                 key={group.id}

package/src/components/SpreadsheetCell.tsx

@@ -273,6 +273,11 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
             style={{
                 backgroundColor: isInSelection ? 'rgb(239 246 255)' : getBackgroundColor(),
                 minWidth: column.minWidth || column.width,
+                // Pinned columns need fixed width so sticky offset calculations are accurate
+                ...(isPinned && {
+                    width: column.minWidth || column.width,
+                    maxWidth: column.minWidth || column.width,
+                }),
                 ...positionStyles,
                 ...selectionBorderStyles,
             }}

package/src/components/SpreadsheetHeader.tsx

@@ -71,6 +71,11 @@ export const SpreadsheetHeader: React.FC<
             style={{
                 backgroundColor: highlightColor || 'rgb(243 244 246)', // gray-100
                 minWidth: column.minWidth || column.width,
+                // Pinned columns need fixed width so sticky offset calculations are accurate
+                ...(isPinned && {
+                    width: column.minWidth || column.width,
+                    maxWidth: column.minWidth || column.width,
+                }),
                 top: 0, // For sticky header
                 ...positionStyles,
             }}