cambio de value en input checkbox

PivotTableUI.js

@@ -364,6 +364,7 @@ var PivotTableUI = function (_React$PureComponent2) {
       attrValues: {},
       materializedInput: [],
       hideConfiguration: false,
+      showSubtotales: false,
       headerClass: '',
       stylesHeaders: {}
     };
@@ -572,27 +573,34 @@ var PivotTableUI = function (_React$PureComponent2) {
     }
   }, {
     key: 'makeDnDCell',
-    value: function makeDnDCell(items, onChange, classes) {
+    value: function makeDnDCell(items, _onChange, classes, headSlot) {
       var _this7 = this;
 
+      var onChange = function onChange(newArr) {
+        var _resultArr = newArr.filter(function (item) {
+          return item !== '[:sub-total:]';
+        });
+        _onChange(_resultArr);
+      };
       return _react2.default.createElement(
         _reactSortablejs2.default,
         {
           options: {
             group: 'shared',
             ghostClass: 'pvtPlaceholder',
-            filter: '.pvtFilterBox',
+            filter: '.pvtFilterBox, .pvtSubtotalCheck',
             preventOnFilter: false
           },
           tag: 'td',
           className: classes,
           onChange: onChange
         },
+        headSlot && typeof headSlot === 'function' && items.length > 1 && headSlot(),
         items.map(function (x) {
           return _react2.default.createElement(DraggableAttribute, {
             name: x,
             key: x,
-            attrValues: _this7.state.attrValues[x],
+            attrValues: _this7.state.attrValues[x] || {},
             valueFilter: _this7.props.valueFilter[x] || {},
             sorter: (0, _Utilities.getSort)(_this7.props.sorters, x),
             menuLimit: _this7.props.menuLimit,
@@ -732,7 +740,35 @@ var PivotTableUI = function (_React$PureComponent2) {
       var rowAttrs = this.props.rows.filter(function (e) {
         return !_this8.props.hiddenAttributes.includes(e) && !_this8.props.hiddenFromDragDrop.includes(e);
       });
-      var rowAttrsCell = this.makeDnDCell(rowAttrs, this.propUpdater('rows'), 'pvtAxisContainer pvtVertList pvtRows');
+      var toggleSubTotales = function toggleSubTotales() {
+        var _showSubt = _this8.props.showSubtotales === true ? true : false;
+        _this8.propUpdater('showSubtotales')(!_showSubt);
+        // this.setState({ showSubtotales: !_showSubt })
+      };
+      var renderCheckSubtotal = function renderCheckSubtotal() {
+        return _react2.default.createElement(
+          'li',
+          { className: 'pvtSubtotalCheck cursor-default', 'data-id': '[:sub-total:]' },
+          _react2.default.createElement(
+            'span',
+            { className: 'pvtAttr' },
+            _react2.default.createElement(
+              'span',
+              { className: 'pvtAttrTitle' },
+              'Subtotales'
+            ),
+            _react2.default.createElement('input', {
+              type: 'checkbox',
+              checked: _this8.props.showSubtotales === true,
+              className: 'via-checkbox h-5 w-5 cursor-pointer',
+              onChange: function onChange() {
+                toggleSubTotales();
+              }
+            })
+          )
+        );
+      };
+      var rowAttrsCell = this.makeDnDCell(rowAttrs, this.propUpdater('rows'), 'pvtAxisContainer pvtVertList pvtRows', renderCheckSubtotal);
       var outputCell = _react2.default.createElement(
         'td',
         { className: 'pvtOutput' },
@@ -850,6 +886,7 @@ PivotTableUI.propTypes = Object.assign({}, _PivotTable2.default.propTypes, {
   unusedOrientationCutoff: _propTypes2.default.number,
   menuLimit: _propTypes2.default.number,
   hideConfiguration: _propTypes2.default.bool,
+  showSubtotales: _propTypes2.default.bool,
   headerClass: _propTypes2.default.string,
   stylesHeaders: _propTypes2.default.object
 });
@@ -860,7 +897,8 @@ PivotTableUI.defaultProps = Object.assign({}, _PivotTable2.default.defaultProps,
   hiddenFromDragDrop: [],
   unusedOrientationCutoff: 85,
   menuLimit: 500,
-  hideConfiguration: true
+  hideConfiguration: true,
+  showSubtotales: false
 });
 
 exports.default = PivotTableUI;

TableRenderers.js

@@ -90,6 +90,32 @@ function makeRenderer() {
         var rowAttrs = pivotData.props.rows;
         var rowKeys = pivotData.getRowKeys();
         var colKeys = pivotData.getColKeys();
+        var rowKeysSub = [];
+        if (this.props.showSubtotales === true && rowAttrs !== null && rowAttrs.length > 1) {
+          var beforeFirstKey = null;
+          for (var idx = 0; idx < rowKeys.length; idx++) {
+            var arrRowKeys = rowKeys[idx];
+            var emptyElements = arrRowKeys.length - 2;
+            var arrEmptyElements = [];
+            for (var idxEmpt = 0; idxEmpt < emptyElements; idxEmpt++) {
+              arrEmptyElements.push('');
+            }
+            var currentFirstKey = arrRowKeys[0];
+            if (beforeFirstKey === null) {
+              beforeFirstKey = currentFirstKey;
+            }
+            if (beforeFirstKey !== currentFirstKey) {
+              rowKeysSub.push([beforeFirstKey].concat(arrEmptyElements, ['[:sub-total:]']));
+              beforeFirstKey = currentFirstKey;
+            }
+            rowKeysSub.push(arrRowKeys);
+            if (idx === rowKeys.length - 1) {
+              rowKeysSub.push([currentFirstKey].concat(arrEmptyElements, ['[:sub-total:]']));
+            }
+          }
+        } else {
+          rowKeysSub = pivotData.getRowKeys();
+        }
         var grandTotalAggregator = pivotData.getAggregator([], []);
 
         var getStylesHeaders = function getStylesHeaders() {
@@ -265,7 +291,7 @@ function makeRenderer() {
 
         var getFormatedValue = function getFormatedValue(aggregator) {
           var valToFormat = aggregator.value();
-          var resultValue = aggregator.format(valToFormat);
+          var resultValue = typeof aggregator.format === 'function' ? aggregator.format(valToFormat) : valToFormat;
           var keyColumnaCalculo = isNotNullish(_this2.props.vals) && _this2.props.vals.length ? _this2.props.vals[0] : null;
           if (_this2.props.aggregatorName === 'Conteo') {
             resultValue = isNotNullish(_this2.props.functions) ? _this2.props.functions.formatedValue(valToFormat, '0,0', 'number', false) : resultValue;
@@ -297,6 +323,54 @@ function makeRenderer() {
           return '';
         };
 
+        var getSubAggregator = function getSubAggregator(rowKey, colKey) {
+          if (rowKey.includes('[:sub-total:]')) {
+            var _resultAgg = {};
+            var _arrRowKeys = rowKeys.filter(function (itmRk) {
+              return itmRk[0] === rowKey[0];
+            });
+            var subTotalBruto = 0;
+            var subTotalCount = _arrRowKeys.length;
+            var subTotalMin = null;
+            var subTotalMax = null;
+            for (var _idx = 0; _idx < subTotalCount; _idx++) {
+              var _rowKey = _arrRowKeys[_idx];
+              var _agg = pivotData.getAggregator(_rowKey, colKey);
+              var _aggValue = _agg.value();
+              subTotalBruto = subTotalBruto + _aggValue;
+              if (_idx === 0) {
+                subTotalMin = _aggValue;
+                subTotalMax = _aggValue;
+              } else {
+                subTotalMin = _aggValue < subTotalMin ? _aggValue : subTotalMin;
+                subTotalMax = _aggValue > subTotalMax ? _aggValue : subTotalMax;
+              }
+            }
+            _resultAgg.sum = subTotalBruto;
+            _resultAgg.count = subTotalCount;
+            _resultAgg.format = function () {
+              return 'f';
+            };
+            _resultAgg.value = function () {
+              if (_this2.props.aggregatorName === 'Suma' || _this2.props.aggregatorName === 'Conteo') {
+                return subTotalBruto;
+              }
+              if (_this2.props.aggregatorName === 'Promedio') {
+                return subTotalBruto / subTotalCount;
+              }
+              if (_this2.props.aggregatorName === 'Mínimo') {
+                return subTotalMin;
+              }
+              if (_this2.props.aggregatorName === 'Máximo') {
+                return subTotalMax;
+              }
+              return 0;
+            };
+            return _resultAgg;
+          }
+          return pivotData.getAggregator(rowKey, colKey);
+        };
+
         return _react2.default.createElement(
           'table',
           { className: 'pvtTable' },
@@ -361,13 +435,14 @@ function makeRenderer() {
           _react2.default.createElement(
             'tbody',
             null,
-            rowKeys.map(function (rowKey, i) {
+            rowKeysSub.map(function (rowKey, i) {
-              var totalAggregator = pivotData.getAggregator(rowKey, []);
+              var isSubTotal = rowKey.includes('[:sub-total:]');
+              var totalAggregator = getSubAggregator(rowKey, []);
               return _react2.default.createElement(
                 'tr',
-                { key: 'rowKeyRow' + i },
+                { key: 'rowKeyRow' + i + ' ' + (isSubTotal ? ' bg-sky-50 ' : '') },
                 rowKey.map(function (txt, j) {
-                  var x = spanSize(rowKeys, i, j);
+                  var x = spanSize(rowKeysSub, i, j);
                   if (x === -1) {
                     return null;
                   }
@@ -380,15 +455,15 @@ function makeRenderer() {
                       rowSpan: x,
                       colSpan: j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1
                     },
-                    txt
+                    isSubTotal ? 'SubTotal' : txt
                   );
                 }),
                 colKeys.map(function (colKey, j) {
-                  var aggregator = pivotData.getAggregator(rowKey, colKey);
+                  var aggregator = getSubAggregator(rowKey, colKey);
                   return _react2.default.createElement(
                     'td',
                     {
-                      className: 'pvtVal ' + getValueClass(aggregator),
+                      className: 'pvtVal ' + (isSubTotal ? '' : getValueClass(aggregator)) + ' ' + (isSubTotal ? 'pvtSubTotal' : ''),
                       key: 'pvtVal' + i + '-' + j,
                       onClick: getClickHandler && getClickHandler(aggregator.value(), rowKey, colKey),
                       style: valueCellColors(rowKey, colKey, aggregator.value())
@@ -399,7 +474,7 @@ function makeRenderer() {
                 _react2.default.createElement(
                   'td',
                   {
-                    className: 'pvtTotal',
+                    className: ' pvtTotal ' + (isSubTotal ? 'pvtSubTotal' : '') + ' ',
                     onClick: getClickHandler && getClickHandler(totalAggregator.value(), rowKey, [null]),
                     style: colTotalColors(totalAggregator.value())
                   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-react-pivottable",
-  "version": "0.11.47",
+  "version": "0.11.70",
   "description": "A React-based pivot table",
   "main": "PivotTableUI.js",
   "files": [