@xcelsior/ui-spreadsheets 1.1.8 → 1.1.10

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 */

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 */

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,
@@ -3874,6 +3874,42 @@ function Spreadsheet({
   const handleRowIndexHighlightClick = (0, import_react17.useCallback)(() => {
     setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
   }, [setHighlightPickerColumn]);
+  const columnRenderItems = (0, import_react17.useMemo)(() => {
+    if (!columnGroups || columnGroups.length === 0) {
+      return visibleColumns.map((col) => ({
+        type: "column",
+        column: col
+      }));
+    }
+    const items = [];
+    for (const group of columnGroups) {
+      const isCollapsed = collapsedGroups.has(group.id);
+      if (isCollapsed) {
+        items.push({
+          type: "collapsed-placeholder",
+          groupId: group.id,
+          headerColor: group.headerColor
+        });
+      }
+      const groupVisibleCols = (columns || []).filter((c) => {
+        if (!group.columns.includes(c.id)) return false;
+        if (isCollapsed) return pinnedColumns.has(c.id);
+        return true;
+      });
+      for (const col of groupVisibleCols) {
+        items.push({ type: "column", column: col });
+      }
+    }
+    const allGroupedIds = new Set(
+      columnGroups.flatMap((g) => g.columns)
+    );
+    for (const col of visibleColumns) {
+      if (!allGroupedIds.has(col.id)) {
+        items.push({ type: "column", column: col });
+      }
+    }
+    return items;
+  }, [columnGroups, collapsedGroups, columns, pinnedColumns, visibleColumns]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
     showToolbar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       SpreadsheetToolbar,
@@ -3909,9 +3945,7 @@ function Spreadsheet({
       "div",
       {
         style: {
-          transform: `scale(${zoom / 100})`,
-          transformOrigin: "top left",
-          width: `${100 / (zoom / 100)}%`
+          zoom: zoom / 100
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: "w-full border-separate border-spacing-0 text-xs select-none", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("thead", { children: [
@@ -3972,7 +4006,22 @@ function Spreadsheet({
                   compactMode: effectiveCompactMode
                 }
               ),
-              visibleColumns.map((column) => {
+              columnRenderItems.map((item) => {
+                if (item.type === "collapsed-placeholder") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "th",
+                    {
+                      className: "border border-gray-200 px-2 py-1 text-center text-gray-400",
+                      style: {
+                        backgroundColor: item.headerColor || "rgb(243 244 246)",
+                        minWidth: "30px"
+                      },
+                      children: "..."
+                    },
+                    `${item.groupId}-placeholder`
+                  );
+                }
+                const column = item.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)(
@@ -4011,7 +4060,7 @@ function Spreadsheet({
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "td",
             {
-              colSpan: visibleColumns.length + 1,
+              colSpan: columnRenderItems.length + 1,
               className: "text-center py-8 text-gray-500",
               children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
@@ -4021,7 +4070,7 @@ function Spreadsheet({
           ) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "td",
             {
-              colSpan: visibleColumns.length + 1,
+              colSpan: columnRenderItems.length + 1,
               className: "text-center py-8 text-gray-500",
               children: emptyMessage
             }
@@ -4166,7 +4215,20 @@ function Spreadsheet({
                       ] })
                     }
                   ),
-                  visibleColumns.map((column) => {
+                  columnRenderItems.map((item) => {
+                    if (item.type === "collapsed-placeholder") {
+                      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "td",
+                        {
+                          className: "border border-gray-200 px-2 py-1 text-center text-gray-300",
+                          style: {
+                            backgroundColor: item.headerColor || "rgb(243 244 246)"
+                          }
+                        },
+                        `${item.groupId}-placeholder`
+                      );
+                    }
+                    const column = item.column;
                     const value = column.getValue ? column.getValue(row) : row[column.id];
                     const isEditing = editingCell?.rowId === rowId && editingCell?.columnId === column.id;
                     const isFocused = focusedCell?.rowId === rowId && focusedCell?.columnId === column.id;
@@ -4201,7 +4263,9 @@ function Spreadsheet({
                         isPinned: isColPinned,
                         pinSide: colPinSide,
                         leftOffset: getColumnLeftOffset(column.id),
-                        rightOffset: getColumnRightOffset(column.id),
+                        rightOffset: getColumnRightOffset(
+                          column.id
+                        ),
                         onClick: (e) => handleCellClick(rowId, column.id, e),
                         onConfirm: handleConfirmEdit,
                         onCancel: handleCancelEdit,