@xcelsior/ui-spreadsheets 1.1.9 → 1.1.10

package/dist/index.mjs

@@ -3832,6 +3832,42 @@ function Spreadsheet({
   const handleRowIndexHighlightClick = useCallback7(() => {
     setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
   }, [setHighlightPickerColumn]);
+  const columnRenderItems = useMemo5(() => {
+    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__ */ jsxs12("div", { className: cn("flex flex-col h-full bg-white", className), children: [
     showToolbar && /* @__PURE__ */ jsx12(
       SpreadsheetToolbar,
@@ -3867,9 +3903,7 @@ function Spreadsheet({
       "div",
       {
         style: {
-          transform: `scale(${zoom / 100})`,
-          transformOrigin: "top left",
-          width: `${100 / (zoom / 100)}%`
+          zoom: zoom / 100
         },
         children: /* @__PURE__ */ jsxs12("table", { className: "w-full border-separate border-spacing-0 text-xs select-none", children: [
           /* @__PURE__ */ jsxs12("thead", { children: [
@@ -3930,7 +3964,22 @@ function Spreadsheet({
                   compactMode: effectiveCompactMode
                 }
               ),
-              visibleColumns.map((column) => {
+              columnRenderItems.map((item) => {
+                if (item.type === "collapsed-placeholder") {
+                  return /* @__PURE__ */ jsx12(
+                    "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__ */ jsx12(
@@ -3969,7 +4018,7 @@ function Spreadsheet({
           /* @__PURE__ */ jsx12("tbody", { children: isLoading ? /* @__PURE__ */ jsx12("tr", { children: /* @__PURE__ */ jsx12(
             "td",
             {
-              colSpan: visibleColumns.length + 1,
+              colSpan: columnRenderItems.length + 1,
               className: "text-center py-8 text-gray-500",
               children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-center gap-2", children: [
                 /* @__PURE__ */ jsx12("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
@@ -3979,7 +4028,7 @@ function Spreadsheet({
           ) }) : paginatedData.length === 0 ? /* @__PURE__ */ jsx12("tr", { children: /* @__PURE__ */ jsx12(
             "td",
             {
-              colSpan: visibleColumns.length + 1,
+              colSpan: columnRenderItems.length + 1,
               className: "text-center py-8 text-gray-500",
               children: emptyMessage
             }
@@ -4124,7 +4173,20 @@ function Spreadsheet({
                       ] })
                     }
                   ),
-                  visibleColumns.map((column) => {
+                  columnRenderItems.map((item) => {
+                    if (item.type === "collapsed-placeholder") {
+                      return /* @__PURE__ */ jsx12(
+                        "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;
@@ -4159,7 +4221,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,