@smallwebco/tinypivot-react 1.0.47 → 1.0.49

package/dist/index.js

@@ -425,12 +425,11 @@ function usePivotTable(data) {
   }, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
   const addRowField = useCallback3(
     (field) => {
-      if (!requirePro("Pivot Table - Row Fields")) return;
       if (!rowFields.includes(field)) {
         setRowFieldsState((prev) => [...prev, field]);
       }
     },
-    [rowFields, requirePro]
+    [rowFields]
   );
   const removeRowField = useCallback3((field) => {
     setRowFieldsState((prev) => prev.filter((f) => f !== field));
@@ -440,12 +439,11 @@ function usePivotTable(data) {
   }, []);
   const addColumnField = useCallback3(
     (field) => {
-      if (!requirePro("Pivot Table - Column Fields")) return;
       if (!columnFields.includes(field)) {
         setColumnFieldsState((prev) => [...prev, field]);
       }
     },
-    [columnFields, requirePro]
+    [columnFields]
   );
   const removeColumnField = useCallback3((field) => {
     setColumnFieldsState((prev) => prev.filter((f) => f !== field));
@@ -455,7 +453,9 @@ function usePivotTable(data) {
   }, []);
   const addValueField = useCallback3(
     (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;
@@ -1538,6 +1538,9 @@ function CalculatedFieldModal({
 
 // src/components/PivotConfig.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function aggregationRequiresPro(agg) {
+  return agg !== "sum";
+}
 function getFieldIcon(type, isCalculated) {
   if (isCalculated) return "\u0192";
   switch (type) {
@@ -1577,6 +1580,10 @@ function PivotConfig({
   const [fieldSearch, setFieldSearch] = useState8("");
   const [showCalcModal, setShowCalcModal] = useState8(false);
   const [editingCalcField, setEditingCalcField] = useState8(null);
+  const { canUseAdvancedAggregations } = useLicense();
+  const isAggregationAvailable = useCallback8((agg) => {
+    return !aggregationRequiresPro(agg) || canUseAdvancedAggregations;
+  }, [canUseAdvancedAggregations]);
   const numericFieldNames = useMemo8(
     () => availableFields.filter((f) => f.isNumeric).map((f) => f.field),
     [availableFields]
@@ -1642,9 +1649,13 @@ function PivotConfig({
   );
   const handleAggregationChange = useCallback8(
     (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 = useCallback8(
     (field, currentAssignment) => {
@@ -1782,11 +1793,20 @@ function PivotConfig({
                     );
                   },
                   onClick: (e) => e.stopPropagation(),
-                  children: AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ jsxs4("option", { value: agg.value, children: [
-                    agg.symbol,
-                    " ",
-                    agg.label
-                  ] }, agg.value))
+                  children: AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ jsxs4(
+                    "option",
+                    {
+                      value: agg.value,
+                      disabled: aggregationRequiresPro(agg.value) && !canUseAdvancedAggregations,
+                      children: [
+                        agg.symbol,
+                        " ",
+                        agg.label,
+                        aggregationRequiresPro(agg.value) && !canUseAdvancedAggregations ? " (Pro)" : ""
+                      ]
+                    },
+                    agg.value
+                  ))
                 }
               ),
               /* @__PURE__ */ jsx4(
@@ -2285,6 +2305,14 @@ function PivotSkeleton({
     [reorderDropTarget]
   );
   const currentFontSize = fontSize;
+  const rowHeaderWidth = 180;
+  const rowHeaderColWidth = useMemo9(() => {
+    const numCols = Math.max(rowFields.length, 1);
+    return Math.max(rowHeaderWidth / numCols, 80);
+  }, [rowFields.length]);
+  const getRowHeaderLeftOffset = useCallback9((fieldIdx) => {
+    return fieldIdx * rowHeaderColWidth;
+  }, [rowHeaderColWidth]);
   return /* @__PURE__ */ jsxs5(
     "div",
     {
@@ -2565,18 +2593,20 @@ function PivotSkeleton({
           ] }) }),
           isConfigured && pivotResult && /* @__PURE__ */ jsx5("div", { className: "vpg-table-container", children: /* @__PURE__ */ jsxs5("table", { className: "vpg-pivot-table", children: [
             /* @__PURE__ */ jsx5("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ jsxs5("tr", { className: "vpg-column-header-row", children: [
-              levelIdx === 0 && /* @__PURE__ */ jsx5(
+              levelIdx === 0 && (rowFields.length > 0 ? rowFields : ["Rows"]).map((field, fieldIdx) => /* @__PURE__ */ jsx5(
                 "th",
                 {
                   className: "vpg-row-header-label",
                   rowSpan: columnHeaderCells.length,
+                  style: { width: `${rowHeaderColWidth}px`, minWidth: "80px", left: `${getRowHeaderLeftOffset(fieldIdx)}px` },
                   onClick: () => toggleSort("row"),
                   children: /* @__PURE__ */ jsxs5("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx5("span", { children: rowFields.join(" / ") || "Rows" }),
-                    /* @__PURE__ */ jsx5("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                    /* @__PURE__ */ jsx5("span", { children: field }),
+                    (fieldIdx === rowFields.length - 1 || rowFields.length === 0) && /* @__PURE__ */ jsx5("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
-                }
-              ),
+                },
+                `row-header-${fieldIdx}`
+              )),
               headerRow.map((cell, idx) => /* @__PURE__ */ jsx5(
                 "th",
                 {
@@ -2594,7 +2624,15 @@ function PivotSkeleton({
             ] }, `header-${levelIdx}`)) }),
             /* @__PURE__ */ jsxs5("tbody", { children: [
               sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ jsxs5("tr", { className: "vpg-data-row", children: [
-                /* @__PURE__ */ jsx5("th", { className: "vpg-row-header-cell", children: pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ jsx5("span", { className: "vpg-row-value", children: val }, idx)) }),
+                pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ jsx5(
+                  "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__ */ jsx5(
@@ -2611,7 +2649,15 @@ function PivotSkeleton({
                 pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ jsx5("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
               ] }, sortedIdx)),
               pivotResult.columnTotals.length > 0 && /* @__PURE__ */ jsxs5("tr", { className: "vpg-totals-row", children: [
-                /* @__PURE__ */ jsx5("th", { className: "vpg-row-header-cell vpg-total-label", children: "Total" }),
+                /* @__PURE__ */ jsx5(
+                  "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__ */ jsx5("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
                 pivotResult.rowTotals.length > 0 && /* @__PURE__ */ jsx5("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
               ] })
@@ -2689,7 +2735,7 @@ function DataGrid({
   onExport,
   onCopy
 }) {
-  const { showWatermark, canUsePivot, isDemo } = useLicense();
+  const { showWatermark, canUsePivot, isDemo, isPro } = useLicense();
   const currentTheme = useMemo10(() => {
     if (theme === "auto") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -3396,11 +3442,11 @@ function DataGrid({
                 ) })
               }
             ),
-            enableExport && (viewMode === "grid" || viewMode === "pivot" && pivotIsConfigured) && /* @__PURE__ */ jsxs6(
+            enableExport && viewMode === "grid" && /* @__PURE__ */ jsxs6(
               "button",
               {
                 className: "vpg-export-btn",
-                title: viewMode === "pivot" ? "Export Pivot to CSV" : "Export to CSV",
+                title: "Export to CSV",
                 onClick: handleExport,
                 children: [
                   /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
@@ -3412,8 +3458,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__ */ jsxs6(
+              "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__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
+                    "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)" : ""
                 ]
               }
             )