@smallwebco/tinypivot-react 1.0.47 → 1.0.49

package/dist/index.cjs

@@ -445,12 +445,11 @@ function usePivotTable(data) {
   }, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
   const addRowField = (0, import_react3.useCallback)(
     (field) => {
-      if (!requirePro("Pivot Table - Row Fields")) return;
       if (!rowFields.includes(field)) {
         setRowFieldsState((prev) => [...prev, field]);
       }
     },
-    [rowFields, requirePro]
+    [rowFields]
   );
   const removeRowField = (0, import_react3.useCallback)((field) => {
     setRowFieldsState((prev) => prev.filter((f) => f !== field));
@@ -460,12 +459,11 @@ function usePivotTable(data) {
   }, []);
   const addColumnField = (0, import_react3.useCallback)(
     (field) => {
-      if (!requirePro("Pivot Table - Column Fields")) return;
       if (!columnFields.includes(field)) {
         setColumnFieldsState((prev) => [...prev, field]);
       }
     },
-    [columnFields, requirePro]
+    [columnFields]
   );
   const removeColumnField = (0, import_react3.useCallback)((field) => {
     setColumnFieldsState((prev) => prev.filter((f) => f !== field));
@@ -475,7 +473,9 @@ function usePivotTable(data) {
   }, []);
   const addValueField = (0, import_react3.useCallback)(
     (field, aggregation = "sum") => {
-      if (!requirePro("Pivot Table - Value Fields")) return;
+      if (aggregation !== "sum" && !requirePro(`${aggregation} aggregation`)) {
+        return;
+      }
       setValueFields((prev) => {
         if (prev.some((v) => v.field === field && v.aggregation === aggregation)) {
           return prev;
@@ -1553,6 +1553,9 @@ function CalculatedFieldModal({
 
 // src/components/PivotConfig.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function aggregationRequiresPro(agg) {
+  return agg !== "sum";
+}
 function getFieldIcon(type, isCalculated) {
   if (isCalculated) return "\u0192";
   switch (type) {
@@ -1592,6 +1595,10 @@ function PivotConfig({
   const [fieldSearch, setFieldSearch] = (0, import_react8.useState)("");
   const [showCalcModal, setShowCalcModal] = (0, import_react8.useState)(false);
   const [editingCalcField, setEditingCalcField] = (0, import_react8.useState)(null);
+  const { canUseAdvancedAggregations } = useLicense();
+  const isAggregationAvailable = (0, import_react8.useCallback)((agg) => {
+    return !aggregationRequiresPro(agg) || canUseAdvancedAggregations;
+  }, [canUseAdvancedAggregations]);
   const numericFieldNames = (0, import_react8.useMemo)(
     () => availableFields.filter((f) => f.isNumeric).map((f) => f.field),
     [availableFields]
@@ -1657,9 +1664,13 @@ function PivotConfig({
   );
   const handleAggregationChange = (0, import_react8.useCallback)(
     (field, currentAgg, newAgg) => {
+      if (!isAggregationAvailable(newAgg)) {
+        console.warn(`[TinyPivot] "${newAgg}" aggregation requires a Pro license. Visit https://tiny-pivot.com/#pricing to upgrade.`);
+        return;
+      }
       onUpdateAggregation(field, currentAgg, newAgg);
     },
-    [onUpdateAggregation]
+    [onUpdateAggregation, isAggregationAvailable]
   );
   const toggleRowColumn = (0, import_react8.useCallback)(
     (field, currentAssignment) => {
@@ -1797,11 +1808,20 @@ function PivotConfig({
                     );
                   },
                   onClick: (e) => e.stopPropagation(),
-                  children: import_tinypivot_core6.AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: agg.value, children: [
-                    agg.symbol,
-                    " ",
-                    agg.label
-                  ] }, agg.value))
+                  children: import_tinypivot_core6.AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                    "option",
+                    {
+                      value: agg.value,
+                      disabled: aggregationRequiresPro(agg.value) && !canUseAdvancedAggregations,
+                      children: [
+                        agg.symbol,
+                        " ",
+                        agg.label,
+                        aggregationRequiresPro(agg.value) && !canUseAdvancedAggregations ? " (Pro)" : ""
+                      ]
+                    },
+                    agg.value
+                  ))
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -2300,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",
     {
@@ -2580,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",
                 {
@@ -2609,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)(
@@ -2626,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 })
               ] })
@@ -2704,7 +2750,7 @@ function DataGrid({
   onExport,
   onCopy
 }) {
-  const { showWatermark, canUsePivot, isDemo } = useLicense();
+  const { showWatermark, canUsePivot, isDemo, isPro } = useLicense();
   const currentTheme = (0, import_react10.useMemo)(() => {
     if (theme === "auto") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -3411,11 +3457,11 @@ function DataGrid({
                 ) })
               }
             ),
-            enableExport && (viewMode === "grid" || viewMode === "pivot" && pivotIsConfigured) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            enableExport && viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
                 className: "vpg-export-btn",
-                title: viewMode === "pivot" ? "Export Pivot to CSV" : "Export to CSV",
+                title: "Export to CSV",
                 onClick: handleExport,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -3427,8 +3473,29 @@ function DataGrid({
                       d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                     }
                   ) }),
-                  "Export",
-                  viewMode === "pivot" ? " Pivot" : ""
+                  "Export"
+                ]
+              }
+            ),
+            enableExport && viewMode === "pivot" && pivotIsConfigured && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "button",
+              {
+                className: `vpg-export-btn ${!isPro ? "vpg-export-btn-disabled" : ""}`,
+                disabled: !isPro,
+                title: isPro ? "Export Pivot to CSV" : "Export Pivot to CSV (Pro feature)",
+                onClick: () => isPro && handleExport(),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                    }
+                  ) }),
+                  "Export Pivot",
+                  !isPro ? " (Pro)" : ""
                 ]
               }
             )