@smallwebco/tinypivot-react 1.0.83 → 1.1.1

package/dist/index.js

@@ -1314,7 +1314,8 @@ function CalculatedFieldModal({
   availableFields,
   existingField,
   onClose,
-  onSave
+  onSave,
+  theme
 }) {
   const [name, setName] = useState3("");
   const [formula, setFormula] = useState3("");
@@ -1385,7 +1386,7 @@ function CalculatedFieldModal({
   }, [onClose]);
   if (!show)
     return null;
-  const modalContent = /* @__PURE__ */ jsx2("div", { className: "vpg-modal-overlay", onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs2("div", { className: "vpg-modal", children: [
+  const modalContent = /* @__PURE__ */ jsx2("div", { className: `vpg-modal-overlay vpg-theme-${theme ?? "light"}`, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs2("div", { className: "vpg-modal", children: [
     /* @__PURE__ */ jsxs2("div", { className: "vpg-modal-header", children: [
       /* @__PURE__ */ jsxs2("h3", { children: [
         existingField ? "Edit" : "Create",
@@ -2962,9 +2963,9 @@ function ColumnFilter({
 }
 
 // src/components/DataGrid.tsx
-import { formatDate as coreFormatDate, formatNumber as coreFormatNumber } from "@smallwebco/tinypivot-core";
-import { useCallback as useCallback14, useEffect as useEffect11, useMemo as useMemo14, useRef as useRef4, useState as useState14 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { canUseDrillThrough, formatDate as coreFormatDate, formatNumber as coreFormatNumber, getDrillThroughRows } from "@smallwebco/tinypivot-core";
+import { useCallback as useCallback15, useEffect as useEffect12, useMemo as useMemo15, useRef as useRef4, useState as useState15 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
 
 // src/hooks/useExcelGrid.ts
 import { formatCellValue, getColumnUniqueValues, isDateRange, isNumericRange } from "@smallwebco/tinypivot-core";
@@ -3628,7 +3629,7 @@ import {
   savePivotConfig
 } from "@smallwebco/tinypivot-core";
 import { useCallback as useCallback11, useEffect as useEffect9, useMemo as useMemo11, useState as useState11 } from "react";
-function usePivotTable(data) {
+function usePivotTable(data, enableDrillDown = true) {
   const { canUsePivot, requirePro } = useLicense();
   const [rowFields, setRowFieldsState] = useState11([]);
   const [columnFields, setColumnFieldsState] = useState11([]);
@@ -3637,6 +3638,7 @@ function usePivotTable(data) {
   const [showColumnTotals, setShowColumnTotals] = useState11(true);
   const [calculatedFields, setCalculatedFields] = useState11(() => loadCalculatedFields());
   const [currentStorageKey, setCurrentStorageKey] = useState11(null);
+  const [collapsedPaths, setCollapsedPaths] = useState11(/* @__PURE__ */ new Set());
   const availableFields = useMemo11(() => {
     return computeAvailableFields(data);
   }, [data]);
@@ -3664,8 +3666,8 @@ function usePivotTable(data) {
       showRowTotals,
       showColumnTotals,
       calculatedFields
-    });
-  }, [data, isConfigured, canUsePivot, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
+    }, { collapsedPaths: enableDrillDown ? collapsedPaths : /* @__PURE__ */ new Set() });
+  }, [data, isConfigured, canUsePivot, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields, collapsedPaths, enableDrillDown]);
   useEffect9(() => {
     if (data.length === 0)
       return;
@@ -3697,6 +3699,18 @@ function usePivotTable(data) {
           setValueFields([]);
         }
       }
+      try {
+        const collapsedKey = `${storageKey}-collapsed`;
+        const raw = sessionStorage.getItem(collapsedKey);
+        if (raw) {
+          const parsed = JSON.parse(raw);
+          setCollapsedPaths(new Set(parsed));
+        } else {
+          setCollapsedPaths(/* @__PURE__ */ new Set());
+        }
+      } catch {
+        setCollapsedPaths(/* @__PURE__ */ new Set());
+      }
     }
   }, [data]);
   useEffect9(() => {
@@ -3712,6 +3726,15 @@ function usePivotTable(data) {
     };
     savePivotConfig(currentStorageKey, config);
   }, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
+  useEffect9(() => {
+    if (!currentStorageKey)
+      return;
+    try {
+      const collapsedKey = `${currentStorageKey}-collapsed`;
+      sessionStorage.setItem(collapsedKey, JSON.stringify(Array.from(collapsedPaths)));
+    } catch {
+    }
+  }, [collapsedPaths, currentStorageKey]);
   const addRowField = useCallback11(
     (field) => {
       if (!rowFields.includes(field)) {
@@ -3813,6 +3836,55 @@ function usePivotTable(data) {
     });
     setValueFields((prev) => prev.filter((v) => v.field !== `calc:${id}`));
   }, []);
+  const toggleCollapsedPath = useCallback11(
+    (key, altKey, _rowFields, currentPivotResult) => {
+      if (!altKey) {
+        const next2 = new Set(collapsedPaths);
+        if (next2.has(key)) {
+          next2.delete(key);
+        } else {
+          next2.add(key);
+        }
+        setCollapsedPaths(next2);
+        return next2;
+      }
+      if (!currentPivotResult)
+        return /* @__PURE__ */ new Set();
+      let targetDepth = -1;
+      for (const meta of currentPivotResult.rowMeta) {
+        for (const gs of meta.groupStarts) {
+          if (gs.key === key) {
+            targetDepth = gs.depth;
+            break;
+          }
+        }
+        if (targetDepth >= 0)
+          break;
+      }
+      if (targetDepth < 0)
+        return /* @__PURE__ */ new Set();
+      const keysAtDepth = /* @__PURE__ */ new Set();
+      for (const meta of currentPivotResult.rowMeta) {
+        for (const gs of meta.groupStarts) {
+          if (gs.depth === targetDepth) {
+            keysAtDepth.add(gs.key);
+          }
+        }
+      }
+      const shouldCollapse = !collapsedPaths.has(key);
+      const next = new Set(collapsedPaths);
+      for (const k of keysAtDepth) {
+        if (shouldCollapse) {
+          next.add(k);
+        } else {
+          next.delete(k);
+        }
+      }
+      setCollapsedPaths(next);
+      return next;
+    },
+    [collapsedPaths]
+  );
   return {
     // State
     rowFields,
@@ -3821,6 +3893,7 @@ function usePivotTable(data) {
     showRowTotals,
     showColumnTotals,
     calculatedFields,
+    collapsedPaths,
     // Computed
     availableFields,
     unassignedFields,
@@ -3841,14 +3914,141 @@ function usePivotTable(data) {
     setRowFields,
     setColumnFields,
     addCalculatedField,
-    removeCalculatedField
+    removeCalculatedField,
+    toggleCollapsedPath
+  };
+}
+
+// src/components/DrillThroughModal.tsx
+import { exportToCSV as exportToCSV2, getAggregationLabel as getAggregationLabel2 } from "@smallwebco/tinypivot-core";
+import { useCallback as useCallback12, useEffect as useEffect10, useMemo as useMemo12, useState as useState12 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var PAGE_SIZE = 50;
+function DrillThroughModal({
+  show,
+  result,
+  onClose,
+  theme
+}) {
+  const [currentPage, setCurrentPage] = useState12(1);
+  useEffect10(() => {
+    if (show) {
+      setCurrentPage(1);
+    }
+  }, [show, result]);
+  useEffect10(() => {
+    if (!show)
+      return;
+    const handleKeydown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeydown);
+    return () => document.removeEventListener("keydown", handleKeydown);
+  }, [show, onClose]);
+  const columns = useMemo12(() => {
+    if (!result || result.rows.length === 0)
+      return [];
+    return Object.keys(result.rows[0]);
+  }, [result]);
+  const totalPages = useMemo12(() => {
+    if (!result)
+      return 1;
+    return Math.max(1, Math.ceil(result.rows.length / PAGE_SIZE));
+  }, [result]);
+  const pageRows = useMemo12(() => {
+    if (!result)
+      return [];
+    const start = (currentPage - 1) * PAGE_SIZE;
+    return result.rows.slice(start, start + PAGE_SIZE);
+  }, [result, currentPage]);
+  const modalTitle = useMemo12(() => {
+    if (!result)
+      return "Drill Through";
+    const { descriptor } = result;
+    const parts = [];
+    if (descriptor.rowPath.length > 0)
+      parts.push(descriptor.rowPath.join(" \xD7 "));
+    if (descriptor.columnPath.length > 0)
+      parts.push(descriptor.columnPath.join(" \xD7 "));
+    const slice = parts.length > 0 ? parts.join(" \xD7 ") : "Grand Total";
+    const aggLabel = getAggregationLabel2(descriptor.aggregation);
+    const valueStr = descriptor.formattedValue !== "-" ? ` = ${descriptor.formattedValue}` : "";
+    return `${slice} \u2014 ${aggLabel} of ${descriptor.valueField}${valueStr} \xB7 ${descriptor.rowCount} rows`;
+  }, [result]);
+  const handleOverlayClick = useCallback12((e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  }, [onClose]);
+  const handleExport = useCallback12(() => {
+    if (!result || result.rows.length === 0)
+      return;
+    exportToCSV2(result.rows, columns, { filename: "drill-through.csv" });
+  }, [result, columns]);
+  const formatCellValue2 = (value) => {
+    if (value === null || value === void 0)
+      return "";
+    return String(value);
   };
+  if (!show || typeof document === "undefined")
+    return null;
+  return createPortal2(
+    /* @__PURE__ */ jsx7("div", { className: `vpg-modal-overlay vpg-theme-${theme ?? "light"}`, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs7("div", { className: "vpg-modal vpg-drill-modal", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "vpg-modal-header", children: [
+        /* @__PURE__ */ jsx7("h3", { className: "vpg-drill-title", children: modalTitle }),
+        /* @__PURE__ */ jsx7("button", { className: "vpg-modal-close", onClick: onClose, children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ jsx7("div", { className: "vpg-modal-body vpg-drill-body", children: !result || result.rows.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "vpg-drill-empty", children: "No source rows found for this cell." }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+        /* @__PURE__ */ jsx7("div", { className: "vpg-drill-table-wrapper", children: /* @__PURE__ */ jsxs7("table", { className: "vpg-drill-table", children: [
+          /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { children: columns.map((col) => /* @__PURE__ */ jsx7("th", { children: col }, col)) }) }),
+          /* @__PURE__ */ jsx7("tbody", { children: pageRows.map((row, rowIdx) => /* @__PURE__ */ jsx7("tr", { children: columns.map((col) => /* @__PURE__ */ jsx7("td", { children: formatCellValue2(row[col]) }, col)) }, rowIdx)) })
+        ] }) }),
+        totalPages > 1 && /* @__PURE__ */ jsxs7("div", { className: "vpg-drill-pagination", children: [
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              className: "vpg-page-btn",
+              disabled: currentPage === 1,
+              onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+              children: "\u2190"
+            }
+          ),
+          /* @__PURE__ */ jsxs7("span", { children: [
+            "Page",
+            " ",
+            currentPage,
+            " ",
+            "of",
+            " ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              className: "vpg-page-btn",
+              disabled: currentPage === totalPages,
+              onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+              children: "\u2192"
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs7("div", { className: "vpg-modal-footer", children: [
+        result && result.rows.length > 0 && /* @__PURE__ */ jsx7("button", { className: "vpg-btn vpg-btn-secondary", onClick: handleExport, children: "Export CSV" }),
+        /* @__PURE__ */ jsx7("button", { className: "vpg-btn vpg-btn-primary", onClick: onClose, children: "Close" })
+      ] })
+    ] }) }),
+    document.body
+  );
 }
 
 // src/components/PivotConfig.tsx
 import { AGGREGATION_OPTIONS, getAggregationSymbol } from "@smallwebco/tinypivot-core";
-import { useCallback as useCallback12, useMemo as useMemo12, useState as useState12 } from "react";
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useCallback as useCallback13, useMemo as useMemo13, useState as useState13 } from "react";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function aggregationRequiresPro(agg) {
   return agg !== "sum";
 }
@@ -3890,15 +4090,15 @@ function PivotConfig({
   onUpdateCalculatedField,
   theme
 }) {
-  const [fieldSearch, setFieldSearch] = useState12("");
-  const [showCalcModal, setShowCalcModal] = useState12(false);
-  const [editingCalcField, setEditingCalcField] = useState12(null);
+  const [fieldSearch, setFieldSearch] = useState13("");
+  const [showCalcModal, setShowCalcModal] = useState13(false);
+  const [editingCalcField, setEditingCalcField] = useState13(null);
   const { canUseAdvancedAggregations } = useLicense();
-  const isAggregationAvailable = useCallback12((agg) => {
+  const isAggregationAvailable = useCallback13((agg) => {
     return !aggregationRequiresPro(agg) || canUseAdvancedAggregations;
   }, [canUseAdvancedAggregations]);
-  const numericFieldNames = useMemo12(() => availableFields.filter((f) => f.isNumeric).map((f) => f.field), [availableFields]);
-  const calculatedFieldsAsStats = useMemo12(() => {
+  const numericFieldNames = useMemo13(() => availableFields.filter((f) => f.isNumeric).map((f) => f.field), [availableFields]);
+  const calculatedFieldsAsStats = useMemo13(() => {
     if (!calculatedFields)
       return [];
     return calculatedFields.map((calc) => ({
@@ -3912,11 +4112,11 @@ function PivotConfig({
       calcFormula: calc.formula
     }));
   }, [calculatedFields]);
-  const allAvailableFields = useMemo12(() => [
+  const allAvailableFields = useMemo13(() => [
     ...availableFields.map((f) => ({ ...f, isCalculated: false })),
     ...calculatedFieldsAsStats
   ], [availableFields, calculatedFieldsAsStats]);
-  const assignedFields = useMemo12(() => {
+  const assignedFields = useMemo13(() => {
     const rowSet = new Set(rowFields);
     const colSet = new Set(columnFields);
     const valueMap = new Map(valueFields.map((v) => [v.field, v]));
@@ -3926,7 +4126,7 @@ function PivotConfig({
       valueConfig: valueMap.get(f.field)
     }));
   }, [allAvailableFields, rowFields, columnFields, valueFields]);
-  const unassignedFields = useMemo12(() => {
+  const unassignedFields = useMemo13(() => {
     const rowSet = new Set(rowFields);
     const colSet = new Set(columnFields);
     const valSet = new Set(valueFields.map((v) => v.field));
@@ -3934,7 +4134,7 @@ function PivotConfig({
       (f) => !rowSet.has(f.field) && !colSet.has(f.field) && !valSet.has(f.field)
     );
   }, [allAvailableFields, rowFields, columnFields, valueFields]);
-  const filteredUnassignedFields = useMemo12(() => {
+  const filteredUnassignedFields = useMemo13(() => {
     if (!fieldSearch.trim())
       return unassignedFields;
     const search = fieldSearch.toLowerCase().trim();
@@ -3945,13 +4145,13 @@ function PivotConfig({
     });
   }, [unassignedFields, fieldSearch]);
   const assignedCount = assignedFields.length;
-  const getFieldDisplayName = useCallback12((field) => {
+  const getFieldDisplayName = useCallback13((field) => {
     if (field.isCalculated && field.calcName) {
       return field.calcName;
     }
     return field.field;
   }, []);
-  const handleDragStart = useCallback12(
+  const handleDragStart = useCallback13(
     (field, event) => {
       event.dataTransfer?.setData("text/plain", field);
       event.dataTransfer.effectAllowed = "move";
@@ -3959,7 +4159,7 @@ function PivotConfig({
     },
     [onDragStart]
   );
-  const handleAggregationChange = useCallback12(
+  const handleAggregationChange = useCallback13(
     (field, currentAgg, newAgg) => {
       if (!isAggregationAvailable(newAgg)) {
         console.warn(`[TinyPivot] "${newAgg}" aggregation requires a Pro license. Visit https://tiny-pivot.com/#pricing to upgrade.`);
@@ -3969,7 +4169,7 @@ function PivotConfig({
     },
     [onUpdateAggregation, isAggregationAvailable]
   );
-  const toggleRowColumn = useCallback12(
+  const toggleRowColumn = useCallback13(
     (field, currentAssignment) => {
       if (currentAssignment === "row") {
         onRemoveRowField(field);
@@ -3981,7 +4181,7 @@ function PivotConfig({
     },
     [onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddRowField]
   );
-  const removeField = useCallback12(
+  const removeField = useCallback13(
     (field, assignedTo, valueConfig) => {
       if (assignedTo === "row") {
         onRemoveRowField(field);
@@ -3993,15 +4193,15 @@ function PivotConfig({
     },
     [onRemoveRowField, onRemoveColumnField, onRemoveValueField]
   );
-  const handleTotalsToggle = useCallback12((checked) => {
+  const handleTotalsToggle = useCallback13((checked) => {
     onShowRowTotalsChange(checked);
     onShowColumnTotalsChange(checked);
   }, [onShowRowTotalsChange, onShowColumnTotalsChange]);
-  const openCalcModal = useCallback12((field) => {
+  const openCalcModal = useCallback13((field) => {
     setEditingCalcField(field || null);
     setShowCalcModal(true);
   }, []);
-  const handleSaveCalcField = useCallback12((field) => {
+  const handleSaveCalcField = useCallback13((field) => {
     if (editingCalcField && onUpdateCalculatedField) {
       onUpdateCalculatedField(field);
     } else if (onAddCalculatedField) {
@@ -4010,14 +4210,14 @@ function PivotConfig({
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, [editingCalcField, onAddCalculatedField, onUpdateCalculatedField]);
-  const handleCloseCalcModal = useCallback12(() => {
+  const handleCloseCalcModal = useCallback13(() => {
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, []);
-  return /* @__PURE__ */ jsxs7("div", { className: `vpg-pivot-config ${theme ? `vpg-theme-${theme}` : ""}`, children: [
-    /* @__PURE__ */ jsxs7("div", { className: "vpg-config-header", children: [
-      /* @__PURE__ */ jsxs7("h3", { className: "vpg-config-title", children: [
-        /* @__PURE__ */ jsx7("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs8("div", { className: `vpg-pivot-config ${theme ? `vpg-theme-${theme}` : ""}`, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "vpg-config-header", children: [
+      /* @__PURE__ */ jsxs8("h3", { className: "vpg-config-title", children: [
+        /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
           "path",
           {
             strokeLinecap: "round",
@@ -4028,13 +4228,13 @@ function PivotConfig({
         ) }),
         "Fields"
       ] }),
-      /* @__PURE__ */ jsx7("div", { className: "vpg-header-actions", children: assignedCount > 0 && /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8("div", { className: "vpg-header-actions", children: assignedCount > 0 && /* @__PURE__ */ jsx8(
         "button",
         {
           className: "vpg-action-btn vpg-clear-btn",
           title: "Clear all",
           onClick: onClearConfig,
-          children: /* @__PURE__ */ jsx7("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx8("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
             "path",
             {
               strokeLinecap: "round",
@@ -4046,9 +4246,9 @@ function PivotConfig({
         }
       ) })
     ] }),
-    assignedCount > 0 && /* @__PURE__ */ jsxs7("div", { className: "vpg-assigned-section", children: [
-      /* @__PURE__ */ jsx7("div", { className: "vpg-section-label", children: "Active" }),
-      /* @__PURE__ */ jsx7("div", { className: "vpg-assigned-list", children: assignedFields.map((field) => /* @__PURE__ */ jsxs7(
+    assignedCount > 0 && /* @__PURE__ */ jsxs8("div", { className: "vpg-assigned-section", children: [
+      /* @__PURE__ */ jsx8("div", { className: "vpg-section-label", children: "Active" }),
+      /* @__PURE__ */ jsx8("div", { className: "vpg-assigned-list", children: assignedFields.map((field) => /* @__PURE__ */ jsxs8(
         "div",
         {
           className: `vpg-assigned-item vpg-type-${field.assignedTo}${field.isCalculated ? " vpg-type-calc" : ""}`,
@@ -4057,12 +4257,12 @@ function PivotConfig({
           onDragStart: (e) => handleDragStart(field.field, e),
           onDragEnd,
           children: [
-            /* @__PURE__ */ jsxs7("div", { className: "vpg-item-main", children: [
-              /* @__PURE__ */ jsx7("span", { className: `vpg-item-badge ${field.assignedTo}${field.isCalculated ? " calc" : ""}`, children: field.isCalculated ? "\u0192" : field.assignedTo === "row" ? "R" : field.assignedTo === "column" ? "C" : getAggregationSymbol(field.valueConfig?.aggregation || "sum") }),
-              /* @__PURE__ */ jsx7("span", { className: "vpg-item-name", children: getFieldDisplayName(field) })
+            /* @__PURE__ */ jsxs8("div", { className: "vpg-item-main", children: [
+              /* @__PURE__ */ jsx8("span", { className: `vpg-item-badge ${field.assignedTo}${field.isCalculated ? " calc" : ""}`, children: field.isCalculated ? "\u0192" : field.assignedTo === "row" ? "R" : field.assignedTo === "column" ? "C" : getAggregationSymbol(field.valueConfig?.aggregation || "sum") }),
+              /* @__PURE__ */ jsx8("span", { className: "vpg-item-name", children: getFieldDisplayName(field) })
             ] }),
-            /* @__PURE__ */ jsxs7("div", { className: "vpg-item-actions", children: [
-              (field.assignedTo === "row" || field.assignedTo === "column") && /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsxs8("div", { className: "vpg-item-actions", children: [
+              (field.assignedTo === "row" || field.assignedTo === "column") && /* @__PURE__ */ jsx8(
                 "button",
                 {
                   className: "vpg-toggle-btn",
@@ -4071,14 +4271,14 @@ function PivotConfig({
                     e.stopPropagation();
                     toggleRowColumn(field.field, field.assignedTo);
                   },
-                  children: /* @__PURE__ */ jsx7(
+                  children: /* @__PURE__ */ jsx8(
                     "svg",
                     {
                       className: "vpg-icon-xs",
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsx7(
+                      children: /* @__PURE__ */ jsx8(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -4091,7 +4291,7 @@ function PivotConfig({
                   )
                 }
               ),
-              field.assignedTo === "value" && field.valueConfig && /* @__PURE__ */ jsx7(
+              field.assignedTo === "value" && field.valueConfig && /* @__PURE__ */ jsx8(
                 "select",
                 {
                   className: "vpg-agg-select",
@@ -4105,7 +4305,7 @@ function PivotConfig({
                     );
                   },
                   onClick: (e) => e.stopPropagation(),
-                  children: AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ jsxs7(
+                  children: AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ jsxs8(
                     "option",
                     {
                       value: agg.value,
@@ -4121,7 +4321,7 @@ function PivotConfig({
                   ))
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 "button",
                 {
                   className: "vpg-remove-btn",
@@ -4139,14 +4339,14 @@ function PivotConfig({
         field.field
       )) })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "vpg-unassigned-section", children: [
-      /* @__PURE__ */ jsx7("div", { className: "vpg-section-header", children: /* @__PURE__ */ jsxs7("div", { className: "vpg-section-label", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "vpg-unassigned-section", children: [
+      /* @__PURE__ */ jsx8("div", { className: "vpg-section-header", children: /* @__PURE__ */ jsxs8("div", { className: "vpg-section-label", children: [
         "Available",
         " ",
-        /* @__PURE__ */ jsx7("span", { className: "vpg-count", children: unassignedFields.length })
+        /* @__PURE__ */ jsx8("span", { className: "vpg-count", children: unassignedFields.length })
       ] }) }),
-      /* @__PURE__ */ jsxs7("div", { className: "vpg-field-search", children: [
-        /* @__PURE__ */ jsx7("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs8("div", { className: "vpg-field-search", children: [
+        /* @__PURE__ */ jsx8("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
           "path",
           {
             strokeLinecap: "round",
@@ -4155,7 +4355,7 @@ function PivotConfig({
             d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
           }
         ) }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "text",
@@ -4165,7 +4365,7 @@ function PivotConfig({
             className: "vpg-search-input"
           }
         ),
-        fieldSearch && /* @__PURE__ */ jsx7("button", { className: "vpg-clear-search", onClick: () => setFieldSearch(""), children: /* @__PURE__ */ jsx7("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
+        fieldSearch && /* @__PURE__ */ jsx8("button", { className: "vpg-clear-search", onClick: () => setFieldSearch(""), children: /* @__PURE__ */ jsx8("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
           "path",
           {
             strokeLinecap: "round",
@@ -4175,8 +4375,8 @@ function PivotConfig({
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "vpg-field-list", children: [
-        filteredUnassignedFields.map((field) => /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsxs8("div", { className: "vpg-field-list", children: [
+        filteredUnassignedFields.map((field) => /* @__PURE__ */ jsxs8(
           "div",
           {
             className: `vpg-field-item${field.isNumeric && !field.isCalculated ? " vpg-is-numeric" : ""}${field.isCalculated ? " vpg-is-calculated" : ""}`,
@@ -4185,10 +4385,10 @@ function PivotConfig({
             onDragStart: (e) => handleDragStart(field.field, e),
             onDragEnd,
             children: [
-              /* @__PURE__ */ jsx7("span", { className: `vpg-field-type-icon${field.isCalculated ? " vpg-calc-type" : ""}`, title: field.type, children: getFieldIcon(field.type, field.isCalculated) }),
-              /* @__PURE__ */ jsx7("span", { className: "vpg-field-name", children: getFieldDisplayName(field) }),
-              field.isCalculated ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
-                /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8("span", { className: `vpg-field-type-icon${field.isCalculated ? " vpg-calc-type" : ""}`, title: field.type, children: getFieldIcon(field.type, field.isCalculated) }),
+              /* @__PURE__ */ jsx8("span", { className: "vpg-field-name", children: getFieldDisplayName(field) }),
+              field.isCalculated ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     className: "vpg-field-edit",
@@ -4202,7 +4402,7 @@ function PivotConfig({
                     children: "\u270E"
                   }
                 ),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     className: "vpg-field-delete",
@@ -4216,22 +4416,22 @@ function PivotConfig({
                     children: "\xD7"
                   }
                 )
-              ] }) : /* @__PURE__ */ jsx7("span", { className: "vpg-unique-count", children: field.uniqueCount })
+              ] }) : /* @__PURE__ */ jsx8("span", { className: "vpg-unique-count", children: field.uniqueCount })
             ]
           },
           field.field
         )),
-        filteredUnassignedFields.length === 0 && fieldSearch && /* @__PURE__ */ jsxs7("div", { className: "vpg-empty-hint", children: [
+        filteredUnassignedFields.length === 0 && fieldSearch && /* @__PURE__ */ jsxs8("div", { className: "vpg-empty-hint", children: [
           'No fields match "',
           fieldSearch,
           '"'
         ] }),
-        unassignedFields.length === 0 && /* @__PURE__ */ jsx7("div", { className: "vpg-empty-hint", children: "All fields assigned" })
+        unassignedFields.length === 0 && /* @__PURE__ */ jsx8("div", { className: "vpg-empty-hint", children: "All fields assigned" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "vpg-options-section", children: [
-      /* @__PURE__ */ jsxs7("label", { className: "vpg-option-toggle", children: [
-        /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsxs8("div", { className: "vpg-options-section", children: [
+      /* @__PURE__ */ jsxs8("label", { className: "vpg-option-toggle", children: [
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "checkbox",
@@ -4239,19 +4439,20 @@ function PivotConfig({
             onChange: (e) => handleTotalsToggle(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx7("span", { children: "Totals" })
+        /* @__PURE__ */ jsx8("span", { children: "Totals" })
       ] }),
-      /* @__PURE__ */ jsxs7("button", { className: "vpg-calc-btn", onClick: () => openCalcModal(), title: "Add calculated field (e.g. Profit Margin %)", children: [
-        /* @__PURE__ */ jsx7("span", { className: "vpg-calc-icon", children: "\u0192" }),
-        /* @__PURE__ */ jsx7("span", { children: "+ Calc" })
+      /* @__PURE__ */ jsxs8("button", { className: "vpg-calc-btn", onClick: () => openCalcModal(), title: "Add calculated field (e.g. Profit Margin %)", children: [
+        /* @__PURE__ */ jsx8("span", { className: "vpg-calc-icon", children: "\u0192" }),
+        /* @__PURE__ */ jsx8("span", { children: "+ Calc" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       CalculatedFieldModal,
       {
         show: showCalcModal,
         availableFields: numericFieldNames,
         existingField: editingCalcField,
+        theme,
         onClose: handleCloseCalcModal,
         onSave: handleSaveCalcField
       }
@@ -4260,9 +4461,9 @@ function PivotConfig({
 }
 
 // src/components/PivotSkeleton.tsx
-import { getAggregationLabel as getAggregationLabel2, getAggregationSymbol as getAggregationSymbol2 } from "@smallwebco/tinypivot-core";
-import { useCallback as useCallback13, useEffect as useEffect10, useMemo as useMemo13, useState as useState13 } from "react";
-import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { getAggregationLabel as getAggregationLabel3, getAggregationSymbol as getAggregationSymbol2 } from "@smallwebco/tinypivot-core";
+import { useCallback as useCallback14, useEffect as useEffect11, useMemo as useMemo14, useState as useState14 } from "react";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function PivotSkeleton({
   rowFields,
   columnFields,
@@ -4275,6 +4476,8 @@ function PivotSkeleton({
   activeFilters,
   totalRowCount,
   filteredRowCount,
+  enableDrillDown,
+  enableDrillThrough,
   onAddRowField,
   onRemoveRowField,
   onAddColumnField,
@@ -4283,10 +4486,12 @@ function PivotSkeleton({
   onRemoveValueField,
   onReorderRowFields,
   onReorderColumnFields,
+  onToggleCollapse,
+  onDrillThroughCell,
   theme
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
-  const getValueFieldDisplayName = useCallback13((field) => {
+  const getValueFieldDisplayName = useCallback14((field) => {
     if (field.startsWith("calc:")) {
       const calcId = field.replace("calc:", "");
       const calcField = calculatedFields?.find((c) => c.id === calcId);
@@ -4294,15 +4499,15 @@ function PivotSkeleton({
     }
     return field;
   }, [calculatedFields]);
-  const isCalculatedField = useCallback13((field) => {
+  const isCalculatedField = useCallback14((field) => {
     return field.startsWith("calc:");
   }, []);
-  const [dragOverArea, setDragOverArea] = useState13(null);
-  const [reorderDragSource, setReorderDragSource] = useState13(null);
-  const [reorderDropTarget, setReorderDropTarget] = useState13(null);
-  const [sortDirection, setSortDirection] = useState13("asc");
-  const [sortTarget, setSortTarget] = useState13("row");
-  const toggleSort = useCallback13((target = "row") => {
+  const [dragOverArea, setDragOverArea] = useState14(null);
+  const [reorderDragSource, setReorderDragSource] = useState14(null);
+  const [reorderDropTarget, setReorderDropTarget] = useState14(null);
+  const [sortDirection, setSortDirection] = useState14("asc");
+  const [sortTarget, setSortTarget] = useState14("row");
+  const toggleSort = useCallback14((target = "row") => {
     if (sortTarget === target) {
       setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
     } else {
@@ -4310,13 +4515,13 @@ function PivotSkeleton({
       setSortDirection("asc");
     }
   }, [sortTarget]);
-  const [selectedCell, setSelectedCell] = useState13(null);
-  const [selectionStart, setSelectionStart] = useState13(null);
-  const [selectionEnd, setSelectionEnd] = useState13(null);
-  const [isSelecting, setIsSelecting] = useState13(false);
-  const [showCopyToast, setShowCopyToast] = useState13(false);
-  const [copyToastMessage, setCopyToastMessage] = useState13("");
-  const selectionBounds = useMemo13(() => {
+  const [selectedCell, setSelectedCell] = useState14(null);
+  const [selectionStart, setSelectionStart] = useState14(null);
+  const [selectionEnd, setSelectionEnd] = useState14(null);
+  const [isSelecting, setIsSelecting] = useState14(false);
+  const [showCopyToast, setShowCopyToast] = useState14(false);
+  const [copyToastMessage, setCopyToastMessage] = useState14("");
+  const selectionBounds = useMemo14(() => {
     if (!selectionStart || !selectionEnd)
       return null;
     return {
@@ -4326,7 +4531,7 @@ function PivotSkeleton({
       maxCol: Math.max(selectionStart.col, selectionEnd.col)
     };
   }, [selectionStart, selectionEnd]);
-  const handleCellMouseDown = useCallback13(
+  const handleCellMouseDown = useCallback14(
     (rowIndex, colIndex, event) => {
       event.preventDefault();
       if (event.shiftKey && selectedCell) {
@@ -4340,7 +4545,7 @@ function PivotSkeleton({
     },
     [selectedCell]
   );
-  const handleCellMouseEnter = useCallback13(
+  const handleCellMouseEnter = useCallback14(
     (rowIndex, colIndex) => {
       if (isSelecting) {
         setSelectionEnd({ row: rowIndex, col: colIndex });
@@ -4348,7 +4553,7 @@ function PivotSkeleton({
     },
     [isSelecting]
   );
-  const isCellSelected = useCallback13(
+  const isCellSelected = useCallback14(
     (rowIndex, colIndex) => {
       if (!selectionBounds) {
         return selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
@@ -4358,12 +4563,12 @@ function PivotSkeleton({
     },
     [selectionBounds, selectedCell]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  const sortedRowIndices = useMemo13(() => {
+  const sortedRowIndices = useMemo14(() => {
     if (!pivotResult)
       return [];
     const indices = pivotResult.rowHeaders.map((_, i) => i);
@@ -4391,7 +4596,7 @@ function PivotSkeleton({
     });
     return indices;
   }, [pivotResult, sortTarget, sortDirection]);
-  const copySelectionToClipboard = useCallback13(() => {
+  const copySelectionToClipboard = useCallback14(() => {
     if (!selectionBounds || !pivotResult)
       return;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
@@ -4417,7 +4622,7 @@ function PivotSkeleton({
       console.error("Copy failed:", err);
     });
   }, [selectionBounds, pivotResult, sortedRowIndices]);
-  useEffect10(() => {
+  useEffect11(() => {
     const handleKeydown = (event) => {
       if (!selectionBounds)
         return;
@@ -4435,7 +4640,7 @@ function PivotSkeleton({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [selectionBounds, copySelectionToClipboard]);
-  const selectionStats = useMemo13(() => {
+  const selectionStats = useMemo14(() => {
     if (!selectionBounds || !pivotResult)
       return null;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
@@ -4464,18 +4669,18 @@ function PivotSkeleton({
       avg
     };
   }, [selectionBounds, pivotResult, sortedRowIndices]);
-  const formatStatValue = useCallback13((val) => {
+  const formatStatValue = useCallback14((val) => {
     if (Math.abs(val) >= 1e6)
       return `${(val / 1e6).toFixed(2)}M`;
     if (Math.abs(val) >= 1e3)
       return `${(val / 1e3).toFixed(2)}K`;
     return val.toFixed(2);
   }, []);
-  const columnHeaderCells = useMemo13(() => {
+  const columnHeaderCells = useMemo14(() => {
     if (!pivotResult || pivotResult.headers.length === 0) {
       return [
         valueFields.map((vf) => ({
-          label: `${getValueFieldDisplayName(vf.field)} (${getAggregationLabel2(vf.aggregation)})`,
+          label: `${getValueFieldDisplayName(vf.field)} (${getAggregationLabel3(vf.aggregation)})`,
           colspan: 1
         }))
       ];
@@ -4499,13 +4704,13 @@ function PivotSkeleton({
     return result;
   }, [pivotResult, valueFields]);
   const hasActiveFilters = activeFilters && activeFilters.length > 0;
-  const filterSummary = useMemo13(() => {
+  const filterSummary = useMemo14(() => {
     if (!activeFilters || activeFilters.length === 0)
       return "";
     return activeFilters.map((f) => f.column).join(", ");
   }, [activeFilters]);
-  const [showFilterTooltip, setShowFilterTooltip] = useState13(false);
-  const filterTooltipDetails = useMemo13(() => {
+  const [showFilterTooltip, setShowFilterTooltip] = useState14(false);
+  const filterTooltipDetails = useMemo14(() => {
     if (!activeFilters || activeFilters.length === 0)
       return [];
     return activeFilters.map((f) => {
@@ -4530,7 +4735,7 @@ function PivotSkeleton({
       };
     });
   }, [activeFilters]);
-  const handleDragOver = useCallback13(
+  const handleDragOver = useCallback14(
     (area, event) => {
       event.preventDefault();
       event.dataTransfer.dropEffect = "move";
@@ -4538,10 +4743,10 @@ function PivotSkeleton({
     },
     []
   );
-  const handleDragLeave = useCallback13(() => {
+  const handleDragLeave = useCallback14(() => {
     setDragOverArea(null);
   }, []);
-  const handleDrop = useCallback13(
+  const handleDrop = useCallback14(
     (area, event) => {
       event.preventDefault();
       const field = event.dataTransfer?.getData("text/plain");
@@ -4571,7 +4776,7 @@ function PivotSkeleton({
     },
     [rowFields, columnFields, valueFields, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField]
   );
-  const handleChipDragStart = useCallback13(
+  const handleChipDragStart = useCallback14(
     (zone, index, event) => {
       setReorderDragSource({ zone, index });
       event.dataTransfer.effectAllowed = "move";
@@ -4582,11 +4787,11 @@ function PivotSkeleton({
     },
     []
   );
-  const handleChipDragEnd = useCallback13(() => {
+  const handleChipDragEnd = useCallback14(() => {
     setReorderDragSource(null);
     setReorderDropTarget(null);
   }, []);
-  const handleChipDragOver = useCallback13(
+  const handleChipDragOver = useCallback14(
     (zone, index, event) => {
       event.preventDefault();
       if (reorderDragSource && reorderDragSource.zone === zone) {
@@ -4596,10 +4801,10 @@ function PivotSkeleton({
     },
     [reorderDragSource]
   );
-  const handleChipDragLeave = useCallback13(() => {
+  const handleChipDragLeave = useCallback14(() => {
     setReorderDropTarget(null);
   }, []);
-  const handleChipDrop = useCallback13(
+  const handleChipDrop = useCallback14(
     (zone, targetIndex, event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -4625,39 +4830,95 @@ function PivotSkeleton({
     },
     [reorderDragSource, rowFields, columnFields, onReorderRowFields, onReorderColumnFields]
   );
-  const isChipDragSource = useCallback13(
+  const isChipDragSource = useCallback14(
     (zone, index) => {
       return reorderDragSource?.zone === zone && reorderDragSource?.index === index;
     },
     [reorderDragSource]
   );
-  const isChipDropTarget = useCallback13(
+  const isChipDropTarget = useCallback14(
     (zone, index) => {
       return reorderDropTarget?.zone === zone && reorderDropTarget?.index === index;
     },
     [reorderDropTarget]
   );
   const currentFontSize = fontSize;
+  const columnPaths = useMemo14(() => {
+    if (!pivotResult || columnFields.length === 0)
+      return [];
+    const numCols = pivotResult.data[0]?.length ?? 0;
+    const numValueFields = valueFields.length || 1;
+    const paths = [];
+    for (let colIdx = 0; colIdx < numCols; colIdx++) {
+      const colKeyIndex = Math.floor(colIdx / numValueFields);
+      const path = [];
+      for (let h = 0; h < columnFields.length; h++) {
+        const headerRow = pivotResult.headers[h];
+        if (headerRow) {
+          path.push(headerRow[colKeyIndex * numValueFields] ?? "");
+        }
+      }
+      paths.push(path);
+    }
+    return paths;
+  }, [pivotResult, columnFields, valueFields]);
+  const findGroupStart = useCallback14((sortedIdx, idx) => {
+    if (!pivotResult)
+      return null;
+    const meta = pivotResult.rowMeta[sortedIdx];
+    if (!meta)
+      return null;
+    return meta.groupStarts.find((gs) => gs.depth === idx) ?? null;
+  }, [pivotResult]);
+  const handleChevronClick = useCallback14((groupStart, event) => {
+    onToggleCollapse?.(groupStart.key, event.altKey);
+  }, [onToggleCollapse]);
+  const handleDrillThroughCell = useCallback14((sortedIdx, colIdx) => {
+    if (!pivotResult)
+      return;
+    const meta = pivotResult.rowMeta[sortedIdx];
+    const rowPath = meta ? meta.path : [];
+    const colPath = columnPaths[colIdx] ?? [];
+    const numValueFields = valueFields.length || 1;
+    const valueFieldIndex = colIdx % numValueFields;
+    onDrillThroughCell?.({ rowPath, columnPath: colPath, valueFieldIndex });
+  }, [pivotResult, columnPaths, valueFields, onDrillThroughCell]);
+  const handleDrillThroughRowTotal = useCallback14((sortedIdx) => {
+    if (!pivotResult)
+      return;
+    const meta = pivotResult.rowMeta[sortedIdx];
+    const rowPath = meta ? meta.path : [];
+    onDrillThroughCell?.({ rowPath, columnPath: [], valueFieldIndex: 0 });
+  }, [pivotResult, onDrillThroughCell]);
+  const handleDrillThroughColTotal = useCallback14((colIdx) => {
+    const colPath = columnPaths[colIdx] ?? [];
+    const numValueFields = valueFields.length || 1;
+    const valueFieldIndex = colIdx % numValueFields;
+    onDrillThroughCell?.({ rowPath: [], columnPath: colPath, valueFieldIndex });
+  }, [columnPaths, valueFields, onDrillThroughCell]);
+  const handleDrillThroughGrandTotal = useCallback14(() => {
+    onDrillThroughCell?.({ rowPath: [], columnPath: [], valueFieldIndex: 0 });
+  }, [onDrillThroughCell]);
   const rowHeaderWidth = 180;
-  const rowHeaderColWidth = useMemo13(() => {
+  const rowHeaderColWidth = useMemo14(() => {
     const numCols = Math.max(rowFields.length, 1);
     return Math.max(rowHeaderWidth / numCols, 80);
   }, [rowFields.length]);
-  const getRowHeaderLeftOffset = useCallback13((fieldIdx) => {
+  const getRowHeaderLeftOffset = useCallback14((fieldIdx) => {
     return fieldIdx * rowHeaderColWidth;
   }, [rowHeaderColWidth]);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${theme ? `vpg-theme-${theme}` : ""} ${draggingField ? "vpg-is-dragging" : ""}`,
       children: [
-        showCopyToast && /* @__PURE__ */ jsxs8("div", { className: "vpg-toast", children: [
-          /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+        showCopyToast && /* @__PURE__ */ jsxs9("div", { className: "vpg-toast", children: [
+          /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
           copyToastMessage
         ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "vpg-skeleton-header", children: [
-          /* @__PURE__ */ jsxs8("div", { className: "vpg-skeleton-title", children: [
-            /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs9("div", { className: "vpg-skeleton-header", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "vpg-skeleton-title", children: [
+            /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
               "path",
               {
                 strokeLinecap: "round",
@@ -4666,24 +4927,24 @@ function PivotSkeleton({
                 d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
               }
             ) }),
-            /* @__PURE__ */ jsx8("span", { children: "Pivot Table" })
+            /* @__PURE__ */ jsx9("span", { children: "Pivot Table" })
           ] }),
-          /* @__PURE__ */ jsxs8("div", { className: "vpg-header-right", children: [
-            hasActiveFilters && /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsxs9("div", { className: "vpg-header-right", children: [
+            hasActiveFilters && /* @__PURE__ */ jsxs9(
               "div",
               {
                 className: "vpg-filter-indicator",
                 onMouseEnter: () => setShowFilterTooltip(true),
                 onMouseLeave: () => setShowFilterTooltip(false),
                 children: [
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx9(
                     "svg",
                     {
                       className: "vpg-filter-icon",
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsx8(
+                      children: /* @__PURE__ */ jsx9(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -4694,11 +4955,11 @@ function PivotSkeleton({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsxs8("span", { className: "vpg-filter-text", children: [
+                  /* @__PURE__ */ jsxs9("span", { className: "vpg-filter-text", children: [
                     "Filtered:",
                     " ",
-                    /* @__PURE__ */ jsx8("strong", { children: filterSummary }),
-                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs8("span", { className: "vpg-filter-count", children: [
+                    /* @__PURE__ */ jsx9("strong", { children: filterSummary }),
+                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs9("span", { className: "vpg-filter-count", children: [
                       "(",
                       filteredRowCount.toLocaleString(),
                       " ",
@@ -4709,13 +4970,13 @@ function PivotSkeleton({
                       "rows)"
                     ] })
                   ] }),
-                  showFilterTooltip && /* @__PURE__ */ jsxs8("div", { className: "vpg-filter-tooltip", children: [
-                    /* @__PURE__ */ jsx8("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
-                    filterTooltipDetails.map((filter) => /* @__PURE__ */ jsxs8("div", { className: "vpg-tooltip-filter", children: [
-                      /* @__PURE__ */ jsx8("div", { className: "vpg-tooltip-column", children: filter.column }),
-                      /* @__PURE__ */ jsx8("div", { className: "vpg-tooltip-values", children: filter.isRange ? /* @__PURE__ */ jsx8("span", { className: "vpg-tooltip-value vpg-range-value", children: filter.displayText }) : /* @__PURE__ */ jsxs8(Fragment5, { children: [
-                        filter.values.map((val, idx) => /* @__PURE__ */ jsx8("span", { className: "vpg-tooltip-value", children: val }, idx)),
-                        filter.remaining > 0 && /* @__PURE__ */ jsxs8("span", { className: "vpg-tooltip-more", children: [
+                  showFilterTooltip && /* @__PURE__ */ jsxs9("div", { className: "vpg-filter-tooltip", children: [
+                    /* @__PURE__ */ jsx9("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
+                    filterTooltipDetails.map((filter) => /* @__PURE__ */ jsxs9("div", { className: "vpg-tooltip-filter", children: [
+                      /* @__PURE__ */ jsx9("div", { className: "vpg-tooltip-column", children: filter.column }),
+                      /* @__PURE__ */ jsx9("div", { className: "vpg-tooltip-values", children: filter.isRange ? /* @__PURE__ */ jsx9("span", { className: "vpg-tooltip-value vpg-range-value", children: filter.displayText }) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
+                        filter.values.map((val, idx) => /* @__PURE__ */ jsx9("span", { className: "vpg-tooltip-value", children: val }, idx)),
+                        filter.remaining > 0 && /* @__PURE__ */ jsxs9("span", { className: "vpg-tooltip-more", children: [
                           "+",
                           filter.remaining,
                           " ",
@@ -4723,7 +4984,7 @@ function PivotSkeleton({
                         ] })
                       ] }) })
                     ] }, filter.column)),
-                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs8("div", { className: "vpg-tooltip-summary", children: [
+                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs9("div", { className: "vpg-tooltip-summary", children: [
                       "Showing",
                       " ",
                       filteredRowCount.toLocaleString(),
@@ -4738,20 +4999,20 @@ function PivotSkeleton({
                 ]
               }
             ),
-            isConfigured && /* @__PURE__ */ jsxs8("div", { className: "vpg-config-summary", children: [
-              /* @__PURE__ */ jsxs8("span", { className: "vpg-summary-badge vpg-rows", children: [
+            isConfigured && /* @__PURE__ */ jsxs9("div", { className: "vpg-config-summary", children: [
+              /* @__PURE__ */ jsxs9("span", { className: "vpg-summary-badge vpg-rows", children: [
                 rowFields.length,
                 " ",
                 "row",
                 rowFields.length !== 1 ? "s" : ""
               ] }),
-              /* @__PURE__ */ jsxs8("span", { className: "vpg-summary-badge vpg-cols", children: [
+              /* @__PURE__ */ jsxs9("span", { className: "vpg-summary-badge vpg-cols", children: [
                 columnFields.length,
                 " ",
                 "col",
                 columnFields.length !== 1 ? "s" : ""
               ] }),
-              /* @__PURE__ */ jsxs8("span", { className: "vpg-summary-badge vpg-vals", children: [
+              /* @__PURE__ */ jsxs9("span", { className: "vpg-summary-badge vpg-vals", children: [
                 valueFields.length,
                 " ",
                 "val",
@@ -4760,8 +5021,8 @@ function PivotSkeleton({
             ] })
           ] })
         ] }),
-        !canUsePivot ? /* @__PURE__ */ jsx8("div", { className: "vpg-pro-required", children: /* @__PURE__ */ jsxs8("div", { className: "vpg-pro-content", children: [
-          /* @__PURE__ */ jsx8("svg", { className: "vpg-pro-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx8(
+        !canUsePivot ? /* @__PURE__ */ jsx9("div", { className: "vpg-pro-required", children: /* @__PURE__ */ jsxs9("div", { className: "vpg-pro-content", children: [
+          /* @__PURE__ */ jsx9("svg", { className: "vpg-pro-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx9(
             "path",
             {
               strokeLinecap: "round",
@@ -4770,11 +5031,11 @@ function PivotSkeleton({
               d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
             }
           ) }),
-          /* @__PURE__ */ jsx8("h3", { children: "Pivot Unavailable" }),
-          /* @__PURE__ */ jsx8("p", { children: "Pivot mode could not be enabled in this session. Try reloading the page." })
-        ] }) }) : /* @__PURE__ */ jsxs8(Fragment5, { children: [
-          /* @__PURE__ */ jsxs8("div", { className: "vpg-config-bar", children: [
-            /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsx9("h3", { children: "Pivot Unavailable" }),
+          /* @__PURE__ */ jsx9("p", { children: "Pivot mode could not be enabled in this session. Try reloading the page." })
+        ] }) }) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
+          /* @__PURE__ */ jsxs9("div", { className: "vpg-config-bar", children: [
+            /* @__PURE__ */ jsxs9(
               "div",
               {
                 className: `vpg-drop-zone vpg-row-zone ${dragOverArea === "row" ? "vpg-drag-over" : ""}`,
@@ -4782,12 +5043,12 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("row", e),
                 children: [
-                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-icon vpg-row-icon", children: "\u2193" }),
-                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-label", children: "Rows" })
+                  /* @__PURE__ */ jsxs9("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ jsx9("span", { className: "vpg-zone-icon vpg-row-icon", children: "\u2193" }),
+                    /* @__PURE__ */ jsx9("span", { className: "vpg-zone-label", children: "Rows" })
                   ] }),
-                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-chips", children: [
-                    rowFields.map((field, idx) => /* @__PURE__ */ jsxs8(
+                  /* @__PURE__ */ jsxs9("div", { className: "vpg-zone-chips", children: [
+                    rowFields.map((field, idx) => /* @__PURE__ */ jsxs9(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-row-chip ${isChipDragSource("row", idx) ? "vpg-chip-dragging" : ""} ${isChipDropTarget("row", idx) ? "vpg-chip-drop-target" : ""}`,
@@ -4798,9 +5059,9 @@ function PivotSkeleton({
                         onDragLeave: handleChipDragLeave,
                         onDrop: (e) => handleChipDrop("row", idx, e),
                         children: [
-                          /* @__PURE__ */ jsx8("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
-                          /* @__PURE__ */ jsx8("span", { className: "vpg-mini-name", children: field }),
-                          /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsx9("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ jsx9("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ jsx9(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -4815,12 +5076,12 @@ function PivotSkeleton({
                       },
                       field
                     )),
-                    rowFields.length === 0 && /* @__PURE__ */ jsx8("span", { className: "vpg-zone-hint", children: "Drop here" })
+                    rowFields.length === 0 && /* @__PURE__ */ jsx9("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs9(
               "div",
               {
                 className: `vpg-drop-zone vpg-column-zone ${dragOverArea === "column" ? "vpg-drag-over" : ""}`,
@@ -4828,12 +5089,12 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("column", e),
                 children: [
-                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-icon vpg-column-icon", children: "\u2192" }),
-                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-label", children: "Columns" })
+                  /* @__PURE__ */ jsxs9("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ jsx9("span", { className: "vpg-zone-icon vpg-column-icon", children: "\u2192" }),
+                    /* @__PURE__ */ jsx9("span", { className: "vpg-zone-label", children: "Columns" })
                   ] }),
-                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-chips", children: [
-                    columnFields.map((field, idx) => /* @__PURE__ */ jsxs8(
+                  /* @__PURE__ */ jsxs9("div", { className: "vpg-zone-chips", children: [
+                    columnFields.map((field, idx) => /* @__PURE__ */ jsxs9(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-column-chip ${isChipDragSource("column", idx) ? "vpg-chip-dragging" : ""} ${isChipDropTarget("column", idx) ? "vpg-chip-drop-target" : ""}`,
@@ -4844,9 +5105,9 @@ function PivotSkeleton({
                         onDragLeave: handleChipDragLeave,
                         onDrop: (e) => handleChipDrop("column", idx, e),
                         children: [
-                          /* @__PURE__ */ jsx8("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
-                          /* @__PURE__ */ jsx8("span", { className: "vpg-mini-name", children: field }),
-                          /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsx9("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ jsx9("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ jsx9(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -4861,12 +5122,12 @@ function PivotSkeleton({
                       },
                       field
                     )),
-                    columnFields.length === 0 && /* @__PURE__ */ jsx8("span", { className: "vpg-zone-hint", children: "Drop here" })
+                    columnFields.length === 0 && /* @__PURE__ */ jsx9("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs9(
               "div",
               {
                 className: `vpg-drop-zone vpg-value-zone ${dragOverArea === "value" ? "vpg-drag-over" : ""}`,
@@ -4874,19 +5135,19 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("value", e),
                 children: [
-                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-icon vpg-value-icon", children: "\u03A3" }),
-                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-label", children: "Values" })
+                  /* @__PURE__ */ jsxs9("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ jsx9("span", { className: "vpg-zone-icon vpg-value-icon", children: "\u03A3" }),
+                    /* @__PURE__ */ jsx9("span", { className: "vpg-zone-label", children: "Values" })
                   ] }),
-                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-chips", children: [
-                    valueFields.map((vf) => /* @__PURE__ */ jsxs8(
+                  /* @__PURE__ */ jsxs9("div", { className: "vpg-zone-chips", children: [
+                    valueFields.map((vf) => /* @__PURE__ */ jsxs9(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-value-chip${isCalculatedField(vf.field) ? " vpg-calc-chip" : ""}`,
                         children: [
-                          /* @__PURE__ */ jsx8("span", { className: "vpg-agg-symbol", children: isCalculatedField(vf.field) ? "\u0192" : getAggregationSymbol2(vf.aggregation) }),
-                          /* @__PURE__ */ jsx8("span", { className: "vpg-mini-name", children: getValueFieldDisplayName(vf.field) }),
-                          /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsx9("span", { className: "vpg-agg-symbol", children: isCalculatedField(vf.field) ? "\u0192" : getAggregationSymbol2(vf.aggregation) }),
+                          /* @__PURE__ */ jsx9("span", { className: "vpg-mini-name", children: getValueFieldDisplayName(vf.field) }),
+                          /* @__PURE__ */ jsx9(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -4898,21 +5159,21 @@ function PivotSkeleton({
                       },
                       `${vf.field}-${vf.aggregation}`
                     )),
-                    valueFields.length === 0 && /* @__PURE__ */ jsx8("span", { className: "vpg-zone-hint", children: "Drop numeric" })
+                    valueFields.length === 0 && /* @__PURE__ */ jsx9("span", { className: "vpg-zone-hint", children: "Drop numeric" })
                   ] })
                 ]
               }
             )
           ] }),
-          (!isConfigured || !pivotResult) && /* @__PURE__ */ jsx8("div", { className: "vpg-placeholder", children: /* @__PURE__ */ jsxs8("div", { className: "vpg-placeholder-content", children: [
-            /* @__PURE__ */ jsx8(
+          (!isConfigured || !pivotResult) && /* @__PURE__ */ jsx9("div", { className: "vpg-placeholder", children: /* @__PURE__ */ jsxs9("div", { className: "vpg-placeholder-content", children: [
+            /* @__PURE__ */ jsx9(
               "svg",
               {
                 className: "vpg-placeholder-icon",
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
-                children: /* @__PURE__ */ jsx8(
+                children: /* @__PURE__ */ jsx9(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -4923,83 +5184,111 @@ function PivotSkeleton({
                 )
               }
             ),
-            /* @__PURE__ */ jsx8("span", { className: "vpg-placeholder-text", children: valueFields.length === 0 ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
+            /* @__PURE__ */ jsx9("span", { className: "vpg-placeholder-text", children: valueFields.length === 0 ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
               "Add a",
               " ",
-              /* @__PURE__ */ jsx8("strong", { children: "Values" }),
+              /* @__PURE__ */ jsx9("strong", { children: "Values" }),
               " ",
               "field to see your pivot table"
-            ] }) : rowFields.length === 0 && columnFields.length === 0 ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
+            ] }) : rowFields.length === 0 && columnFields.length === 0 ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
               "Add",
               " ",
-              /* @__PURE__ */ jsx8("strong", { children: "Row" }),
+              /* @__PURE__ */ jsx9("strong", { children: "Row" }),
               " ",
               "or",
               " ",
-              /* @__PURE__ */ jsx8("strong", { children: "Column" }),
+              /* @__PURE__ */ jsx9("strong", { children: "Column" }),
               " ",
               "fields to group your data"
             ] }) : "Your pivot table will appear here" })
           ] }) }),
-          isConfigured && pivotResult && /* @__PURE__ */ jsx8("div", { className: "vpg-table-container", children: /* @__PURE__ */ jsxs8("table", { className: "vpg-pivot-table", children: [
-            /* @__PURE__ */ jsx8("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ jsxs8("tr", { className: "vpg-column-header-row", children: [
-              levelIdx === 0 && (rowFields.length > 0 ? rowFields : ["Rows"]).map((field, fieldIdx) => /* @__PURE__ */ jsx8(
+          isConfigured && pivotResult && /* @__PURE__ */ jsx9("div", { className: "vpg-table-container", children: /* @__PURE__ */ jsxs9("table", { className: "vpg-pivot-table", children: [
+            /* @__PURE__ */ jsx9("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ jsxs9("tr", { className: "vpg-column-header-row", children: [
+              levelIdx === 0 && (rowFields.length > 0 ? rowFields : ["Rows"]).map((field, fieldIdx) => /* @__PURE__ */ jsx9(
                 "th",
                 {
                   className: "vpg-row-header-label",
                   rowSpan: columnHeaderCells.length,
                   style: { width: `${rowHeaderColWidth}px`, minWidth: "80px", left: `${getRowHeaderLeftOffset(fieldIdx)}px` },
                   onClick: () => toggleSort("row"),
-                  children: /* @__PURE__ */ jsxs8("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx8("span", { children: field }),
-                    (fieldIdx === rowFields.length - 1 || rowFields.length === 0) && /* @__PURE__ */ jsx8("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                  children: /* @__PURE__ */ jsxs9("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ jsx9("span", { children: field }),
+                    (fieldIdx === rowFields.length - 1 || rowFields.length === 0) && /* @__PURE__ */ jsx9("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
                 },
                 `row-header-${fieldIdx}`
               )),
-              headerRow.map((cell, idx) => /* @__PURE__ */ jsx8(
+              headerRow.map((cell, idx) => /* @__PURE__ */ jsx9(
                 "th",
                 {
                   className: "vpg-column-header-cell",
                   colSpan: cell.colspan,
                   onClick: () => levelIdx === columnHeaderCells.length - 1 && toggleSort(idx),
-                  children: /* @__PURE__ */ jsxs8("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx8("span", { children: cell.label }),
-                    levelIdx === columnHeaderCells.length - 1 && /* @__PURE__ */ jsx8("span", { className: `vpg-sort-indicator ${sortTarget === idx ? "active" : ""}`, children: sortTarget === idx ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                  children: /* @__PURE__ */ jsxs9("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ jsx9("span", { children: cell.label }),
+                    levelIdx === columnHeaderCells.length - 1 && /* @__PURE__ */ jsx9("span", { className: `vpg-sort-indicator ${sortTarget === idx ? "active" : ""}`, children: sortTarget === idx ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
                 },
                 idx
               )),
-              pivotResult.rowTotals.length > 0 && levelIdx === 0 && /* @__PURE__ */ jsx8("th", { className: "vpg-total-header", rowSpan: columnHeaderCells.length, children: "Total" })
+              pivotResult.rowTotals.length > 0 && levelIdx === 0 && /* @__PURE__ */ jsx9("th", { className: "vpg-total-header", rowSpan: columnHeaderCells.length, children: "Total" })
             ] }, `header-${levelIdx}`)) }),
-            /* @__PURE__ */ jsxs8("tbody", { children: [
-              sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ jsxs8("tr", { className: "vpg-data-row", children: [
-                pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ jsx8(
-                  "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__ */ jsx8(
-                    "td",
-                    {
-                      className: `vpg-data-cell ${isCellSelected(displayRowIdx, colIdx) ? "selected" : ""} ${cell.value === null ? "vpg-is-null" : ""}`,
-                      onMouseDown: (e) => handleCellMouseDown(displayRowIdx, colIdx, e),
-                      onMouseEnter: () => handleCellMouseEnter(displayRowIdx, colIdx),
-                      children: cell.formattedValue
-                    },
-                    colIdx
-                  );
-                }),
-                pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ jsx8("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
-              ] }, sortedIdx)),
-              pivotResult.columnTotals.length > 0 && /* @__PURE__ */ jsxs8("tr", { className: "vpg-totals-row", children: [
-                /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsxs9("tbody", { children: [
+              sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ jsxs9(
+                "tr",
+                {
+                  className: `vpg-data-row${pivotResult.rowMeta[sortedIdx]?.isSubtotal ? " vpg-subtotal-row" : ""}`,
+                  children: [
+                    pivotResult.rowHeaders[sortedIdx].map((val, idx) => {
+                      const groupStart = findGroupStart(sortedIdx, idx);
+                      return /* @__PURE__ */ jsxs9(
+                        "th",
+                        {
+                          className: "vpg-row-header-cell",
+                          style: { width: `${rowHeaderColWidth}px`, minWidth: "80px", left: `${getRowHeaderLeftOffset(idx)}px` },
+                          children: [
+                            enableDrillDown !== false && groupStart && /* @__PURE__ */ jsx9(
+                              "span",
+                              {
+                                className: "vpg-collapse-toggle",
+                                onClick: (e) => handleChevronClick(groupStart, e),
+                                children: groupStart.isCollapsed ? "\u25B8" : "\u25BE"
+                              }
+                            ),
+                            val
+                          ]
+                        },
+                        `row-${sortedIdx}-${idx}`
+                      );
+                    }),
+                    pivotResult.data[sortedIdx].map((cell, colIdx) => {
+                      const displayRowIdx = sortedRowIndices.indexOf(sortedIdx);
+                      return /* @__PURE__ */ jsx9(
+                        "td",
+                        {
+                          className: `vpg-data-cell ${isCellSelected(displayRowIdx, colIdx) ? "selected" : ""} ${cell.value === null ? "vpg-is-null" : ""}`,
+                          onMouseDown: (e) => handleCellMouseDown(displayRowIdx, colIdx, e),
+                          onMouseEnter: () => handleCellMouseEnter(displayRowIdx, colIdx),
+                          onDoubleClick: enableDrillThrough !== false ? () => handleDrillThroughCell(sortedIdx, colIdx) : void 0,
+                          children: cell.formattedValue
+                        },
+                        colIdx
+                      );
+                    }),
+                    pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ jsx9(
+                      "td",
+                      {
+                        className: "vpg-data-cell vpg-total-cell",
+                        onDoubleClick: enableDrillThrough !== false ? () => handleDrillThroughRowTotal(sortedIdx) : void 0,
+                        children: pivotResult.rowTotals[sortedIdx].formattedValue
+                      }
+                    )
+                  ]
+                },
+                sortedIdx
+              )),
+              pivotResult.columnTotals.length > 0 && /* @__PURE__ */ jsxs9("tr", { className: "vpg-totals-row", children: [
+                /* @__PURE__ */ jsx9(
                   "th",
                   {
                     className: "vpg-row-header-cell vpg-total-label",
@@ -5008,13 +5297,28 @@ function PivotSkeleton({
                     children: "Total"
                   }
                 ),
-                pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ jsx8("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
-                pivotResult.rowTotals.length > 0 && /* @__PURE__ */ jsx8("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
+                pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ jsx9(
+                  "td",
+                  {
+                    className: "vpg-data-cell vpg-total-cell",
+                    onDoubleClick: enableDrillThrough !== false ? () => handleDrillThroughColTotal(colIdx) : void 0,
+                    children: cell.formattedValue
+                  },
+                  colIdx
+                )),
+                pivotResult.rowTotals.length > 0 && /* @__PURE__ */ jsx9(
+                  "td",
+                  {
+                    className: "vpg-data-cell vpg-grand-total-cell",
+                    onDoubleClick: enableDrillThrough !== false ? () => handleDrillThroughGrandTotal() : void 0,
+                    children: pivotResult.grandTotal.formattedValue
+                  }
+                )
               ] })
             ] })
           ] }) }),
-          isConfigured && pivotResult && /* @__PURE__ */ jsxs8("div", { className: "vpg-skeleton-footer", children: [
-            /* @__PURE__ */ jsxs8("span", { className: "vpg-footer-info", children: [
+          isConfigured && pivotResult && /* @__PURE__ */ jsxs9("div", { className: "vpg-skeleton-footer", children: [
+            /* @__PURE__ */ jsxs9("span", { className: "vpg-footer-info", children: [
               pivotResult.rowHeaders.length,
               " ",
               "rows \xD7",
@@ -5022,30 +5326,30 @@ function PivotSkeleton({
               " ",
               "columns"
             ] }),
-            selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs8("div", { className: "vpg-selection-stats", children: [
-              /* @__PURE__ */ jsxs8("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-label", children: "Count:" }),
-                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-value", children: selectionStats.count })
+            selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs9("div", { className: "vpg-selection-stats", children: [
+              /* @__PURE__ */ jsxs9("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-label", children: "Count:" }),
+                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-value", children: selectionStats.count })
               ] }),
-              selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs8(Fragment5, { children: [
-                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-divider", children: "|" }),
-                /* @__PURE__ */ jsxs8("span", { className: "vpg-stat", children: [
-                  /* @__PURE__ */ jsx8("span", { className: "vpg-stat-label", children: "Sum:" }),
-                  /* @__PURE__ */ jsx8("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
+              selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs9(Fragment6, { children: [
+                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-divider", children: "|" }),
+                /* @__PURE__ */ jsxs9("span", { className: "vpg-stat", children: [
+                  /* @__PURE__ */ jsx9("span", { className: "vpg-stat-label", children: "Sum:" }),
+                  /* @__PURE__ */ jsx9("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
                 ] }),
-                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-divider", children: "|" }),
-                /* @__PURE__ */ jsxs8("span", { className: "vpg-stat", children: [
-                  /* @__PURE__ */ jsx8("span", { className: "vpg-stat-label", children: "Avg:" }),
-                  /* @__PURE__ */ jsx8("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
+                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-divider", children: "|" }),
+                /* @__PURE__ */ jsxs9("span", { className: "vpg-stat", children: [
+                  /* @__PURE__ */ jsx9("span", { className: "vpg-stat-label", children: "Avg:" }),
+                  /* @__PURE__ */ jsx9("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
                 ] })
               ] })
             ] })
           ] })
         ] }),
-        showWatermark && canUsePivot && /* @__PURE__ */ jsx8("div", { className: `vpg-watermark ${isDemo ? "vpg-demo-mode" : ""}`, children: isDemo ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
-          /* @__PURE__ */ jsx8("span", { className: "vpg-demo-badge", children: "DEMO" }),
-          /* @__PURE__ */ jsx8("span", { children: "Pro features unlocked for evaluation" }),
-          /* @__PURE__ */ jsx8(
+        showWatermark && canUsePivot && /* @__PURE__ */ jsx9("div", { className: `vpg-watermark ${isDemo ? "vpg-demo-mode" : ""}`, children: isDemo ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
+          /* @__PURE__ */ jsx9("span", { className: "vpg-demo-badge", children: "DEMO" }),
+          /* @__PURE__ */ jsx9("span", { children: "Pro features unlocked for evaluation" }),
+          /* @__PURE__ */ jsx9(
             "a",
             {
               href: "https://tiny-pivot.com/#pricing",
@@ -5055,14 +5359,14 @@ function PivotSkeleton({
               children: "Get Pro License \u2192"
             }
           )
-        ] }) : /* @__PURE__ */ jsx8("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "Powered by TinyPivot" }) })
+        ] }) : /* @__PURE__ */ jsx9("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "Powered by TinyPivot" }) })
       ]
     }
   );
 }
 
 // src/components/DataGrid.tsx
-import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var MIN_COL_WIDTH = 120;
 var MAX_COL_WIDTH = 350;
 function DataGrid({
@@ -5087,53 +5391,59 @@ function DataGrid({
   dateFormat = "iso",
   fieldRoleOverrides,
   aiAnalyst,
+  enableDrillDown = true,
+  enableDrillThrough = true,
   onCellClick,
   onExport,
   onCopy,
   onAIDataLoaded,
   onAIConversationUpdate,
   onAIQueryExecuted,
-  onAIError
+  onAIError,
+  onCollapseChange,
+  onDrillThrough
 }) {
-  const { showWatermark, canUsePivot, canUseCharts, canUseAIAnalyst, isDemo, isPro } = useLicense();
+  const { showWatermark, canUsePivot, canUseCharts, canUseAIAnalyst, isDemo, isPro, licenseInfo } = useLicense();
+  const [drillThroughResult, setDrillThroughResult] = useState15(null);
+  const [showDrillThroughModal, setShowDrillThroughModal] = useState15(false);
   const showAIAnalyst = aiAnalyst?.enabled && canUseAIAnalyst;
-  const currentTheme = useMemo14(() => {
+  const currentTheme = useMemo15(() => {
     if (theme === "auto") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     return theme;
   }, [theme]);
-  const [currentFontSize, setCurrentFontSize] = useState14(initialFontSize);
-  const [globalSearchTerm, setGlobalSearchTerm] = useState14("");
-  const [showSearchInput, setShowSearchInput] = useState14(false);
-  const [currentPage, setCurrentPage] = useState14(1);
-  const [columnWidths, setColumnWidths] = useState14({});
-  const [resizingColumnId, setResizingColumnId] = useState14(null);
-  const [resizeStartX, setResizeStartX] = useState14(0);
-  const [resizeStartWidth, setResizeStartWidth] = useState14(0);
-  const [gridHeight, setGridHeight] = useState14(initialHeight);
-  const [isResizingVertically, setIsResizingVertically] = useState14(false);
-  const [verticalResizeStartY, setVerticalResizeStartY] = useState14(0);
-  const [verticalResizeStartHeight, setVerticalResizeStartHeight] = useState14(0);
-  const [showCopyToast, setShowCopyToast] = useState14(false);
-  const [copyToastMessage, setCopyToastMessage] = useState14("");
-  const [viewMode, setViewMode] = useState14("grid");
+  const [currentFontSize, setCurrentFontSize] = useState15(initialFontSize);
+  const [globalSearchTerm, setGlobalSearchTerm] = useState15("");
+  const [showSearchInput, setShowSearchInput] = useState15(false);
+  const [currentPage, setCurrentPage] = useState15(1);
+  const [columnWidths, setColumnWidths] = useState15({});
+  const [resizingColumnId, setResizingColumnId] = useState15(null);
+  const [resizeStartX, setResizeStartX] = useState15(0);
+  const [resizeStartWidth, setResizeStartWidth] = useState15(0);
+  const [gridHeight, setGridHeight] = useState15(initialHeight);
+  const [isResizingVertically, setIsResizingVertically] = useState15(false);
+  const [verticalResizeStartY, setVerticalResizeStartY] = useState15(0);
+  const [verticalResizeStartHeight, setVerticalResizeStartHeight] = useState15(0);
+  const [showCopyToast, setShowCopyToast] = useState15(false);
+  const [copyToastMessage, setCopyToastMessage] = useState15("");
+  const [viewMode, setViewMode] = useState15("grid");
   const aiAnalystRef = useRef4(null);
-  const [aiLoadedData, setAiLoadedData] = useState14(null);
-  const [isLoadingFullData, setIsLoadingFullData] = useState14(false);
-  const displayData = useMemo14(() => aiLoadedData || data, [aiLoadedData, data]);
-  const [_chartConfig, setChartConfig] = useState14(null);
-  const handleChartConfigChange = useCallback14((config) => {
+  const [aiLoadedData, setAiLoadedData] = useState15(null);
+  const [isLoadingFullData, setIsLoadingFullData] = useState15(false);
+  const displayData = useMemo15(() => aiLoadedData || data, [aiLoadedData, data]);
+  const [_chartConfig, setChartConfig] = useState15(null);
+  const handleChartConfigChange = useCallback15((config) => {
     setChartConfig(config);
   }, []);
-  const [showPivotConfig, setShowPivotConfig] = useState14(true);
-  const [draggingField, setDraggingField] = useState14(null);
-  const [activeFilterColumn, setActiveFilterColumn] = useState14(null);
-  const [filterDropdownPosition, setFilterDropdownPosition] = useState14({ top: 0, left: 0, maxHeight: 400 });
-  const [selectedCell, setSelectedCell] = useState14(null);
-  const [selectionStart, setSelectionStart] = useState14(null);
-  const [selectionEnd, setSelectionEnd] = useState14(null);
-  const [isSelecting, setIsSelecting] = useState14(false);
+  const [showPivotConfig, setShowPivotConfig] = useState15(true);
+  const [draggingField, setDraggingField] = useState15(null);
+  const [activeFilterColumn, setActiveFilterColumn] = useState15(null);
+  const [filterDropdownPosition, setFilterDropdownPosition] = useState15({ top: 0, left: 0, maxHeight: 400 });
+  const [selectedCell, setSelectedCell] = useState15(null);
+  const [selectionStart, setSelectionStart] = useState15(null);
+  const [selectionEnd, setSelectionEnd] = useState15(null);
+  const [isSelecting, setIsSelecting] = useState15(false);
   const tableContainerRef = useRef4(null);
   const tableBodyRef = useRef4(null);
   const fontSizeOptions = [
@@ -5162,7 +5472,7 @@ function DataGrid({
     setDateRangeFilter,
     getDateRangeFilter
   } = useExcelGrid({ data: displayData, enableSorting: true, enableFiltering: true });
-  const filteredDataForPivot = useMemo14(() => {
+  const filteredDataForPivot = useMemo15(() => {
     const filteredRows = table.getFilteredRowModel().rows;
     return filteredRows.map((row) => row.original);
   }, [table, columnFilters]);
@@ -5190,9 +5500,58 @@ function DataGrid({
     setRowFields,
     setColumnFields,
     addCalculatedField,
-    removeCalculatedField
-  } = usePivotTable(filteredDataForPivot);
-  const activeFilterInfo = useMemo14(() => {
+    removeCalculatedField,
+    toggleCollapsedPath
+  } = usePivotTable(filteredDataForPivot, enableDrillDown);
+  const handleToggleCollapse = useCallback15(
+    (key, altKey) => {
+      const next = toggleCollapsedPath(key, altKey, pivotRowFields, pivotResult);
+      onCollapseChange?.(Array.from(next));
+    },
+    [toggleCollapsedPath, pivotRowFields, pivotResult, onCollapseChange]
+  );
+  const handleDrillThroughCell = useCallback15(
+    (payload) => {
+      if (!enableDrillThrough)
+        return;
+      if (!canUseDrillThrough(licenseInfo)) {
+        console.warn('[TinyPivot] "Drill-through" requires a Pro license. Visit https://tiny-pivot.com/#pricing to upgrade.');
+        return;
+      }
+      const pivotConfig = {
+        rowFields: pivotRowFields,
+        columnFields: pivotColumnFields,
+        valueFields: pivotValueFields,
+        showRowTotals: pivotShowRowTotals,
+        showColumnTotals: pivotShowColumnTotals
+      };
+      const result = getDrillThroughRows(
+        filteredDataForPivot,
+        pivotConfig,
+        payload.rowPath,
+        payload.columnPath,
+        payload.valueFieldIndex
+      );
+      setDrillThroughResult(result);
+      setShowDrillThroughModal(true);
+      onDrillThrough?.(result);
+    },
+    [
+      enableDrillThrough,
+      licenseInfo,
+      pivotRowFields,
+      pivotColumnFields,
+      pivotValueFields,
+      pivotShowRowTotals,
+      pivotShowColumnTotals,
+      filteredDataForPivot,
+      onDrillThrough
+    ]
+  );
+  const handleCloseDrillThroughModal = useCallback15(() => {
+    setShowDrillThroughModal(false);
+  }, []);
+  const activeFilterInfo = useMemo15(() => {
     if (activeFilters.length === 0)
       return null;
     return activeFilters.map((f) => {
@@ -5230,8 +5589,8 @@ function DataGrid({
       };
     });
   }, [activeFilters, dateFormat]);
-  const rows = useMemo14(() => table.getFilteredRowModel().rows, [table, columnFilters]);
-  const searchFilteredData = useMemo14(() => {
+  const rows = useMemo15(() => table.getFilteredRowModel().rows, [table, columnFilters]);
+  const searchFilteredData = useMemo15(() => {
     if (!globalSearchTerm.trim() || !enableSearch) {
       return rows;
     }
@@ -5249,22 +5608,22 @@ function DataGrid({
     });
   }, [rows, globalSearchTerm, enableSearch, columnKeys]);
   const totalSearchedRows = searchFilteredData.length;
-  const totalPages = useMemo14(() => {
+  const totalPages = useMemo15(() => {
     if (!enablePagination)
       return 1;
     return Math.max(1, Math.ceil(totalSearchedRows / pageSize));
   }, [enablePagination, totalSearchedRows, pageSize]);
-  const paginatedRows = useMemo14(() => {
+  const paginatedRows = useMemo15(() => {
     if (!enablePagination)
       return searchFilteredData;
     const start = (currentPage - 1) * pageSize;
     const end = start + pageSize;
     return searchFilteredData.slice(start, end);
   }, [enablePagination, searchFilteredData, currentPage, pageSize]);
-  useEffect11(() => {
+  useEffect12(() => {
     setCurrentPage(1);
   }, [columnFilters, globalSearchTerm]);
-  const selectionBounds = useMemo14(() => {
+  const selectionBounds = useMemo15(() => {
     if (!selectionStart || !selectionEnd)
       return null;
     return {
@@ -5274,7 +5633,7 @@ function DataGrid({
       maxCol: Math.max(selectionStart.col, selectionEnd.col)
     };
   }, [selectionStart, selectionEnd]);
-  const selectionStats = useMemo14(() => {
+  const selectionStats = useMemo15(() => {
     if (!selectionBounds)
       return null;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
@@ -5304,7 +5663,7 @@ function DataGrid({
     const avg = sum / values.length;
     return { count, sum, avg, numericCount: values.length };
   }, [selectionBounds, rows, columnKeys]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (typeof document === "undefined")
       return;
     if (displayData.length === 0)
@@ -5328,7 +5687,7 @@ function DataGrid({
     }
     setColumnWidths(widths);
   }, [displayData, columnKeys]);
-  const startColumnResize = useCallback14(
+  const startColumnResize = useCallback15(
     (columnId, event) => {
       if (!enableColumnResize)
         return;
@@ -5340,7 +5699,7 @@ function DataGrid({
     },
     [enableColumnResize, columnWidths]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (!resizingColumnId)
       return;
     const handleResizeMove = (event) => {
@@ -5361,7 +5720,7 @@ function DataGrid({
       document.removeEventListener("mouseup", handleResizeEnd);
     };
   }, [resizingColumnId, resizeStartX, resizeStartWidth]);
-  const startVerticalResize = useCallback14(
+  const startVerticalResize = useCallback15(
     (event) => {
       if (!enableVerticalResize)
         return;
@@ -5372,7 +5731,7 @@ function DataGrid({
     },
     [enableVerticalResize, gridHeight]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isResizingVertically)
       return;
     const handleVerticalResizeMove = (event) => {
@@ -5390,7 +5749,7 @@ function DataGrid({
       document.removeEventListener("mouseup", handleVerticalResizeEnd);
     };
   }, [isResizingVertically, verticalResizeStartY, verticalResizeStartHeight, minHeight, maxHeight]);
-  const handleExport = useCallback14(() => {
+  const handleExport = useCallback15(() => {
     if (viewMode === "pivot") {
       if (!pivotResult)
         return;
@@ -5436,7 +5795,7 @@ function DataGrid({
     columnKeys,
     onExport
   ]);
-  const copySelectionToClipboard = useCallback14(() => {
+  const copySelectionToClipboard = useCallback15(() => {
     if (!selectionBounds || !enableClipboard)
       return;
     const text = formatSelectionForClipboard(
@@ -5461,7 +5820,7 @@ function DataGrid({
       }
     );
   }, [selectionBounds, enableClipboard, rows, columnKeys, onCopy]);
-  const handleMouseDown = useCallback14(
+  const handleMouseDown = useCallback15(
     (rowIndex, colIndex, event) => {
       event.preventDefault();
       if (event.shiftKey && selectedCell) {
@@ -5485,7 +5844,7 @@ function DataGrid({
     },
     [selectedCell, rows, columnKeys, onCellClick]
   );
-  const handleMouseEnter = useCallback14(
+  const handleMouseEnter = useCallback15(
     (rowIndex, colIndex) => {
       if (isSelecting) {
         setSelectionEnd({ row: rowIndex, col: colIndex });
@@ -5494,7 +5853,7 @@ function DataGrid({
     [isSelecting]
   );
   const isShowingAIData = aiLoadedData !== null;
-  const resetToFullData = useCallback14(async () => {
+  const resetToFullData = useCallback15(async () => {
     if (aiAnalystRef.current?.selectedDataSource) {
       setIsLoadingFullData(true);
       try {
@@ -5515,37 +5874,37 @@ function DataGrid({
     }
     clearAllFilters();
   }, [clearAllFilters]);
-  const handleAIDataLoaded = useCallback14(
+  const handleAIDataLoaded = useCallback15(
     (payload) => {
       setAiLoadedData(payload.data);
       onAIDataLoaded?.(payload);
     },
     [onAIDataLoaded]
   );
-  const handleAIConversationUpdate = useCallback14(
+  const handleAIConversationUpdate = useCallback15(
     (payload) => {
       onAIConversationUpdate?.(payload);
     },
     [onAIConversationUpdate]
   );
-  const handleAIQueryExecuted = useCallback14(
+  const handleAIQueryExecuted = useCallback15(
     (payload) => {
       onAIQueryExecuted?.(payload);
     },
     [onAIQueryExecuted]
   );
-  const handleAIError = useCallback14(
+  const handleAIError = useCallback15(
     (payload) => {
       onAIError?.(payload);
     },
     [onAIError]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  useEffect11(() => {
+  useEffect12(() => {
     const handleKeydown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "c" && selectionBounds) {
         event.preventDefault();
@@ -5563,7 +5922,7 @@ function DataGrid({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [selectionBounds, copySelectionToClipboard]);
-  const openFilterDropdown = useCallback14(
+  const openFilterDropdown = useCallback15(
     (columnId, event) => {
       event.stopPropagation();
       const target = event.currentTarget;
@@ -5592,28 +5951,28 @@ function DataGrid({
     },
     []
   );
-  const closeFilterDropdown = useCallback14(() => {
+  const closeFilterDropdown = useCallback15(() => {
     setActiveFilterColumn(null);
   }, []);
-  const handleFilter = useCallback14(
+  const handleFilter = useCallback15(
     (columnId, values) => {
       setColumnFilter(columnId, values);
     },
     [setColumnFilter]
   );
-  const handleRangeFilter = useCallback14(
+  const handleRangeFilter = useCallback15(
     (columnId, range) => {
       setNumericRangeFilter(columnId, range);
     },
     [setNumericRangeFilter]
   );
-  const handleDateRangeFilter = useCallback14(
+  const handleDateRangeFilter = useCallback15(
     (columnId, range) => {
       setDateRangeFilter(columnId, range);
     },
     [setDateRangeFilter]
   );
-  const handleSort = useCallback14(
+  const handleSort = useCallback15(
     (columnId, direction) => {
       if (direction === null) {
         const current = getSortDirection(columnId);
@@ -5637,7 +5996,7 @@ function DataGrid({
     },
     [getSortDirection, toggleSort]
   );
-  const isCellSelected = useCallback14(
+  const isCellSelected = useCallback15(
     (rowIndex, colIndex) => {
       if (!selectionBounds) {
         return selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
@@ -5679,54 +6038,54 @@ function DataGrid({
     }
     return String(value);
   };
-  const totalTableWidth = useMemo14(() => {
+  const totalTableWidth = useMemo15(() => {
     return columnKeys.reduce((sum, key) => sum + (columnWidths[key] || MIN_COL_WIDTH), 0);
   }, [columnKeys, columnWidths]);
   const activeFilterCount = columnFilters.length;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: `vpg-data-grid vpg-font-${currentFontSize} vpg-theme-${currentTheme} ${stripedRows ? "vpg-striped" : ""} ${resizingColumnId ? "vpg-resizing" : ""} ${isResizingVertically ? "vpg-resizing-vertical" : ""}`,
       style: { height: `${gridHeight}px` },
       children: [
-        showCopyToast && /* @__PURE__ */ jsxs9("div", { className: "vpg-toast", children: [
-          /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+        showCopyToast && /* @__PURE__ */ jsxs10("div", { className: "vpg-toast", children: [
+          /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
           copyToastMessage
         ] }),
-        /* @__PURE__ */ jsxs9("div", { className: "vpg-toolbar", children: [
-          /* @__PURE__ */ jsxs9("div", { className: "vpg-toolbar-left", children: [
-            showPivot && /* @__PURE__ */ jsxs9("div", { className: "vpg-view-toggle", children: [
-              showAIAnalyst && /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10("div", { className: "vpg-toolbar", children: [
+          /* @__PURE__ */ jsxs10("div", { className: "vpg-toolbar-left", children: [
+            showPivot && /* @__PURE__ */ jsxs10("div", { className: "vpg-view-toggle", children: [
+              showAIAnalyst && /* @__PURE__ */ jsxs10(
                 "button",
                 {
                   className: `vpg-view-btn vpg-ai-btn ${viewMode === "ai" ? "active" : ""}`,
                   onClick: () => setViewMode("ai"),
                   children: [
-                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }) }),
+                    /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }) }),
                     "AI Analyst"
                   ]
                 }
               ),
-              aiAnalyst?.enabled && !canUseAIAnalyst && /* @__PURE__ */ jsxs9(
+              aiAnalyst?.enabled && !canUseAIAnalyst && /* @__PURE__ */ jsxs10(
                 "button",
                 {
                   className: "vpg-view-btn vpg-ai-btn vpg-pro-feature",
                   title: "AI Analyst (Pro feature)",
                   onClick: (e) => e.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }) }),
+                    /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }) }),
                     "AI Analyst",
-                    /* @__PURE__ */ jsx9("span", { className: "vpg-pro-badge", children: "Pro" })
+                    /* @__PURE__ */ jsx10("span", { className: "vpg-pro-badge", children: "Pro" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsxs10(
                 "button",
                 {
                   className: `vpg-view-btn ${viewMode === "grid" ? "active" : ""}`,
                   onClick: () => setViewMode("grid"),
                   children: [
-                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5739,13 +6098,13 @@ function DataGrid({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsxs10(
                 "button",
                 {
                   className: `vpg-view-btn vpg-pivot-btn ${viewMode === "pivot" ? "active" : ""}`,
                   onClick: () => setViewMode("pivot"),
                   children: [
-                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5758,14 +6117,14 @@ function DataGrid({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsxs10(
                 "button",
                 {
                   className: `vpg-view-btn vpg-chart-btn ${viewMode === "chart" ? "active" : ""} ${!canUseCharts ? "vpg-pro-feature" : ""}`,
                   title: canUseCharts ? "Chart Builder" : "Chart Builder (Pro feature)",
                   onClick: () => canUseCharts && setViewMode("chart"),
                   children: [
-                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5775,19 +6134,19 @@ function DataGrid({
                       }
                     ) }),
                     "Chart",
-                    !canUseCharts && /* @__PURE__ */ jsx9("span", { className: "vpg-pro-badge", children: "Pro" })
+                    !canUseCharts && /* @__PURE__ */ jsx10("span", { className: "vpg-pro-badge", children: "Pro" })
                   ]
                 }
               )
             ] }),
-            viewMode === "grid" && /* @__PURE__ */ jsxs9(Fragment6, { children: [
-              enableSearch && /* @__PURE__ */ jsx9("div", { className: "vpg-search-container", children: !showSearchInput ? /* @__PURE__ */ jsx9(
+            viewMode === "grid" && /* @__PURE__ */ jsxs10(Fragment7, { children: [
+              enableSearch && /* @__PURE__ */ jsx10("div", { className: "vpg-search-container", children: !showSearchInput ? /* @__PURE__ */ jsx10(
                 "button",
                 {
                   className: "vpg-icon-btn",
                   title: "Search (Ctrl+F)",
                   onClick: () => setShowSearchInput(true),
-                  children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                  children: /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -5797,15 +6156,15 @@ function DataGrid({
                     }
                   ) })
                 }
-              ) : /* @__PURE__ */ jsxs9("div", { className: "vpg-search-box", children: [
-                /* @__PURE__ */ jsx9(
+              ) : /* @__PURE__ */ jsxs10("div", { className: "vpg-search-box", children: [
+                /* @__PURE__ */ jsx10(
                   "svg",
                   {
                     className: "vpg-search-icon",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ jsx9(
+                    children: /* @__PURE__ */ jsx10(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5816,7 +6175,7 @@ function DataGrid({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "input",
                   {
                     type: "text",
@@ -5833,14 +6192,14 @@ function DataGrid({
                     autoFocus: true
                   }
                 ),
-                globalSearchTerm && /* @__PURE__ */ jsx9("button", { className: "vpg-search-clear", onClick: () => setGlobalSearchTerm(""), children: /* @__PURE__ */ jsx9(
+                globalSearchTerm && /* @__PURE__ */ jsx10("button", { className: "vpg-search-clear", onClick: () => setGlobalSearchTerm(""), children: /* @__PURE__ */ jsx10(
                   "svg",
                   {
                     className: "vpg-icon-xs",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ jsx9(
+                    children: /* @__PURE__ */ jsx10(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5852,9 +6211,9 @@ function DataGrid({
                   }
                 ) })
               ] }) }),
-              /* @__PURE__ */ jsxs9("div", { className: "vpg-font-size-control", children: [
-                /* @__PURE__ */ jsx9("span", { className: "vpg-label", children: "Size:" }),
-                /* @__PURE__ */ jsx9("div", { className: "vpg-font-size-toggle", children: fontSizeOptions.map((opt) => /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsxs10("div", { className: "vpg-font-size-control", children: [
+                /* @__PURE__ */ jsx10("span", { className: "vpg-label", children: "Size:" }),
+                /* @__PURE__ */ jsx10("div", { className: "vpg-font-size-toggle", children: fontSizeOptions.map((opt) => /* @__PURE__ */ jsx10(
                   "button",
                   {
                     className: `vpg-font-size-btn ${currentFontSize === opt.value ? "active" : ""}`,
@@ -5864,8 +6223,8 @@ function DataGrid({
                   opt.value
                 )) })
               ] }),
-              activeFilterCount > 0 && /* @__PURE__ */ jsxs9("div", { className: "vpg-filter-info", children: [
-                /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx9(
+              activeFilterCount > 0 && /* @__PURE__ */ jsxs10("div", { className: "vpg-filter-info", children: [
+                /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx10(
                   "path",
                   {
                     fillRule: "evenodd",
@@ -5873,28 +6232,28 @@ function DataGrid({
                     clipRule: "evenodd"
                   }
                 ) }),
-                /* @__PURE__ */ jsxs9("span", { children: [
+                /* @__PURE__ */ jsxs10("span", { children: [
                   activeFilterCount,
                   " ",
                   "filter",
                   activeFilterCount > 1 ? "s" : ""
                 ] })
               ] }),
-              globalSearchTerm && /* @__PURE__ */ jsx9("div", { className: "vpg-search-info", children: /* @__PURE__ */ jsxs9("span", { children: [
+              globalSearchTerm && /* @__PURE__ */ jsx10("div", { className: "vpg-search-info", children: /* @__PURE__ */ jsxs10("span", { children: [
                 totalSearchedRows,
                 " ",
                 "match",
                 totalSearchedRows !== 1 ? "es" : ""
               ] }) })
             ] }),
-            viewMode === "pivot" && canUsePivot && /* @__PURE__ */ jsxs9(Fragment6, { children: [
-              /* @__PURE__ */ jsxs9(
+            viewMode === "pivot" && canUsePivot && /* @__PURE__ */ jsxs10(Fragment7, { children: [
+              /* @__PURE__ */ jsxs10(
                 "button",
                 {
                   className: `vpg-config-toggle ${showPivotConfig ? "active" : ""}`,
                   onClick: () => setShowPivotConfig(!showPivotConfig),
                   children: [
-                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5909,8 +6268,8 @@ function DataGrid({
                   ]
                 }
               ),
-              pivotIsConfigured && /* @__PURE__ */ jsxs9("div", { className: "vpg-pivot-status", children: [
-                /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx9(
+              pivotIsConfigured && /* @__PURE__ */ jsxs10("div", { className: "vpg-pivot-status", children: [
+                /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx10(
                   "path",
                   {
                     fillRule: "evenodd",
@@ -5918,13 +6277,13 @@ function DataGrid({
                     clipRule: "evenodd"
                   }
                 ) }),
-                /* @__PURE__ */ jsx9("span", { children: "Pivot configured" })
+                /* @__PURE__ */ jsx10("span", { children: "Pivot configured" })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs9("div", { className: "vpg-toolbar-right", children: [
-            viewMode === "grid" && activeFilterCount > 0 && /* @__PURE__ */ jsxs9("button", { className: "vpg-clear-filters", onClick: clearAllFilters, children: [
-              /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs10("div", { className: "vpg-toolbar-right", children: [
+            viewMode === "grid" && activeFilterCount > 0 && /* @__PURE__ */ jsxs10("button", { className: "vpg-clear-filters", onClick: clearAllFilters, children: [
+              /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -5935,7 +6294,7 @@ function DataGrid({
               ) }),
               "Clear Filters"
             ] }),
-            viewMode === "grid" && isShowingAIData && /* @__PURE__ */ jsxs9(
+            viewMode === "grid" && isShowingAIData && /* @__PURE__ */ jsxs10(
               "button",
               {
                 className: `vpg-reset-data-btn${isLoadingFullData ? " vpg-loading-btn" : ""}`,
@@ -5943,7 +6302,7 @@ function DataGrid({
                 title: "Reset to full dataset",
                 onClick: resetToFullData,
                 children: [
-                  /* @__PURE__ */ jsx9("svg", { className: `vpg-icon${isLoadingFullData ? " vpg-spin" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10("svg", { className: `vpg-icon${isLoadingFullData ? " vpg-spin" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -5952,17 +6311,17 @@ function DataGrid({
                       d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                     }
                   ) }),
-                  /* @__PURE__ */ jsx9("span", { children: isLoadingFullData ? "Loading..." : "Full Data" })
+                  /* @__PURE__ */ jsx10("span", { children: isLoadingFullData ? "Loading..." : "Full Data" })
                 ]
               }
             ),
-            enableClipboard && selectionBounds && viewMode === "grid" && /* @__PURE__ */ jsx9(
+            enableClipboard && selectionBounds && viewMode === "grid" && /* @__PURE__ */ jsx10(
               "button",
               {
                 className: "vpg-icon-btn",
                 title: "Copy selection (Ctrl+C)",
                 onClick: copySelectionToClipboard,
-                children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                children: /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -5973,14 +6332,14 @@ function DataGrid({
                 ) })
               }
             ),
-            enableExport && viewMode === "grid" && /* @__PURE__ */ jsxs9(
+            enableExport && viewMode === "grid" && /* @__PURE__ */ jsxs10(
               "button",
               {
                 className: "vpg-export-btn",
                 title: "Export to CSV",
                 onClick: handleExport,
                 children: [
-                  /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -5993,7 +6352,7 @@ function DataGrid({
                 ]
               }
             ),
-            enableExport && viewMode === "pivot" && pivotIsConfigured && /* @__PURE__ */ jsxs9(
+            enableExport && viewMode === "pivot" && pivotIsConfigured && /* @__PURE__ */ jsxs10(
               "button",
               {
                 className: `vpg-export-btn ${!isPro ? "vpg-export-btn-disabled" : ""}`,
@@ -6001,7 +6360,7 @@ function DataGrid({
                 title: isPro ? "Export Pivot to CSV" : "Export Pivot to CSV (Pro feature)",
                 onClick: () => isPro && handleExport(),
                 children: [
-                  /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -6017,7 +6376,7 @@ function DataGrid({
             )
           ] })
         ] }),
-        showAIAnalyst && aiAnalyst && /* @__PURE__ */ jsx9("div", { className: "vpg-ai-view", style: { display: viewMode === "ai" ? void 0 : "none" }, children: /* @__PURE__ */ jsx9(
+        showAIAnalyst && aiAnalyst && /* @__PURE__ */ jsx10("div", { className: "vpg-ai-view", style: { display: viewMode === "ai" ? void 0 : "none" }, children: /* @__PURE__ */ jsx10(
           AIAnalyst,
           {
             ref: aiAnalystRef,
@@ -6029,13 +6388,13 @@ function DataGrid({
             onError: handleAIError
           }
         ) }),
-        viewMode === "grid" && /* @__PURE__ */ jsxs9("div", { ref: tableContainerRef, className: "vpg-grid-container", tabIndex: 0, children: [
-          loading && /* @__PURE__ */ jsxs9("div", { className: "vpg-loading", children: [
-            /* @__PURE__ */ jsx9("div", { className: "vpg-spinner" }),
-            /* @__PURE__ */ jsx9("span", { children: "Loading data..." })
+        viewMode === "grid" && /* @__PURE__ */ jsxs10("div", { ref: tableContainerRef, className: "vpg-grid-container", tabIndex: 0, children: [
+          loading && /* @__PURE__ */ jsxs10("div", { className: "vpg-loading", children: [
+            /* @__PURE__ */ jsx10("div", { className: "vpg-spinner" }),
+            /* @__PURE__ */ jsx10("span", { children: "Loading data..." })
           ] }),
-          !loading && displayData.length === 0 && /* @__PURE__ */ jsxs9("div", { className: "vpg-empty", children: [
-            /* @__PURE__ */ jsx9("div", { className: "vpg-empty-icon", children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+          !loading && displayData.length === 0 && /* @__PURE__ */ jsxs10("div", { className: "vpg-empty", children: [
+            /* @__PURE__ */ jsx10("div", { className: "vpg-empty-icon", children: /* @__PURE__ */ jsx10("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
               "path",
               {
                 strokeLinecap: "round",
@@ -6044,10 +6403,10 @@ function DataGrid({
                 d: "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
               }
             ) }) }),
-            /* @__PURE__ */ jsx9("span", { children: "No data available" })
+            /* @__PURE__ */ jsx10("span", { children: "No data available" })
           ] }),
-          !loading && displayData.length > 0 && filteredRowCount === 0 && /* @__PURE__ */ jsxs9("div", { className: "vpg-empty", children: [
-            /* @__PURE__ */ jsx9("div", { className: "vpg-empty-icon vpg-warning", children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+          !loading && displayData.length > 0 && filteredRowCount === 0 && /* @__PURE__ */ jsxs10("div", { className: "vpg-empty", children: [
+            /* @__PURE__ */ jsx10("div", { className: "vpg-empty-icon vpg-warning", children: /* @__PURE__ */ jsx10("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
               "path",
               {
                 strokeLinecap: "round",
@@ -6056,11 +6415,11 @@ function DataGrid({
                 d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
               }
             ) }) }),
-            /* @__PURE__ */ jsx9("span", { children: "No matching records" }),
-            /* @__PURE__ */ jsx9("button", { className: "vpg-clear-link", onClick: clearAllFilters, children: "Clear all filters" })
+            /* @__PURE__ */ jsx10("span", { children: "No matching records" }),
+            /* @__PURE__ */ jsx10("button", { className: "vpg-clear-link", onClick: clearAllFilters, children: "Clear all filters" })
           ] }),
-          !loading && filteredRowCount > 0 && /* @__PURE__ */ jsx9("div", { className: "vpg-table-wrapper", children: /* @__PURE__ */ jsxs9("table", { className: "vpg-table", style: { minWidth: `${totalTableWidth}px` }, children: [
-            /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { children: columnKeys.map((colId) => /* @__PURE__ */ jsxs9(
+          !loading && filteredRowCount > 0 && /* @__PURE__ */ jsx10("div", { className: "vpg-table-wrapper", children: /* @__PURE__ */ jsxs10("table", { className: "vpg-table", style: { minWidth: `${totalTableWidth}px` }, children: [
+            /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsx10("tr", { children: columnKeys.map((colId) => /* @__PURE__ */ jsxs10(
               "th",
               {
                 className: `vpg-header-cell ${hasActiveFilter(colId) ? "vpg-has-filter" : ""} ${getSortDirection(colId) !== null ? "vpg-is-sorted" : ""} ${activeFilterColumn === colId ? "vpg-is-active" : ""}`,
@@ -6075,16 +6434,16 @@ function DataGrid({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsxs9("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx9("span", { className: "vpg-header-text", children: colId }),
-                    /* @__PURE__ */ jsxs9("div", { className: "vpg-header-icons", children: [
-                      getSortDirection(colId) && /* @__PURE__ */ jsx9("span", { className: "vpg-sort-indicator", children: getSortDirection(colId) === "asc" ? /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsxs10("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ jsx10("span", { className: "vpg-header-text", children: colId }),
+                    /* @__PURE__ */ jsxs10("div", { className: "vpg-header-icons", children: [
+                      getSortDirection(colId) && /* @__PURE__ */ jsx10("span", { className: "vpg-sort-indicator", children: getSortDirection(colId) === "asc" ? /* @__PURE__ */ jsx10(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ jsx9(
+                          children: /* @__PURE__ */ jsx10(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -6093,13 +6452,13 @@ function DataGrid({
                             }
                           )
                         }
-                      ) : /* @__PURE__ */ jsx9(
+                      ) : /* @__PURE__ */ jsx10(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ jsx9(
+                          children: /* @__PURE__ */ jsx10(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -6109,13 +6468,13 @@ function DataGrid({
                           )
                         }
                       ) }),
-                      hasActiveFilter(colId) && /* @__PURE__ */ jsx9("span", { className: "vpg-filter-indicator", children: /* @__PURE__ */ jsx9(
+                      hasActiveFilter(colId) && /* @__PURE__ */ jsx10("span", { className: "vpg-filter-indicator", children: /* @__PURE__ */ jsx10(
                         "svg",
                         {
                           className: "vpg-icon-xs",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ jsx9(
+                          children: /* @__PURE__ */ jsx10(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -6125,14 +6484,14 @@ function DataGrid({
                           )
                         }
                       ) }),
-                      /* @__PURE__ */ jsx9("span", { className: "vpg-dropdown-arrow", title: "Filter & Sort", children: /* @__PURE__ */ jsx9(
+                      /* @__PURE__ */ jsx10("span", { className: "vpg-dropdown-arrow", title: "Filter & Sort", children: /* @__PURE__ */ jsx10(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "none",
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsx9(
+                          children: /* @__PURE__ */ jsx10(
                             "path",
                             {
                               strokeLinecap: "round",
@@ -6145,7 +6504,7 @@ function DataGrid({
                       ) })
                     ] })
                   ] }),
-                  enableColumnResize && /* @__PURE__ */ jsx9(
+                  enableColumnResize && /* @__PURE__ */ jsx10(
                     "div",
                     {
                       className: "vpg-resize-handle",
@@ -6156,7 +6515,7 @@ function DataGrid({
               },
               colId
             )) }) }),
-            /* @__PURE__ */ jsx9("tbody", { ref: tableBodyRef, children: paginatedRows.map((row, rowIndex) => /* @__PURE__ */ jsx9("tr", { className: "vpg-row", children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10("tbody", { ref: tableBodyRef, children: paginatedRows.map((row, rowIndex) => /* @__PURE__ */ jsx10("tr", { className: "vpg-row", children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ jsx10(
               "td",
               {
                 className: `vpg-cell ${isCellSelected(rowIndex, colIndex) ? "vpg-selected" : ""} ${getColumnStats(colId).type === "number" ? "vpg-is-number" : ""}`,
@@ -6174,8 +6533,8 @@ function DataGrid({
             )) }, row.id)) })
           ] }) })
         ] }),
-        viewMode === "pivot" && /* @__PURE__ */ jsxs9("div", { className: "vpg-pivot-container", children: [
-          showPivotConfig && canUsePivot && /* @__PURE__ */ jsx9("div", { className: "vpg-pivot-config-panel", children: /* @__PURE__ */ jsx9(
+        viewMode === "pivot" && /* @__PURE__ */ jsxs10("div", { className: "vpg-pivot-container", children: [
+          showPivotConfig && canUsePivot && /* @__PURE__ */ jsx10("div", { className: "vpg-pivot-config-panel", children: /* @__PURE__ */ jsx10(
             PivotConfig,
             {
               availableFields: pivotAvailableFields,
@@ -6204,37 +6563,55 @@ function DataGrid({
               theme: currentTheme
             }
           ) }),
-          /* @__PURE__ */ jsx9("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ jsx9(
-            PivotSkeleton,
-            {
-              rowFields: pivotRowFields,
-              columnFields: pivotColumnFields,
-              valueFields: pivotValueFields,
-              calculatedFields: pivotCalculatedFields,
-              isConfigured: pivotIsConfigured,
-              draggingField,
-              pivotResult,
-              fontSize: currentFontSize,
-              activeFilters: activeFilterInfo,
-              totalRowCount,
-              filteredRowCount,
-              onAddRowField: addRowField,
-              onRemoveRowField: removeRowField,
-              onAddColumnField: addColumnField,
-              onRemoveColumnField: removeColumnField,
-              onAddValueField: addValueField,
-              onRemoveValueField: removeValueField,
-              onUpdateAggregation: updateValueFieldAggregation,
-              onReorderRowFields: setRowFields,
-              onReorderColumnFields: setColumnFields,
-              theme: currentTheme
-            }
-          ) })
+          /* @__PURE__ */ jsxs10("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: [
+            /* @__PURE__ */ jsx10(
+              PivotSkeleton,
+              {
+                rowFields: pivotRowFields,
+                columnFields: pivotColumnFields,
+                valueFields: pivotValueFields,
+                calculatedFields: pivotCalculatedFields,
+                isConfigured: pivotIsConfigured,
+                draggingField,
+                pivotResult,
+                fontSize: currentFontSize,
+                activeFilters: activeFilterInfo,
+                totalRowCount,
+                filteredRowCount,
+                enableDrillDown,
+                enableDrillThrough,
+                onAddRowField: addRowField,
+                onRemoveRowField: removeRowField,
+                onAddColumnField: addColumnField,
+                onRemoveColumnField: removeColumnField,
+                onAddValueField: addValueField,
+                onRemoveValueField: removeValueField,
+                onUpdateAggregation: updateValueFieldAggregation,
+                onReorderRowFields: setRowFields,
+                onReorderColumnFields: setColumnFields,
+                onToggleCollapse: handleToggleCollapse,
+                onDrillThroughCell: handleDrillThroughCell,
+                theme: currentTheme
+              }
+            ),
+            /* @__PURE__ */ jsx10(
+              DrillThroughModal,
+              {
+                show: showDrillThroughModal,
+                result: drillThroughResult,
+                rowFields: pivotRowFields,
+                columnFields: pivotColumnFields,
+                valueFields: pivotValueFields,
+                theme: currentTheme,
+                onClose: handleCloseDrillThroughModal
+              }
+            )
+          ] })
         ] }),
-        viewMode === "chart" && /* @__PURE__ */ jsxs9("div", { className: "vpg-chart-view", children: [
-          activeFilterInfo && activeFilterInfo.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "vpg-chart-filter-bar", children: [
-            /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx9("path", { fillRule: "evenodd", d: "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z", clipRule: "evenodd" }) }),
-            /* @__PURE__ */ jsxs9("span", { children: [
+        viewMode === "chart" && /* @__PURE__ */ jsxs10("div", { className: "vpg-chart-view", children: [
+          activeFilterInfo && activeFilterInfo.length > 0 && /* @__PURE__ */ jsxs10("div", { className: "vpg-chart-filter-bar", children: [
+            /* @__PURE__ */ jsx10("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx10("path", { fillRule: "evenodd", d: "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z", clipRule: "evenodd" }) }),
+            /* @__PURE__ */ jsxs10("span", { children: [
               "Chart showing",
               filteredRowCount.toLocaleString(),
               " ",
@@ -6243,9 +6620,9 @@ function DataGrid({
               " ",
               "records"
             ] }),
-            /* @__PURE__ */ jsx9("button", { className: "vpg-chart-clear-filters", onClick: clearAllFilters, children: "Clear filters" })
+            /* @__PURE__ */ jsx10("button", { className: "vpg-chart-clear-filters", onClick: clearAllFilters, children: "Clear filters" })
           ] }),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             ChartBuilder,
             {
               data: filteredDataForPivot,
@@ -6255,55 +6632,55 @@ function DataGrid({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs9("div", { className: "vpg-footer", children: [
-          /* @__PURE__ */ jsx9("div", { className: "vpg-footer-left", children: viewMode === "grid" ? enablePagination ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
-            /* @__PURE__ */ jsxs9("span", { children: [
+        /* @__PURE__ */ jsxs10("div", { className: "vpg-footer", children: [
+          /* @__PURE__ */ jsx10("div", { className: "vpg-footer-left", children: viewMode === "grid" ? enablePagination ? /* @__PURE__ */ jsxs10(Fragment7, { children: [
+            /* @__PURE__ */ jsxs10("span", { children: [
               ((currentPage - 1) * pageSize + 1).toLocaleString(),
               "-",
               Math.min(currentPage * pageSize, totalSearchedRows).toLocaleString()
             ] }),
-            /* @__PURE__ */ jsx9("span", { className: "vpg-separator", children: "of" }),
-            /* @__PURE__ */ jsx9("span", { children: totalSearchedRows.toLocaleString() }),
-            totalSearchedRows !== totalRowCount && /* @__PURE__ */ jsxs9("span", { className: "vpg-filtered-note", children: [
+            /* @__PURE__ */ jsx10("span", { className: "vpg-separator", children: "of" }),
+            /* @__PURE__ */ jsx10("span", { children: totalSearchedRows.toLocaleString() }),
+            totalSearchedRows !== totalRowCount && /* @__PURE__ */ jsxs10("span", { className: "vpg-filtered-note", children: [
               "(",
               totalRowCount.toLocaleString(),
               " ",
               "total)"
             ] })
-          ] }) : filteredRowCount === totalRowCount && totalSearchedRows === totalRowCount ? /* @__PURE__ */ jsxs9("span", { children: [
+          ] }) : filteredRowCount === totalRowCount && totalSearchedRows === totalRowCount ? /* @__PURE__ */ jsxs10("span", { children: [
             totalRowCount.toLocaleString(),
             " ",
             "records"
-          ] }) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
-            /* @__PURE__ */ jsx9("span", { className: "vpg-filtered-count", children: totalSearchedRows.toLocaleString() }),
-            /* @__PURE__ */ jsx9("span", { className: "vpg-separator", children: "of" }),
-            /* @__PURE__ */ jsx9("span", { children: totalRowCount.toLocaleString() }),
-            /* @__PURE__ */ jsx9("span", { className: "vpg-separator", children: "records" })
-          ] }) : viewMode === "pivot" ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
-            /* @__PURE__ */ jsx9("span", { className: "vpg-pivot-label", children: "Pivot Table" }),
-            /* @__PURE__ */ jsx9("span", { className: "vpg-separator", children: "\u2022" }),
-            /* @__PURE__ */ jsxs9("span", { children: [
+          ] }) : /* @__PURE__ */ jsxs10(Fragment7, { children: [
+            /* @__PURE__ */ jsx10("span", { className: "vpg-filtered-count", children: totalSearchedRows.toLocaleString() }),
+            /* @__PURE__ */ jsx10("span", { className: "vpg-separator", children: "of" }),
+            /* @__PURE__ */ jsx10("span", { children: totalRowCount.toLocaleString() }),
+            /* @__PURE__ */ jsx10("span", { className: "vpg-separator", children: "records" })
+          ] }) : viewMode === "pivot" ? /* @__PURE__ */ jsxs10(Fragment7, { children: [
+            /* @__PURE__ */ jsx10("span", { className: "vpg-pivot-label", children: "Pivot Table" }),
+            /* @__PURE__ */ jsx10("span", { className: "vpg-separator", children: "\u2022" }),
+            /* @__PURE__ */ jsxs10("span", { children: [
               totalRowCount.toLocaleString(),
               " ",
               "source records"
             ] })
-          ] }) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
-            /* @__PURE__ */ jsx9("span", { className: "vpg-chart-label", children: "Chart Builder" }),
-            /* @__PURE__ */ jsx9("span", { className: "vpg-separator", children: "\u2022" }),
-            /* @__PURE__ */ jsxs9("span", { children: [
+          ] }) : /* @__PURE__ */ jsxs10(Fragment7, { children: [
+            /* @__PURE__ */ jsx10("span", { className: "vpg-chart-label", children: "Chart Builder" }),
+            /* @__PURE__ */ jsx10("span", { className: "vpg-separator", children: "\u2022" }),
+            /* @__PURE__ */ jsxs10("span", { children: [
               totalRowCount.toLocaleString(),
               " ",
               "records"
             ] })
           ] }) }),
-          enablePagination && viewMode === "grid" && totalPages > 1 && /* @__PURE__ */ jsxs9("div", { className: "vpg-pagination", children: [
-            /* @__PURE__ */ jsx9(
+          enablePagination && viewMode === "grid" && totalPages > 1 && /* @__PURE__ */ jsxs10("div", { className: "vpg-pagination", children: [
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === 1,
                 onClick: () => setCurrentPage(1),
-                children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                children: /* @__PURE__ */ jsx10("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -6314,13 +6691,13 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === 1,
                 onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
-                children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                children: /* @__PURE__ */ jsx10("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -6331,7 +6708,7 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsxs9("span", { className: "vpg-page-info", children: [
+            /* @__PURE__ */ jsxs10("span", { className: "vpg-page-info", children: [
               "Page",
               " ",
               currentPage,
@@ -6340,13 +6717,13 @@ function DataGrid({
               " ",
               totalPages
             ] }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === totalPages,
                 onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
-                children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                children: /* @__PURE__ */ jsx10("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -6357,13 +6734,13 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === totalPages,
                 onClick: () => setCurrentPage(totalPages),
-                children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
+                children: /* @__PURE__ */ jsx10("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -6375,45 +6752,45 @@ function DataGrid({
               }
             )
           ] }),
-          viewMode === "grid" && selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs9("div", { className: "vpg-selection-stats", children: [
-            /* @__PURE__ */ jsxs9("span", { className: "vpg-stat", children: [
-              /* @__PURE__ */ jsx9("span", { className: "vpg-stat-label", children: "Count:" }),
-              /* @__PURE__ */ jsx9("span", { className: "vpg-stat-value", children: selectionStats.count })
+          viewMode === "grid" && selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs10("div", { className: "vpg-selection-stats", children: [
+            /* @__PURE__ */ jsxs10("span", { className: "vpg-stat", children: [
+              /* @__PURE__ */ jsx10("span", { className: "vpg-stat-label", children: "Count:" }),
+              /* @__PURE__ */ jsx10("span", { className: "vpg-stat-value", children: selectionStats.count })
             ] }),
-            selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs9(Fragment6, { children: [
-              /* @__PURE__ */ jsx9("span", { className: "vpg-stat-divider", children: "|" }),
-              /* @__PURE__ */ jsxs9("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-label", children: "Sum:" }),
-                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
+            selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs10(Fragment7, { children: [
+              /* @__PURE__ */ jsx10("span", { className: "vpg-stat-divider", children: "|" }),
+              /* @__PURE__ */ jsxs10("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ jsx10("span", { className: "vpg-stat-label", children: "Sum:" }),
+                /* @__PURE__ */ jsx10("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
               ] }),
-              /* @__PURE__ */ jsx9("span", { className: "vpg-stat-divider", children: "|" }),
-              /* @__PURE__ */ jsxs9("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-label", children: "Avg:" }),
-                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
+              /* @__PURE__ */ jsx10("span", { className: "vpg-stat-divider", children: "|" }),
+              /* @__PURE__ */ jsxs10("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ jsx10("span", { className: "vpg-stat-label", children: "Avg:" }),
+                /* @__PURE__ */ jsx10("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx9("div", { className: "vpg-footer-right", children: isDemo ? /* @__PURE__ */ jsxs9("div", { className: "vpg-demo-banner", children: [
-            /* @__PURE__ */ jsx9("span", { className: "vpg-demo-badge", children: "DEMO" }),
-            /* @__PURE__ */ jsx9("span", { children: "Pro features enabled" }),
-            /* @__PURE__ */ jsx9("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", children: "Get License \u2192" })
-          ] }) : showWatermark ? /* @__PURE__ */ jsx9("span", { className: "vpg-watermark-inline", children: /* @__PURE__ */ jsxs9("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: [
-            /* @__PURE__ */ jsxs9("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx9("rect", { x: "3", y: "3", width: "7", height: "7" }),
-              /* @__PURE__ */ jsx9("rect", { x: "14", y: "3", width: "7", height: "7" }),
-              /* @__PURE__ */ jsx9("rect", { x: "14", y: "14", width: "7", height: "7" }),
-              /* @__PURE__ */ jsx9("rect", { x: "3", y: "14", width: "7", height: "7" })
+          /* @__PURE__ */ jsx10("div", { className: "vpg-footer-right", children: isDemo ? /* @__PURE__ */ jsxs10("div", { className: "vpg-demo-banner", children: [
+            /* @__PURE__ */ jsx10("span", { className: "vpg-demo-badge", children: "DEMO" }),
+            /* @__PURE__ */ jsx10("span", { children: "Pro features enabled" }),
+            /* @__PURE__ */ jsx10("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", children: "Get License \u2192" })
+          ] }) : showWatermark ? /* @__PURE__ */ jsx10("span", { className: "vpg-watermark-inline", children: /* @__PURE__ */ jsxs10("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: [
+            /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx10("rect", { x: "3", y: "3", width: "7", height: "7" }),
+              /* @__PURE__ */ jsx10("rect", { x: "14", y: "3", width: "7", height: "7" }),
+              /* @__PURE__ */ jsx10("rect", { x: "14", y: "14", width: "7", height: "7" }),
+              /* @__PURE__ */ jsx10("rect", { x: "3", y: "14", width: "7", height: "7" })
             ] }),
             "Powered by TinyPivot"
           ] }) }) : null })
         ] }),
-        enableVerticalResize && /* @__PURE__ */ jsx9("div", { className: "vpg-vertical-resize-handle", onMouseDown: startVerticalResize, children: /* @__PURE__ */ jsxs9("div", { className: "vpg-resize-grip", children: [
-          /* @__PURE__ */ jsx9("span", {}),
-          /* @__PURE__ */ jsx9("span", {}),
-          /* @__PURE__ */ jsx9("span", {})
+        enableVerticalResize && /* @__PURE__ */ jsx10("div", { className: "vpg-vertical-resize-handle", onMouseDown: startVerticalResize, children: /* @__PURE__ */ jsxs10("div", { className: "vpg-resize-grip", children: [
+          /* @__PURE__ */ jsx10("span", {}),
+          /* @__PURE__ */ jsx10("span", {}),
+          /* @__PURE__ */ jsx10("span", {})
         ] }) }),
-        activeFilterColumn && typeof document !== "undefined" && createPortal2(
-          /* @__PURE__ */ jsx9(
+        activeFilterColumn && typeof document !== "undefined" && createPortal3(
+          /* @__PURE__ */ jsx10(
             "div",
             {
               className: "vpg-filter-portal",
@@ -6424,7 +6801,7 @@ function DataGrid({
                 maxHeight: `${filterDropdownPosition.maxHeight}px`,
                 zIndex: 9999
               },
-              children: /* @__PURE__ */ jsx9(
+              children: /* @__PURE__ */ jsx10(
                 ColumnFilter,
                 {
                   columnId: activeFilterColumn,