react-pivottable-plus 1.0.0 → 1.0.2

package/PivotTableUI.js

@@ -10,6 +10,7 @@ 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 _reactDraggable = _interopRequireDefault(require("react-draggable"));
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
@@ -163,9 +164,6 @@ var DraggableAttribute = exports.DraggableAttribute = /*#__PURE__*/_react["defau
   }, ' ', "\u25BE")), open ? getFilterBox() : null);
 });
 DraggableAttribute.displayName = 'DraggableAttribute';
-
-// ─── SortableAttribute: wrapper que conecta dnd-kit con DraggableAttribute ────
-
 var SortableAttribute = function SortableAttribute(_ref2) {
   var id = _ref2.id,
     rest = _objectWithoutProperties(_ref2, _excluded);
@@ -191,9 +189,6 @@ var SortableAttribute = function SortableAttribute(_ref2) {
     })
   }, rest));
 };
-
-// ─── Dropdown ─────────────────────────────────────────────────────────────────
-
 var Dropdown = exports.Dropdown = function Dropdown(_ref3) {
   var _ref3$zIndex = _ref3.zIndex,
     zIndex = _ref3$zIndex === void 0 ? 1 : _ref3$zIndex,
@@ -235,9 +230,6 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref3) {
     }, r);
   })));
 };
-
-// ─── DnDCell: lista sortable con dnd-kit ──────────────────────────────────────
-
 var DnDCell = function DnDCell(_ref4) {
   var id = _ref4.id,
     items = _ref4.items,
@@ -280,11 +272,52 @@ var DnDCell = function DnDCell(_ref4) {
     });
   }))));
 };
-
-// ─── PivotTableUI ─────────────────────────────────────────────────────────────
-
 var PivotTableUI = function PivotTableUI(props) {
-  var _aggregators$aggregat, _aggregators$aggregat2, _aggregators$aggregat3, _aggregators$aggregat4;
+  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;
   var _useState5 = (0, _react.useState)({
       unusedOrder: [],
       zIndices: {},
@@ -297,40 +330,10 @@ var PivotTableUI = function PivotTableUI(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     state = _useState6[0],
     setState = _useState6[1];
-
-  // activeId: el atributo que se está arrastrando
   var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
     activeId = _useState8[0],
     setActiveId = _useState8[1];
-  var data = props.data,
-    onChange = props.onChange,
-    rows = props.rows,
-    cols = props.cols,
-    aggregatorName = props.aggregatorName,
-    aggregators = props.aggregators,
-    vals = props.vals,
-    rendererName = props.rendererName,
-    renderers = props.renderers,
-    valueFilter = props.valueFilter,
-    sorters = props.sorters,
-    menuLimit = props.menuLimit,
-    unusedOrientationCutoff = props.unusedOrientationCutoff,
-    hiddenAttributes = props.hiddenAttributes,
-    hiddenFromAggregators = props.hiddenFromAggregators,
-    hiddenFromDragDrop = props.hiddenFromDragDrop,
-    pagination = props.pagination,
-    page = props.page,
-    pageSize = props.pageSize,
-    rowOrder = props.rowOrder,
-    colOrder = props.colOrder,
-    derivedAttributes = props.derivedAttributes;
-  var onChangeRef = (0, _react.useRef)(onChange);
-  (0, _react.useEffect)(function () {
-    onChangeRef.current = onChange;
-  }, [onChange]);
-
-  // ── Materializar datos ───────────────────────────────────────────────────────
   (0, _react.useEffect)(function () {
     if (state.data === data) return;
     var newState = {
@@ -359,8 +362,10 @@ var PivotTableUI = function PivotTableUI(props) {
       return _objectSpread(_objectSpread({}, s), newState);
     });
   }, [data, derivedAttributes, state.data]);
-
-  // ── Helpers ──────────────────────────────────────────────────────────────────
+  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) {
@@ -370,11 +375,6 @@ var PivotTableUI = function PivotTableUI(props) {
       return !dups.includes(item);
     }) : existingAttrs;
   };
-  var sendPropUpdate = (0, _react.useCallback)(function (command) {
-    var _onChangeRef$current;
-    var newProps = (0, _immutabilityHelper["default"])(props, command);
-    (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, newProps);
-  }, [props]);
   var propUpdater = (0, _react.useCallback)(function (key) {
     return function (value) {
       var updateObj = _defineProperty({}, key, {
@@ -433,8 +433,6 @@ var PivotTableUI = function PivotTableUI(props) {
       });
     });
   }, []);
-
-  // ── Listas de atributos ──────────────────────────────────────────────────────
   var unusedAttrs = Object.keys(state.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));
@@ -448,9 +446,6 @@ var PivotTableUI = function PivotTableUI(props) {
   var rowAttrs = rows.filter(function (e) {
     return e && e.trim() !== '' && !hiddenAttributes.includes(e) && !hiddenFromDragDrop.includes(e);
   });
-
-  // ── Mapa de zona → lista actual ──────────────────────────────────────────────
-  // Para saber a qué lista pertenece cada atributo durante el drag
   var getZoneOfItem = function getZoneOfItem(id) {
     if (rowAttrs.includes(id)) return 'rows';
     if (colAttrs.includes(id)) return 'cols';
@@ -475,18 +470,14 @@ var PivotTableUI = function PivotTableUI(props) {
     };
     return function () {};
   };
-
-  // ── Sensores dnd-kit ─────────────────────────────────────────────────────────
   var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor, {
     activationConstraint: {
       distance: 5
     }
   }));
-
-  // ── Handlers de dnd-kit ──────────────────────────────────────────────────────
   var handleDragStart = function handleDragStart(_ref5) {
     var active = _ref5.active;
-    setActiveId(active.id);
+    return setActiveId(active.id);
   };
   var handleDragOver = function handleDragOver(_ref6) {
     var _over$data$current$so, _over$data;
@@ -495,30 +486,18 @@ var PivotTableUI = function PivotTableUI(props) {
     if (!over) return;
     var activeZone = getZoneOfItem(active.id);
     var overZone = (_over$data$current$so = (_over$data = over.data) === null || _over$data === void 0 || (_over$data = _over$data.current) === null || _over$data === void 0 || (_over$data = _over$data.sortable) === null || _over$data === void 0 ? void 0 : _over$data.containerId) !== null && _over$data$current$so !== void 0 ? _over$data$current$so : getZoneOfItem(over.id);
-
-    // Guardia 1: Ambos deben tener zona y ser distintas
     if (!activeZone || !overZone || activeZone === overZone) return;
-
-    // Mover entre zonas en tiempo real (mientras se arrastra)
     var activeList = _toConsumableArray(getListByZone(activeZone));
     var overList = _toConsumableArray(getListByZone(overZone));
     var activeIndex = activeList.indexOf(active.id);
     var overIndex = overList.indexOf(over.id);
-
-    // Guardia 2: El item debe existir en la lista de origen (evita splice -1)
     if (activeIndex === -1) return;
-
-    // Guardia 3: Evitar duplicados en la lista de destino
     if (overList.includes(active.id)) return;
     activeList.splice(activeIndex, 1);
     var insertAt = overIndex >= 0 ? overIndex : overList.length;
     overList.splice(insertAt, 0, active.id);
-
-    // Actualizar ambas listas
-    var updateActiveZone = getUpdaterByZone(activeZone);
-    var updateOverZone = getUpdaterByZone(overZone);
-    updateActiveZone(activeList);
-    updateOverZone(overList);
+    getUpdaterByZone(activeZone)(activeList);
+    getUpdaterByZone(overZone)(overList);
   };
   var handleDragEnd = function handleDragEnd(_ref7) {
     var _over$data$current$so2, _over$data2;
@@ -530,23 +509,16 @@ var PivotTableUI = function PivotTableUI(props) {
     var overZone = (_over$data$current$so2 = (_over$data2 = over.data) === null || _over$data2 === void 0 || (_over$data2 = _over$data2.current) === null || _over$data2 === void 0 || (_over$data2 = _over$data2.sortable) === null || _over$data2 === void 0 ? void 0 : _over$data2.containerId) !== null && _over$data$current$so2 !== void 0 ? _over$data$current$so2 : getZoneOfItem(over.id);
     if (!activeZone || !overZone) return;
     if (activeZone === overZone) {
-      // Reordenamiento dentro de la misma zona
       var list = getListByZone(activeZone);
       var oldIndex = list.indexOf(active.id);
       var newIndex = list.indexOf(over.id);
-      if (oldIndex !== newIndex) {
-        getUpdaterByZone(activeZone)((0, _sortable.arrayMove)(list, oldIndex, newIndex));
-      }
+      if (oldIndex !== newIndex) getUpdaterByZone(activeZone)((0, _sortable.arrayMove)(list, oldIndex, newIndex));
     }
-    // Si activeZone !== overZone, ya fue manejado en handleDragOver
   };
-
-  // ── UI ───────────────────────────────────────────────────────────────────────
   var isOpen = function isOpen(dropdown) {
     return state.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 aggregatorCellOutlet = (_aggregators$aggregat3 = aggregators[aggregatorName]) === null || _aggregators$aggregat3 === void 0 || (_aggregators$aggregat4 = _aggregators$aggregat3.call(aggregators, [])) === null || _aggregators$aggregat4 === void 0 || (_aggregators$aggregat4 = _aggregators$aggregat4()) === null || _aggregators$aggregat4 === void 0 ? void 0 : _aggregators$aggregat4.outlet;
   var actualRendererName = rendererName in renderers ? rendererName : Object.keys(renderers)[0];
   var sortIcons = {
     key_a_to_z: {
@@ -575,7 +547,112 @@ var PivotTableUI = function PivotTableUI(props) {
     moveFilterBoxToTop: moveFilterBoxToTop,
     removeValuesFromFilter: removeValuesFromFilter
   };
-  var rendererCell = /*#__PURE__*/_react["default"].createElement("td", {
+  var componentProps = {
+    data: state.materializedInput,
+    onChange: onChange,
+    rows: rows,
+    cols: cols,
+    vals: vals,
+    aggregatorName: aggregatorName,
+    aggregators: aggregators,
+    rendererName: rendererName,
+    renderers: renderers,
+    valueFilter: valueFilter,
+    sorters: sorters,
+    menuLimit: menuLimit,
+    unusedOrientationCutoff: unusedOrientationCutoff,
+    hiddenAttributes: hiddenAttributes,
+    hiddenFromAggregators: hiddenFromAggregators,
+    hiddenFromDragDrop: hiddenFromDragDrop,
+    pagination: pagination,
+    page: page,
+    pageSize: pageSize,
+    rowOrder: rowOrder,
+    colOrder: colOrder,
+    derivedAttributes: derivedAttributes
+  };
+  var renderFooter = function renderFooter() {
+    var pivotData = new _Utilities.PivotData(componentProps);
+    var totalPivotRows = pivotData.getRowKeys().length;
+    var totalRecords = state.materializedInput.length;
+    var totalPages = Math.ceil(totalPivotRows / pageSize);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "pvtFooter"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "pvtFooterInfo"
+    }, "Total registros: ", totalRecords, " | Filas: ", totalPivotRows), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "pvtFooterPagination"
+    }, /*#__PURE__*/_react["default"].createElement("button", {
+      className: "pvtButton",
+      disabled: page <= 1,
+      onClick: function onClick() {
+        return propUpdater('page')(1);
+      }
+    }, "\xAB"), /*#__PURE__*/_react["default"].createElement("button", {
+      className: "pvtButton",
+      disabled: page <= 1,
+      onClick: function onClick() {
+        return propUpdater('page')(page - 1);
+      }
+    }, "\u2039"), /*#__PURE__*/_react["default"].createElement("span", null, "P\xE1gina ", /*#__PURE__*/_react["default"].createElement("input", {
+      type: "number",
+      className: "pvtPageInput",
+      value: page,
+      min: 1,
+      max: totalPages,
+      onChange: function onChange(e) {
+        var val = parseInt(e.target.value, 10);
+        if (val > 0 && val <= totalPages) propUpdater('page')(val);
+      }
+    }), " de ", totalPages), /*#__PURE__*/_react["default"].createElement("button", {
+      className: "pvtButton",
+      disabled: page >= totalPages,
+      onClick: function onClick() {
+        return propUpdater('page')(page + 1);
+      }
+    }, "\u203A"), /*#__PURE__*/_react["default"].createElement("button", {
+      className: "pvtButton",
+      disabled: page >= totalPages,
+      onClick: function onClick() {
+        return propUpdater('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
+          }
+        });
+      }
+    }, [10, 20, 50, 100].map(function (n) {
+      return /*#__PURE__*/_react["default"].createElement("option", {
+        key: n,
+        value: n
+      }, n, " / p\xE1g");
+    }))));
+  };
+  return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
+    sensors: sensors,
+    collisionDetection: _core.closestCorners,
+    onDragStart: handleDragStart,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/_react["default"].createElement("table", {
+    className: "pvtUi"
+  }, /*#__PURE__*/_react["default"].createElement("tbody", {
+    onClick: function onClick() {
+      return setState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: false
+        });
+      });
+    }
+  }, horizUnused ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtRenderers"
   }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
     current: actualRendererName,
@@ -590,8 +667,12 @@ var PivotTableUI = function PivotTableUI(props) {
       });
     },
     setValue: propUpdater('rendererName')
-  }));
-  var aggregatorCell = /*#__PURE__*/_react["default"].createElement("td", {
+  })), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+    id: "unused",
+    items: unusedAttrs,
+    classes: "pvtAxisContainer pvtUnused pvtHorizList",
+    isHorizontal: true
+  }, sharedCellProps))), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtVals"
   }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
     current: aggregatorName,
@@ -644,120 +725,104 @@ var PivotTableUI = function PivotTableUI(props) {
     }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
       key: "br".concat(i)
     }) : null];
-  }), aggregatorCellOutlet && aggregatorCellOutlet(data));
-  var unusedAttrsCell = /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
-    id: "unused",
-    items: unusedAttrs,
-    classes: "pvtAxisContainer pvtUnused ".concat(horizUnused ? 'pvtHorizList' : 'pvtVertList'),
-    isHorizontal: horizUnused
-  }, sharedCellProps));
-  var colAttrsCell = /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+  })), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
     id: "cols",
     items: colAttrs,
     classes: "pvtAxisContainer pvtHorizList pvtCols",
     isHorizontal: true
-  }, sharedCellProps));
-  var rowAttrsCell = /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+  }, sharedCellProps))), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
     id: "rows",
     items: rowAttrs,
     classes: "pvtAxisContainer pvtVertList pvtRows",
     isHorizontal: false
-  }, sharedCellProps));
-
-  // Footer de paginación
-  var renderFooter = function renderFooter() {
-    var pivotData = new _Utilities.PivotData(_objectSpread(_objectSpread({}, props), {}, {
-      data: state.materializedInput
-    }));
-    var totalPivotRows = pivotData.getRowKeys().length;
-    var totalRecords = state.materializedInput.length;
-    var totalPages = Math.ceil(totalPivotRows / pageSize);
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "pvtFooter"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "pvtFooterInfo"
-    }, "Total registros: ", totalRecords, " | Filas: ", totalPivotRows), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "pvtFooterPagination"
-    }, /*#__PURE__*/_react["default"].createElement("button", {
-      className: "pvtButton",
-      disabled: page <= 1,
-      onClick: function onClick() {
-        return propUpdater('page')(1);
-      }
-    }, "\xAB"), /*#__PURE__*/_react["default"].createElement("button", {
-      className: "pvtButton",
-      disabled: page <= 1,
-      onClick: function onClick() {
-        return propUpdater('page')(page - 1);
-      }
-    }, "\u2039"), /*#__PURE__*/_react["default"].createElement("span", null, "P\xE1gina", ' ', /*#__PURE__*/_react["default"].createElement("input", {
-      type: "number",
-      className: "pvtPageInput",
-      value: page,
-      min: 1,
-      max: totalPages,
-      onChange: function onChange(e) {
-        var val = parseInt(e.target.value, 10);
-        if (val > 0 && val <= totalPages) propUpdater('page')(val);
-      }
-    }), ' ', "de ", totalPages), /*#__PURE__*/_react["default"].createElement("button", {
-      className: "pvtButton",
-      disabled: page >= totalPages,
-      onClick: function onClick() {
-        return propUpdater('page')(page + 1);
-      }
-    }, "\u203A"), /*#__PURE__*/_react["default"].createElement("button", {
-      className: "pvtButton",
-      disabled: page >= totalPages,
-      onClick: function onClick() {
-        return propUpdater('page')(totalPages);
-      }
-    }, "\xBB"), /*#__PURE__*/_react["default"].createElement("select", {
-      className: "pvtPageSize",
-      value: pageSize,
-      onChange: function onChange(e) {
-        var _onChangeRef$current2;
-        var newSize = parseInt(e.target.value, 10);
-        (_onChangeRef$current2 = onChangeRef.current) === null || _onChangeRef$current2 === void 0 || _onChangeRef$current2.call(onChangeRef, (0, _immutabilityHelper["default"])(props, {
-          pageSize: {
-            $set: newSize
-          },
-          page: {
-            $set: 1
-          }
-        }));
-      }
-    }, [10, 20, 50, 100].map(function (n) {
-      return /*#__PURE__*/_react["default"].createElement("option", {
-        key: n,
-        value: n
-      }, n, " / p\xE1g");
-    }))));
-  };
-  var outputCell = /*#__PURE__*/_react["default"].createElement("td", {
+  }, sharedCellProps)), /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtOutput"
-  }, /*#__PURE__*/_react["default"].createElement(_PivotTable["default"], (0, _immutabilityHelper["default"])(props, {
-    data: {
-      $set: state.materializedInput
-    }
-  })), pagination && renderFooter());
-  return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
-    sensors: sensors,
-    collisionDetection: _core.closestCorners,
-    onDragStart: handleDragStart,
-    onDragOver: handleDragOver,
-    onDragEnd: handleDragEnd
-  }, /*#__PURE__*/_react["default"].createElement("table", {
-    className: "pvtUi"
-  }, /*#__PURE__*/_react["default"].createElement("tbody", {
-    onClick: function onClick() {
+  }, /*#__PURE__*/_react["default"].createElement(_PivotTable["default"], componentProps), pagination && renderFooter()))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    className: "pvtRenderers"
+  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
+    current: actualRendererName,
+    values: Object.keys(renderers),
+    open: isOpen('renderer'),
+    zIndex: isOpen('renderer') ? state.maxZIndex + 1 : 1,
+    toggle: function toggle() {
       return setState(function (s) {
         return _objectSpread(_objectSpread({}, s), {}, {
-          openDropdown: false
+          openDropdown: isOpen('renderer') ? false : 'renderer'
         });
       });
+    },
+    setValue: propUpdater('rendererName')
+  })), /*#__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,
+    toggle: function toggle() {
+      return setState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: isOpen('aggregators') ? false : 'aggregators'
+        });
+      });
+    },
+    setValue: propUpdater('aggregatorName')
+  }), /*#__PURE__*/_react["default"].createElement("a", {
+    role: "button",
+    className: "pvtRowOrder",
+    onClick: function onClick() {
+      return propUpdater('rowOrder')(sortIcons[rowOrder].next);
     }
-  }, horizUnused ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, rendererCell, unusedAttrsCell), /*#__PURE__*/_react["default"].createElement("tr", null, aggregatorCell, colAttrsCell), /*#__PURE__*/_react["default"].createElement("tr", null, rowAttrsCell, outputCell)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, rendererCell, aggregatorCell, colAttrsCell), /*#__PURE__*/_react["default"].createElement("tr", null, unusedAttrsCell, rowAttrsCell, outputCell)))), /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, null, activeId ? /*#__PURE__*/_react["default"].createElement("ul", {
+  }, sortIcons[rowOrder].rowSymbol), /*#__PURE__*/_react["default"].createElement("a", {
+    role: "button",
+    className: "pvtColOrder",
+    onClick: function onClick() {
+      return propUpdater('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) {
+        return !hiddenAttributes.includes(e) && !hiddenFromAggregators.includes(e);
+      }),
+      open: isOpen("val".concat(i)),
+      zIndex: isOpen("val".concat(i)) ? state.maxZIndex + 1 : 1,
+      toggle: function toggle() {
+        return setState(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]]
+          }
+        });
+      }
+    }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
+      key: "br".concat(i)
+    }) : null];
+  })), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+    id: "cols",
+    items: colAttrs,
+    classes: "pvtAxisContainer pvtHorizList pvtCols",
+    isHorizontal: true
+  }, sharedCellProps))), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+    id: "unused",
+    items: unusedAttrs,
+    classes: "pvtAxisContainer pvtUnused pvtVertList",
+    isHorizontal: false
+  }, sharedCellProps)), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+    id: "rows",
+    items: rowAttrs,
+    classes: "pvtAxisContainer pvtVertList pvtRows",
+    isHorizontal: false
+  }, sharedCellProps)), /*#__PURE__*/_react["default"].createElement("td", {
+    className: "pvtOutput"
+  }, /*#__PURE__*/_react["default"].createElement(_PivotTable["default"], componentProps), pagination && renderFooter()))))), /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, null, activeId ? /*#__PURE__*/_react["default"].createElement("ul", {
     style: {
       listStyle: 'none',
       padding: 0,
@@ -767,20 +832,25 @@ var PivotTableUI = function PivotTableUI(props) {
     className: "pvtAttr"
   }, activeId))) : null));
 };
-PivotTableUI.propTypes = {
+PivotTableUI.propTypes = Object.assign({}, _Utilities.PivotData.propTypes, {
   onChange: _propTypes["default"].func.isRequired,
   hiddenAttributes: _propTypes["default"].arrayOf(_propTypes["default"].string),
   hiddenFromAggregators: _propTypes["default"].arrayOf(_propTypes["default"].string),
   hiddenFromDragDrop: _propTypes["default"].arrayOf(_propTypes["default"].string),
   unusedOrientationCutoff: _propTypes["default"].number,
-  menuLimit: _propTypes["default"].number
-};
-PivotTableUI.defaultProps = {
+  menuLimit: _propTypes["default"].number,
+  rendererName: _propTypes["default"].string,
+  renderers: _propTypes["default"].objectOf(_propTypes["default"].func)
+});
+PivotTableUI.defaultProps = Object.assign({}, _Utilities.PivotData.defaultProps, {
+  onChange: function onChange() {},
   hiddenAttributes: [],
   hiddenFromAggregators: [],
   hiddenFromDragDrop: [],
   unusedOrientationCutoff: 85,
-  menuLimit: 500
-};
+  menuLimit: 500,
+  rendererName: 'Table',
+  renderers: _TableRenderers["default"]
+});
 var _default = exports["default"] = PivotTableUI;
 //# sourceMappingURL=PivotTableUI.js.map