@xcelsior/ui-spreadsheets 1.1.7 → 1.1.9

package/dist/index.d.mts

@@ -23,6 +23,10 @@ interface SpreadsheetColumn<T = any> {
     editable?: boolean;
     /** Whether the column can be pinned */
     pinnable?: boolean;
+    /** Whether the column can be highlighted (defaults to true) */
+    highlightable?: boolean;
+    /** Whether the column can have comments (defaults to true) */
+    commentable?: boolean;
     /** Type of data in the column (for filtering/formatting) */
     type?: 'text' | 'number' | 'date' | 'select' | 'boolean' | 'checkbox';
     /** Options for select type columns */
@@ -323,8 +327,10 @@ 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 */
@@ -343,6 +349,7 @@ interface SpreadsheetProps<T = any> {
         defaultPageSize?: number;
         defaultZoom?: number;
         defaultPinnedColumns?: string[];
+        defaultPinnedRightColumns?: string[];
         defaultSort?: SpreadsheetSortConfig | null;
     }) => void;
     /** Loading state */

package/dist/index.d.ts

@@ -23,6 +23,10 @@ interface SpreadsheetColumn<T = any> {
     editable?: boolean;
     /** Whether the column can be pinned */
     pinnable?: boolean;
+    /** Whether the column can be highlighted (defaults to true) */
+    highlightable?: boolean;
+    /** Whether the column can have comments (defaults to true) */
+    commentable?: boolean;
     /** Type of data in the column (for filtering/formatting) */
     type?: 'text' | 'number' | 'date' | 'select' | 'boolean' | 'checkbox';
     /** Options for select type columns */
@@ -323,8 +327,10 @@ 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 */
@@ -343,6 +349,7 @@ interface SpreadsheetProps<T = any> {
         defaultPageSize?: number;
         defaultZoom?: number;
         defaultPinnedColumns?: string[];
+        defaultPinnedRightColumns?: string[];
         defaultSort?: SpreadsheetSortConfig | null;
     }) => void;
     /** Loading state */

package/dist/index.js

@@ -419,7 +419,7 @@ var SpreadsheetCell = ({
           }
         ),
         !isInSelection && !isFocused && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-0.5 shrink-0", children: [
-          onHighlight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          column.highlightable !== false && onHighlight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",
             {
               type: "button",
@@ -440,7 +440,7 @@ var SpreadsheetCell = ({
               )
             }
           ),
-          hasComments && onViewComments ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          column.commentable !== false && hasComments && onViewComments ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "button",
             {
               type: "button",
@@ -455,7 +455,7 @@ var SpreadsheetCell = ({
                 unresolvedCommentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[9px] font-medium text-amber-600", children: unresolvedCommentCount > 99 ? "99+" : unresolvedCommentCount })
               ]
             }
-          ) : onAddComment ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ) : column.commentable !== false && onAddComment ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",
             {
               type: "button",
@@ -1258,7 +1258,7 @@ var SpreadsheetHeader = ({
             ColumnHeaderActions,
             {
               enableFiltering: column.filterable,
-              enableHighlighting: !!onHighlightClick,
+              enableHighlighting: column.highlightable !== false && !!onHighlightClick,
               enablePinning: column.pinnable !== false,
               hasActiveFilter,
               hasActiveHighlight: !!highlightColor,
@@ -1284,13 +1284,17 @@ function useSpreadsheetPinning({
   columns,
   columnGroups,
   showRowIndex = true,
-  defaultPinnedColumns = []
+  defaultPinnedColumns = [],
+  defaultPinnedRightColumns = []
 }) {
   const [pinnedColumns, setPinnedColumns] = (0, import_react6.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     defaultPinnedColumns.forEach((col) => {
       map.set(col, "left");
     });
+    defaultPinnedRightColumns.forEach((col) => {
+      map.set(col, "right");
+    });
     return map;
   });
   const [collapsedGroups, setCollapsedGroups] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
@@ -1393,6 +1397,20 @@ function useSpreadsheetPinning({
     },
     [pinnedColumns]
   );
+  const getColumnRightOffset = (0, import_react6.useCallback)(
+    (columnId) => {
+      const pinnedRight = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").map(([id]) => id);
+      const index = pinnedRight.indexOf(columnId);
+      if (index === -1) return 0;
+      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,
@@ -1402,6 +1420,7 @@ function useSpreadsheetPinning({
     handleToggleGroupCollapse,
     setPinnedColumnsFromIds,
     getColumnLeftOffset,
+    getColumnRightOffset,
     isColumnPinned,
     getColumnPinSide
   };
@@ -3496,12 +3515,14 @@ function Spreadsheet({
     handleToggleGroupCollapse,
     setPinnedColumnsFromIds,
     getColumnLeftOffset,
+    getColumnRightOffset,
     isColumnPinned,
     getColumnPinSide
   } = useSpreadsheetPinning({
     columns,
     columnGroups,
-    defaultPinnedColumns: initialSettings?.defaultPinnedColumns
+    defaultPinnedColumns: initialSettings?.defaultPinnedColumns,
+    defaultPinnedRightColumns: initialSettings?.defaultPinnedRightColumns
   });
   const {
     getCellComments,
@@ -3953,6 +3974,7 @@ function Spreadsheet({
               ),
               visibleColumns.map((column) => {
                 const isPinnedLeft = isColumnPinned(column.id) && getColumnPinSide(column.id) === "left";
+                const isPinnedRight = isColumnPinned(column.id) && getColumnPinSide(column.id) === "right";
                 return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   SpreadsheetHeader,
                   {
@@ -3962,6 +3984,7 @@ function Spreadsheet({
                     isPinned: isColumnPinned(column.id),
                     pinSide: getColumnPinSide(column.id),
                     leftOffset: isPinnedLeft ? getColumnLeftOffset(column.id) : 0,
+                    rightOffset: isPinnedRight ? getColumnRightOffset(column.id) : 0,
                     highlightColor: getColumnHighlight(column.id),
                     compactMode: effectiveCompactMode,
                     onClick: () => handleSort(column.id),
@@ -4178,6 +4201,7 @@ function Spreadsheet({
                         isPinned: isColPinned,
                         pinSide: colPinSide,
                         leftOffset: getColumnLeftOffset(column.id),
+                        rightOffset: getColumnRightOffset(column.id),
                         onClick: (e) => handleCellClick(rowId, column.id, e),
                         onConfirm: handleConfirmEdit,
                         onCancel: handleCancelEdit,