@hrforte/react-pivottable 1.0.0 → 1.0.1

package/dist/PivotTableUI.js

@@ -0,0 +1,1846 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CellFormattingUI = exports.ConditionalFormattingUI = exports.Dropdown = exports.DraggableAttribute = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _immutabilityHelper = require('immutability-helper');
+
+var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
+
+var _Utilities = require('./Utilities');
+
+var _PivotTable = require('./PivotTable');
+
+var _PivotTable2 = _interopRequireDefault(_PivotTable);
+
+var _reactSortablejs = require('react-sortablejs');
+
+var _reactSortablejs2 = _interopRequireDefault(_reactSortablejs);
+
+var _reactDraggable = require('react-draggable');
+
+var _reactDraggable2 = _interopRequireDefault(_reactDraggable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var AGG_KEY_RADIX = 36;
+var AGG_KEY_OFFSET = 2;
+var AGG_KEY_LENGTH = 7;
+
+/* eslint-disable react/prop-types */
+// eslint can't see inherited propTypes!
+
+var DraggableAttribute = exports.DraggableAttribute = function (_React$Component) {
+  _inherits(DraggableAttribute, _React$Component);
+
+  function DraggableAttribute(props) {
+    _classCallCheck(this, DraggableAttribute);
+
+    var _this = _possibleConstructorReturn(this, (DraggableAttribute.__proto__ || Object.getPrototypeOf(DraggableAttribute)).call(this, props));
+
+    _this.state = { open: false, filterText: '' };
+    return _this;
+  }
+
+  _createClass(DraggableAttribute, [{
+    key: 'toggleValue',
+    value: function toggleValue(value) {
+      if (value in this.props.valueFilter) {
+        this.props.removeValuesFromFilter(this.props.name, [value]);
+      } else {
+        this.props.addValuesToFilter(this.props.name, [value]);
+      }
+    }
+  }, {
+    key: 'matchesFilter',
+    value: function matchesFilter(x) {
+      return x.toLowerCase().trim().includes(this.state.filterText.toLowerCase().trim());
+    }
+  }, {
+    key: 'selectOnly',
+    value: function selectOnly(e, value) {
+      e.stopPropagation();
+      this.props.setValuesInFilter(this.props.name, Object.keys(this.props.attrValues).filter(function (y) {
+        return y !== value;
+      }));
+    }
+  }, {
+    key: 'getFilterBox',
+    value: function getFilterBox() {
+      var _this2 = this;
+
+      var showMenu = Object.keys(this.props.attrValues).length < this.props.menuLimit;
+
+      var values = Object.keys(this.props.attrValues);
+      var shown = values.filter(this.matchesFilter.bind(this)).sort(this.props.sorter);
+
+      return _react2.default.createElement(
+        _reactDraggable2.default,
+        { handle: '.pvtDragHandle' },
+        _react2.default.createElement(
+          'div',
+          {
+            className: 'pvtFilterBox',
+            style: {
+              display: 'block',
+              cursor: 'initial',
+              zIndex: this.props.zIndex
+            },
+            onClick: function onClick() {
+              return _this2.props.moveFilterBoxToTop(_this2.props.name);
+            }
+          },
+          _react2.default.createElement(
+            'a',
+            { onClick: function onClick() {
+                return _this2.setState({ open: false });
+              }, className: 'pvtCloseX' },
+            '\xD7'
+          ),
+          _react2.default.createElement(
+            'span',
+            { className: 'pvtDragHandle' },
+            '\u2630'
+          ),
+          _react2.default.createElement(
+            'h4',
+            null,
+            this.props.name
+          ),
+          showMenu || _react2.default.createElement(
+            'p',
+            null,
+            '(too many values to show)'
+          ),
+          showMenu && _react2.default.createElement(
+            'p',
+            null,
+            _react2.default.createElement('input', {
+              type: 'text',
+              placeholder: 'Filter values',
+              className: 'pvtSearch',
+              value: this.state.filterText,
+              onChange: function onChange(e) {
+                return _this2.setState({
+                  filterText: e.target.value
+                });
+              }
+            }),
+            _react2.default.createElement('br', null),
+            _react2.default.createElement(
+              'a',
+              {
+                role: 'button',
+                className: 'pvtButton',
+                onClick: function onClick() {
+                  return _this2.props.removeValuesFromFilter(_this2.props.name, Object.keys(_this2.props.attrValues).filter(_this2.matchesFilter.bind(_this2)));
+                }
+              },
+              'Select ',
+              values.length === shown.length ? 'All' : shown.length
+            ),
+            ' ',
+            _react2.default.createElement(
+              'a',
+              {
+                role: 'button',
+                className: 'pvtButton',
+                onClick: function onClick() {
+                  return _this2.props.addValuesToFilter(_this2.props.name, Object.keys(_this2.props.attrValues).filter(_this2.matchesFilter.bind(_this2)));
+                }
+              },
+              'Deselect ',
+              values.length === shown.length ? 'All' : shown.length
+            )
+          ),
+          showMenu && _react2.default.createElement(
+            'div',
+            { className: 'pvtCheckContainer' },
+            shown.map(function (x) {
+              return _react2.default.createElement(
+                'p',
+                {
+                  key: x,
+                  onClick: function onClick() {
+                    return _this2.toggleValue(x);
+                  },
+                  className: x in _this2.props.valueFilter ? '' : 'selected'
+                },
+                _react2.default.createElement(
+                  'a',
+                  { className: 'pvtOnly', onClick: function onClick(e) {
+                      return _this2.selectOnly(e, x);
+                    } },
+                  'only'
+                ),
+                _react2.default.createElement(
+                  'a',
+                  { className: 'pvtOnlySpacer' },
+                  '\xA0'
+                ),
+                x === '' ? _react2.default.createElement(
+                  'em',
+                  null,
+                  'null'
+                ) : x
+              );
+            })
+          )
+        )
+      );
+    }
+  }, {
+    key: 'toggleFilterBox',
+    value: function toggleFilterBox() {
+      this.setState({ open: !this.state.open });
+      this.props.moveFilterBoxToTop(this.props.name);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var filtered = Object.keys(this.props.valueFilter).length !== 0 ? 'pvtFilteredAttribute' : '';
+      return _react2.default.createElement(
+        'li',
+        { 'data-id': this.props.name },
+        _react2.default.createElement(
+          'span',
+          { className: 'pvtAttr ' + filtered },
+          this.props.name,
+          _react2.default.createElement(
+            'span',
+            {
+              className: 'pvtTriangle',
+              onClick: this.toggleFilterBox.bind(this)
+            },
+            ' ',
+            '\u25BE'
+          )
+        ),
+        this.state.open ? this.getFilterBox() : null
+      );
+    }
+  }]);
+
+  return DraggableAttribute;
+}(_react2.default.Component);
+
+DraggableAttribute.defaultProps = {
+  valueFilter: {}
+};
+
+DraggableAttribute.propTypes = {
+  name: _propTypes2.default.string.isRequired,
+  addValuesToFilter: _propTypes2.default.func.isRequired,
+  removeValuesFromFilter: _propTypes2.default.func.isRequired,
+  attrValues: _propTypes2.default.objectOf(_propTypes2.default.number).isRequired,
+  valueFilter: _propTypes2.default.objectOf(_propTypes2.default.bool),
+  moveFilterBoxToTop: _propTypes2.default.func.isRequired,
+  sorter: _propTypes2.default.func.isRequired,
+  menuLimit: _propTypes2.default.number,
+  zIndex: _propTypes2.default.number
+};
+
+var Dropdown = exports.Dropdown = function (_React$PureComponent) {
+  _inherits(Dropdown, _React$PureComponent);
+
+  function Dropdown() {
+    _classCallCheck(this, Dropdown);
+
+    return _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).apply(this, arguments));
+  }
+
+  _createClass(Dropdown, [{
+    key: 'render',
+    value: function render() {
+      var _this4 = this;
+
+      return _react2.default.createElement(
+        'div',
+        { className: 'pvtDropdown', style: { zIndex: this.props.zIndex } },
+        _react2.default.createElement(
+          'div',
+          {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              _this4.props.toggle();
+            },
+            className: 'pvtDropdownValue pvtDropdownCurrent ' + (this.props.open ? 'pvtDropdownCurrentOpen' : ''),
+            role: 'button'
+          },
+          _react2.default.createElement(
+            'div',
+            { className: 'pvtDropdownIcon' },
+            this.props.open ? '×' : '▾'
+          ),
+          this.props.current || _react2.default.createElement(
+            'span',
+            null,
+            '\xA0'
+          )
+        ),
+        this.props.open && _react2.default.createElement(
+          'div',
+          { className: 'pvtDropdownMenu' },
+          this.props.values.map(function (r) {
+            return _react2.default.createElement(
+              'div',
+              {
+                key: r,
+                role: 'button',
+                onClick: function onClick(e) {
+                  e.stopPropagation();
+                  if (_this4.props.current === r) {
+                    _this4.props.toggle();
+                  } else {
+                    _this4.props.setValue(r);
+                  }
+                },
+                className: 'pvtDropdownValue ' + (r === _this4.props.current ? 'pvtDropdownActiveValue' : '')
+              },
+              r
+            );
+          })
+        )
+      );
+    }
+  }]);
+
+  return Dropdown;
+}(_react2.default.PureComponent);
+
+var ConditionalFormattingUI = exports.ConditionalFormattingUI = function (_React$Component2) {
+  _inherits(ConditionalFormattingUI, _React$Component2);
+
+  function ConditionalFormattingUI(props) {
+    _classCallCheck(this, ConditionalFormattingUI);
+
+    var _this5 = _possibleConstructorReturn(this, (ConditionalFormattingUI.__proto__ || Object.getPrototypeOf(ConditionalFormattingUI)).call(this, props));
+
+    _this5.state = {
+      open: false
+    };
+    return _this5;
+  }
+
+  _createClass(ConditionalFormattingUI, [{
+    key: 'getConditionalFormatting',
+    value: function getConditionalFormatting() {
+      var tableOptions = this.props.tableOptions || {};
+      return tableOptions.conditionalFormatting ? tableOptions.conditionalFormatting : { rules: [] };
+    }
+  }, {
+    key: 'updateConditionalFormatting',
+    value: function updateConditionalFormatting(conditionalFormatting) {
+      var currentTableOptions = this.props.tableOptions || {};
+      var tableOptions = Object.assign({}, currentTableOptions, {
+        conditionalFormatting: conditionalFormatting
+      });
+      this.props.onChange({
+        tableOptions: { $set: tableOptions }
+      });
+    }
+  }, {
+    key: 'addRule',
+    value: function addRule() {
+      var cf = this.getConditionalFormatting();
+      var newRule = {
+        condition: {
+          type: 'greaterThan',
+          value: 0
+        },
+        style: {
+          backgroundColor: '#FFFFE0'
+        }
+      };
+      this.updateConditionalFormatting({
+        rules: cf.rules.slice().concat([newRule])
+      });
+    }
+  }, {
+    key: 'removeRule',
+    value: function removeRule(index) {
+      var cf = this.getConditionalFormatting();
+      var newRules = cf.rules.filter(function (_, i) {
+        return i !== index;
+      });
+      this.updateConditionalFormatting({
+        rules: newRules
+      });
+    }
+  }, {
+    key: 'updateRule',
+    value: function updateRule(index, field, value) {
+      var cf = this.getConditionalFormatting();
+      var newRules = cf.rules.slice();
+      if (field.startsWith('condition.')) {
+        var conditionField = field.replace('condition.', '');
+        var newCondition = Object.assign({}, newRules[index].condition);
+        if (value === null) {
+          delete newCondition[conditionField];
+        } else {
+          newCondition[conditionField] = value;
+        }
+        newRules[index] = Object.assign({}, newRules[index], {
+          condition: newCondition
+        });
+      } else if (field.startsWith('style.')) {
+        var styleField = field.replace('style.', '');
+        var newStyle = Object.assign({}, newRules[index].style || {});
+        if (value === null || value === '') {
+          delete newStyle[styleField];
+        } else {
+          newStyle[styleField] = value;
+        }
+        newRules[index] = Object.assign({}, newRules[index], {
+          style: newStyle
+        });
+      }
+      this.updateConditionalFormatting({
+        rules: newRules
+      });
+    }
+  }, {
+    key: 'toggle',
+    value: function toggle() {
+      this.setState({ open: !this.state.open });
+      if (this.props.moveToTop) {
+        this.props.moveToTop();
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this6 = this;
+
+      var cf = this.getConditionalFormatting();
+      var conditionTypes = [{ value: 'greaterThan', label: 'Greater Than' }, { value: 'lessThan', label: 'Less Than' }, { value: 'greaterThanOrEqual', label: 'Greater Than Or Equal' }, { value: 'lessThanOrEqual', label: 'Less Than Or Equal' }, { value: 'equal', label: 'Equal' }, { value: 'notEqual', label: 'Not Equal' }, { value: 'empty', label: 'Empty' }, { value: 'notEmpty', label: 'Not Empty' }, { value: 'contains', label: 'Contains' }, { value: 'notContains', label: 'Not Contains' }];
+
+      var needsValue = function needsValue(type) {
+        return !['empty', 'notEmpty'].includes(type);
+      };
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'pvtButton',
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              _this6.toggle();
+            },
+            style: { marginTop: '5px' }
+          },
+          this.state.open ? '▼' : '▶',
+          ' Conditional Formatting'
+        ),
+        this.state.open && _react2.default.createElement(
+          'div',
+          {
+            className: 'pvtFilterBox',
+            style: {
+              display: 'block',
+              cursor: 'initial',
+              zIndex: this.props.zIndex,
+              marginTop: '5px',
+              minWidth: '400px',
+              position: 'relative'
+            },
+            onClick: function onClick() {
+              return _this6.props.moveToTop && _this6.props.moveToTop();
+            }
+          },
+          _react2.default.createElement(
+            'a',
+            {
+              onClick: function onClick() {
+                return _this6.setState({ open: false });
+              },
+              className: 'pvtCloseX'
+            },
+            '\xD7'
+          ),
+          _react2.default.createElement(
+            'h4',
+            null,
+            'Conditional Formatting Rules'
+          ),
+          cf.rules.length === 0 && _react2.default.createElement(
+            'p',
+            { style: { fontStyle: 'italic', color: '#666' } },
+            'No rules defined. Add a rule to format cells based on conditions.'
+          ),
+          cf.rules.map(function (rule, index) {
+            return _react2.default.createElement(
+              'div',
+              {
+                key: index,
+                style: {
+                  border: '1px solid #c8d4e3',
+                  padding: '10px',
+                  marginBottom: '10px',
+                  backgroundColor: '#f9f9f9'
+                }
+              },
+              _react2.default.createElement(
+                'div',
+                {
+                  style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    marginBottom: '8px'
+                  }
+                },
+                _react2.default.createElement(
+                  'strong',
+                  null,
+                  'Rule ',
+                  index + 1
+                ),
+                _react2.default.createElement(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'pvtButton',
+                    onClick: function onClick(e) {
+                      e.stopPropagation();
+                      _this6.removeRule(index);
+                    },
+                    style: { fontSize: '10px', padding: '2px 6px' }
+                  },
+                  'Remove'
+                )
+              ),
+              _react2.default.createElement(
+                'div',
+                {
+                  style: { marginBottom: '8px' },
+                  onClick: function onClick(e) {
+                    return e.stopPropagation();
+                  },
+                  onMouseDown: function onMouseDown(e) {
+                    return e.stopPropagation();
+                  }
+                },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Condition Type:'
+                ),
+                _react2.default.createElement(
+                  'select',
+                  {
+                    value: rule.condition.type || 'greaterThan',
+                    onChange: function onChange(e) {
+                      e.stopPropagation();
+                      var newType = e.target.value;
+                      var cf = _this6.getConditionalFormatting();
+                      var newRules = cf.rules.slice();
+                      var newCondition = Object.assign({}, newRules[index].condition, {
+                        type: newType
+                      });
+                      // Remove value field if condition type doesn't need it
+                      if (!needsValue(newType)) {
+                        delete newCondition.value;
+                      }
+                      newRules[index] = Object.assign({}, newRules[index], {
+                        condition: newCondition
+                      });
+                      _this6.updateConditionalFormatting({
+                        rules: newRules
+                      });
+                    },
+                    style: { width: '100%', padding: '4px' }
+                  },
+                  conditionTypes.map(function (ct) {
+                    return _react2.default.createElement(
+                      'option',
+                      { key: ct.value, value: ct.value },
+                      ct.label
+                    );
+                  })
+                )
+              ),
+              needsValue(rule.condition.type) && _react2.default.createElement(
+                'div',
+                { style: { marginBottom: '8px' } },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Condition Value:'
+                ),
+                _react2.default.createElement('input', {
+                  type: 'text',
+                  value: typeof rule.condition.value !== 'undefined' && rule.condition.value !== null ? rule.condition.value : '',
+                  onChange: function onChange(e) {
+                    e.stopPropagation();
+                    var val = e.target.value;
+                    // Try to parse as number, otherwise use as string
+                    var numVal = val === '' ? null : isNaN(val) ? val : parseFloat(val);
+                    _this6.updateRule(index, 'condition.value', numVal);
+                  },
+                  placeholder: 'Enter value',
+                  style: { width: '100%', padding: '4px' }
+                })
+              ),
+              _react2.default.createElement(
+                'div',
+                { style: { marginBottom: '8px' } },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Background Color:'
+                ),
+                _react2.default.createElement('input', {
+                  type: 'color',
+                  value: rule.style && rule.style.backgroundColor ? rule.style.backgroundColor : '#FFFFFF',
+                  onChange: function onChange(e) {
+                    e.stopPropagation();
+                    _this6.updateRule(index, 'style.backgroundColor', e.target.value);
+                  },
+                  style: { width: '100%', padding: '2px' }
+                })
+              ),
+              _react2.default.createElement(
+                'div',
+                { style: { marginBottom: '8px' } },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Text Color:'
+                ),
+                _react2.default.createElement('input', {
+                  type: 'color',
+                  value: rule.style && rule.style.color ? rule.style.color : '#000000',
+                  onChange: function onChange(e) {
+                    e.stopPropagation();
+                    _this6.updateRule(index, 'style.color', e.target.value);
+                  },
+                  style: { width: '100%', padding: '2px' }
+                })
+              ),
+              _react2.default.createElement(
+                'div',
+                {
+                  style: { marginBottom: '8px' },
+                  onClick: function onClick(e) {
+                    return e.stopPropagation();
+                  },
+                  onMouseDown: function onMouseDown(e) {
+                    return e.stopPropagation();
+                  }
+                },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Font Weight:'
+                ),
+                _react2.default.createElement(
+                  'select',
+                  {
+                    value: rule.style && rule.style.fontWeight ? rule.style.fontWeight : '',
+                    onChange: function onChange(e) {
+                      e.stopPropagation();
+                      _this6.updateRule(index, 'style.fontWeight', e.target.value || null);
+                    },
+                    style: { width: '100%', padding: '4px' }
+                  },
+                  _react2.default.createElement(
+                    'option',
+                    { value: '' },
+                    'Normal'
+                  ),
+                  _react2.default.createElement(
+                    'option',
+                    { value: 'bold' },
+                    'Bold'
+                  ),
+                  _react2.default.createElement(
+                    'option',
+                    { value: 'lighter' },
+                    'Lighter'
+                  )
+                )
+              ),
+              _react2.default.createElement(
+                'div',
+                {
+                  style: { marginBottom: '8px' },
+                  onClick: function onClick(e) {
+                    return e.stopPropagation();
+                  },
+                  onMouseDown: function onMouseDown(e) {
+                    return e.stopPropagation();
+                  }
+                },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Font Style:'
+                ),
+                _react2.default.createElement(
+                  'select',
+                  {
+                    value: rule.style && rule.style.fontStyle ? rule.style.fontStyle : '',
+                    onChange: function onChange(e) {
+                      e.stopPropagation();
+                      _this6.updateRule(index, 'style.fontStyle', e.target.value || null);
+                    },
+                    style: { width: '100%', padding: '4px' }
+                  },
+                  _react2.default.createElement(
+                    'option',
+                    { value: '' },
+                    'Normal'
+                  ),
+                  _react2.default.createElement(
+                    'option',
+                    { value: 'italic' },
+                    'Italic'
+                  ),
+                  _react2.default.createElement(
+                    'option',
+                    { value: 'oblique' },
+                    'Oblique'
+                  )
+                )
+              )
+            );
+          }),
+          _react2.default.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'pvtButton',
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                _this6.addRule();
+              },
+              style: { width: '100%', marginTop: '10px' }
+            },
+            '+ Add Rule'
+          )
+        )
+      );
+    }
+  }]);
+
+  return ConditionalFormattingUI;
+}(_react2.default.Component);
+
+ConditionalFormattingUI.propTypes = {
+  tableOptions: _propTypes2.default.object,
+  onChange: _propTypes2.default.func.isRequired,
+  moveToTop: _propTypes2.default.func,
+  zIndex: _propTypes2.default.number
+};
+
+ConditionalFormattingUI.defaultProps = {
+  tableOptions: {},
+  moveToTop: function moveToTop() {},
+  zIndex: 1
+};
+
+var CellFormattingUI = exports.CellFormattingUI = function (_React$Component3) {
+  _inherits(CellFormattingUI, _React$Component3);
+
+  function CellFormattingUI(props) {
+    _classCallCheck(this, CellFormattingUI);
+
+    var _this7 = _possibleConstructorReturn(this, (CellFormattingUI.__proto__ || Object.getPrototypeOf(CellFormattingUI)).call(this, props));
+
+    _this7.state = {
+      open: false
+    };
+    return _this7;
+  }
+
+  _createClass(CellFormattingUI, [{
+    key: 'getCellFormatting',
+    value: function getCellFormatting() {
+      var tableOptions = this.props.tableOptions || {};
+      return tableOptions.cellFormatting ? tableOptions.cellFormatting : { rules: [] };
+    }
+  }, {
+    key: 'updateCellFormatting',
+    value: function updateCellFormatting(cellFormatting) {
+      var currentTableOptions = this.props.tableOptions || {};
+      var tableOptions = Object.assign({}, currentTableOptions, {
+        cellFormatting: cellFormatting
+      });
+      this.props.onChange({
+        tableOptions: { $set: tableOptions }
+      });
+    }
+  }, {
+    key: 'addRule',
+    value: function addRule() {
+      var cf = this.getCellFormatting();
+      var newRule = {
+        format: {
+          thousandsSep: ',',
+          decimalSep: '.',
+          decimalPlaces: 2,
+          prefix: '',
+          suffix: ''
+        }
+      };
+      this.updateCellFormatting({
+        rules: cf.rules.slice().concat([newRule])
+      });
+    }
+  }, {
+    key: 'removeRule',
+    value: function removeRule(index) {
+      var cf = this.getCellFormatting();
+      var newRules = cf.rules.filter(function (_, i) {
+        return i !== index;
+      });
+      this.updateCellFormatting({
+        rules: newRules
+      });
+    }
+  }, {
+    key: 'updateRule',
+    value: function updateRule(index, field, value) {
+      var cf = this.getCellFormatting();
+      var newRules = cf.rules.slice();
+      if (field.startsWith('format.')) {
+        var formatField = field.replace('format.', '');
+        var newFormat = Object.assign({}, newRules[index].format || {});
+        if (value === null || value === '') {
+          delete newFormat[formatField];
+        } else {
+          newFormat[formatField] = value;
+        }
+        newRules[index] = Object.assign({}, newRules[index], {
+          format: newFormat
+        });
+      } else {
+        newRules[index] = Object.assign({}, newRules[index], _defineProperty({}, field, value));
+      }
+      this.updateCellFormatting({
+        rules: newRules
+      });
+    }
+  }, {
+    key: 'toggle',
+    value: function toggle() {
+      this.setState({ open: !this.state.open });
+      if (this.props.moveToTop) {
+        this.props.moveToTop();
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this8 = this;
+
+      var cf = this.getCellFormatting();
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'pvtButton',
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              _this8.toggle();
+            },
+            style: { marginTop: '5px' }
+          },
+          this.state.open ? '▼' : '▶',
+          ' Cell Formatting'
+        ),
+        this.state.open && _react2.default.createElement(
+          'div',
+          {
+            className: 'pvtFilterBox',
+            style: {
+              display: 'block',
+              cursor: 'initial',
+              zIndex: this.props.zIndex,
+              marginTop: '5px',
+              minWidth: '400px',
+              position: 'relative'
+            },
+            onClick: function onClick() {
+              return _this8.props.moveToTop && _this8.props.moveToTop();
+            }
+          },
+          _react2.default.createElement(
+            'a',
+            {
+              onClick: function onClick() {
+                return _this8.setState({ open: false });
+              },
+              className: 'pvtCloseX'
+            },
+            '\xD7'
+          ),
+          _react2.default.createElement(
+            'h4',
+            null,
+            'Cell Formatting Rules'
+          ),
+          cf.rules.length === 0 && _react2.default.createElement(
+            'p',
+            { style: { fontStyle: 'italic', color: '#666' } },
+            'No rules defined. Add a rule to format cell values.'
+          ),
+          cf.rules.map(function (rule, index) {
+            return _react2.default.createElement(
+              'div',
+              {
+                key: index,
+                style: {
+                  border: '1px solid #c8d4e3',
+                  padding: '10px',
+                  marginBottom: '10px',
+                  backgroundColor: '#f9f9f9'
+                }
+              },
+              _react2.default.createElement(
+                'div',
+                {
+                  style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    marginBottom: '8px'
+                  }
+                },
+                _react2.default.createElement(
+                  'strong',
+                  null,
+                  'Rule ',
+                  index + 1
+                ),
+                _react2.default.createElement(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'pvtButton',
+                    onClick: function onClick(e) {
+                      e.stopPropagation();
+                      _this8.removeRule(index);
+                    },
+                    style: { fontSize: '10px', padding: '2px 6px' }
+                  },
+                  'Remove'
+                )
+              ),
+              _react2.default.createElement(
+                'div',
+                { style: { marginBottom: '8px' } },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Thousand Separator (empty = no separator, decimal formatting still applies):'
+                ),
+                _react2.default.createElement('input', {
+                  type: 'text',
+                  value: rule.format && 'thousandsSep' in rule.format ? rule.format.thousandsSep : '',
+                  onChange: function onChange(e) {
+                    e.stopPropagation();
+                    _this8.updateRule(index, 'format.thousandsSep', e.target.value);
+                  },
+                  placeholder: ',',
+                  maxLength: '1',
+                  style: { width: '100%', padding: '4px' }
+                })
+              ),
+              _react2.default.createElement(
+                'div',
+                { style: { marginBottom: '8px' } },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Decimal Separator:'
+                ),
+                _react2.default.createElement('input', {
+                  type: 'text',
+                  value: rule.format && 'decimalSep' in rule.format ? rule.format.decimalSep : '.',
+                  onChange: function onChange(e) {
+                    e.stopPropagation();
+                    _this8.updateRule(index, 'format.decimalSep', e.target.value);
+                  },
+                  placeholder: '.',
+                  maxLength: '1',
+                  style: { width: '100%', padding: '4px' }
+                })
+              ),
+              _react2.default.createElement(
+                'div',
+                { style: { marginBottom: '8px' } },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Decimal Places:'
+                ),
+                _react2.default.createElement('input', {
+                  type: 'number',
+                  min: '0',
+                  max: '9',
+                  value: rule.format && 'decimalPlaces' in rule.format ? rule.format.decimalPlaces : 2,
+                  onChange: function onChange(e) {
+                    e.stopPropagation();
+                    var val = parseInt(e.target.value, 10);
+                    _this8.updateRule(index, 'format.decimalPlaces', isNaN(val) ? 2 : val);
+                  },
+                  placeholder: '2',
+                  style: { width: '100%', padding: '4px' }
+                })
+              ),
+              _react2.default.createElement(
+                'div',
+                { style: { marginBottom: '8px' } },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Prefix (e.g., $, \u20AC):'
+                ),
+                _react2.default.createElement('input', {
+                  type: 'text',
+                  value: rule.format && 'prefix' in rule.format ? rule.format.prefix : '',
+                  onChange: function onChange(e) {
+                    e.stopPropagation();
+                    _this8.updateRule(index, 'format.prefix', e.target.value);
+                  },
+                  placeholder: '',
+                  style: { width: '100%', padding: '4px' }
+                })
+              ),
+              _react2.default.createElement(
+                'div',
+                { style: { marginBottom: '8px' } },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'block',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  'Suffix (e.g., %, units):'
+                ),
+                _react2.default.createElement('input', {
+                  type: 'text',
+                  value: rule.format && 'suffix' in rule.format ? rule.format.suffix : '',
+                  onChange: function onChange(e) {
+                    e.stopPropagation();
+                    _this8.updateRule(index, 'format.suffix', e.target.value);
+                  },
+                  placeholder: '',
+                  style: { width: '100%', padding: '4px' }
+                })
+              ),
+              _react2.default.createElement(
+                'div',
+                { style: { marginBottom: '8px' } },
+                _react2.default.createElement(
+                  'label',
+                  {
+                    style: {
+                      display: 'flex',
+                      alignItems: 'center',
+                      marginBottom: '4px',
+                      fontSize: '11px'
+                    }
+                  },
+                  _react2.default.createElement('input', {
+                    type: 'checkbox',
+                    checked: rule.format && 'showOriginal' in rule.format ? rule.format.showOriginal : false,
+                    onChange: function onChange(e) {
+                      e.stopPropagation();
+                      _this8.updateRule(index, 'format.showOriginal', e.target.checked);
+                    },
+                    style: { marginRight: '6px' }
+                  }),
+                  'Show Original Value (no formatting)'
+                )
+              )
+            );
+          }),
+          _react2.default.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'pvtButton',
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                _this8.addRule();
+              },
+              style: { width: '100%', marginTop: '10px' }
+            },
+            '+ Add Rule'
+          )
+        )
+      );
+    }
+  }]);
+
+  return CellFormattingUI;
+}(_react2.default.Component);
+
+CellFormattingUI.propTypes = {
+  tableOptions: _propTypes2.default.object,
+  onChange: _propTypes2.default.func.isRequired,
+  moveToTop: _propTypes2.default.func,
+  zIndex: _propTypes2.default.number
+};
+
+CellFormattingUI.defaultProps = {
+  tableOptions: {},
+  moveToTop: function moveToTop() {},
+  zIndex: 1
+};
+
+var PivotTableUI = function (_React$PureComponent2) {
+  _inherits(PivotTableUI, _React$PureComponent2);
+
+  function PivotTableUI(props) {
+    _classCallCheck(this, PivotTableUI);
+
+    var _this9 = _possibleConstructorReturn(this, (PivotTableUI.__proto__ || Object.getPrototypeOf(PivotTableUI)).call(this, props));
+
+    _this9.state = {
+      unusedOrder: [],
+      zIndices: {},
+      maxZIndex: 1000,
+      openDropdown: false,
+      attrValues: {},
+      materializedInput: []
+    };
+    return _this9;
+  }
+
+  _createClass(PivotTableUI, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.materializeInput(this.props.data);
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.materializeInput(this.props.data);
+    }
+  }, {
+    key: 'materializeInput',
+    value: function materializeInput(nextData) {
+      if (this.state.data === nextData) {
+        return;
+      }
+      var newState = {
+        data: nextData,
+        attrValues: {},
+        materializedInput: []
+      };
+      var recordsProcessed = 0;
+      _Utilities.PivotData.forEachRecord(newState.data, this.props.derivedAttributes, function (record) {
+        newState.materializedInput.push(record);
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = Object.keys(record)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var attr = _step.value;
+
+            if (!(attr in newState.attrValues)) {
+              newState.attrValues[attr] = {};
+              if (recordsProcessed > 0) {
+                newState.attrValues[attr].null = recordsProcessed;
+              }
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator.return) {
+              _iterator.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+
+        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++;
+      });
+      this.setState(newState);
+    }
+  }, {
+    key: 'sendPropUpdate',
+    value: function sendPropUpdate(command) {
+      this.props.onChange((0, _immutabilityHelper2.default)(this.props, command));
+    }
+  }, {
+    key: 'propUpdater',
+    value: function propUpdater(key) {
+      var _this10 = this;
+
+      return function (value) {
+        return _this10.sendPropUpdate(_defineProperty({}, key, { $set: value }));
+      };
+    }
+  }, {
+    key: 'hasExternalAggregations',
+    value: function hasExternalAggregations() {
+      return Array.isArray(this.props.aggregations);
+    }
+  }, {
+    key: 'getCurrentAggregations',
+    value: function getCurrentAggregations() {
+      var _this11 = this;
+
+      var fallbackAggregator = this.props.aggregatorName || Object.keys(this.props.aggregators)[0];
+      var fallbackVals = Array.isArray(this.props.vals) ? this.props.vals.slice() : [];
+      var aggregationsProvided = this.hasExternalAggregations();
+      var defaultAggregations = [{
+        key: 'agg-default',
+        aggregatorName: fallbackAggregator,
+        vals: fallbackVals
+      }];
+      var source = aggregationsProvided ? this.props.aggregations : defaultAggregations;
+      return source.map(function (agg, idx) {
+        var aggregatorName = agg.aggregatorName || fallbackAggregator;
+        var baseVals = Array.isArray(agg.vals) ? agg.vals.slice() : aggregationsProvided ? [] : fallbackVals;
+        return {
+          key: agg.key || 'agg-' + idx,
+          aggregatorName: aggregatorName,
+          vals: _this11.defaultValsForAggregator(aggregatorName, baseVals)
+        };
+      });
+    }
+  }, {
+    key: 'numInputsForAggregator',
+    value: function numInputsForAggregator(name) {
+      if (!name || !(name in this.props.aggregators)) {
+        return 0;
+      }
+      var instance = this.props.aggregators[name]([])();
+      return instance.numInputs || 0;
+    }
+  }, {
+    key: 'getAttributeOptions',
+    value: function getAttributeOptions() {
+      var _this12 = this;
+
+      return Object.keys(this.state.attrValues).filter(function (e) {
+        return !_this12.props.hiddenAttributes.includes(e) && !_this12.props.hiddenFromAggregators.includes(e);
+      });
+    }
+  }, {
+    key: 'defaultValsForAggregator',
+    value: function defaultValsForAggregator(name) {
+      var currentVals = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+      var required = this.numInputsForAggregator(name);
+      if (required === 0) {
+        return [];
+      }
+      var options = this.getAttributeOptions();
+      var next = currentVals.slice(0, required);
+      for (var i = 0; i < required; i++) {
+        if (!next[i]) {
+          next[i] = options[i % options.length] || null;
+        }
+      }
+      return next;
+    }
+  }, {
+    key: 'generateAggregationKey',
+    value: function generateAggregationKey() {
+      var timestamp = Date.now().toString(AGG_KEY_RADIX);
+      var randomPart = Math.random().toString(AGG_KEY_RADIX).slice(AGG_KEY_OFFSET, AGG_KEY_OFFSET + AGG_KEY_LENGTH);
+      return 'agg-' + timestamp + '-' + randomPart;
+    }
+  }, {
+    key: 'updateAggregations',
+    value: function updateAggregations(nextAggregations) {
+      var _this13 = this;
+
+      if (!nextAggregations.length) {
+        return;
+      }
+      var fallbackAggregator = this.props.aggregatorName || Object.keys(this.props.aggregators)[0];
+      var sanitized = nextAggregations.map(function (agg, idx) {
+        var aggregatorName = agg.aggregatorName || fallbackAggregator;
+        return {
+          key: agg.key || 'agg-' + idx,
+          aggregatorName: aggregatorName,
+          vals: _this13.defaultValsForAggregator(aggregatorName, Array.isArray(agg.vals) ? agg.vals.slice() : [])
+        };
+      });
+      var primary = sanitized[0];
+      var command = {
+        aggregations: { $set: sanitized }
+      };
+      if (!this.hasExternalAggregations()) {
+        command.aggregatorName = { $set: primary.aggregatorName };
+        command.vals = { $set: primary.vals };
+      }
+      this.sendPropUpdate(command);
+    }
+  }, {
+    key: 'setAggregationAggregator',
+    value: function setAggregationAggregator(index, aggregatorName) {
+      var aggregations = this.getCurrentAggregations();
+      var next = Object.assign({}, aggregations[index], {
+        aggregatorName: aggregatorName
+      });
+      next.vals = this.defaultValsForAggregator(aggregatorName, next.vals);
+      aggregations[index] = next;
+      this.updateAggregations(aggregations);
+    }
+  }, {
+    key: 'setAggregationVal',
+    value: function setAggregationVal(index, valIndex, value) {
+      var aggregations = this.getCurrentAggregations();
+      var next = Object.assign({}, aggregations[index]);
+      var vals = Array.isArray(next.vals) ? next.vals.slice() : [];
+      vals[valIndex] = value;
+      next.vals = vals;
+      aggregations[index] = next;
+      this.updateAggregations(aggregations);
+    }
+  }, {
+    key: 'setAggregationDisplayMode',
+    value: function setAggregationDisplayMode(mode) {
+      var allowedModes = ['row', 'column'];
+      var normalizedMode = allowedModes.includes(mode) ? mode : 'row';
+      var tableOptions = Object.assign({}, this.props.tableOptions || {}, {
+        aggregationDisplayMode: normalizedMode
+      });
+      this.sendPropUpdate({
+        tableOptions: { $set: tableOptions }
+      });
+    }
+  }, {
+    key: 'addAggregationRow',
+    value: function addAggregationRow() {
+      var aggregations = this.getCurrentAggregations();
+      var defaultAggregator = this.props.aggregatorName || Object.keys(this.props.aggregators)[0];
+      var key = this.generateAggregationKey();
+      aggregations.push({
+        key: key,
+        aggregatorName: defaultAggregator,
+        vals: this.defaultValsForAggregator(defaultAggregator)
+      });
+      this.updateAggregations(aggregations);
+    }
+  }, {
+    key: 'removeAggregationRow',
+    value: function removeAggregationRow(index) {
+      var aggregations = this.getCurrentAggregations();
+      if (aggregations.length === 1) {
+        return;
+      }
+      aggregations.splice(index, 1);
+      this.updateAggregations(aggregations);
+    }
+  }, {
+    key: 'setValuesInFilter',
+    value: function setValuesInFilter(attribute, values) {
+      this.sendPropUpdate({
+        valueFilter: _defineProperty({}, attribute, {
+          $set: values.reduce(function (r, v) {
+            r[v] = true;
+            return r;
+          }, {})
+        })
+      });
+    }
+  }, {
+    key: 'addValuesToFilter',
+    value: function addValuesToFilter(attribute, values) {
+      if (attribute in this.props.valueFilter) {
+        this.sendPropUpdate({
+          valueFilter: _defineProperty({}, attribute, values.reduce(function (r, v) {
+            r[v] = { $set: true };
+            return r;
+          }, {}))
+        });
+      } else {
+        this.setValuesInFilter(attribute, values);
+      }
+    }
+  }, {
+    key: 'removeValuesFromFilter',
+    value: function removeValuesFromFilter(attribute, values) {
+      this.sendPropUpdate({
+        valueFilter: _defineProperty({}, attribute, { $unset: values })
+      });
+    }
+  }, {
+    key: 'moveFilterBoxToTop',
+    value: function moveFilterBoxToTop(attribute) {
+      this.setState((0, _immutabilityHelper2.default)(this.state, {
+        maxZIndex: { $set: this.state.maxZIndex + 1 },
+        zIndices: _defineProperty({}, attribute, { $set: this.state.maxZIndex + 1 })
+      }));
+    }
+  }, {
+    key: 'handleColSort',
+    value: function handleColSort(attr, sortDir) {
+      // Only allow sorting 1 column at a time - clear all other column sorts
+      var colSorts = {};
+      if (sortDir !== null) {
+        colSorts[attr] = sortDir;
+      }
+      this.sendPropUpdate({ colSorts: { $set: colSorts } });
+    }
+  }, {
+    key: 'handleRowSort',
+    value: function handleRowSort(attr, sortDir) {
+      // Only allow sorting 1 row at a time - clear all other row sorts
+      var rowSorts = {};
+      if (sortDir !== null) {
+        rowSorts[attr] = sortDir;
+      }
+      this.sendPropUpdate({ rowSorts: { $set: rowSorts } });
+    }
+  }, {
+    key: 'isOpen',
+    value: function isOpen(dropdown) {
+      return this.state.openDropdown === dropdown;
+    }
+  }, {
+    key: 'makeDnDCell',
+    value: function makeDnDCell(items, onChange, classes) {
+      var _this14 = this;
+
+      return _react2.default.createElement(
+        _reactSortablejs2.default,
+        {
+          options: {
+            group: 'shared',
+            ghostClass: 'pvtPlaceholder',
+            filter: '.pvtFilterBox',
+            preventOnFilter: false
+          },
+          tag: 'td',
+          className: classes,
+          onChange: onChange
+        },
+        items.map(function (x) {
+          return _react2.default.createElement(DraggableAttribute, {
+            name: x,
+            key: x,
+            attrValues: _this14.state.attrValues[x],
+            valueFilter: _this14.props.valueFilter[x] || {},
+            sorter: (0, _Utilities.getSort)(_this14.props.sorters, x, _this14.state.attrValues[x]),
+            menuLimit: _this14.props.menuLimit,
+            setValuesInFilter: _this14.setValuesInFilter.bind(_this14),
+            addValuesToFilter: _this14.addValuesToFilter.bind(_this14),
+            moveFilterBoxToTop: _this14.moveFilterBoxToTop.bind(_this14),
+            removeValuesFromFilter: _this14.removeValuesFromFilter.bind(_this14),
+            zIndex: _this14.state.zIndices[x] || _this14.state.maxZIndex
+          });
+        })
+      );
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this15 = this;
+
+      var aggregations = this.getCurrentAggregations();
+      var primaryAggregation = aggregations[0];
+      var tableOptions = this.props.tableOptions || {};
+      var aggregationDisplayMode = tableOptions.aggregationDisplayMode === 'column' ? 'column' : 'row';
+      var aggregatorCellOutlet = primaryAggregation && this.props.aggregators[primaryAggregation.aggregatorName] && this.props.aggregators[primaryAggregation.aggregatorName]([])().outlet;
+
+      var rendererName = this.props.rendererName in this.props.renderers ? this.props.rendererName : Object.keys(this.props.renderers)[0];
+
+      var rendererCell = _react2.default.createElement(
+        'td',
+        { className: 'pvtRenderers' },
+        _react2.default.createElement(Dropdown, {
+          current: rendererName,
+          values: Object.keys(this.props.renderers),
+          open: this.isOpen('renderer'),
+          zIndex: this.isOpen('renderer') ? this.state.maxZIndex + 1 : 1,
+          toggle: function toggle() {
+            return _this15.setState({
+              openDropdown: _this15.isOpen('renderer') ? false : 'renderer'
+            });
+          },
+          setValue: this.propUpdater('rendererName')
+        })
+      );
+
+      var sortIcons = {
+        key_a_to_z: {
+          rowSymbol: '↕',
+          colSymbol: '↔',
+          next: 'value_a_to_z'
+        },
+        value_a_to_z: {
+          rowSymbol: '↓',
+          colSymbol: '→',
+          next: 'value_z_to_a'
+        },
+        value_z_to_a: { rowSymbol: '↑', colSymbol: '←', next: 'key_a_to_z' }
+      };
+
+      var attributeOptions = this.getAttributeOptions();
+      var aggregatorCell = _react2.default.createElement(
+        'td',
+        { className: 'pvtVals' },
+        aggregations.map(function (agg, idx) {
+          var aggDropdownKey = 'aggregation-' + agg.key + '-agg';
+          var numValsAllowed = _this15.numInputsForAggregator(agg.aggregatorName);
+          var vals = _this15.defaultValsForAggregator(agg.aggregatorName, agg.vals);
+          return _react2.default.createElement(
+            'div',
+            { className: 'pvtAggregatorRow', key: agg.key || idx },
+            _react2.default.createElement(Dropdown, {
+              current: agg.aggregatorName,
+              values: Object.keys(_this15.props.aggregators),
+              open: _this15.isOpen(aggDropdownKey),
+              zIndex: _this15.isOpen(aggDropdownKey) ? _this15.state.maxZIndex + 1 : 1,
+              toggle: function toggle() {
+                return _this15.setState({
+                  openDropdown: _this15.isOpen(aggDropdownKey) ? false : aggDropdownKey
+                });
+              },
+              setValue: function setValue(value) {
+                return _this15.setAggregationAggregator(idx, value);
+              }
+            }),
+            numValsAllowed > 0 && _react2.default.createElement(
+              'div',
+              { className: 'pvtAggregatorVals' },
+              new Array(numValsAllowed).fill().map(function (n, i) {
+                var valDropdownKey = 'aggregation-' + agg.key + '-val-' + i;
+                return _react2.default.createElement(Dropdown, {
+                  key: 'agg-val-' + agg.key + '-' + i,
+                  current: vals[i],
+                  values: attributeOptions,
+                  open: _this15.isOpen(valDropdownKey),
+                  zIndex: _this15.isOpen(valDropdownKey) ? _this15.state.maxZIndex + 1 : 1,
+                  toggle: function toggle() {
+                    return _this15.setState({
+                      openDropdown: _this15.isOpen(valDropdownKey) ? false : valDropdownKey
+                    });
+                  },
+                  setValue: function setValue(value) {
+                    return _this15.setAggregationVal(idx, i, value);
+                  }
+                });
+              })
+            ),
+            aggregations.length > 1 && _react2.default.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'pvtButton pvtRemoveAggregator',
+                onClick: function onClick(e) {
+                  e.stopPropagation();
+                  _this15.removeAggregationRow(idx);
+                }
+              },
+              'Remove'
+            )
+          );
+        }),
+        _react2.default.createElement(
+          'div',
+          { className: 'pvtAggregationModeToggle' },
+          _react2.default.createElement(
+            'label',
+            {
+              htmlFor: 'pvtAggregationMode',
+              style: { marginRight: '6px', fontSize: '12px' }
+            },
+            'Aggregation values on:'
+          ),
+          _react2.default.createElement(
+            'select',
+            {
+              id: 'pvtAggregationMode',
+              value: aggregationDisplayMode,
+              onChange: function onChange(e) {
+                return _this15.setAggregationDisplayMode(e.target.value);
+              }
+            },
+            _react2.default.createElement(
+              'option',
+              { value: 'row' },
+              'Rows'
+            ),
+            _react2.default.createElement(
+              'option',
+              { value: 'column' },
+              'Columns'
+            )
+          )
+        ),
+        _react2.default.createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'pvtButton pvtAddAggregator',
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              _this15.addAggregationRow();
+            }
+          },
+          '+ Add Value'
+        ),
+        _react2.default.createElement(
+          'a',
+          {
+            role: 'button',
+            className: 'pvtRowOrder',
+            onClick: function onClick() {
+              return _this15.propUpdater('rowOrder')(sortIcons[_this15.props.rowOrder].next);
+            }
+          },
+          sortIcons[this.props.rowOrder].rowSymbol
+        ),
+        _react2.default.createElement(
+          'a',
+          {
+            role: 'button',
+            className: 'pvtColOrder',
+            onClick: function onClick() {
+              return _this15.propUpdater('colOrder')(sortIcons[_this15.props.colOrder].next);
+            }
+          },
+          sortIcons[this.props.colOrder].colSymbol
+        ),
+        aggregatorCellOutlet && aggregatorCellOutlet(this.props.data),
+        _react2.default.createElement(ConditionalFormattingUI, {
+          tableOptions: tableOptions,
+          onChange: this.sendPropUpdate.bind(this),
+          moveToTop: this.moveFilterBoxToTop.bind(this, 'conditionalFormatting'),
+          zIndex: this.state.zIndices.conditionalFormatting || this.state.maxZIndex
+        }),
+        _react2.default.createElement(CellFormattingUI, {
+          tableOptions: tableOptions,
+          onChange: this.sendPropUpdate.bind(this),
+          moveToTop: this.moveFilterBoxToTop.bind(this, 'cellFormatting'),
+          zIndex: this.state.zIndices.cellFormatting || this.state.maxZIndex
+        })
+      );
+
+      var unusedAttrs = Object.keys(this.state.attrValues).filter(function (e) {
+        return !_this15.props.rows.includes(e) && !_this15.props.cols.includes(e) && !_this15.props.hiddenAttributes.includes(e) && !_this15.props.hiddenFromDragDrop.includes(e);
+      }).sort((0, _Utilities.sortAs)(this.state.unusedOrder));
+
+      var unusedLength = unusedAttrs.reduce(function (r, e) {
+        return r + e.length;
+      }, 0);
+      var horizUnused = unusedLength < this.props.unusedOrientationCutoff;
+
+      var unusedAttrsCell = this.makeDnDCell(unusedAttrs, function (order) {
+        return _this15.setState({ unusedOrder: order });
+      }, 'pvtAxisContainer pvtUnused ' + (horizUnused ? 'pvtHorizList' : 'pvtVertList'));
+
+      var colAttrs = this.props.cols.filter(function (e) {
+        return !_this15.props.hiddenAttributes.includes(e) && !_this15.props.hiddenFromDragDrop.includes(e);
+      });
+
+      var colAttrsCell = this.makeDnDCell(colAttrs, this.propUpdater('cols'), 'pvtAxisContainer pvtHorizList pvtCols');
+
+      var rowAttrs = this.props.rows.filter(function (e) {
+        return !_this15.props.hiddenAttributes.includes(e) && !_this15.props.hiddenFromDragDrop.includes(e);
+      });
+      var rowAttrsCell = this.makeDnDCell(rowAttrs, this.propUpdater('rows'), 'pvtAxisContainer pvtVertList pvtRows');
+      var outputCell = _react2.default.createElement(
+        'td',
+        { className: 'pvtOutput' },
+        _react2.default.createElement(_PivotTable2.default, _extends({}, (0, _immutabilityHelper2.default)(this.props, {
+          data: { $set: this.state.materializedInput }
+        }), {
+          colSorts: this.props.colSorts || {},
+          rowSorts: this.props.rowSorts || {},
+          onColSort: this.handleColSort.bind(this),
+          onRowSort: this.handleRowSort.bind(this)
+        }))
+      );
+
+      if (horizUnused) {
+        return _react2.default.createElement(
+          'table',
+          { className: 'pvtUi' },
+          _react2.default.createElement(
+            'tbody',
+            { onClick: function onClick() {
+                return _this15.setState({ openDropdown: false });
+              } },
+            _react2.default.createElement(
+              'tr',
+              null,
+              rendererCell,
+              unusedAttrsCell
+            ),
+            _react2.default.createElement(
+              'tr',
+              null,
+              aggregatorCell,
+              colAttrsCell
+            ),
+            _react2.default.createElement(
+              'tr',
+              null,
+              rowAttrsCell,
+              outputCell
+            )
+          )
+        );
+      }
+
+      return _react2.default.createElement(
+        'table',
+        { className: 'pvtUi' },
+        _react2.default.createElement(
+          'tbody',
+          { onClick: function onClick() {
+              return _this15.setState({ openDropdown: false });
+            } },
+          _react2.default.createElement(
+            'tr',
+            null,
+            rendererCell,
+            aggregatorCell,
+            colAttrsCell
+          ),
+          _react2.default.createElement(
+            'tr',
+            null,
+            unusedAttrsCell,
+            rowAttrsCell,
+            outputCell
+          )
+        )
+      );
+    }
+  }]);
+
+  return PivotTableUI;
+}(_react2.default.PureComponent);
+
+PivotTableUI.propTypes = Object.assign({}, _PivotTable2.default.propTypes, {
+  onChange: _propTypes2.default.func.isRequired,
+  hiddenAttributes: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  hiddenFromAggregators: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  hiddenFromDragDrop: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  unusedOrientationCutoff: _propTypes2.default.number,
+  menuLimit: _propTypes2.default.number,
+  colSorts: _propTypes2.default.objectOf(_propTypes2.default.oneOf(['ASC', 'DESC'])),
+  rowSorts: _propTypes2.default.objectOf(_propTypes2.default.oneOf(['ASC', 'DESC']))
+});
+
+PivotTableUI.defaultProps = Object.assign({}, _PivotTable2.default.defaultProps, {
+  hiddenAttributes: [],
+  hiddenFromAggregators: [],
+  hiddenFromDragDrop: [],
+  unusedOrientationCutoff: 85,
+  menuLimit: 500,
+  colSorts: {},
+  rowSorts: {}
+});
+
+exports.default = PivotTableUI;
+//# sourceMappingURL=PivotTableUI.js.map