@smallwebco/tinypivot-react 1.0.48 → 1.0.49

package/dist/index.cjs

@@ -2320,6 +2320,14 @@ function PivotSkeleton({
     [reorderDropTarget]
   );
   const currentFontSize = fontSize;
+  const rowHeaderWidth = 180;
+  const rowHeaderColWidth = (0, import_react9.useMemo)(() => {
+    const numCols = Math.max(rowFields.length, 1);
+    return Math.max(rowHeaderWidth / numCols, 80);
+  }, [rowFields.length]);
+  const getRowHeaderLeftOffset = (0, import_react9.useCallback)((fieldIdx) => {
+    return fieldIdx * rowHeaderColWidth;
+  }, [rowHeaderColWidth]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
@@ -2600,18 +2608,20 @@ function PivotSkeleton({
           ] }) }),
           isConfigured && pivotResult && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-table-container", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "vpg-pivot-table", children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "vpg-column-header-row", children: [
-              levelIdx === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              levelIdx === 0 && (rowFields.length > 0 ? rowFields : ["Rows"]).map((field, fieldIdx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "th",
                 {
                   className: "vpg-row-header-label",
                   rowSpan: columnHeaderCells.length,
+                  style: { width: `${rowHeaderColWidth}px`, minWidth: "80px", left: `${getRowHeaderLeftOffset(fieldIdx)}px` },
                   onClick: () => toggleSort("row"),
                   children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: rowFields.join(" / ") || "Rows" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: field }),
+                    (fieldIdx === rowFields.length - 1 || rowFields.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
-                }
-              ),
+                },
+                `row-header-${fieldIdx}`
+              )),
               headerRow.map((cell, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "th",
                 {
@@ -2629,7 +2639,15 @@ function PivotSkeleton({
             ] }, `header-${levelIdx}`)) }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tbody", { children: [
               sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "vpg-data-row", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "vpg-row-header-cell", children: pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-row-value", children: val }, idx)) }),
+                pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "th",
+                  {
+                    className: "vpg-row-header-cell",
+                    style: { width: `${rowHeaderColWidth}px`, minWidth: "80px", left: `${getRowHeaderLeftOffset(idx)}px` },
+                    children: val
+                  },
+                  `row-${sortedIdx}-${idx}`
+                )),
                 pivotResult.data[sortedIdx].map((cell, colIdx) => {
                   const displayRowIdx = sortedRowIndices.indexOf(sortedIdx);
                   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -2646,7 +2664,15 @@ function PivotSkeleton({
                 pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
               ] }, sortedIdx)),
               pivotResult.columnTotals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "vpg-totals-row", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "vpg-row-header-cell vpg-total-label", children: "Total" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "th",
+                  {
+                    className: "vpg-row-header-cell vpg-total-label",
+                    colSpan: Math.max(rowFields.length, 1),
+                    style: { width: `${rowHeaderWidth}px` },
+                    children: "Total"
+                  }
+                ),
                 pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
                 pivotResult.rowTotals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
               ] })