react-pivottable-plus 1.0.14 → 1.0.18

package/README.md

@@ -34,6 +34,8 @@ npm install --save react-pivottable-plus react react-dom
 Gracias a las últimas optimizaciones, implementar la tabla dinámica es más sencillo que nunca. La mayoría de las propiedades ya tienen valores por defecto inteligentes.
 
 ```jsx
+"use client";
+
 import React, { useState } from 'react';
 import PivotTableUI from 'react-pivottable-plus'; // Importación directa
 import 'react-pivottable-plus/pivottable.css';

package/dist/PivotTableUI.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 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", {
@@ -7,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.Dropdown = exports.DraggableAttribute = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
 var _Utilities = require("./Utilities");
 var _PivotTable = _interopRequireDefault(require("./PivotTable"));
 var _TableRenderers = _interopRequireDefault(require("./TableRenderers"));
+var _usePivot2 = require("./hooks/usePivot");
 var _reactDraggable = _interopRequireDefault(require("react-draggable"));
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
@@ -274,170 +275,85 @@ var DnDCell = function DnDCell(_ref4) {
 };
 var PivotTableUI = function PivotTableUI(props) {
   var _aggregators$aggregat, _aggregators$aggregat2;
-  var _props$data = props.data,
-    data = _props$data === void 0 ? [] : _props$data,
-    _props$onChange = props.onChange,
-    onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
-    _props$rows = props.rows,
-    rows = _props$rows === void 0 ? [] : _props$rows,
-    _props$cols = props.cols,
-    cols = _props$cols === void 0 ? [] : _props$cols,
-    _props$vals = props.vals,
-    vals = _props$vals === void 0 ? [] : _props$vals,
-    _props$aggregatorName = props.aggregatorName,
-    aggregatorName = _props$aggregatorName === void 0 ? 'Count' : _props$aggregatorName,
-    _props$aggregators = props.aggregators,
-    aggregators = _props$aggregators === void 0 ? _Utilities.aggregators : _props$aggregators,
-    _props$rendererName = props.rendererName,
-    rendererName = _props$rendererName === void 0 ? 'Table' : _props$rendererName,
-    _props$renderers = props.renderers,
-    renderers = _props$renderers === void 0 ? _TableRenderers["default"] : _props$renderers,
-    _props$valueFilter = props.valueFilter,
-    valueFilter = _props$valueFilter === void 0 ? {} : _props$valueFilter,
-    _props$sorters = props.sorters,
-    sorters = _props$sorters === void 0 ? {} : _props$sorters,
-    _props$menuLimit = props.menuLimit,
-    menuLimit = _props$menuLimit === void 0 ? 500 : _props$menuLimit,
-    _props$unusedOrientat = props.unusedOrientationCutoff,
-    unusedOrientationCutoff = _props$unusedOrientat === void 0 ? 85 : _props$unusedOrientat,
-    _props$hiddenAttribut = props.hiddenAttributes,
-    hiddenAttributes = _props$hiddenAttribut === void 0 ? [] : _props$hiddenAttribut,
-    _props$hiddenFromAggr = props.hiddenFromAggregators,
-    hiddenFromAggregators = _props$hiddenFromAggr === void 0 ? [] : _props$hiddenFromAggr,
-    _props$hiddenFromDrag = props.hiddenFromDragDrop,
-    hiddenFromDragDrop = _props$hiddenFromDrag === void 0 ? [] : _props$hiddenFromDrag,
-    _props$pagination = props.pagination,
-    pagination = _props$pagination === void 0 ? false : _props$pagination,
-    _props$page = props.page,
-    page = _props$page === void 0 ? 1 : _props$page,
-    _props$pageSize = props.pageSize,
-    pageSize = _props$pageSize === void 0 ? 20 : _props$pageSize,
-    _props$rowOrder = props.rowOrder,
-    rowOrder = _props$rowOrder === void 0 ? 'key_a_to_z' : _props$rowOrder,
-    _props$colOrder = props.colOrder,
-    colOrder = _props$colOrder === void 0 ? 'key_a_to_z' : _props$colOrder,
-    _props$derivedAttribu = props.derivedAttributes,
-    derivedAttributes = _props$derivedAttribu === void 0 ? {} : _props$derivedAttribu,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'lg' : _props$size;
+  // ─── Headless Core: toda la lógica de datos y props fluye a través del 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) ─────────────────────────
   var _useState5 = (0, _react.useState)({
-      unusedOrder: [],
       zIndices: {},
       maxZIndex: 1000,
-      openDropdown: false,
-      attrValues: {},
-      materializedInput: [],
-      data: null
+      openDropdown: false
     }),
     _useState6 = _slicedToArray(_useState5, 2),
-    state = _useState6[0],
-    setState = _useState6[1];
+    uiState = _useState6[0],
+    setUiState = _useState6[1];
   var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
     activeId = _useState8[0],
     setActiveId = _useState8[1];
-  (0, _react.useEffect)(function () {
-    if (state.data === data) return;
-    var newState = {
-      data: data,
-      attrValues: {},
-      materializedInput: []
-    };
-    var recordsProcessed = 0;
-    _Utilities.PivotData.forEachRecord(data, derivedAttributes, function (record) {
-      newState.materializedInput.push(record);
-      for (var _i = 0, _Object$keys = Object.keys(record); _i < _Object$keys.length; _i++) {
-        var attr = _Object$keys[_i];
-        if (!(attr in newState.attrValues)) {
-          newState.attrValues[attr] = {};
-          if (recordsProcessed > 0) newState.attrValues[attr]["null"] = recordsProcessed;
-        }
-      }
-      for (var _attr in newState.attrValues) {
-        var value = _attr in record ? record[_attr] : 'null';
-        if (!(value in newState.attrValues[_attr])) newState.attrValues[_attr][value] = 0;
-        newState.attrValues[_attr][value]++;
-      }
-      recordsProcessed++;
-    });
-    setState(function (s) {
-      return _objectSpread(_objectSpread({}, s), newState);
-    });
-  }, [data, derivedAttributes, state.data]);
-  var sendPropUpdate = (0, _react.useCallback)(function (command) {
-    var newProps = (0, _immutabilityHelper["default"])(props, command);
-    if (onChange) onChange(newProps);
-  }, [props, onChange]);
-  var handleDuplicates = function handleDuplicates(newAttrs, existingAttrs) {
-    if (!newAttrs || !existingAttrs) return existingAttrs || [];
-    var dups = newAttrs.filter(function (item) {
-      return existingAttrs.includes(item);
-    });
-    return dups.length > 0 ? existingAttrs.filter(function (item) {
-      return !dups.includes(item);
-    }) : existingAttrs;
-  };
-  var propUpdater = (0, _react.useCallback)(function (key) {
-    return function (value) {
-      var updateObj = _defineProperty({}, key, {
-        $set: value
-      });
-      if (key === 'rows') {
-        var updatedCols = handleDuplicates(value, cols);
-        if (updatedCols.length !== cols.length) updateObj.cols = {
-          $set: updatedCols
-        };
-      } else if (key === 'cols') {
-        var updatedRows = handleDuplicates(value, rows);
-        if (updatedRows.length !== rows.length) updateObj.rows = {
-          $set: updatedRows
-        };
-      }
-      sendPropUpdate(updateObj);
-    };
-  }, [cols, rows, sendPropUpdate]);
-  var setValuesInFilter = (0, _react.useCallback)(function (attribute, values) {
-    sendPropUpdate({
-      valueFilter: _defineProperty({}, attribute, {
-        $set: values.reduce(function (r, v) {
-          r[v] = true;
-          return r;
-        }, {})
-      })
-    });
-  }, [sendPropUpdate]);
-  var addValuesToFilter = (0, _react.useCallback)(function (attribute, values) {
-    if (attribute in valueFilter) {
-      sendPropUpdate({
-        valueFilter: _defineProperty({}, attribute, values.reduce(function (r, v) {
-          r[v] = {
-            $set: true
-          };
-          return r;
-        }, {}))
-      });
-    } else {
-      setValuesInFilter(attribute, values);
-    }
-  }, [sendPropUpdate, valueFilter, setValuesInFilter]);
-  var removeValuesFromFilter = (0, _react.useCallback)(function (attribute, values) {
-    sendPropUpdate({
-      valueFilter: _defineProperty({}, attribute, {
-        $unset: values
-      })
-    });
-  }, [sendPropUpdate]);
+
+  // ─── Helpers de UI local ──────────────────────────────────────────────────────
   var moveFilterBoxToTop = (0, _react.useCallback)(function (attribute) {
-    setState(function (s) {
+    setUiState(function (s) {
       return _objectSpread(_objectSpread({}, s), {}, {
         maxZIndex: s.maxZIndex + 1,
         zIndices: _objectSpread(_objectSpread({}, s.zIndices), {}, _defineProperty({}, attribute, s.maxZIndex + 1))
       });
     });
   }, []);
-  var unusedAttrs = Object.keys(state.attrValues).filter(function (e) {
+
+  // ─── Derivados desde el Core ──────────────────────────────────────────────────
+  var _pivotProps$rows = pivotProps.rows,
+    rows = _pivotProps$rows === void 0 ? [] : _pivotProps$rows,
+    _pivotProps$cols = pivotProps.cols,
+    cols = _pivotProps$cols === void 0 ? [] : _pivotProps$cols,
+    _pivotProps$vals = pivotProps.vals,
+    vals = _pivotProps$vals === void 0 ? [] : _pivotProps$vals,
+    _pivotProps$aggregato = pivotProps.aggregatorName,
+    aggregatorName = _pivotProps$aggregato === void 0 ? 'Count' : _pivotProps$aggregato,
+    _pivotProps$aggregato2 = pivotProps.aggregators,
+    aggregators = _pivotProps$aggregato2 === void 0 ? _Utilities.aggregators : _pivotProps$aggregato2,
+    _pivotProps$rendererN = pivotProps.rendererName,
+    rendererName = _pivotProps$rendererN === void 0 ? 'Table' : _pivotProps$rendererN,
+    _pivotProps$renderers = pivotProps.renderers,
+    renderers = _pivotProps$renderers === void 0 ? _TableRenderers["default"] : _pivotProps$renderers,
+    _pivotProps$valueFilt = pivotProps.valueFilter,
+    valueFilter = _pivotProps$valueFilt === void 0 ? {} : _pivotProps$valueFilt,
+    _pivotProps$sorters = pivotProps.sorters,
+    sorters = _pivotProps$sorters === void 0 ? {} : _pivotProps$sorters,
+    _pivotProps$menuLimit = pivotProps.menuLimit,
+    menuLimit = _pivotProps$menuLimit === void 0 ? 500 : _pivotProps$menuLimit,
+    _pivotProps$unusedOri = pivotProps.unusedOrientationCutoff,
+    unusedOrientationCutoff = _pivotProps$unusedOri === void 0 ? 85 : _pivotProps$unusedOri,
+    _pivotProps$hiddenAtt = pivotProps.hiddenAttributes,
+    hiddenAttributes = _pivotProps$hiddenAtt === void 0 ? [] : _pivotProps$hiddenAtt,
+    _pivotProps$hiddenFro = pivotProps.hiddenFromAggregators,
+    hiddenFromAggregators = _pivotProps$hiddenFro === void 0 ? [] : _pivotProps$hiddenFro,
+    _pivotProps$hiddenFro2 = pivotProps.hiddenFromDragDrop,
+    hiddenFromDragDrop = _pivotProps$hiddenFro2 === void 0 ? [] : _pivotProps$hiddenFro2,
+    _pivotProps$paginatio = pivotProps.pagination,
+    pagination = _pivotProps$paginatio === void 0 ? false : _pivotProps$paginatio,
+    _pivotProps$page = pivotProps.page,
+    page = _pivotProps$page === void 0 ? 1 : _pivotProps$page,
+    _pivotProps$pageSize = pivotProps.pageSize,
+    pageSize = _pivotProps$pageSize === void 0 ? 20 : _pivotProps$pageSize,
+    _pivotProps$rowOrder = pivotProps.rowOrder,
+    rowOrder = _pivotProps$rowOrder === void 0 ? 'key_a_to_z' : _pivotProps$rowOrder,
+    _pivotProps$colOrder = pivotProps.colOrder,
+    colOrder = _pivotProps$colOrder === void 0 ? 'key_a_to_z' : _pivotProps$colOrder,
+    _pivotProps$size = pivotProps.size,
+    size = _pivotProps$size === void 0 ? 'lg' : _pivotProps$size,
+    _pivotProps$columnRes = pivotProps.columnResizing,
+    columnResizing = _pivotProps$columnRes === void 0 ? false : _pivotProps$columnRes,
+    _pivotProps$columnWid = pivotProps.columnWidths,
+    columnWidths = _pivotProps$columnWid === void 0 ? {} : _pivotProps$columnWid,
+    onColumnWidthChange = pivotProps.onColumnWidthChange;
+  var unusedAttrs = Object.keys(pivotState.attrValues).filter(function (e) {
     return e && e.trim() !== '' && !rows.includes(e) && !cols.includes(e) && !hiddenAttributes.includes(e) && !hiddenFromDragDrop.includes(e);
-  }).sort((0, _Utilities.sortAs)(state.unusedOrder));
+  }).sort((0, _Utilities.sortAs)(pivotState.unusedOrder || []));
   var unusedLength = unusedAttrs.reduce(function (r, e) {
     return r + e.length;
   }, 0);
@@ -448,6 +364,8 @@ var PivotTableUI = function PivotTableUI(props) {
   var rowAttrs = rows.filter(function (e) {
     return e && e.trim() !== '' && !hiddenAttributes.includes(e) && !hiddenFromDragDrop.includes(e);
   });
+
+  // ─── DnD Zones ────────────────────────────────────────────────────────────────
   var getZoneOfItem = function getZoneOfItem(id) {
     if (rowAttrs.includes(id)) return 'rows';
     if (colAttrs.includes(id)) return 'cols';
@@ -461,14 +379,14 @@ var PivotTableUI = function PivotTableUI(props) {
     return [];
   };
   var getUpdaterByZone = function getUpdaterByZone(zone) {
-    if (zone === 'rows') return propUpdater('rows');
-    if (zone === 'cols') return propUpdater('cols');
+    if (zone === 'rows') return function (value) {
+      return actions.updateProp('rows', value);
+    };
+    if (zone === 'cols') return function (value) {
+      return actions.updateProp('cols', value);
+    };
     if (zone === 'unused') return function (order) {
-      return setState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          unusedOrder: order
-        });
-      });
+      return actions.setUnusedOrder(order);
     };
     return function () {};
   };
@@ -517,8 +435,10 @@ var PivotTableUI = function PivotTableUI(props) {
       if (oldIndex !== newIndex) getUpdaterByZone(activeZone)((0, _sortable.arrayMove)(list, oldIndex, newIndex));
     }
   };
+
+  // ─── Dropdowns y controles ────────────────────────────────────────────────────
   var isOpen = function isOpen(dropdown) {
-    return state.openDropdown === dropdown;
+    return uiState.openDropdown === dropdown;
   };
   var numValsAllowed = ((_aggregators$aggregat = aggregators[aggregatorName]) === null || _aggregators$aggregat === void 0 || (_aggregators$aggregat2 = _aggregators$aggregat.call(aggregators, [])) === null || _aggregators$aggregat2 === void 0 || (_aggregators$aggregat2 = _aggregators$aggregat2()) === null || _aggregators$aggregat2 === void 0 ? void 0 : _aggregators$aggregat2.numInputs) || 0;
   var actualRendererName = rendererName in renderers ? rendererName : Object.keys(renderers)[0];
@@ -539,19 +459,25 @@ 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,
+    maxZIndex: uiState.maxZIndex
+  };
   var sharedCellProps = {
-    state: state,
+    state: combinedState,
     valueFilter: valueFilter,
     sorters: sorters,
     menuLimit: menuLimit,
-    setValuesInFilter: setValuesInFilter,
-    addValuesToFilter: addValuesToFilter,
+    setValuesInFilter: actions.setValuesInFilter,
+    addValuesToFilter: actions.addValuesToFilter,
     moveFilterBoxToTop: moveFilterBoxToTop,
-    removeValuesFromFilter: removeValuesFromFilter
+    removeValuesFromFilter: actions.removeValuesFromFilter
   };
   var componentProps = {
-    data: state.materializedInput,
-    onChange: onChange,
+    data: pivotState.materializedInput,
     rows: rows,
     cols: cols,
     vals: vals,
@@ -571,12 +497,17 @@ var PivotTableUI = function PivotTableUI(props) {
     pageSize: pageSize,
     rowOrder: rowOrder,
     colOrder: colOrder,
-    derivedAttributes: derivedAttributes
+    derivedAttributes: pivotProps.derivedAttributes,
+    cellPipeline: pivotProps.cellPipeline,
+    virtualization: pivotProps.virtualization,
+    columnResizing: columnResizing,
+    columnWidths: columnWidths,
+    onColumnWidthChange: onColumnWidthChange
   };
   var renderFooter = function renderFooter() {
     var pivotData = new _Utilities.PivotData(componentProps);
     var totalPivotRows = pivotData.getRowKeys().length;
-    var totalRecords = state.materializedInput.length;
+    var totalRecords = pivotState.materializedInput.length;
     var totalPages = Math.ceil(totalPivotRows / pageSize);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "pvtFooter"
@@ -588,13 +519,13 @@ var PivotTableUI = function PivotTableUI(props) {
       className: "pvtButton",
       disabled: page <= 1,
       onClick: function onClick() {
-        return propUpdater('page')(1);
+        return actions.updateProp('page', 1);
       }
     }, "\xAB"), /*#__PURE__*/_react["default"].createElement("button", {
       className: "pvtButton",
       disabled: page <= 1,
       onClick: function onClick() {
-        return propUpdater('page')(page - 1);
+        return actions.updateProp('page', page - 1);
       }
     }, "\u2039"), /*#__PURE__*/_react["default"].createElement("span", null, "P\xE1gina ", /*#__PURE__*/_react["default"].createElement("input", {
       type: "number",
@@ -604,32 +535,26 @@ var PivotTableUI = function PivotTableUI(props) {
       max: totalPages,
       onChange: function onChange(e) {
         var val = parseInt(e.target.value, 10);
-        if (val > 0 && val <= totalPages) propUpdater('page')(val);
+        if (val > 0 && val <= totalPages) actions.updateProp('page', val);
       }
     }), " de ", totalPages), /*#__PURE__*/_react["default"].createElement("button", {
       className: "pvtButton",
       disabled: page >= totalPages,
       onClick: function onClick() {
-        return propUpdater('page')(page + 1);
+        return actions.updateProp('page', page + 1);
       }
     }, "\u203A"), /*#__PURE__*/_react["default"].createElement("button", {
       className: "pvtButton",
       disabled: page >= totalPages,
       onClick: function onClick() {
-        return propUpdater('page')(totalPages);
+        return actions.updateProp('page', totalPages);
       }
     }, "\xBB"), /*#__PURE__*/_react["default"].createElement("select", {
       className: "pvtPageSize",
       value: pageSize,
       onChange: function onChange(e) {
-        sendPropUpdate({
-          pageSize: {
-            $set: parseInt(e.target.value, 10)
-          },
-          page: {
-            $set: 1
-          }
-        });
+        actions.updateProp('pageSize', parseInt(e.target.value, 10));
+        actions.updateProp('page', 1);
       }
     }, [10, 20, 50, 100].map(function (n) {
       return /*#__PURE__*/_react["default"].createElement("option", {
@@ -645,10 +570,10 @@ var PivotTableUI = function PivotTableUI(props) {
     onDragOver: handleDragOver,
     onDragEnd: handleDragEnd
   }, /*#__PURE__*/_react["default"].createElement("table", {
-    className: "pvtUi pvtSize-".concat(size)
+    className: "pvtUi pvt-theme-".concat(props.theme || 'default', " pvt-size-").concat(size || 'lg')
   }, /*#__PURE__*/_react["default"].createElement("tbody", {
     onClick: function onClick() {
-      return setState(function (s) {
+      return setUiState(function (s) {
         return _objectSpread(_objectSpread({}, s), {}, {
           openDropdown: false
         });
@@ -660,15 +585,17 @@ var PivotTableUI = function PivotTableUI(props) {
     current: actualRendererName,
     values: Object.keys(renderers),
     open: isOpen('renderer'),
-    zIndex: isOpen('renderer') ? state.maxZIndex + 1 : 1,
+    zIndex: isOpen('renderer') ? uiState.maxZIndex + 1 : 1,
     toggle: function toggle() {
-      return setState(function (s) {
+      return setUiState(function (s) {
         return _objectSpread(_objectSpread({}, s), {}, {
           openDropdown: isOpen('renderer') ? false : 'renderer'
         });
       });
     },
-    setValue: propUpdater('rendererName')
+    setValue: function setValue(v) {
+      return actions.updateProp('rendererName', v);
+    }
   })), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
     id: "unused",
     items: unusedAttrs,
@@ -680,49 +607,49 @@ var PivotTableUI = function PivotTableUI(props) {
     current: aggregatorName,
     values: Object.keys(aggregators),
     open: isOpen('aggregators'),
-    zIndex: isOpen('aggregators') ? state.maxZIndex + 1 : 1,
+    zIndex: isOpen('aggregators') ? uiState.maxZIndex + 1 : 1,
     toggle: function toggle() {
-      return setState(function (s) {
+      return setUiState(function (s) {
         return _objectSpread(_objectSpread({}, s), {}, {
           openDropdown: isOpen('aggregators') ? false : 'aggregators'
         });
       });
     },
-    setValue: propUpdater('aggregatorName')
+    setValue: function setValue(v) {
+      return actions.updateProp('aggregatorName', v);
+    }
   }), /*#__PURE__*/_react["default"].createElement("a", {
     role: "button",
     className: "pvtRowOrder",
     onClick: function onClick() {
-      return propUpdater('rowOrder')(sortIcons[rowOrder].next);
+      return actions.updateProp('rowOrder', sortIcons[rowOrder].next);
     }
   }, sortIcons[rowOrder].rowSymbol), /*#__PURE__*/_react["default"].createElement("a", {
     role: "button",
     className: "pvtColOrder",
     onClick: function onClick() {
-      return propUpdater('colOrder')(sortIcons[colOrder].next);
+      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(state.attrValues).filter(function (e) {
+      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)) ? state.maxZIndex + 1 : 1,
+      zIndex: isOpen("val".concat(i)) ? uiState.maxZIndex + 1 : 1,
       toggle: function toggle() {
-        return setState(function (s) {
+        return setUiState(function (s) {
           return _objectSpread(_objectSpread({}, s), {}, {
             openDropdown: isOpen("val".concat(i)) ? false : "val".concat(i)
           });
         });
       },
       setValue: function setValue(value) {
-        return sendPropUpdate({
-          vals: {
-            $splice: [[i, 1, value]]
-          }
-        });
+        var newVals = _toConsumableArray(vals);
+        newVals[i] = value;
+        actions.updateProp('vals', newVals);
       }
     }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
       key: "br".concat(i)
@@ -745,64 +672,66 @@ var PivotTableUI = function PivotTableUI(props) {
     current: actualRendererName,
     values: Object.keys(renderers),
     open: isOpen('renderer'),
-    zIndex: isOpen('renderer') ? state.maxZIndex + 1 : 1,
+    zIndex: isOpen('renderer') ? uiState.maxZIndex + 1 : 1,
     toggle: function toggle() {
-      return setState(function (s) {
+      return setUiState(function (s) {
         return _objectSpread(_objectSpread({}, s), {}, {
           openDropdown: isOpen('renderer') ? false : 'renderer'
         });
       });
     },
-    setValue: propUpdater('rendererName')
+    setValue: function setValue(v) {
+      return actions.updateProp('rendererName', v);
+    }
   })), /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtVals"
   }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
     current: aggregatorName,
     values: Object.keys(aggregators),
     open: isOpen('aggregators'),
-    zIndex: isOpen('aggregators') ? state.maxZIndex + 1 : 1,
+    zIndex: isOpen('aggregators') ? uiState.maxZIndex + 1 : 1,
     toggle: function toggle() {
-      return setState(function (s) {
+      return setUiState(function (s) {
         return _objectSpread(_objectSpread({}, s), {}, {
           openDropdown: isOpen('aggregators') ? false : 'aggregators'
         });
       });
     },
-    setValue: propUpdater('aggregatorName')
+    setValue: function setValue(v) {
+      return actions.updateProp('aggregatorName', v);
+    }
   }), /*#__PURE__*/_react["default"].createElement("a", {
     role: "button",
     className: "pvtRowOrder",
     onClick: function onClick() {
-      return propUpdater('rowOrder')(sortIcons[rowOrder].next);
+      return actions.updateProp('rowOrder', sortIcons[rowOrder].next);
     }
   }, sortIcons[rowOrder].rowSymbol), /*#__PURE__*/_react["default"].createElement("a", {
     role: "button",
     className: "pvtColOrder",
     onClick: function onClick() {
-      return propUpdater('colOrder')(sortIcons[colOrder].next);
+      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(state.attrValues).filter(function (e) {
+      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)) ? state.maxZIndex + 1 : 1,
+      zIndex: isOpen("val".concat(i)) ? uiState.maxZIndex + 1 : 1,
       toggle: function toggle() {
-        return setState(function (s) {
+        return setUiState(function (s) {
           return _objectSpread(_objectSpread({}, s), {}, {
             openDropdown: isOpen("val".concat(i)) ? false : "val".concat(i)
           });
         });
       },
       setValue: function setValue(value) {
-        return sendPropUpdate({
-          vals: {
-            $splice: [[i, 1, value]]
-          }
-        });
+        var newVals = _toConsumableArray(vals);
+        newVals[i] = value;
+        actions.updateProp('vals', newVals);
       }
     }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
       key: "br".concat(i)
@@ -843,7 +772,10 @@ PivotTableUI.propTypes = Object.assign({}, _Utilities.PivotData.propTypes, {
   menuLimit: _propTypes["default"].number,
   rendererName: _propTypes["default"].string,
   renderers: _propTypes["default"].objectOf(_propTypes["default"].func),
-  size: _propTypes["default"].oneOf(['sm', 'md', 'lg'])
+  size: _propTypes["default"].oneOf(['sm', 'md', 'lg']),
+  columnResizing: _propTypes["default"].bool,
+  columnWidths: _propTypes["default"].object,
+  onColumnWidthChange: _propTypes["default"].func
 });
 PivotTableUI.defaultProps = Object.assign({}, _Utilities.PivotData.defaultProps, {
   onChange: function onChange() {},
@@ -853,7 +785,9 @@ PivotTableUI.defaultProps = Object.assign({}, _Utilities.PivotData.defaultProps,
   unusedOrientationCutoff: 85,
   menuLimit: 500,
   rendererName: 'Table',
-  renderers: _TableRenderers["default"]
+  renderers: _TableRenderers["default"],
+  columnResizing: false,
+  columnWidths: {}
 });
 var _default = exports["default"] = PivotTableUI;
 //# sourceMappingURL=PivotTableUI.js.map