react-pivottable-plus 1.0.20 → 1.1.1

package/dist/TableRenderers.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
 });
@@ -12,18 +11,10 @@ var _CellPipeline = require("./core/CellPipeline");
 var _VirtualScroller = require("./core/VirtualScroller");
 var _useColumnResize2 = require("./hooks/useColumnResize");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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); }
 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; }
@@ -31,7 +22,20 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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); }
-// helper function for setting row/col-span in pivotTableRenderer
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, 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); }
+// ─── Helper: spanSize ──────────────────────────────────────────────────────────
 var spanSize = function spanSize(arr, i, j) {
   var no_loop = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var x;
@@ -90,495 +94,617 @@ var remove = function remove(set, arr) {
 var toggle = function toggle(set, arr) {
   return (has(set, arr) ? remove : add)(set, arr);
 };
-function makeRenderer() {
-  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  // ─── Inner class (toda la lógica de render) ──────────────────────
-  var TableRendererInner = /*#__PURE__*/function (_React$PureComponent) {
-    function TableRendererInner() {
-      _classCallCheck(this, TableRendererInner);
-      return _callSuper(this, TableRendererInner, arguments);
+
+// ─── Sub-render: Column Headers (thead) ────────────────────────────────────────
+function renderColHeaders(_ref) {
+  var colAttrs = _ref.colAttrs,
+    rowAttrs = _ref.rowAttrs,
+    visibleColKeys = _ref.visibleColKeys,
+    allColKeys = _ref.allColKeys,
+    allRowKeys = _ref.allRowKeys,
+    showRowNumbers = _ref.showRowNumbers,
+    grouping = _ref.grouping,
+    isFolded = _ref.isFolded,
+    fold = _ref.fold,
+    clickClass = _ref.clickClass,
+    shouldVirt = _ref.shouldVirt,
+    colLeftPad = _ref.colLeftPad,
+    colRightPad = _ref.colRightPad,
+    onStartResize = _ref.onStartResize;
+  return colAttrs.map(function (c, j) {
+    var clickable = grouping && colAttrs.length > j + 1;
+    var levelKeys = allColKeys.filter(function (x) {
+      return x.length === j + 1;
+    });
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      key: "colAttr".concat(j)
+    }, showRowNumbers && j === 0 && /*#__PURE__*/_react["default"].createElement("th", {
+      className: "pvtRowNumber pvtAxisLabel",
+      rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
+    }, "#"), j === 0 && rowAttrs.length !== 0 && /*#__PURE__*/_react["default"].createElement("th", {
+      colSpan: rowAttrs.length,
+      rowSpan: colAttrs.length
+    }), /*#__PURE__*/_react["default"].createElement("th", {
+      className: "pvtAxisLabel" + clickClass(clickable, isFolded(levelKeys)),
+      onClick: clickable ? function (_) {
+        return fold(levelKeys);
+      } : null
+    }, c), shouldVirt.cols && colLeftPad > 0 && j === 0 && /*#__PURE__*/_react["default"].createElement("th", {
+      key: "col-pad-left",
+      style: {
+        minWidth: colLeftPad
+      }
+    }), visibleColKeys.map(function (colKey, i) {
+      var x = spanSize(visibleColKeys, i, j);
+      if (x === -1) {
+        return null;
+      }
+      var isLastHeaderRow = j === colAttrs.length - 1;
+      var colLabel = colKey.join("\0");
+      return /*#__PURE__*/_react["default"].createElement("th", {
+        className: "pvtColLabel" + clickClass(clickable && colKey[j], isFolded([colKey.slice(0, j + 1)])),
+        key: "colKey-".concat(i, "-").concat(j, "-").concat(colKey[j]),
+        colSpan: x,
+        rowSpan: isLastHeaderRow && rowAttrs.length !== 0 ? 2 : 1,
+        onClick: clickable && colKey[j] ? function (_) {
+          return fold([colKey.slice(0, j + 1)]);
+        } : null
+      }, colKey[j], onStartResize && isLastHeaderRow && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "pvtResizeHandle",
+        onPointerDown: function onPointerDown(e) {
+          return onStartResize(colLabel, e);
+        }
+      }));
+    }), shouldVirt.cols && colRightPad > 0 && j === 0 && /*#__PURE__*/_react["default"].createElement("th", {
+      key: "col-pad-right",
+      style: {
+        minWidth: colRightPad
+      }
+    }), j === 0 && /*#__PURE__*/_react["default"].createElement("th", {
+      className: "pvtTotalLabel",
+      rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
+    }, "Totals"));
+  });
+}
+
+// ─── Sub-render: Row Attrs Header Row ──────────────────────────────────────────
+function renderRowAttrsHeader(_ref2) {
+  var rowAttrs = _ref2.rowAttrs,
+    colAttrs = _ref2.colAttrs,
+    showRowNumbers = _ref2.showRowNumbers,
+    grouping = _ref2.grouping,
+    allRowKeys = _ref2.allRowKeys,
+    isFolded = _ref2.isFolded,
+    fold = _ref2.fold,
+    clickClass = _ref2.clickClass;
+  if (rowAttrs.length === 0) return null;
+  return /*#__PURE__*/_react["default"].createElement("tr", null, showRowNumbers && colAttrs.length === 0 && /*#__PURE__*/_react["default"].createElement("th", {
+    className: "pvtRowNumber pvtAxisLabel",
+    rowSpan: "1"
+  }, "#"), rowAttrs.map(function (r, i) {
+    var clickable = grouping && rowAttrs.length > i + 1;
+    var levelKeys = allRowKeys.filter(function (x) {
+      return x.length === i + 1;
+    });
+    return /*#__PURE__*/_react["default"].createElement("th", {
+      className: "pvtAxisLabel" + clickClass(clickable, isFolded(levelKeys)),
+      onClick: clickable ? function (_) {
+        return fold(levelKeys);
+      } : null,
+      key: "rowAttr".concat(i)
+    }, r);
+  }), /*#__PURE__*/_react["default"].createElement("th", {
+    className: "pvtTotalLabel"
+  }, colAttrs.length === 0 ? 'Totals' : null));
+}
+
+// ─── Sub-render: Body Rows ─────────────────────────────────────────────────────
+function renderBodyRows(_ref3) {
+  var visibleRowKeys = _ref3.visibleRowKeys,
+    visibleColKeys = _ref3.visibleColKeys,
+    rowAttrs = _ref3.rowAttrs,
+    colAttrs = _ref3.colAttrs,
+    pivotData = _ref3.pivotData,
+    pipeline = _ref3.pipeline,
+    compactRows = _ref3.compactRows,
+    specialCase = _ref3.specialCase,
+    grouping = _ref3.grouping,
+    isFolded = _ref3.isFolded,
+    fold = _ref3.fold,
+    clickClass = _ref3.clickClass,
+    showRowNumbers = _ref3.showRowNumbers,
+    startOffset = _ref3.startOffset,
+    shouldVirt = _ref3.shouldVirt,
+    scroller = _ref3.scroller,
+    virtualRowStartOffset = _ref3.virtualRowStartOffset,
+    colLeftPad = _ref3.colLeftPad,
+    colRightPad = _ref3.colRightPad,
+    valueCellColors = _ref3.valueCellColors,
+    colTotalColors = _ref3.colTotalColors,
+    getClickHandler = _ref3.getClickHandler;
+  return visibleRowKeys.map(function (rowKey, localI) {
+    var globalI = shouldVirt.rows ? virtualRowStartOffset + localI : localI;
+    var totalAggregator = pivotData.getAggregator(rowKey, []);
+    var rowGap = rowAttrs.length - rowKey.length;
+    var rowTotalResult = pipeline.processTotal({
+      aggregator: totalAggregator,
+      rowKey: rowKey,
+      type: 'row'
+    });
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      key: "rowKeyRow".concat(globalI),
+      className: (rowGap ? "pvtLevel" + rowGap : "pvtData") + " pvtRow-data",
+      style: shouldVirt.rows ? {
+        height: scroller.rowHeight
+      } : undefined
+    }, showRowNumbers && /*#__PURE__*/_react["default"].createElement("th", {
+      className: "pvtRowNumber"
+    }, startOffset + globalI + 1), rowKey.map(function (txt, j) {
+      if (compactRows && j < rowKey.length - 1) {
+        return null;
+      }
+      var clickable = grouping && rowAttrs.length > j + 1;
+      var x = compactRows ? 1 : spanSize(visibleRowKeys, localI, j, specialCase);
+      if (x === -1) {
+        return null;
+      }
+      return /*#__PURE__*/_react["default"].createElement("th", {
+        key: "rowKeyLabel-".concat(globalI, "-").concat(j, "-").concat(txt),
+        className: "pvtRowLabel" + clickClass(clickable && rowKey[j], isFolded([rowKey.slice(0, j + 1)])),
+        rowSpan: x,
+        colSpan: compactRows ? rowAttrs.length + 1 : j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1,
+        style: {
+          paddingLeft: compactRows ? "calc(var(--pvt-row-padding, 5px) + ".concat(j, " * var(--pvt-row-indent, 20px))") : null
+        },
+        onClick: clickable && rowKey[j] ? function (_) {
+          return fold([rowKey.slice(0, j + 1)]);
+        } : null
+      }, txt);
+    }), !compactRows && rowGap ? /*#__PURE__*/_react["default"].createElement("th", {
+      className: "pvtRowLabel",
+      colSpan: rowGap + 1
+    }, "Total (" + rowKey[rowKey.length - 1] + ")") : null, shouldVirt.cols && colLeftPad > 0 && /*#__PURE__*/_react["default"].createElement("td", {
+      key: "col-pad-left",
+      style: {
+        minWidth: colLeftPad
+      }
+    }), visibleColKeys.map(function (colKey, j) {
+      var aggregator = pivotData.getAggregator(rowKey, colKey);
+      var colGap = colAttrs.length - colKey.length;
+      var cellResult = pipeline.process({
+        aggregator: aggregator,
+        rowKey: rowKey,
+        colKey: colKey,
+        pivotData: pivotData
+      });
+      var isNumeric = typeof cellResult.value === 'number';
+      var mergedStyle = _objectSpread(_objectSpread({}, valueCellColors(rowKey, colKey, cellResult.value)), cellResult.style || {});
+      return /*#__PURE__*/_react["default"].createElement("td", {
+        className: "pvtVal" + (colGap ? " pvtLevel" + colGap : "") + (isNumeric ? " pvtVal-numeric" : "") + (cellResult.className ? " " + cellResult.className : ""),
+        key: "pvtVal".concat(globalI, "-").concat(j),
+        onClick: getClickHandler && getClickHandler(cellResult.value, rowKey, colKey),
+        style: Object.keys(mergedStyle).length > 0 ? mergedStyle : undefined
+      }, cellResult.rendered);
+    }), shouldVirt.cols && colRightPad > 0 && /*#__PURE__*/_react["default"].createElement("td", {
+      key: "col-pad-right",
+      style: {
+        minWidth: colRightPad
+      }
+    }), /*#__PURE__*/_react["default"].createElement("td", {
+      className: "pvtTotal" + (typeof rowTotalResult.value === 'number' ? " pvtVal-numeric" : ""),
+      onClick: getClickHandler && getClickHandler(rowTotalResult.value, rowKey, [null]),
+      style: colTotalColors(rowTotalResult.value) || rowTotalResult.style
+    }, rowTotalResult.rendered));
+  });
+}
+
+// ─── Sub-render: Totals Row ────────────────────────────────────────────────────
+function renderTotalsRow(_ref4) {
+  var visibleColKeys = _ref4.visibleColKeys,
+    rowAttrs = _ref4.rowAttrs,
+    colAttrs = _ref4.colAttrs,
+    pivotData = _ref4.pivotData,
+    grandTotalAggregator = _ref4.grandTotalAggregator,
+    showRowNumbers = _ref4.showRowNumbers,
+    shouldVirt = _ref4.shouldVirt,
+    colLeftPad = _ref4.colLeftPad,
+    colRightPad = _ref4.colRightPad,
+    rowTotalColors = _ref4.rowTotalColors,
+    getClickHandler = _ref4.getClickHandler;
+  return /*#__PURE__*/_react["default"].createElement("tr", {
+    className: "pvtTotalRow"
+  }, showRowNumbers && /*#__PURE__*/_react["default"].createElement("th", {
+    className: "pvtTotalLabel"
+  }), /*#__PURE__*/_react["default"].createElement("th", {
+    className: "pvtTotalLabel",
+    colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
+  }, "Totals"), shouldVirt.cols && colLeftPad > 0 && /*#__PURE__*/_react["default"].createElement("td", {
+    key: "total-col-pad-left",
+    style: {
+      minWidth: colLeftPad
+    }
+  }), visibleColKeys.map(function (colKey, i) {
+    var totalAggregator = pivotData.getAggregator([], colKey);
+    var colGap = colAttrs.length - colKey.length;
+    var totalVal = totalAggregator.value();
+    var isNumeric = typeof totalVal === 'number';
+    return /*#__PURE__*/_react["default"].createElement("td", {
+      className: "pvtTotal" + (colGap ? " pvtLevel" + colGap : "") + (isNumeric ? " pvtVal-numeric" : ""),
+      key: "total".concat(i),
+      onClick: getClickHandler && getClickHandler(totalVal, [null], colKey),
+      style: rowTotalColors(totalVal)
+    }, totalAggregator.format(totalVal));
+  }), shouldVirt.cols && colRightPad > 0 && /*#__PURE__*/_react["default"].createElement("td", {
+    key: "total-col-pad-right",
+    style: {
+      minWidth: colRightPad
     }
-    _inherits(TableRendererInner, _React$PureComponent);
-    return _createClass(TableRendererInner, [{
-      key: "render",
-      value: function render() {
-        var _this = this;
-        var pivotData = new _Utilities.PivotData(this.props);
-        var id = pivotData.props.id;
-        var colAttrs = pivotData.props.cols;
-        var rowAttrs = pivotData.props.rows;
-        var rowKeys = pivotData.getRowKeys(true);
-        var colKeys = pivotData.getColKeys(true);
-        var grandTotalAggregator = pivotData.getAggregator([], []);
+  }), /*#__PURE__*/_react["default"].createElement("td", {
+    onClick: getClickHandler && getClickHandler(grandTotalAggregator.value(), [null], [null]),
+    className: "pvtGrandTotal" + (typeof grandTotalAggregator.value() === 'number' ? " pvtVal-numeric" : "")
+  }, grandTotalAggregator.format(grandTotalAggregator.value())));
+}
 
-        // ─── Cell Pipeline ────────────────────────────────────────────────
-        var pipeline = this.props.cellPipeline ? new _CellPipeline.CellPipeline(this.props.cellPipeline) : _CellPipeline.CellPipeline["default"]();
+// ─── Sub-render: Empty Pad Rows (pagination) ───────────────────────────────────
+function renderEmptyPadRows(_ref5) {
+  var visibleRowKeys = _ref5.visibleRowKeys,
+    visibleColKeys = _ref5.visibleColKeys,
+    rowAttrs = _ref5.rowAttrs,
+    colAttrs = _ref5.colAttrs,
+    showRowNumbers = _ref5.showRowNumbers,
+    pageSize = _ref5.pageSize,
+    startOffset = _ref5.startOffset,
+    shouldVirt = _ref5.shouldVirt;
+  if (!showRowNumbers || visibleRowKeys.length >= pageSize || shouldVirt.rows) {
+    return null;
+  }
+  return Array.from({
+    length: pageSize - visibleRowKeys.length
+  }).map(function (_, padIdx) {
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      key: "padRow".concat(padIdx),
+      className: "pvtRow-data pvtEmptyRow"
+    }, /*#__PURE__*/_react["default"].createElement("th", {
+      className: "pvtRowNumber"
+    }, startOffset + visibleRowKeys.length + padIdx + 1), /*#__PURE__*/_react["default"].createElement("th", {
+      className: "pvtRowLabel",
+      colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
+    }), visibleColKeys.map(function (colKey, j) {
+      return /*#__PURE__*/_react["default"].createElement("td", {
+        key: "padVal".concat(padIdx, "-").concat(j),
+        className: "pvtVal pvtEmptyCell"
+      });
+    }), /*#__PURE__*/_react["default"].createElement("td", {
+      className: "pvtTotal pvtEmptyCell"
+    }));
+  });
+}
 
-        // ─── Virtualización ───────────────────────────────────────────────
-        var virtConfig = this.props.virtualization || {};
-        var scroller = new _VirtualScroller.VirtualScroller({
-          enabled: virtConfig.enabled !== undefined ? virtConfig.enabled : false,
-          rowHeight: virtConfig.rowHeight || 32,
-          colWidth: virtConfig.colWidth || 100,
-          overscanRows: virtConfig.overscanRows || 5,
-          overscanCols: virtConfig.overscanCols || 3,
-          containerHeight: virtConfig.containerHeight || 400,
-          containerWidth: virtConfig.containerWidth || 800,
-          threshold: virtConfig.threshold || 100
-        });
-        var grouping = pivotData.props.grouping;
-        var compactRows = grouping && this.props.compactRows;
-        // speacial case for spanSize counting (no_loop)
-        var specialCase = grouping && !this.props.rowGroupBefore;
-        var folded = (this.state || {}).folded || new Set();
-        var isFolded = function isFolded(keys) {
-          return has(folded, keys.map(flatKey));
-        };
-        var fold = function fold(keys) {
-          return _this.setState({
-            folded: toggle(new Set(folded), keys.map(flatKey))
-          });
-        };
-        if (grouping) {
-          var _iterator = _createForOfIteratorHelper(folded),
-            _step;
-          try {
-            var _loop = function _loop() {
-              var key = _step.value;
-              colKeys = colKeys.filter(function (colKey) {
-                return !flatKey(colKey).startsWith(key + String.fromCharCode(0));
-              });
-              rowKeys = rowKeys.filter(function (rowKey) {
-                return !flatKey(rowKey).startsWith(key + String.fromCharCode(0));
-              });
-            };
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              _loop();
-            }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
-          }
-        }
+// ─── Main Renderer Factory ─────────────────────────────────────────────────────
+function makeRenderer() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  function TableRendererCore(props) {
+    var pivotData = new _Utilities.PivotData(props);
+    var id = pivotData.props.id;
+    var colAttrs = pivotData.props.cols;
+    var rowAttrs = pivotData.props.rows;
+    var rowKeys = pivotData.getRowKeys(true);
+    var colKeys = pivotData.getColKeys(true);
+    var grandTotalAggregator = pivotData.getAggregator([], []);
 
-        // Guardar todos los colKeys para totales (SIEMPRE calcula sobre todo)
-        var allColKeys = colKeys;
-        var allRowKeys = rowKeys;
-        var totalRows = rowKeys.length;
-        var startOffset = 0;
-        if (this.props.pagination) {
-          var start = (this.props.page - 1) * this.props.pageSize;
-          startOffset = start;
-          var end = start + this.props.pageSize;
-          rowKeys = rowKeys.slice(start, end);
-        }
+    // ─── Cell Pipeline ────────────────────────────────────────────────
+    var pipeline = props.cellPipeline ? new _CellPipeline.CellPipeline(props.cellPipeline) : _CellPipeline.CellPipeline["default"]();
 
-        // Aplicar virtualización bidireccional
-        var shouldVirt = scroller.shouldVirtualize(rowKeys.length, colKeys.length);
-        var scrollTop = (this.state || {}).scrollTop || 0;
-        var scrollLeft = (this.state || {}).scrollLeft || 0;
-        var visibleRowKeys = rowKeys;
-        var rowTopPad = 0;
-        var rowBottomPad = 0;
-        var virtualRowStartOffset = 0;
-        if (shouldVirt.rows) {
-          var rowRange = scroller.getVisibleRowRange(scrollTop, rowKeys.length);
-          visibleRowKeys = rowKeys.slice(rowRange.startIndex, rowRange.endIndex + 1);
-          rowTopPad = rowRange.topPadding;
-          rowBottomPad = rowRange.bottomPadding;
-          virtualRowStartOffset = rowRange.startIndex;
-        }
-        var visibleColKeys = colKeys;
-        var colLeftPad = 0;
-        var colRightPad = 0;
-        if (shouldVirt.cols) {
-          var colRange = scroller.getVisibleColRange(scrollLeft, colKeys.length);
-          visibleColKeys = colKeys.slice(colRange.startIndex, colRange.endIndex + 1);
-          colLeftPad = colRange.leftPadding;
-          colRightPad = colRange.rightPadding;
-        }
-        var showRowNumbers = this.props.showRowNumbers !== false;
-        var isVirtualized = shouldVirt.rows || shouldVirt.cols;
-        var valueCellColors = function valueCellColors() {};
-        var rowTotalColors = function rowTotalColors() {};
-        var colTotalColors = function colTotalColors() {};
-        if (opts.heatmapMode) {
-          var colorScaleGenerator = this.props.tableColorScaleGenerator;
-          var rowTotalValues = colKeys.map(function (x) {
-            return pivotData.getAggregator([], x).value();
+    // ─── Virtualización ───────────────────────────────────────────────
+    var virtConfig = props.virtualization || {};
+    var scroller = new _VirtualScroller.VirtualScroller({
+      enabled: virtConfig.enabled !== undefined ? virtConfig.enabled : false,
+      rowHeight: virtConfig.rowHeight || 32,
+      colWidth: virtConfig.colWidth || 100,
+      overscanRows: virtConfig.overscanRows || 5,
+      overscanCols: virtConfig.overscanCols || 3,
+      containerHeight: virtConfig.containerHeight || 400,
+      containerWidth: virtConfig.containerWidth || 800,
+      threshold: virtConfig.threshold || 100
+    });
+    var grouping = pivotData.props.grouping;
+    var compactRows = grouping && props.compactRows;
+    var specialCase = grouping && !props.rowGroupBefore;
+
+    // Folding state via React.useState (replaces class this.state)
+    var _React$useState = _react["default"].useState(new Set()),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      folded = _React$useState2[0],
+      setFolded = _React$useState2[1];
+    var _React$useState3 = _react["default"].useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      scrollTop = _React$useState4[0],
+      setScrollTop = _React$useState4[1];
+    var _React$useState5 = _react["default"].useState(0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      scrollLeft = _React$useState6[0],
+      setScrollLeft = _React$useState6[1];
+    var isFolded = function isFolded(keys) {
+      return has(folded, keys.map(flatKey));
+    };
+    var fold = function fold(keys) {
+      return setFolded(function (prev) {
+        return toggle(new Set(prev), keys.map(flatKey));
+      });
+    };
+    if (grouping) {
+      var _iterator = _createForOfIteratorHelper(folded),
+        _step;
+      try {
+        var _loop = function _loop() {
+          var key = _step.value;
+          colKeys = colKeys.filter(function (colKey) {
+            return !flatKey(colKey).startsWith(key + String.fromCharCode(0));
           });
-          rowTotalColors = colorScaleGenerator(rowTotalValues);
-          var colTotalValues = rowKeys.map(function (x) {
-            return pivotData.getAggregator(x, []).value();
+          rowKeys = rowKeys.filter(function (rowKey) {
+            return !flatKey(rowKey).startsWith(key + String.fromCharCode(0));
           });
-          colTotalColors = colorScaleGenerator(colTotalValues);
-          if (opts.heatmapMode === 'full') {
-            var allValues = [];
-            rowKeys.map(function (r) {
-              return colKeys.map(function (c) {
-                return allValues.push(pivotData.getAggregator(r, c).value());
-              });
-            });
-            var colorScale = colorScaleGenerator(allValues);
-            valueCellColors = function valueCellColors(r, c, v) {
-              return colorScale(v);
-            };
-          } else if (opts.heatmapMode === 'row') {
-            var rowColorScales = {};
-            rowKeys.map(function (r) {
-              var rowValues = colKeys.map(function (x) {
-                return pivotData.getAggregator(r, x).value();
-              });
-              rowColorScales[r] = colorScaleGenerator(rowValues);
-            });
-            valueCellColors = function valueCellColors(r, c, v) {
-              return rowColorScales[r](v);
-            };
-          } else if (opts.heatmapMode === 'col') {
-            var colColorScales = {};
-            colKeys.map(function (c) {
-              var colValues = rowKeys.map(function (x) {
-                return pivotData.getAggregator(x, c).value();
-              });
-              colColorScales[c] = colorScaleGenerator(colValues);
-            });
-            valueCellColors = function valueCellColors(r, c, v) {
-              return colColorScales[c](v);
-            };
-          }
-        }
-        var getClickHandler = this.props.tableOptions && this.props.tableOptions.clickCallback ? function (value, rowValues, colValues) {
-          var filters = {};
-          for (var _i = 0, _Object$keys = Object.keys(colAttrs || {}); _i < _Object$keys.length; _i++) {
-            var i = _Object$keys[_i];
-            var attr = colAttrs[i];
-            if (colValues[i] !== null) {
-              filters[attr] = colValues[i];
-            }
-          }
-          for (var _i2 = 0, _Object$keys2 = Object.keys(rowAttrs || {}); _i2 < _Object$keys2.length; _i2++) {
-            var _i3 = _Object$keys2[_i2];
-            var _attr = rowAttrs[_i3];
-            if (rowValues[_i3] !== null) {
-              filters[_attr] = rowValues[_i3];
-            }
-          }
-          return function (e) {
-            return _this.props.tableOptions.clickCallback(e, value, filters, pivotData);
-          };
-        } : null;
-        var rbClass = grouping ? this.props.rowGroupBefore ? "rowGroupBefore" : "rowGroupAfter" : "";
-        var cbClass = grouping ? this.props.colGroupBefore ? "colGroupBefore" : "colGroupAfter" : "";
-        var clickClass = function clickClass(pred, closed) {
-          return pred ? " pvtClickable" + (closed ? " closed" : "") : "";
         };
-        // ─── Render de la tabla ────────────────────────────────────────────
-        var handleScroll = isVirtualized ? function (e) {
-          _this.setState({
-            scrollTop: e.currentTarget.scrollTop,
-            scrollLeft: e.currentTarget.scrollLeft
-          });
-        } : null;
-
-        // ─── Column widths (resize) ────────────────────────────────
-        var resizeWidths = this.props._resizeWidths || {};
-        var onStartResize = this.props._onStartResize || null;
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _loop();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+    var allColKeys = colKeys;
+    var allRowKeys = rowKeys;
+    var totalRows = rowKeys.length;
+    var startOffset = 0;
+    if (props.pagination) {
+      var start = (props.page - 1) * props.pageSize;
+      startOffset = start;
+      var end = start + props.pageSize;
+      rowKeys = rowKeys.slice(start, end);
+    }
 
-        // Construir colgroup con anchos de todas las columnas de datos
-        var buildColgroup = function buildColgroup() {
-          var cols = [];
-          // Col para row numbers
-          if (showRowNumbers) cols.push(/*#__PURE__*/_react["default"].createElement("col", {
-            key: "col-rownum",
-            style: {
-              width: '40px',
-              minWidth: '40px'
-            }
-          }));
-          // Cols para rowAttrs
-          rowAttrs.forEach(function (_, i) {
-            return cols.push(/*#__PURE__*/_react["default"].createElement("col", {
-              key: "col-rowattr-".concat(i)
-            }));
-          });
-          // Col padding virtual izquierdo
-          if (shouldVirt.cols && colLeftPad > 0) cols.push(/*#__PURE__*/_react["default"].createElement("col", {
-            key: "col-virt-left",
-            style: {
-              width: colLeftPad
-            }
-          }));
-          // Cols para cada columna de datos
-          visibleColKeys.forEach(function (colKey) {
-            var label = colKey.join("\0");
-            var w = resizeWidths[label];
-            cols.push(/*#__PURE__*/_react["default"].createElement("col", {
-              key: "col-data-".concat(label),
-              style: w ? {
-                width: w,
-                minWidth: w
-              } : undefined
-            }));
+    // Virtualización bidireccional
+    var shouldVirt = scroller.shouldVirtualize(rowKeys.length, colKeys.length);
+    var visibleRowKeys = rowKeys;
+    var rowTopPad = 0;
+    var rowBottomPad = 0;
+    var virtualRowStartOffset = 0;
+    if (shouldVirt.rows) {
+      var rowRange = scroller.getVisibleRowRange(scrollTop, rowKeys.length);
+      visibleRowKeys = rowKeys.slice(rowRange.startIndex, rowRange.endIndex + 1);
+      rowTopPad = rowRange.topPadding;
+      rowBottomPad = rowRange.bottomPadding;
+      virtualRowStartOffset = rowRange.startIndex;
+    }
+    var visibleColKeys = colKeys;
+    var colLeftPad = 0;
+    var colRightPad = 0;
+    if (shouldVirt.cols) {
+      var colRange = scroller.getVisibleColRange(scrollLeft, colKeys.length);
+      visibleColKeys = colKeys.slice(colRange.startIndex, colRange.endIndex + 1);
+      colLeftPad = colRange.leftPadding;
+      colRightPad = colRange.rightPadding;
+    }
+    var showRowNumbers = props.showRowNumbers !== false;
+    var isVirtualized = shouldVirt.rows || shouldVirt.cols;
+    var valueCellColors = function valueCellColors() {};
+    var rowTotalColors = function rowTotalColors() {};
+    var colTotalColors = function colTotalColors() {};
+    if (opts.heatmapMode) {
+      var colorScaleGenerator = props.tableColorScaleGenerator;
+      var rowTotalValues = colKeys.map(function (x) {
+        return pivotData.getAggregator([], x).value();
+      });
+      rowTotalColors = colorScaleGenerator(rowTotalValues);
+      var colTotalValues = rowKeys.map(function (x) {
+        return pivotData.getAggregator(x, []).value();
+      });
+      colTotalColors = colorScaleGenerator(colTotalValues);
+      if (opts.heatmapMode === 'full') {
+        var allValues = [];
+        rowKeys.map(function (r) {
+          return colKeys.map(function (c) {
+            return allValues.push(pivotData.getAggregator(r, c).value());
           });
-          // Col padding virtual derecho
-          if (shouldVirt.cols && colRightPad > 0) cols.push(/*#__PURE__*/_react["default"].createElement("col", {
-            key: "col-virt-right",
-            style: {
-              width: colRightPad
-            }
-          }));
-          // Col para totales
-          cols.push(/*#__PURE__*/_react["default"].createElement("col", {
-            key: "col-totals"
-          }));
-          return /*#__PURE__*/_react["default"].createElement("colgroup", null, cols);
+        });
+        var colorScale = colorScaleGenerator(allValues);
+        valueCellColors = function valueCellColors(r, c, v) {
+          return colorScale(v);
         };
-        var tableContent = /*#__PURE__*/_react["default"].createElement("table", {
-          id: id,
-          className: "pvtTable ".concat(rbClass, " ").concat(cbClass).concat(onStartResize ? ' pvtResizable' : '')
-        }, buildColgroup(), /*#__PURE__*/_react["default"].createElement("thead", null, colAttrs.map(function (c, j) {
-          var clickable = grouping && colAttrs.length > j + 1;
-          var levelKeys = allColKeys.filter(function (x) {
-            return x.length === j + 1;
-          });
-          return /*#__PURE__*/_react["default"].createElement("tr", {
-            key: "colAttr".concat(j)
-          }, showRowNumbers && j === 0 && /*#__PURE__*/_react["default"].createElement("th", {
-            className: "pvtRowNumber pvtAxisLabel",
-            rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
-          }, "#"), j === 0 && rowAttrs.length !== 0 && /*#__PURE__*/_react["default"].createElement("th", {
-            colSpan: rowAttrs.length,
-            rowSpan: colAttrs.length
-          }), /*#__PURE__*/_react["default"].createElement("th", {
-            className: "pvtAxisLabel" + clickClass(clickable, isFolded(levelKeys)),
-            onClick: clickable ? function (_) {
-              return fold(levelKeys);
-            } : null
-          }, c), shouldVirt.cols && colLeftPad > 0 && j === 0 && /*#__PURE__*/_react["default"].createElement("th", {
-            key: "col-pad-left",
-            style: {
-              minWidth: colLeftPad
-            }
-          }), visibleColKeys.map(function (colKey, i) {
-            var x = spanSize(visibleColKeys, i, j);
-            if (x === -1) {
-              return null;
-            }
-            // Usar el colKey completo como clave de resize solo en la última fila de headers
-            var isLastHeaderRow = j === colAttrs.length - 1;
-            var colLabel = colKey.join("\0");
-            return /*#__PURE__*/_react["default"].createElement("th", {
-              className: "pvtColLabel" + clickClass(clickable && colKey[j], isFolded([colKey.slice(0, j + 1)])),
-              key: "colKey-".concat(i, "-").concat(j, "-").concat(colKey[j]),
-              colSpan: x,
-              rowSpan: isLastHeaderRow && rowAttrs.length !== 0 ? 2 : 1,
-              onClick: clickable && colKey[j] ? function (_) {
-                return fold([colKey.slice(0, j + 1)]);
-              } : null
-            }, colKey[j], onStartResize && isLastHeaderRow && /*#__PURE__*/_react["default"].createElement("span", {
-              className: "pvtResizeHandle",
-              onPointerDown: function onPointerDown(e) {
-                return onStartResize(colLabel, e);
-              }
-            }));
-          }), shouldVirt.cols && colRightPad > 0 && j === 0 && /*#__PURE__*/_react["default"].createElement("th", {
-            key: "col-pad-right",
-            style: {
-              minWidth: colRightPad
-            }
-          }), j === 0 && /*#__PURE__*/_react["default"].createElement("th", {
-            className: "pvtTotalLabel",
-            rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
-          }, "Totals"));
-        }), rowAttrs.length !== 0 && /*#__PURE__*/_react["default"].createElement("tr", null, showRowNumbers && colAttrs.length === 0 && /*#__PURE__*/_react["default"].createElement("th", {
-          className: "pvtRowNumber pvtAxisLabel",
-          rowSpan: "1"
-        }, "#"), rowAttrs.map(function (r, i) {
-          var clickable = grouping && rowAttrs.length > i + 1;
-          var levelKeys = allRowKeys.filter(function (x) {
-            return x.length === i + 1;
+      } else if (opts.heatmapMode === 'row') {
+        var rowColorScales = {};
+        rowKeys.map(function (r) {
+          var rowValues = colKeys.map(function (x) {
+            return pivotData.getAggregator(r, x).value();
           });
-          return /*#__PURE__*/_react["default"].createElement("th", {
-            className: "pvtAxisLabel" + clickClass(clickable, isFolded(levelKeys)),
-            onClick: clickable ? function (_) {
-              return fold(levelKeys);
-            } : null,
-            key: "rowAttr".concat(i)
-          }, r);
-        }), /*#__PURE__*/_react["default"].createElement("th", {
-          className: "pvtTotalLabel"
-        }, colAttrs.length === 0 ? 'Totals' : null))), /*#__PURE__*/_react["default"].createElement("tbody", null, shouldVirt.rows && rowTopPad > 0 && /*#__PURE__*/_react["default"].createElement("tr", {
-          key: "virt-top-spacer",
-          style: {
-            height: rowTopPad
-          }
-        }, /*#__PURE__*/_react["default"].createElement("td", {
-          colSpan: 999
-        })), visibleRowKeys.map(function (rowKey, localI) {
-          var globalI = shouldVirt.rows ? virtualRowStartOffset + localI : localI;
-          var totalAggregator = pivotData.getAggregator(rowKey, []);
-          var rowGap = rowAttrs.length - rowKey.length;
-          var rowTotalResult = pipeline.processTotal({
-            aggregator: totalAggregator,
-            rowKey: rowKey,
-            type: 'row'
+          rowColorScales[r] = colorScaleGenerator(rowValues);
+        });
+        valueCellColors = function valueCellColors(r, c, v) {
+          return rowColorScales[r](v);
+        };
+      } else if (opts.heatmapMode === 'col') {
+        var colColorScales = {};
+        colKeys.map(function (c) {
+          var colValues = rowKeys.map(function (x) {
+            return pivotData.getAggregator(x, c).value();
           });
-          return /*#__PURE__*/_react["default"].createElement("tr", {
-            key: "rowKeyRow".concat(globalI),
-            className: (rowGap ? "pvtLevel" + rowGap : "pvtData") + " pvtRow-data",
-            style: shouldVirt.rows ? {
-              height: scroller.rowHeight
-            } : undefined
-          }, showRowNumbers && /*#__PURE__*/_react["default"].createElement("th", {
-            className: "pvtRowNumber"
-          }, startOffset + globalI + 1), rowKey.map(function (txt, j) {
-            if (compactRows && j < rowKey.length - 1) {
-              return null;
-            }
-            var clickable = grouping && rowAttrs.length > j + 1;
-            var x = compactRows ? 1 : spanSize(visibleRowKeys, localI, j, specialCase);
-            if (x === -1) {
-              return null;
-            }
-            return /*#__PURE__*/_react["default"].createElement("th", {
-              key: "rowKeyLabel-".concat(globalI, "-").concat(j, "-").concat(txt),
-              className: "pvtRowLabel" + clickClass(clickable && rowKey[j], isFolded([rowKey.slice(0, j + 1)])),
-              rowSpan: x,
-              colSpan: compactRows ? rowAttrs.length + 1 : j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1,
-              style: {
-                paddingLeft: compactRows ? "calc(var(--pvt-row-padding, 5px) + ".concat(j, " * var(--pvt-row-indent, 20px))") : null
-              },
-              onClick: clickable && rowKey[j] ? function (_) {
-                return fold([rowKey.slice(0, j + 1)]);
-              } : null
-            }, txt);
-          }), !compactRows && rowGap ? /*#__PURE__*/_react["default"].createElement("th", {
-            className: "pvtRowLabel",
-            colSpan: rowGap + 1
-          }, "Total (" + rowKey[rowKey.length - 1] + ")") : null, shouldVirt.cols && colLeftPad > 0 && /*#__PURE__*/_react["default"].createElement("td", {
-            key: "col-pad-left",
-            style: {
-              minWidth: colLeftPad
-            }
-          }), visibleColKeys.map(function (colKey, j) {
-            var aggregator = pivotData.getAggregator(rowKey, colKey);
-            var colGap = colAttrs.length - colKey.length;
-            var cellResult = pipeline.process({
-              aggregator: aggregator,
-              rowKey: rowKey,
-              colKey: colKey,
-              pivotData: pivotData
-            });
-            var isNumeric = typeof cellResult.value === 'number';
-            var mergedStyle = _objectSpread(_objectSpread({}, valueCellColors(rowKey, colKey, cellResult.value)), cellResult.style || {});
-            return /*#__PURE__*/_react["default"].createElement("td", {
-              className: "pvtVal" + (colGap ? " pvtLevel" + colGap : "") + (isNumeric ? " pvtVal-numeric" : "") + (cellResult.className ? " " + cellResult.className : ""),
-              key: "pvtVal".concat(globalI, "-").concat(j),
-              onClick: getClickHandler && getClickHandler(cellResult.value, rowKey, colKey),
-              style: Object.keys(mergedStyle).length > 0 ? mergedStyle : undefined
-            }, cellResult.rendered);
-          }), shouldVirt.cols && colRightPad > 0 && /*#__PURE__*/_react["default"].createElement("td", {
-            key: "col-pad-right",
-            style: {
-              minWidth: colRightPad
-            }
-          }), /*#__PURE__*/_react["default"].createElement("td", {
-            className: "pvtTotal" + (typeof rowTotalResult.value === 'number' ? " pvtVal-numeric" : ""),
-            onClick: getClickHandler && getClickHandler(rowTotalResult.value, rowKey, [null]),
-            style: colTotalColors(rowTotalResult.value) || rowTotalResult.style
-          }, rowTotalResult.rendered));
-        }), shouldVirt.rows && rowBottomPad > 0 && /*#__PURE__*/_react["default"].createElement("tr", {
-          key: "virt-bottom-spacer",
-          style: {
-            height: rowBottomPad
-          }
-        }, /*#__PURE__*/_react["default"].createElement("td", {
-          colSpan: 999
-        })), showRowNumbers && this.props.pagination && visibleRowKeys.length < this.props.pageSize && !shouldVirt.rows && Array.from({
-          length: this.props.pageSize - visibleRowKeys.length
-        }).map(function (_, padIdx) {
-          return /*#__PURE__*/_react["default"].createElement("tr", {
-            key: "padRow".concat(padIdx),
-            className: "pvtRow-data pvtEmptyRow"
-          }, /*#__PURE__*/_react["default"].createElement("th", {
-            className: "pvtRowNumber"
-          }, startOffset + visibleRowKeys.length + padIdx + 1), /*#__PURE__*/_react["default"].createElement("th", {
-            className: "pvtRowLabel",
-            colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
-          }), visibleColKeys.map(function (colKey, j) {
-            return /*#__PURE__*/_react["default"].createElement("td", {
-              key: "padVal".concat(padIdx, "-").concat(j),
-              className: "pvtVal pvtEmptyCell"
-            });
-          }), /*#__PURE__*/_react["default"].createElement("td", {
-            className: "pvtTotal pvtEmptyCell"
-          }));
-        }), /*#__PURE__*/_react["default"].createElement("tr", {
-          className: "pvtTotalRow"
-        }, showRowNumbers && /*#__PURE__*/_react["default"].createElement("th", {
-          className: "pvtTotalLabel"
-        }), /*#__PURE__*/_react["default"].createElement("th", {
-          className: "pvtTotalLabel",
-          colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
-        }, "Totals"), shouldVirt.cols && colLeftPad > 0 && /*#__PURE__*/_react["default"].createElement("td", {
-          key: "total-col-pad-left",
-          style: {
-            minWidth: colLeftPad
-          }
-        }), visibleColKeys.map(function (colKey, i) {
-          var totalAggregator = pivotData.getAggregator([], colKey);
-          var colGap = colAttrs.length - colKey.length;
-          var totalVal = totalAggregator.value();
-          var isNumeric = typeof totalVal === 'number';
-          return /*#__PURE__*/_react["default"].createElement("td", {
-            className: "pvtTotal" + (colGap ? " pvtLevel" + colGap : "") + (isNumeric ? " pvtVal-numeric" : ""),
-            key: "total".concat(i),
-            onClick: getClickHandler && getClickHandler(totalVal, [null], colKey),
-            style: rowTotalColors(totalVal)
-          }, totalAggregator.format(totalVal));
-        }), shouldVirt.cols && colRightPad > 0 && /*#__PURE__*/_react["default"].createElement("td", {
-          key: "total-col-pad-right",
-          style: {
-            minWidth: colRightPad
-          }
-        }), /*#__PURE__*/_react["default"].createElement("td", {
-          onClick: getClickHandler && getClickHandler(grandTotalAggregator.value(), [null], [null]),
-          className: "pvtGrandTotal" + (typeof grandTotalAggregator.value() === 'number' ? " pvtVal-numeric" : "")
-        }, grandTotalAggregator.format(grandTotalAggregator.value())))));
+          colColorScales[c] = colorScaleGenerator(colValues);
+        });
+        valueCellColors = function valueCellColors(r, c, v) {
+          return colColorScales[c](v);
+        };
+      }
+    }
+    var getClickHandler = props.tableOptions && props.tableOptions.clickCallback ? function (value, rowValues, colValues) {
+      var filters = {};
+      for (var _i = 0, _Object$keys = Object.keys(colAttrs || {}); _i < _Object$keys.length; _i++) {
+        var i = _Object$keys[_i];
+        var attr = colAttrs[i];
+        if (colValues[i] !== null) {
+          filters[attr] = colValues[i];
+        }
+      }
+      for (var _i2 = 0, _Object$keys2 = Object.keys(rowAttrs || {}); _i2 < _Object$keys2.length; _i2++) {
+        var _i3 = _Object$keys2[_i2];
+        var _attr = rowAttrs[_i3];
+        if (rowValues[_i3] !== null) {
+          filters[_attr] = rowValues[_i3];
+        }
+      }
+      return function (e) {
+        return props.tableOptions.clickCallback(e, value, filters, pivotData);
+      };
+    } : null;
+    var rbClass = grouping ? props.rowGroupBefore ? "rowGroupBefore" : "rowGroupAfter" : "";
+    var cbClass = grouping ? props.colGroupBefore ? "colGroupBefore" : "colGroupAfter" : "";
+    var clickClass = function clickClass(pred, closed) {
+      return pred ? " pvtClickable" + (closed ? " closed" : "") : "";
+    };
+    var handleScroll = isVirtualized ? function (e) {
+      setScrollTop(e.currentTarget.scrollTop);
+      setScrollLeft(e.currentTarget.scrollLeft);
+    } : null;
+
+    // ─── Column widths (resize) ────────────────────────────────
+    var resizeWidths = props._resizeWidths || {};
+    var onStartResize = props._onStartResize || null;
 
-        // Wrappear en container con scroll si virtualización está activa
-        if (isVirtualized) {
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            className: "pvtVirtualContainer",
-            style: {
-              maxHeight: scroller.containerHeight,
-              maxWidth: scroller.containerWidth,
-              overflow: 'auto',
-              position: 'relative'
-            },
-            onScroll: handleScroll
-          }, tableContent);
+    // Colgroup con anchos
+    var buildColgroup = function buildColgroup() {
+      var cols = [];
+      if (showRowNumbers) cols.push(/*#__PURE__*/_react["default"].createElement("col", {
+        key: "col-rownum",
+        style: {
+          width: '40px',
+          minWidth: '40px'
         }
-        return tableContent;
+      }));
+      rowAttrs.forEach(function (_, i) {
+        return cols.push(/*#__PURE__*/_react["default"].createElement("col", {
+          key: "col-rowattr-".concat(i)
+        }));
+      });
+      if (shouldVirt.cols && colLeftPad > 0) cols.push(/*#__PURE__*/_react["default"].createElement("col", {
+        key: "col-virt-left",
+        style: {
+          width: colLeftPad
+        }
+      }));
+      visibleColKeys.forEach(function (colKey) {
+        var label = colKey.join("\0");
+        var w = resizeWidths[label];
+        cols.push(/*#__PURE__*/_react["default"].createElement("col", {
+          key: "col-data-".concat(label),
+          style: w ? {
+            width: w,
+            minWidth: w
+          } : undefined
+        }));
+      });
+      if (shouldVirt.cols && colRightPad > 0) cols.push(/*#__PURE__*/_react["default"].createElement("col", {
+        key: "col-virt-right",
+        style: {
+          width: colRightPad
+        }
+      }));
+      cols.push(/*#__PURE__*/_react["default"].createElement("col", {
+        key: "col-totals"
+      }));
+      return /*#__PURE__*/_react["default"].createElement("colgroup", null, cols);
+    };
+
+    // ─── Shared params for sub-renders ─────────────────────────
+    var sharedParams = {
+      colAttrs: colAttrs,
+      rowAttrs: rowAttrs,
+      visibleColKeys: visibleColKeys,
+      allColKeys: allColKeys,
+      allRowKeys: allRowKeys,
+      showRowNumbers: showRowNumbers,
+      grouping: grouping,
+      isFolded: isFolded,
+      fold: fold,
+      clickClass: clickClass,
+      shouldVirt: shouldVirt,
+      colLeftPad: colLeftPad,
+      colRightPad: colRightPad,
+      onStartResize: onStartResize,
+      pivotData: pivotData,
+      pipeline: pipeline,
+      compactRows: compactRows,
+      specialCase: specialCase,
+      startOffset: startOffset,
+      scroller: scroller,
+      virtualRowStartOffset: virtualRowStartOffset,
+      valueCellColors: valueCellColors,
+      colTotalColors: colTotalColors,
+      rowTotalColors: rowTotalColors,
+      getClickHandler: getClickHandler,
+      grandTotalAggregator: grandTotalAggregator
+    };
+    var tableContent = /*#__PURE__*/_react["default"].createElement("table", {
+      id: id,
+      className: "pvtTable ".concat(rbClass, " ").concat(cbClass).concat(onStartResize ? ' pvtResizable' : '')
+    }, buildColgroup(), /*#__PURE__*/_react["default"].createElement("thead", null, renderColHeaders(sharedParams), renderRowAttrsHeader(sharedParams)), /*#__PURE__*/_react["default"].createElement("tbody", null, shouldVirt.rows && rowTopPad > 0 && /*#__PURE__*/_react["default"].createElement("tr", {
+      key: "virt-top-spacer",
+      style: {
+        height: rowTopPad
+      }
+    }, /*#__PURE__*/_react["default"].createElement("td", {
+      colSpan: 999
+    })), renderBodyRows(_objectSpread(_objectSpread({}, sharedParams), {}, {
+      visibleRowKeys: visibleRowKeys
+    })), shouldVirt.rows && rowBottomPad > 0 && /*#__PURE__*/_react["default"].createElement("tr", {
+      key: "virt-bottom-spacer",
+      style: {
+        height: rowBottomPad
       }
-    }]);
-  }(_react["default"].PureComponent);
-  TableRendererInner.defaultProps = _Utilities.PivotData.defaultProps;
-  TableRendererInner.propTypes = _Utilities.PivotData.propTypes;
-  TableRendererInner.defaultProps.tableColorScaleGenerator = redColorScaleGenerator;
-  TableRendererInner.defaultProps.tableOptions = {};
-  TableRendererInner.propTypes.tableColorScaleGenerator = _propTypes["default"].func;
-  TableRendererInner.propTypes.tableOptions = _propTypes["default"].object;
-  TableRendererInner.defaultProps.compactRows = true;
-  TableRendererInner.propTypes.compactRows = _propTypes["default"].bool;
-  TableRendererInner.defaultProps.showRowNumbers = true;
-  TableRendererInner.propTypes.showRowNumbers = _propTypes["default"].bool;
-  // Resize props (pasadas internamente desde el wrapper)
-  TableRendererInner.propTypes._resizeWidths = _propTypes["default"].object;
-  TableRendererInner.propTypes._onStartResize = _propTypes["default"].func;
+    }, /*#__PURE__*/_react["default"].createElement("td", {
+      colSpan: 999
+    })), props.pagination && renderEmptyPadRows({
+      visibleRowKeys: visibleRowKeys,
+      visibleColKeys: visibleColKeys,
+      rowAttrs: rowAttrs,
+      colAttrs: colAttrs,
+      showRowNumbers: showRowNumbers,
+      pageSize: props.pageSize,
+      startOffset: startOffset,
+      shouldVirt: shouldVirt
+    }), renderTotalsRow(sharedParams)));
+
+    // Wrapper con scroll si virtualización está activa
+    if (isVirtualized) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "pvtVirtualContainer",
+        style: {
+          maxHeight: scroller.containerHeight,
+          maxWidth: scroller.containerWidth,
+          overflow: 'auto',
+          position: 'relative'
+        },
+        onScroll: handleScroll
+      }, tableContent);
+    }
+    return tableContent;
+  }
+  TableRendererCore.defaultProps = _objectSpread(_objectSpread({}, _Utilities.PivotData.defaultProps), {}, {
+    tableColorScaleGenerator: redColorScaleGenerator,
+    tableOptions: {},
+    compactRows: true,
+    showRowNumbers: true
+  });
+  TableRendererCore.propTypes = _objectSpread(_objectSpread({}, _Utilities.PivotData.propTypes), {}, {
+    tableColorScaleGenerator: _propTypes["default"].func,
+    tableOptions: _propTypes["default"].object,
+    compactRows: _propTypes["default"].bool,
+    showRowNumbers: _propTypes["default"].bool,
+    _resizeWidths: _propTypes["default"].object,
+    _onStartResize: _propTypes["default"].func
+  });
 
-  // ─── Wrapper funcional para poder usar hooks ─────────────────────
+  // ─── Wrapper for column resize hook ─────────────────────────
   function TableRenderer(props) {
     var resizing = props.columnResizing === true;
     var _useColumnResize = (0, _useColumnResize2.useColumnResize)({
@@ -588,28 +714,28 @@ function makeRenderer() {
       }),
       widths = _useColumnResize.widths,
       startResize = _useColumnResize.startResize;
-    return /*#__PURE__*/_react["default"].createElement(TableRendererInner, _extends({}, props, {
+    return /*#__PURE__*/_react["default"].createElement(TableRendererCore, _extends({}, props, {
       _resizeWidths: resizing ? widths : {},
       _onStartResize: resizing ? startResize : null
     }));
   }
-  TableRenderer.defaultProps = _objectSpread(_objectSpread({}, TableRendererInner.defaultProps), {}, {
+  TableRenderer.defaultProps = _objectSpread(_objectSpread({}, TableRendererCore.defaultProps), {}, {
     columnResizing: false,
     columnWidths: {}
   });
-  TableRenderer.propTypes = _objectSpread(_objectSpread({}, TableRendererInner.propTypes), {}, {
+  TableRenderer.propTypes = _objectSpread(_objectSpread({}, TableRendererCore.propTypes), {}, {
     columnResizing: _propTypes["default"].bool,
     columnWidths: _propTypes["default"].object,
     onColumnWidthChange: _propTypes["default"].func
   });
   return TableRenderer;
 }
-var TSVExportRenderer = /*#__PURE__*/function (_React$PureComponent2) {
+var TSVExportRenderer = /*#__PURE__*/function (_React$PureComponent) {
   function TSVExportRenderer() {
     _classCallCheck(this, TSVExportRenderer);
     return _callSuper(this, TSVExportRenderer, arguments);
   }
-  _inherits(TSVExportRenderer, _React$PureComponent2);
+  _inherits(TSVExportRenderer, _React$PureComponent);
   return _createClass(TSVExportRenderer, [{
     key: "render",
     value: function render() {
@@ -648,8 +774,8 @@ var TSVExportRenderer = /*#__PURE__*/function (_React$PureComponent2) {
           return r.join('\t');
         }).join('\n'),
         style: {
-          width: window.innerWidth / 2,
-          height: window.innerHeight / 2
+          width: '100%',
+          height: '50vh'
         },
         readOnly: true
       });