@xcelsior/ui-spreadsheets 1.1.7 → 1.1.8

package/package.json

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

package/src/components/Spreadsheet.stories.tsx

@@ -1511,3 +1511,59 @@ export const WithCheckboxColumns: Story = {
         );
     },
 };
+
+// With Right-Pinned Columns
+export const WithRightPinnedColumns: Story = {
+    render: () => {
+        const [data, setData] = useState(sampleUsers);
+
+        const handleCellsEdit = (edits: CellEdit[]) => {
+            setData((prev) =>
+                prev.map((row) => {
+                    const editsForRow = edits.filter((e) => e.rowId === row.id);
+                    if (editsForRow.length > 0) {
+                        const updates = editsForRow.reduce(
+                            (acc, edit) => ({ ...acc, [edit.columnId]: edit.value }),
+                            {}
+                        );
+                        return { ...row, ...updates };
+                    }
+                    return row;
+                })
+            );
+        };
+
+        return (
+            <div className="p-4">
+                <div className="mb-4 p-4 bg-purple-50 rounded-lg border border-purple-200">
+                    <h3 className="font-semibold text-purple-900 mb-2">Right-Pinned Columns Demo</h3>
+                    <p className="text-sm text-purple-700 mb-3">
+                        This example demonstrates columns pinned to the right side of the spreadsheet.
+                        The "Status" and "Active" columns are pinned to the right and will remain visible
+                        when scrolling horizontally.
+                    </p>
+                    <ul className="text-sm text-purple-700 space-y-1 ml-4 list-disc">
+                        <li><strong>ID column</strong> is pinned to the left</li>
+                        <li><strong>Status and Active columns</strong> are pinned to the right</li>
+                        <li>Scroll horizontally to see the pinned columns stay in place</li>
+                    </ul>
+                </div>
+
+                <Spreadsheet
+                    data={data}
+                    columns={userColumns}
+                    getRowId={(row) => row.id}
+                    onCellsEdit={handleCellsEdit}
+                    settings={{
+                        defaultPinnedColumns: ['id'],
+                        defaultPinnedRightColumns: ['status', 'isActive'],
+                    }}
+                    showToolbar
+                    showPagination
+                    enableRowSelection
+                    enableCellEditing
+                />
+            </div>
+        );
+    },
+};

package/src/components/Spreadsheet.tsx

@@ -188,12 +188,14 @@ export function Spreadsheet<T extends Record<string, any>>({
         handleToggleGroupCollapse,
         setPinnedColumnsFromIds,
         getColumnLeftOffset,
+        getColumnRightOffset,
         isColumnPinned,
         getColumnPinSide,
     } = useSpreadsheetPinning({
         columns,
         columnGroups,
         defaultPinnedColumns: initialSettings?.defaultPinnedColumns,
+        defaultPinnedRightColumns: initialSettings?.defaultPinnedRightColumns,
     });
 
     // Comments hook
@@ -755,6 +757,9 @@ export function Spreadsheet<T extends Record<string, any>>({
                                     const isPinnedLeft =
                                         isColumnPinned(column.id) &&
                                         getColumnPinSide(column.id) === 'left';
+                                    const isPinnedRight =
+                                        isColumnPinned(column.id) &&
+                                        getColumnPinSide(column.id) === 'right';
                                     return (
                                         <SpreadsheetHeader
                                             key={column.id}
@@ -766,6 +771,9 @@ export function Spreadsheet<T extends Record<string, any>>({
                                             leftOffset={
                                                 isPinnedLeft ? getColumnLeftOffset(column.id) : 0
                                             }
+                                            rightOffset={
+                                                isPinnedRight ? getColumnRightOffset(column.id) : 0
+                                            }
                                             highlightColor={getColumnHighlight(column.id)}
                                             compactMode={effectiveCompactMode}
                                             onClick={() => handleSort(column.id)}
@@ -1047,6 +1055,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                         isPinned={isColPinned}
                                                         pinSide={colPinSide}
                                                         leftOffset={getColumnLeftOffset(column.id)}
+                                                        rightOffset={getColumnRightOffset(column.id)}
                                                         onClick={(e) =>
                                                             handleCellClick(rowId, column.id, e)
                                                         }

package/src/hooks/useSpreadsheetPinning.ts

@@ -10,6 +10,7 @@ export interface UseSpreadsheetPinningOptions<T> {
     columnGroups?: SpreadsheetColumnGroup[];
     showRowIndex?: boolean;
     defaultPinnedColumns?: string[];
+    defaultPinnedRightColumns?: string[];
 }
 
 export interface UseSpreadsheetPinningReturn<T> {
@@ -30,6 +31,7 @@ export interface UseSpreadsheetPinningReturn<T> {
 
     // Offset calculations
     getColumnLeftOffset: (columnId: string) => number;
+    getColumnRightOffset: (columnId: string) => number;
 
     // Utility
     isColumnPinned: (columnId: string) => boolean;
@@ -41,6 +43,7 @@ export function useSpreadsheetPinning<T>({
     columnGroups,
     showRowIndex = true,
     defaultPinnedColumns = [],
+    defaultPinnedRightColumns = [],
 }: UseSpreadsheetPinningOptions<T>): UseSpreadsheetPinningReturn<T> {
     // Initialize pinned columns from defaults (including row index)
     const [pinnedColumns, setPinnedColumns] = useState<Map<string, 'left' | 'right'>>(() => {
@@ -48,6 +51,9 @@ export function useSpreadsheetPinning<T>({
         defaultPinnedColumns.forEach((col) => {
             map.set(col, 'left');
         });
+        defaultPinnedRightColumns.forEach((col) => {
+            map.set(col, 'right');
+        });
         return map;
     });
 
@@ -196,6 +202,29 @@ export function useSpreadsheetPinning<T>({
         [pinnedColumns]
     );
 
+    // Calculate column offset for right sticky positioning
+    const getColumnRightOffset = useCallback(
+        (columnId: string): number => {
+            // Get right-pinned columns
+            const pinnedRight = Array.from(pinnedColumns.entries())
+                .filter(([, side]) => side === 'right')
+                .map(([id]) => id);
+
+            const index = pinnedRight.indexOf(columnId);
+            if (index === -1) return 0;
+
+            // Calculate offset from the right edge
+            // Start from 0 and add widths of columns to the right of this one
+            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;
+            }
+            return offset;
+        },
+        [pinnedColumns, columns]
+    );
+
     return {
         pinnedColumns,
         isRowIndexPinned,
@@ -205,6 +234,7 @@ export function useSpreadsheetPinning<T>({
         handleToggleGroupCollapse,
         setPinnedColumnsFromIds,
         getColumnLeftOffset,
+        getColumnRightOffset,
         isColumnPinned,
         getColumnPinSide,
     };

package/src/types.ts

@@ -385,8 +385,10 @@ export interface SpreadsheetProps<T = any> {
     onSave?: () => void | Promise<void>;
     /** Initial settings (optional). All settings can be changed by user in the settings modal. */
     settings?: {
-        /** Default pinned column IDs */
+        /** Default pinned column IDs (pinned to left) */
         defaultPinnedColumns?: string[];
+        /** Default pinned column IDs (pinned to right) */
+        defaultPinnedRightColumns?: string[];
         /** Default sort configuration */
         defaultSort?: SpreadsheetSortConfig | null;
         /** Default page size */
@@ -405,6 +407,7 @@ export interface SpreadsheetProps<T = any> {
         defaultPageSize?: number;
         defaultZoom?: number;
         defaultPinnedColumns?: string[];
+        defaultPinnedRightColumns?: string[];
         defaultSort?: SpreadsheetSortConfig | null;
     }) => void;
     /** Loading state */