react-pivottable-plus 1.0.20 → 1.1.6

package/README.md

@@ -37,7 +37,7 @@ npm install react-pivottable-plus
 ```jsx
 import React, { useState } from 'react';
 import PivotTableUI from 'react-pivottable-plus';
-import 'react-pivottable-plus/pivottable.css';
+import 'react-pivottable-plus/react_pivottable_plus.css';
 
 const data = [
   { producto: "Manzana", categoria: "Fruta", ventas: 100 },
@@ -71,7 +71,7 @@ Crea un componente cliente dedicado para encapsular el pivot table:
 
 import React, { useState } from 'react';
 import PivotTableUI from 'react-pivottable-plus';
-import 'react-pivottable-plus/pivottable.css';
+import 'react-pivottable-plus/react_pivottable_plus.css';
 
 export default function PivotWrapper({ data }) {
   const [state, setState] = useState({});
@@ -107,7 +107,7 @@ export default function Page() {
 ```jsx
 // pages/dashboard.jsx
 import dynamic from 'next/dynamic';
-import 'react-pivottable-plus/pivottable.css';
+import 'react-pivottable-plus/react_pivottable_plus.css';
 
 // Importación dinámica para evitar errores de SSR
 const PivotTableUI = dynamic(
@@ -150,6 +150,30 @@ const nextConfig = {
 module.exports = nextConfig;
 ```
 
+---
+
+## 🛠️ Solución de Problemas (Troubleshooting)
+
+### ❌ Error: `Module not found: Can't resolve 'react-pivottable-plus/react_pivottable_plus.css'`
+
+Este error suele ocurrir en versiones antiguas o por confusión con el fork original. **react-pivottable-plus** ha estandarizado su archivo de estilos para que coincida con la identidad de la librería.
+
+**Solución Oficial:**
+Asegúrate de estar usando la ruta oficial que ahora coincide con el nombre de la librería para evitar confusiones:
+
+```js
+import 'react-pivottable-plus/react_pivottable_plus.css';
+```
+
+> [!NOTE]
+> Aunque `pivottable.css` sigue funcionando como alias por compatibilidad, recomendamos migrar a `react_pivottable_plus.css`.
+
+### ❌ Error: `ReferenceError: window is not defined`
+El componente debe cargarse únicamente en el cliente. Asegúrate de añadir la directiva `"use client"` al inicio de tu archivo o usar importación dinámica con `ssr: false`.
+
+### ❌ Estilos no se aplican correctamente
+Si los estilos se ven básicos o desordenados, verifica que has importado el CSS obligatorio en tu punto de entrada principal.
+
 ## 🌈 Uso de Renderizadores Modernos
 
 ```jsx
@@ -157,7 +181,7 @@ module.exports = nextConfig;
 
 import PivotTableUI from 'react-pivottable-plus';
 import { TailwindUI } from 'react-pivottable-plus/renderers/TailwindUI';
-import 'react-pivottable-plus/pivottable.css';
+import 'react-pivottable-plus/react_pivottable_plus.css';
 
 <PivotTableUI
   data={data}
@@ -183,7 +207,7 @@ import 'react-pivottable-plus/pivottable.css';
 
 ---
 
-Este proyecto es un fork mantenido de `react-pivottable` con el objetivo de proporcionar una experiencia de usuario superior y compatibilidad con las últimas versiones de React.
+Este proyecto es la evolución profesional de las tablas dinámicas en React, diseñado para proporcionar una experiencia de usuario superior, rendimiento de grado industrial y compatibilidad total con el stack moderno (React 18/19, Next.js, Tailwind).
 
 ## ✍️ Créditos y Autoría
-Esta versión moderna y extendida (`react-pivottable-plus`) ha sido desarrollada y mantenida por **Jasp402**, quien ha liderado la implementación de las nuevas interfaces (Tailwind, Shadcn, Radix), la actualización a React 18/19 y la optimización del motor de arrastre y filtrado.
+**react-pivottable-plus** ha sido desarrollado y es mantenido por **Jasp402**, quien ha liderado la re-arquitectura del motor, la implementación de interfaces premium (Tailwind, Shadcn, Radix UI) y la optimización de rendimiento para grandes volúmenes de datos.

package/dist/PivotTable.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,34 +9,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Utilities = require("./Utilities");
 var _TableRenderers = _interopRequireDefault(require("./TableRenderers"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 /* eslint-disable react/prop-types */
-// eslint can't see inherited propTypes!
-var PivotTable = /*#__PURE__*/function (_React$PureComponent) {
-  function PivotTable() {
-    _classCallCheck(this, PivotTable);
-    return _callSuper(this, PivotTable, arguments);
-  }
-  _inherits(PivotTable, _React$PureComponent);
-  return _createClass(PivotTable, [{
-    key: "render",
-    value: function render() {
-      var Renderer = this.props.renderers[this.props.rendererName in this.props.renderers ? this.props.rendererName : Object.keys(this.props.renderers)[0]];
-      return /*#__PURE__*/_react["default"].createElement(Renderer, this.props);
-    }
-  }]);
-}(_react["default"].PureComponent);
+
+var PivotTable = /*#__PURE__*/_react["default"].memo(function PivotTable(props) {
+  var Renderer = props.renderers[props.rendererName in props.renderers ? props.rendererName : Object.keys(props.renderers)[0]];
+  return /*#__PURE__*/_react["default"].createElement(Renderer, props);
+});
+PivotTable.displayName = 'PivotTable';
 PivotTable.propTypes = Object.assign({}, _Utilities.PivotData.propTypes, {
   rendererName: _propTypes["default"].string,
   renderers: _propTypes["default"].objectOf(_propTypes["default"].func)

package/dist/PivotTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"PivotTable.js","names":["_react","_interopRequireDefault","require","_propTypes","_Utilities","_TableRenderers","e","__esModule","_classCallCheck","a","n","TypeError","_defineProperties","r","t","length","o","enumerable","configurable","writable","Object","defineProperty","_toPropertyKey","key","_createClass","prototype","i","_toPrimitive","_typeof","Symbol","toPrimitive","call","String","Number","_callSuper","_getPrototypeOf","_possibleConstructorReturn","_isNativeReflectConstruct","Reflect","construct","constructor","apply","_assertThisInitialized","ReferenceError","Boolean","valueOf","setPrototypeOf","getPrototypeOf","bind","__proto__","_inherits","create","value","_setPrototypeOf","PivotTable","_React$PureComponent","arguments","render","Renderer","props","renderers","rendererName","keys","createElement","React","PureComponent","propTypes","assign","PivotData","PropTypes","string","objectOf","func","defaultProps","TableRenderers","_default","exports"],"sources":["../src/PivotTable.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {PivotData} from './Utilities';\nimport TableRenderers from './TableRenderers';\n\n/* eslint-disable react/prop-types */\n// eslint can't see inherited propTypes!\n\nclass PivotTable extends React.PureComponent {\n  render() {\n    const Renderer = this.props.renderers[\n      this.props.rendererName in this.props.renderers\n        ? this.props.rendererName\n        : Object.keys(this.props.renderers)[0]\n    ];\n    return <Renderer {...this.props} />;\n  }\n}\n\nPivotTable.propTypes = Object.assign({}, PivotData.propTypes, {\n  rendererName: PropTypes.string,\n  renderers: PropTypes.objectOf(PropTypes.func),\n});\n\nPivotTable.defaultProps = Object.assign({}, PivotData.defaultProps, {\n  rendererName: 'Table',\n  renderers: TableRenderers,\n});\n\nexport default PivotTable;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"PivotTable.js","names":["_react","_interopRequireDefault","require","_propTypes","_Utilities","_TableRenderers","e","__esModule","PivotTable","React","memo","props","Renderer","renderers","rendererName","Object","keys","createElement","displayName","propTypes","assign","PivotData","PropTypes","string","objectOf","func","defaultProps","TableRenderers","_default","exports"],"sources":["../src/PivotTable.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { PivotData } from './Utilities';\nimport TableRenderers from './TableRenderers';\n\n/* eslint-disable react/prop-types */\n\nconst PivotTable = React.memo(function PivotTable(props) {\n  const Renderer = props.renderers[\n    props.rendererName in props.renderers\n      ? props.rendererName\n      : Object.keys(props.renderers)[0]\n  ];\n  return <Renderer {...props} />;\n});\n\nPivotTable.displayName = 'PivotTable';\n\nPivotTable.propTypes = Object.assign({}, PivotData.propTypes, {\n  rendererName: PropTypes.string,\n  renderers: PropTypes.objectOf(PropTypes.func),\n});\n\nPivotTable.defaultProps = Object.assign({}, PivotData.defaultProps, {\n  rendererName: 'Table',\n  renderers: TableRenderers,\n});\n\nexport default PivotTable;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAA8C,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,gBAAAA,CAAA;AAE9C;;AAEA,IAAME,UAAU,gBAAGC,iBAAK,CAACC,IAAI,CAAC,SAASF,UAAUA,CAACG,KAAK,EAAE;EACvD,IAAMC,QAAQ,GAAGD,KAAK,CAACE,SAAS,CAC9BF,KAAK,CAACG,YAAY,IAAIH,KAAK,CAACE,SAAS,GACjCF,KAAK,CAACG,YAAY,GAClBC,MAAM,CAACC,IAAI,CAACL,KAAK,CAACE,SAAS,CAAC,CAAC,CAAC,CAAC,CACpC;EACD,oBAAOb,MAAA,YAAAiB,aAAA,CAACL,QAAQ,EAAKD,KAAQ,CAAC;AAChC,CAAC,CAAC;AAEFH,UAAU,CAACU,WAAW,GAAG,YAAY;AAErCV,UAAU,CAACW,SAAS,GAAGJ,MAAM,CAACK,MAAM,CAAC,CAAC,CAAC,EAAEC,oBAAS,CAACF,SAAS,EAAE;EAC5DL,YAAY,EAAEQ,qBAAS,CAACC,MAAM;EAC9BV,SAAS,EAAES,qBAAS,CAACE,QAAQ,CAACF,qBAAS,CAACG,IAAI;AAC9C,CAAC,CAAC;AAEFjB,UAAU,CAACkB,YAAY,GAAGX,MAAM,CAACK,MAAM,CAAC,CAAC,CAAC,EAAEC,oBAAS,CAACK,YAAY,EAAE;EAClEZ,YAAY,EAAE,OAAO;EACrBD,SAAS,EAAEc;AACb,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEYrB,UAAU","ignoreList":[]}

package/dist/PivotTableUI.js

@@ -273,15 +273,112 @@ var DnDCell = function DnDCell(_ref4) {
     });
   }))));
 };
+
+// ─── Extracted Helper: Renderer Dropdown ────────────────────────────────────────
+var RendererDropdown = function RendererDropdown(_ref5) {
+  var rendererName = _ref5.rendererName,
+    renderers = _ref5.renderers,
+    isOpen = _ref5.isOpen,
+    uiState = _ref5.uiState,
+    setUiState = _ref5.setUiState;
+  return /*#__PURE__*/_react["default"].createElement("td", {
+    className: "pvtRenderers"
+  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
+    current: rendererName,
+    values: Object.keys(renderers),
+    open: isOpen('renderer'),
+    zIndex: isOpen('renderer') ? uiState.maxZIndex + 1 : 1,
+    toggle: function toggle() {
+      return setUiState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: isOpen('renderer') ? false : 'renderer'
+        });
+      });
+    },
+    setValue: function setValue(v) {
+      return rendererName._updateProp('rendererName', v);
+    }
+  }));
+};
+
+// ─── Extracted Helper: Aggregator + Sort + Vals Controls ────────────────────────
+var AggregatorControls = function AggregatorControls(_ref6) {
+  var aggregatorName = _ref6.aggregatorName,
+    aggregators = _ref6.aggregators,
+    vals = _ref6.vals,
+    pivotState = _ref6.pivotState,
+    hiddenAttributes = _ref6.hiddenAttributes,
+    hiddenFromAggregators = _ref6.hiddenFromAggregators,
+    isOpen = _ref6.isOpen,
+    uiState = _ref6.uiState,
+    setUiState = _ref6.setUiState,
+    actions = _ref6.actions,
+    rowOrder = _ref6.rowOrder,
+    colOrder = _ref6.colOrder,
+    sortIcons = _ref6.sortIcons,
+    numValsAllowed = _ref6.numValsAllowed;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Dropdown, {
+    current: aggregatorName,
+    values: Object.keys(aggregators),
+    open: isOpen('aggregators'),
+    zIndex: isOpen('aggregators') ? uiState.maxZIndex + 1 : 1,
+    toggle: function toggle() {
+      return setUiState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: isOpen('aggregators') ? false : 'aggregators'
+        });
+      });
+    },
+    setValue: function setValue(v) {
+      return actions.updateProp('aggregatorName', v);
+    }
+  }), /*#__PURE__*/_react["default"].createElement("a", {
+    role: "button",
+    className: "pvtRowOrder",
+    onClick: function onClick() {
+      return actions.updateProp('rowOrder', sortIcons[rowOrder].next);
+    }
+  }, sortIcons[rowOrder].rowSymbol), /*#__PURE__*/_react["default"].createElement("a", {
+    role: "button",
+    className: "pvtColOrder",
+    onClick: function onClick() {
+      return actions.updateProp('colOrder', sortIcons[colOrder].next);
+    }
+  }, sortIcons[colOrder].colSymbol), numValsAllowed > 0 && /*#__PURE__*/_react["default"].createElement("br", null), new Array(numValsAllowed).fill(null).map(function (_, i) {
+    return [/*#__PURE__*/_react["default"].createElement(Dropdown, {
+      key: i,
+      current: vals[i],
+      values: Object.keys(pivotState.attrValues).filter(function (e) {
+        return !hiddenAttributes.includes(e) && !hiddenFromAggregators.includes(e);
+      }),
+      open: isOpen("val".concat(i)),
+      zIndex: isOpen("val".concat(i)) ? uiState.maxZIndex + 1 : 1,
+      toggle: function toggle() {
+        return setUiState(function (s) {
+          return _objectSpread(_objectSpread({}, s), {}, {
+            openDropdown: isOpen("val".concat(i)) ? false : "val".concat(i)
+          });
+        });
+      },
+      setValue: function setValue(value) {
+        var newVals = _toConsumableArray(vals);
+        newVals[i] = value;
+        actions.updateProp('vals', newVals);
+      }
+    }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
+      key: "br".concat(i)
+    }) : null];
+  }));
+};
 var PivotTableUI = function PivotTableUI(props) {
   var _aggregators$aggregat, _aggregators$aggregat2;
-  // ─── Headless Core: toda la lógica de datos y props fluye a través del Core ───
+  // ─── Headless Core ───
   var _usePivot = (0, _usePivot2.usePivot)(props),
     pivotProps = _usePivot.props,
     pivotState = _usePivot.state,
     actions = _usePivot.actions;
 
-  // ─── Estado local solo para UI (no pertenece al Core) ─────────────────────────
+  // ─── UI State local ───
   var _useState5 = (0, _react.useState)({
       zIndices: {},
       maxZIndex: 1000,
@@ -294,8 +391,6 @@ var PivotTableUI = function PivotTableUI(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     activeId = _useState8[0],
     setActiveId = _useState8[1];
-
-  // ─── Helpers de UI local ──────────────────────────────────────────────────────
   var moveFilterBoxToTop = (0, _react.useCallback)(function (attribute) {
     setUiState(function (s) {
       return _objectSpread(_objectSpread({}, s), {}, {
@@ -305,7 +400,7 @@ var PivotTableUI = function PivotTableUI(props) {
     });
   }, []);
 
-  // ─── Derivados desde el Core ──────────────────────────────────────────────────
+  // ─── Derivados ───
   var _pivotProps$rows = pivotProps.rows,
     rows = _pivotProps$rows === void 0 ? [] : _pivotProps$rows,
     _pivotProps$cols = pivotProps.cols,
@@ -365,7 +460,7 @@ var PivotTableUI = function PivotTableUI(props) {
     return e && e.trim() !== '' && !hiddenAttributes.includes(e) && !hiddenFromDragDrop.includes(e);
   });
 
-  // ─── DnD Zones ────────────────────────────────────────────────────────────────
+  // ─── DnD ───
   var getZoneOfItem = function getZoneOfItem(id) {
     if (rowAttrs.includes(id)) return 'rows';
     if (colAttrs.includes(id)) return 'cols';
@@ -395,14 +490,14 @@ var PivotTableUI = function PivotTableUI(props) {
       distance: 5
     }
   }));
-  var handleDragStart = function handleDragStart(_ref5) {
-    var active = _ref5.active;
+  var handleDragStart = function handleDragStart(_ref7) {
+    var active = _ref7.active;
     return setActiveId(active.id);
   };
-  var handleDragOver = function handleDragOver(_ref6) {
+  var handleDragOver = function handleDragOver(_ref8) {
     var _over$data$current$so, _over$data;
-    var active = _ref6.active,
-      over = _ref6.over;
+    var active = _ref8.active,
+      over = _ref8.over;
     if (!over) return;
     var activeZone = getZoneOfItem(active.id);
     var overZone = (_over$data$current$so = (_over$data = over.data) === null || _over$data === void 0 || (_over$data = _over$data.current) === null || _over$data === void 0 || (_over$data = _over$data.sortable) === null || _over$data === void 0 ? void 0 : _over$data.containerId) !== null && _over$data$current$so !== void 0 ? _over$data$current$so : getZoneOfItem(over.id);
@@ -416,13 +511,20 @@ var PivotTableUI = function PivotTableUI(props) {
     activeList.splice(activeIndex, 1);
     var insertAt = overIndex >= 0 ? overIndex : overList.length;
     overList.splice(insertAt, 0, active.id);
-    getUpdaterByZone(activeZone)(activeList);
-    getUpdaterByZone(overZone)(overList);
+
+    // ── Construir el patch atómico para evitar múltiples re-renders ──
+    // Problema: dos llamadas separadas (updateProp + updateProp) disparaban dos
+    // notificaciones de estado consecutivas, causando el React error #185
+    // (Maximum update depth exceeded). batchUpdate aplica ambos cambios en uno.
+    var patch = {};
+    if (activeZone === 'rows') patch.rows = activeList;else if (activeZone === 'cols') patch.cols = activeList;else if (activeZone === 'unused') patch.unusedOrder = activeList;
+    if (overZone === 'rows') patch.rows = overList;else if (overZone === 'cols') patch.cols = overList;else if (overZone === 'unused') patch.unusedOrder = overList;
+    actions.batchUpdate(patch);
   };
-  var handleDragEnd = function handleDragEnd(_ref7) {
+  var handleDragEnd = function handleDragEnd(_ref9) {
     var _over$data$current$so2, _over$data2;
-    var active = _ref7.active,
-      over = _ref7.over;
+    var active = _ref9.active,
+      over = _ref9.over;
     setActiveId(null);
     if (!over) return;
     var activeZone = getZoneOfItem(active.id);
@@ -432,11 +534,16 @@ var PivotTableUI = function PivotTableUI(props) {
       var list = getListByZone(activeZone);
       var oldIndex = list.indexOf(active.id);
       var newIndex = list.indexOf(over.id);
-      if (oldIndex !== newIndex) getUpdaterByZone(activeZone)((0, _sortable.arrayMove)(list, oldIndex, newIndex));
+      if (oldIndex !== newIndex) {
+        var reordered = (0, _sortable.arrayMove)(list, oldIndex, newIndex);
+        var patch = {};
+        if (activeZone === 'rows') patch.rows = reordered;else if (activeZone === 'cols') patch.cols = reordered;else if (activeZone === 'unused') patch.unusedOrder = reordered;
+        actions.batchUpdate(patch);
+      }
     }
   };
 
-  // ─── Dropdowns y controles ────────────────────────────────────────────────────
+  // ─── Controls ───
   var isOpen = function isOpen(dropdown) {
     return uiState.openDropdown === dropdown;
   };
@@ -459,8 +566,6 @@ var PivotTableUI = function PivotTableUI(props) {
       next: 'key_a_to_z'
     }
   };
-
-  // Estado combinado para DnDCell (necesita zIndices del UI local + attrValues del Core)
   var combinedState = {
     attrValues: pivotState.attrValues,
     zIndices: uiState.zIndices,
@@ -563,6 +668,43 @@ var PivotTableUI = function PivotTableUI(props) {
       }, n, " / p\xE1g");
     }))));
   };
+
+  // ─── Shared renderer/aggregator controls ───
+  var rendererDropdown = /*#__PURE__*/_react["default"].createElement(Dropdown, {
+    current: actualRendererName,
+    values: Object.keys(renderers),
+    open: isOpen('renderer'),
+    zIndex: isOpen('renderer') ? uiState.maxZIndex + 1 : 1,
+    toggle: function toggle() {
+      return setUiState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: isOpen('renderer') ? false : 'renderer'
+        });
+      });
+    },
+    setValue: function setValue(v) {
+      return actions.updateProp('rendererName', v);
+    }
+  });
+  var aggControls = /*#__PURE__*/_react["default"].createElement(AggregatorControls, {
+    aggregatorName: aggregatorName,
+    aggregators: aggregators,
+    vals: vals,
+    pivotState: pivotState,
+    hiddenAttributes: hiddenAttributes,
+    hiddenFromAggregators: hiddenFromAggregators,
+    isOpen: isOpen,
+    uiState: uiState,
+    setUiState: setUiState,
+    actions: actions,
+    rowOrder: rowOrder,
+    colOrder: colOrder,
+    sortIcons: sortIcons,
+    numValsAllowed: numValsAllowed
+  });
+  var outputCell = /*#__PURE__*/_react["default"].createElement("td", {
+    className: "pvtOutput"
+  }, /*#__PURE__*/_react["default"].createElement(_PivotTable["default"], componentProps), pagination && renderFooter());
   return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
     sensors: sensors,
     collisionDetection: _core.closestCorners,
@@ -581,80 +723,14 @@ var PivotTableUI = function PivotTableUI(props) {
     }
   }, horizUnused ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtRenderers"
-  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
-    current: actualRendererName,
-    values: Object.keys(renderers),
-    open: isOpen('renderer'),
-    zIndex: isOpen('renderer') ? uiState.maxZIndex + 1 : 1,
-    toggle: function toggle() {
-      return setUiState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          openDropdown: isOpen('renderer') ? false : 'renderer'
-        });
-      });
-    },
-    setValue: function setValue(v) {
-      return actions.updateProp('rendererName', v);
-    }
-  })), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+  }, rendererDropdown), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
     id: "unused",
     items: unusedAttrs,
     classes: "pvtAxisContainer pvtUnused pvtHorizList",
     isHorizontal: true
   }, sharedCellProps))), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtVals"
-  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
-    current: aggregatorName,
-    values: Object.keys(aggregators),
-    open: isOpen('aggregators'),
-    zIndex: isOpen('aggregators') ? uiState.maxZIndex + 1 : 1,
-    toggle: function toggle() {
-      return setUiState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          openDropdown: isOpen('aggregators') ? false : 'aggregators'
-        });
-      });
-    },
-    setValue: function setValue(v) {
-      return actions.updateProp('aggregatorName', v);
-    }
-  }), /*#__PURE__*/_react["default"].createElement("a", {
-    role: "button",
-    className: "pvtRowOrder",
-    onClick: function onClick() {
-      return actions.updateProp('rowOrder', sortIcons[rowOrder].next);
-    }
-  }, sortIcons[rowOrder].rowSymbol), /*#__PURE__*/_react["default"].createElement("a", {
-    role: "button",
-    className: "pvtColOrder",
-    onClick: function onClick() {
-      return actions.updateProp('colOrder', sortIcons[colOrder].next);
-    }
-  }, sortIcons[colOrder].colSymbol), numValsAllowed > 0 && /*#__PURE__*/_react["default"].createElement("br", null), new Array(numValsAllowed).fill(null).map(function (_, i) {
-    return [/*#__PURE__*/_react["default"].createElement(Dropdown, {
-      key: i,
-      current: vals[i],
-      values: Object.keys(pivotState.attrValues).filter(function (e) {
-        return !hiddenAttributes.includes(e) && !hiddenFromAggregators.includes(e);
-      }),
-      open: isOpen("val".concat(i)),
-      zIndex: isOpen("val".concat(i)) ? uiState.maxZIndex + 1 : 1,
-      toggle: function toggle() {
-        return setUiState(function (s) {
-          return _objectSpread(_objectSpread({}, s), {}, {
-            openDropdown: isOpen("val".concat(i)) ? false : "val".concat(i)
-          });
-        });
-      },
-      setValue: function setValue(value) {
-        var newVals = _toConsumableArray(vals);
-        newVals[i] = value;
-        actions.updateProp('vals', newVals);
-      }
-    }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
-      key: "br".concat(i)
-    }) : null];
-  })), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+  }, aggControls), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
     id: "cols",
     items: colAttrs,
     classes: "pvtAxisContainer pvtHorizList pvtCols",
@@ -664,79 +740,11 @@ var PivotTableUI = function PivotTableUI(props) {
     items: rowAttrs,
     classes: "pvtAxisContainer pvtVertList pvtRows",
     isHorizontal: false
-  }, sharedCellProps)), /*#__PURE__*/_react["default"].createElement("td", {
-    className: "pvtOutput"
-  }, /*#__PURE__*/_react["default"].createElement(_PivotTable["default"], componentProps), pagination && renderFooter()))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+  }, sharedCellProps)), outputCell)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtRenderers"
-  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
-    current: actualRendererName,
-    values: Object.keys(renderers),
-    open: isOpen('renderer'),
-    zIndex: isOpen('renderer') ? uiState.maxZIndex + 1 : 1,
-    toggle: function toggle() {
-      return setUiState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          openDropdown: isOpen('renderer') ? false : 'renderer'
-        });
-      });
-    },
-    setValue: function setValue(v) {
-      return actions.updateProp('rendererName', v);
-    }
-  })), /*#__PURE__*/_react["default"].createElement("td", {
+  }, rendererDropdown), /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtVals"
-  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
-    current: aggregatorName,
-    values: Object.keys(aggregators),
-    open: isOpen('aggregators'),
-    zIndex: isOpen('aggregators') ? uiState.maxZIndex + 1 : 1,
-    toggle: function toggle() {
-      return setUiState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          openDropdown: isOpen('aggregators') ? false : 'aggregators'
-        });
-      });
-    },
-    setValue: function setValue(v) {
-      return actions.updateProp('aggregatorName', v);
-    }
-  }), /*#__PURE__*/_react["default"].createElement("a", {
-    role: "button",
-    className: "pvtRowOrder",
-    onClick: function onClick() {
-      return actions.updateProp('rowOrder', sortIcons[rowOrder].next);
-    }
-  }, sortIcons[rowOrder].rowSymbol), /*#__PURE__*/_react["default"].createElement("a", {
-    role: "button",
-    className: "pvtColOrder",
-    onClick: function onClick() {
-      return actions.updateProp('colOrder', sortIcons[colOrder].next);
-    }
-  }, sortIcons[colOrder].colSymbol), numValsAllowed > 0 && /*#__PURE__*/_react["default"].createElement("br", null), new Array(numValsAllowed).fill(null).map(function (_, i) {
-    return [/*#__PURE__*/_react["default"].createElement(Dropdown, {
-      key: i,
-      current: vals[i],
-      values: Object.keys(pivotState.attrValues).filter(function (e) {
-        return !hiddenAttributes.includes(e) && !hiddenFromAggregators.includes(e);
-      }),
-      open: isOpen("val".concat(i)),
-      zIndex: isOpen("val".concat(i)) ? uiState.maxZIndex + 1 : 1,
-      toggle: function toggle() {
-        return setUiState(function (s) {
-          return _objectSpread(_objectSpread({}, s), {}, {
-            openDropdown: isOpen("val".concat(i)) ? false : "val".concat(i)
-          });
-        });
-      },
-      setValue: function setValue(value) {
-        var newVals = _toConsumableArray(vals);
-        newVals[i] = value;
-        actions.updateProp('vals', newVals);
-      }
-    }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
-      key: "br".concat(i)
-    }) : null];
-  })), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+  }, aggControls), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
     id: "cols",
     items: colAttrs,
     classes: "pvtAxisContainer pvtHorizList pvtCols",
@@ -751,9 +759,7 @@ var PivotTableUI = function PivotTableUI(props) {
     items: rowAttrs,
     classes: "pvtAxisContainer pvtVertList pvtRows",
     isHorizontal: false
-  }, sharedCellProps)), /*#__PURE__*/_react["default"].createElement("td", {
-    className: "pvtOutput"
-  }, /*#__PURE__*/_react["default"].createElement(_PivotTable["default"], componentProps), pagination && renderFooter()))))), /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, null, activeId ? /*#__PURE__*/_react["default"].createElement("ul", {
+  }, sharedCellProps)), outputCell)))), /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, null, activeId ? /*#__PURE__*/_react["default"].createElement("ul", {
     style: {
       listStyle: 'none',
       padding: 0,