@deephaven/iris-grid 1.22.1 → 1.22.2-alpha-pivot-builder.0

package/dist/IrisGrid.js

@@ -1,3 +1,9 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -42,6 +48,7 @@ import IrisGridModel from "./IrisGridModel.js";
 import { isPartitionedGridModel } from "./PartitionedGridModel.js";
 import IrisGridPartitionSelector from "./IrisGridPartitionSelector.js";
 import SelectDistinctBuilder from "./sidebar/SelectDistinctBuilder.js";
+import PluginTableOptionsErrorBoundary from "./sidebar/PluginTableOptionsErrorBoundary.js";
 import AdvancedSettingsType from "./sidebar/AdvancedSettingsType.js";
 import AdvancedSettingsMenu from "./sidebar/AdvancedSettingsMenu.js";
 import SHORTCUTS from "./IrisGridShortcuts.js";
@@ -49,7 +56,6 @@ import ConditionalFormattingMenu from "./sidebar/conditional-formatting/Conditio
 import ConditionalFormatEditor from "./sidebar/conditional-formatting/ConditionalFormatEditor.js";
 import IrisGridCellOverflowModal from "./IrisGridCellOverflowModal.js";
 import GotoRow from "./GotoRow.js";
-import AggregationOperation from "./sidebar/aggregations/AggregationOperation.js";
 import { IrisGridThemeContext } from "./IrisGridThemeProvider.js";
 import { isMissingPartitionError } from "./MissingPartitionError.js";
 import { NoPastePermissionModal } from "./NoPastePermissionModal.js";
@@ -67,19 +73,28 @@ var DEFAULT_AGGREGATION_SETTINGS = Object.freeze({
 });
 var UNFORMATTED_DATE_PATTERN = "yyyy-MM-dd'T'HH:mm:ss.SSSSSSSSS z";
 function isEmptyConfig(_ref) {
-  var {
-    advancedFilters,
-    aggregationSettings,
-    customColumns,
-    quickFilters,
-    reverse,
-    rollupConfig,
-    searchFilter,
-    selectDistinctColumns,
-    sorts
-  } = _ref;
+  var advancedFilters = _ref.advancedFilters,
+    aggregationSettings = _ref.aggregationSettings,
+    customColumns = _ref.customColumns,
+    quickFilters = _ref.quickFilters,
+    reverse = _ref.reverse,
+    rollupConfig = _ref.rollupConfig,
+    searchFilter = _ref.searchFilter,
+    selectDistinctColumns = _ref.selectDistinctColumns,
+    sorts = _ref.sorts;
   return advancedFilters.size === 0 && aggregationSettings.aggregations.length === 0 && customColumns.length === 0 && quickFilters.size === 0 && !reverse && rollupConfig == null && searchFilter == null && selectDistinctColumns.length === 0 && sorts.length === 0;
 }
+
+/**
+ * The subset of `IrisGridProps` that overrides how the grid presents its
+ * model: theme, canvas renderer, extra mouse handlers, and the metric
+ * calculator factory. Hosts that render `<IrisGrid>` on behalf of a plugin
+ * (e.g. `GridWidgetPlugin`) accept this as a single passthrough bag so they
+ * don't need to know each view concern by name, and plugins build it from
+ * their own hooks. Kept as a `Pick` (not `Partial<IrisGridProps>`) so it can
+ * never clobber structural props like `model` or `ref`.
+ */
+
 class IrisGrid extends Component {
   constructor(props) {
     var _model$layoutHints, _model$columns$0$name, _model$columns$;
@@ -117,6 +132,13 @@ class IrisGrid extends Component {
     _defineProperty(this, "tableUtils", void 0);
     _defineProperty(this, "keyHandlers", void 0);
     _defineProperty(this, "mouseHandlers", void 0);
+    /**
+     * The metric calculator factory most recently used to instantiate the
+     * calculator currently stored in state. Used by `maybeRebuildMetricCalculator`
+     * (called from `componentDidUpdate` when the `getMetricCalculator` prop
+     * changes) to detect when a different factory is supplied and rebuild.
+     */
+    _defineProperty(this, "lastMetricCalculatorFactory", void 0);
     _defineProperty(this, "slideTransitionRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "bottomTransitionRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "getAdvancedMenuOpenedHandler", memoize(column => this.handleAdvancedMenuOpened.bind(this, column), {
@@ -146,63 +168,72 @@ class IrisGrid extends Component {
         optionItems.push({
           type: OptionType.CHART_BUILDER,
           title: 'Chart Builder',
-          icon: dhGraphLineUp
+          icon: dhGraphLineUp,
+          order: 100
         });
       }
       if (isOrganizeColumnsAvailable) {
         optionItems.push({
           type: OptionType.VISIBILITY_ORDERING_BUILDER,
           title: 'Organize Columns',
-          icon: dhEye
+          icon: dhEye,
+          order: 200
         });
       }
       if (isFormatColumnsAvailable) {
         optionItems.push({
           type: OptionType.CONDITIONAL_FORMATTING,
           title: 'Conditional Formatting',
-          icon: vsEdit
+          icon: vsEdit,
+          order: 300
         });
       }
       if (isCustomColumnsAvailable) {
         optionItems.push({
           type: OptionType.CUSTOM_COLUMN_BUILDER,
           title: 'Custom Columns',
-          icon: vsSplitHorizontal
+          icon: vsSplitHorizontal,
+          order: 400
         });
       }
       if (isRollupAvailable) {
         optionItems.push({
           type: OptionType.ROLLUP_ROWS,
           title: 'Rollup Rows',
-          icon: dhTriangleDownSquare
+          icon: dhTriangleDownSquare,
+          order: 500
         });
       }
       if (isTotalsAvailable) {
         optionItems.push({
           type: OptionType.AGGREGATIONS,
           title: 'Aggregate Columns',
-          icon: vsSymbolOperator
+          icon: vsSymbolOperator,
+          order: 600
         });
       }
       if (isSelectDistinctAvailable) {
         optionItems.push({
           type: OptionType.SELECT_DISTINCT,
           title: 'Select Distinct Values',
-          icon: vsRuby
+          icon: vsRuby,
+          order: 700
         });
       }
       if (isExportAvailable && canDownloadCsv) {
         optionItems.push({
           type: OptionType.TABLE_EXPORTER,
           title: 'Download CSV',
-          icon: vsCloudDownload
+          icon: vsCloudDownload,
+          order: 800
         });
       }
       if (hasAdvancedSettings) {
         optionItems.push({
           type: OptionType.ADVANCED_SETTINGS,
           title: 'Advanced Settings',
-          icon: vsTools
+          icon: vsTools,
+          order: 900
         });
       }
       optionItems.push({
@@ -211,7 +242,8 @@ class IrisGrid extends Component {
         subtitle: toggleFilterBarAction.shortcut.getDisplayText(),
         icon: vsFilter,
         isOn: isFilterBarShown,
-        onChange: toggleFilterBarAction.action
+        onChange: toggleFilterBarAction.action,
+        order: 1000
       });
       if (canToggleSearch) {
         optionItems.push({
@@ -220,7 +252,8 @@ class IrisGrid extends Component {
           subtitle: toggleSearchBarAction.shortcut.getDisplayText(),
           icon: vsSearch,
           isOn: showSearchBar,
-          onChange: toggleSearchBarAction.action
+          onChange: toggleSearchBarAction.action,
+          order: 1100
         });
       }
       optionItems.push({
@@ -229,48 +262,76 @@ class IrisGrid extends Component {
         subtitle: toggleGotoRowAction.shortcut.getDisplayText(),
         icon: vsReply,
         isOn: showGotoRow,
-        onChange: toggleGotoRowAction.action
+        onChange: toggleGotoRowAction.action,
+        order: 1200
       });
       return Object.freeze(optionItems);
     }, {
       max: 1
     }));
+    /**
+     * Apply the `transformTableOptions` transform (if any) to the
+     * default option list.
+     * Catches exceptions so a buggy plugin can't break the grid,
+     * and warns about duplicate `type` collisions.
+     */
+    _defineProperty(this, "getCachedTransformedOptionItems", memoize((items, transformTableOptions) => {
+      if (transformTableOptions == null) {
+        return items;
+      }
+      var transformedItems;
+      try {
+        transformedItems = transformTableOptions(items);
+      } catch (err) {
+        log.error('transformTableOptions threw an error; falling back to defaults.', err);
+        return items;
+      }
+      // Stably sort by ascending `order`. Items without an `order` sink to
+      // the end of the menu (default `Infinity`), while items with an `order`
+      // are positioned by their weight. Decorate-sort-undecorate guarantees
+      // stability regardless of the engine's sort implementation.
+      var sortedItems = transformedItems.map((item, index) => ({
+        item,
+        index
+      })).sort((a, b) => {
+        var _a$item$order, _b$item$order;
+        return ((_a$item$order = a.item.order) !== null && _a$item$order !== void 0 ? _a$item$order : Infinity) - ((_b$item$order = b.item.order) !== null && _b$item$order !== void 0 ? _b$item$order : Infinity) || a.index - b.index;
+      }).map(_ref2 => {
+        var item = _ref2.item;
+        return item;
+      });
+      var keys = new Set();
+      for (var i = 0; i < sortedItems.length; i += 1) {
+        var key = String(sortedItems[i].type);
+        if (keys.has(key)) {
+          log.warn("transformTableOptions produced duplicate type \"".concat(key, "\"; ") + 'only the first entry will be accessible from the menu.');
+          break;
+        }
+        keys.add(key);
+      }
+      return Object.freeze(sortedItems);
+    }, {
+      max: 1
+    }));
     _defineProperty(this, "getCachedHiddenColumns", memoize((metricCalculator, userColumnWidths) => IrisGridUtils.getHiddenColumns(new Map([...metricCalculator.initialColumnWidths, ...userColumnWidths])), {
       max: 1
     }));
     _defineProperty(this, "getAggregationMap", memoize((columns, aggregations) => {
       var aggregationMap = {};
-      aggregations.forEach(_ref2 => {
-        var {
-          operation,
-          selected,
-          invert
-        } = _ref2;
+      aggregations.forEach(_ref3 => {
+        var operation = _ref3.operation,
+          selected = _ref3.selected,
+          invert = _ref3.invert;
         aggregationMap[operation] = AggregationUtils.getOperationColumnNames(columns, operation, selected, invert);
       });
       return aggregationMap;
     }, {
       max: 1
     }));
-    _defineProperty(this, "getOperationMap", memoize((columns, aggregations) => {
-      var operationMap = {};
-      aggregations.filter(a => !AggregationUtils.isRollupOperation(a.operation)).forEach(_ref3 => {
-        var {
-          operation,
-          selected,
-          invert
-        } = _ref3;
-        AggregationUtils.getOperationColumnNames(columns, operation, selected, invert).forEach(name => {
-          var _operationMap$name;
-          var newOperations = [...((_operationMap$name = operationMap[name]) !== null && _operationMap$name !== void 0 ? _operationMap$name : []), operation];
-          operationMap[name] = Object.freeze(newOperations);
-        });
-      });
-      return operationMap;
-    }, {
+    _defineProperty(this, "getOperationMap", memoize((columns, aggregations) => IrisGridUtils.getOperationMap(columns, aggregations), {
       max: 1
     }));
-    _defineProperty(this, "getOperationOrder", memoize(aggregations => aggregations.map(a => a.operation).filter(o => !AggregationUtils.isRollupOperation(o)), {
+    _defineProperty(this, "getOperationOrder", memoize(aggregations => IrisGridUtils.getOperationOrder(aggregations), {
       max: 1
     }));
     _defineProperty(this, "getCachedFormatColumns", memoize((dh, columns, rules) => getFormatColumns(dh, columns, rules), {
@@ -298,28 +359,7 @@ class IrisGrid extends Component {
     _defineProperty(this, "getModelRollupConfig", memoize((originalColumns, config, aggregationSettings) => IrisGridUtils.getModelRollupConfig(originalColumns, config, aggregationSettings), {
       max: 1
     }));
-    _defineProperty(this, "getModelTotalsConfig", memoize((columns, config, aggregationSettings) => {
-      var _config$columns$lengt, _config$columns;
-      if (((_config$columns$lengt = config === null || config === void 0 || (_config$columns = config.columns) === null || _config$columns === void 0 ? void 0 : _config$columns.length) !== null && _config$columns$lengt !== void 0 ? _config$columns$lengt : 0) > 0) {
-        // If we've got rollups, then aggregations are applied as part of that...
-        return null;
-      }
-
-      // Filter out aggregations without any columns actually selected
-      var aggregations = aggregationSettings.aggregations.filter(agg => agg.selected.length > 0 || agg.invert);
-      if (aggregations.length === 0) {
-        // We don't actually have any aggregations set, don't bother
-        return null;
-      }
-      var operationMap = this.getOperationMap(columns, aggregations);
-      var operationOrder = this.getOperationOrder(aggregations);
-      return {
-        operationMap,
-        operationOrder,
-        showOnTop: aggregationSettings.showOnTop,
-        defaultOperation: AggregationOperation.SKIP
-      };
-    }, {
+    _defineProperty(this, "getModelTotalsConfig", memoize((columns, config, aggregationSettings) => IrisGridUtils.getModelTotalsConfig(columns, config, aggregationSettings), {
       max: 1
     }));
     _defineProperty(this, "getCachedStateOverride", memoize((model, theme, hoverSelectColumn, isFilterBarShown, isSelectingColumn, loadingScrimProgress, quickFilters, advancedFilters, sorts, reverse, rollupConfig, isMenuShown) => ({
@@ -349,9 +389,7 @@ class IrisGrid extends Component {
 
       // We only show the row footers when we have floating rows for aggregations
       var rowFooterWidth = floatingRowCount > 0 ? (_theme$rowFooterWidth = theme === null || theme === void 0 ? void 0 : theme.rowFooterWidth) !== null && _theme$rowFooterWidth !== void 0 ? _theme$rowFooterWidth : baseTheme.rowFooterWidth : 0;
-      var {
-        metricCalculator
-      } = this.state;
+      var metricCalculator = this.state.metricCalculator;
       if (metricCalculator != null) {
         metricCalculator.resetCalculatedColumnWidths();
         metricCalculator.resetCalculatedRowHeights();
@@ -372,7 +410,7 @@ class IrisGrid extends Component {
     _defineProperty(this, "getCachedKeyHandlers", memoize(keyHandlers => [...keyHandlers, ...this.keyHandlers].sort((a, b) => a.order - b.order), {
       max: 1
     }));
-    _defineProperty(this, "getCachedMouseHandlers", memoize(mouseHandlers => [...mouseHandlers, ...this.mouseHandlers].map(handler => typeof handler === 'function' ? handler(this) : handler), {
+    _defineProperty(this, "getCachedMouseHandlers", memoize(mouseHandlersProp => [...mouseHandlersProp, ...this.mouseHandlers].map(handler => typeof handler === 'function' ? handler(this) : handler), {
       max: 1
     }));
     _defineProperty(this, "getCachedRenderer", memoize(rendererProp => rendererProp !== null && rendererProp !== void 0 ? rendererProp : new IrisGridRenderer(), {
@@ -397,21 +435,15 @@ class IrisGrid extends Component {
       max: 1
     }));
     _defineProperty(this, "updateSearchFilter", debounce((searchValue, selectedSearchColumns, columns, invertSearchColumns) => {
-      var {
-        model
-      } = this.props;
+      var model = this.props.model;
       var searchFilter = CrossColumnSearch.createSearchFilter(model.dh, searchValue, selectedSearchColumns, columns, invertSearchColumns);
       this.setState({
         searchFilter
       });
     }, SET_FILTER_DEBOUNCE));
     _defineProperty(this, "showViewportLoading", throttle(() => {
-      var {
-        model
-      } = this.props;
-      var {
-        loadingSpinnerShown
-      } = this.state;
+      var model = this.props.model;
+      var loadingSpinnerShown = this.state.loadingSpinnerShown;
       if (model.isViewportPending && !loadingSpinnerShown) {
         // We only want to show the viewport loading if the viewport is still loading
         // and we're not already showing a loader for something else
@@ -431,9 +463,7 @@ class IrisGrid extends Component {
       });
     }, SET_CONDITIONAL_FORMAT_DEBOUNCE));
     _defineProperty(this, "handleDownloadProgressUpdate", throttle((tableDownloadProgress, tableDownloadEstimatedTime) => {
-      var {
-        tableDownloadStatus
-      } = this.state;
+      var tableDownloadStatus = this.state.tableDownloadStatus;
       if (tableDownloadStatus === TableCsvExporter.DOWNLOAD_STATUS.DOWNLOADING) {
         this.setState({
           tableDownloadProgress,
@@ -473,12 +503,8 @@ class IrisGrid extends Component {
       if (expandCellTooltipProps == null) {
         return null;
       }
-      var {
-        expandTooltipDisplayValue
-      } = this.state;
-      var {
-        model
-      } = this.props;
+      var expandTooltipDisplayValue = this.state.expandTooltipDisplayValue;
+      var model = this.props.model;
       var isExpandAllAvailable = isExpandableGridModel(model) && model.isExpandAllAvailable;
       var wrapperStyle = _objectSpread(_objectSpread({
         position: 'absolute'
@@ -510,9 +536,7 @@ class IrisGrid extends Component {
       if (hoverTooltipProps == null) {
         return null;
       }
-      var {
-        hoverDisplayValue
-      } = this.state;
+      var hoverDisplayValue = this.state.hoverDisplayValue;
       var wrapperStyle = _objectSpread(_objectSpread({
         position: 'absolute'
       }, hoverTooltipProps), {}, {
@@ -571,11 +595,14 @@ class IrisGrid extends Component {
     this.handleMenuSelect = this.handleMenuSelect.bind(this);
     this.handleMenuBack = this.handleMenuBack.bind(this);
     this.handleRequestFailed = this.handleRequestFailed.bind(this);
+    this.handlePending = this.handlePending.bind(this);
+    this.handlePendingCleared = this.handlePendingCleared.bind(this);
     this.handleSelectionChanged = this.handleSelectionChanged.bind(this);
     this.handleMovedColumnsChanged = this.handleMovedColumnsChanged.bind(this);
     this.handleHeaderGroupsChanged = this.handleHeaderGroupsChanged.bind(this);
     this.handleUpdate = this.handleUpdate.bind(this);
     this.handleTableChanged = this.handleTableChanged.bind(this);
+    this.handleModelChanged = this.handleModelChanged.bind(this);
     this.handleTooltipRef = this.handleTooltipRef.bind(this);
     this.handleViewChanged = this.handleViewChanged.bind(this);
     this.handleFormatSelection = this.handleFormatSelection.bind(this);
@@ -648,9 +675,7 @@ class IrisGrid extends Component {
     };
     this.discardAction = {
       action: () => {
-        var {
-          model
-        } = this.props;
+        var model = this.props.model;
         if (isEditableGridModel(model) && model.isEditable && model.pendingDataMap.size > 0) {
           this.discardPending().catch(log.error);
         }
@@ -659,9 +684,7 @@ class IrisGrid extends Component {
     };
     this.commitAction = {
       action: () => {
-        var {
-          model
-        } = this.props;
+        var model = this.props.model;
         if (isEditableGridModel(model) && model.isEditable && model.pendingDataMap.size > 0 && model.pendingDataErrors.size === 0) {
           this.commitPending().catch(log.error);
         }
@@ -669,56 +692,56 @@ class IrisGrid extends Component {
       shortcut: SHORTCUTS.INPUT_TABLE.COMMIT
     };
     this.contextActions = [this.toggleFilterBarAction, this.toggleSearchBarAction, this.toggleGotoRowAction, this.discardAction, this.commitAction];
-    var {
-      aggregationSettings: _aggregationSettings,
-      conditionalFormats,
-      customColumnFormatMap,
-      columnAlignmentMap,
-      isFilterBarShown: _isFilterBarShown,
-      isSelectingPartition,
-      partitions,
-      partitionConfig,
-      model: _model,
-      movedColumns: movedColumnsProp,
-      movedRows: movedRowsProp,
-      rollupConfig: _rollupConfig,
-      userColumnWidths: _userColumnWidths,
-      userColumnWidthsByName,
-      userRowHeights,
-      showSearchBar: _showSearchBar,
-      searchValue: _searchValue,
-      selectedSearchColumns: _selectedSearchColumns,
-      invertSearchColumns: _invertSearchColumns,
-      advancedFilters: _advancedFilters,
-      quickFilters: _quickFilters,
-      selectDistinctColumns,
-      pendingDataMap,
-      canCopy,
-      frozenColumns,
-      columnHeaderGroups,
-      getMetricCalculator
-    } = props;
-    var {
-      dh: _dh
-    } = _model;
+    var _aggregationSettings = props.aggregationSettings,
+      conditionalFormats = props.conditionalFormats,
+      customColumnFormatMap = props.customColumnFormatMap,
+      columnAlignmentMap = props.columnAlignmentMap,
+      _isFilterBarShown = props.isFilterBarShown,
+      isSelectingPartition = props.isSelectingPartition,
+      partitions = props.partitions,
+      partitionConfig = props.partitionConfig,
+      _model = props.model,
+      movedColumnsProp = props.movedColumns,
+      movedRowsProp = props.movedRows,
+      _rollupConfig = props.rollupConfig,
+      _userColumnWidths = props.userColumnWidths,
+      userColumnWidthsByName = props.userColumnWidthsByName,
+      userRowHeights = props.userRowHeights,
+      _showSearchBar = props.showSearchBar,
+      _searchValue = props.searchValue,
+      _selectedSearchColumns = props.selectedSearchColumns,
+      _invertSearchColumns = props.invertSearchColumns,
+      _advancedFilters = props.advancedFilters,
+      _quickFilters = props.quickFilters,
+      selectDistinctColumns = props.selectDistinctColumns,
+      pendingDataMap = props.pendingDataMap,
+      canCopy = props.canCopy,
+      frozenColumns = props.frozenColumns,
+      columnHeaderGroups = props.columnHeaderGroups,
+      getMetricCalculator = props.getMetricCalculator;
+    var _dh = _model.dh;
     var _keyHandlers = [new CopyCellKeyHandler(this), new ReverseKeyHandler(this), new ClearFilterKeyHandler(this)];
-    var _mouseHandlers = [new IrisGridCellOverflowMouseHandler(this), new IrisGridRowTreeMouseHandler(this), new IrisGridTokenMouseHandler(this), new IrisGridColumnSelectMouseHandler(this), new IrisGridColumnTooltipMouseHandler(this), new IrisGridSortMouseHandler(this), new IrisGridFilterMouseHandler(this), new IrisGridContextMenuHandler(this, _dh), new IrisGridDataSelectMouseHandler(this), new PendingMouseHandler(this), new IrisGridPartitionedTableMouseHandler(this), ...(canCopy ? [new IrisGridCopyCellMouseHandler(this)] : [])];
+    var mouseHandlers = [new IrisGridCellOverflowMouseHandler(this), new IrisGridRowTreeMouseHandler(this), new IrisGridTokenMouseHandler(this), new IrisGridColumnSelectMouseHandler(this), new IrisGridColumnTooltipMouseHandler(this), new IrisGridSortMouseHandler(this), new IrisGridFilterMouseHandler(this), new IrisGridContextMenuHandler(this, _dh), new IrisGridDataSelectMouseHandler(this), new PendingMouseHandler(this), new IrisGridPartitionedTableMouseHandler(this), ...(canCopy ? [new IrisGridCopyCellMouseHandler(this)] : [])];
     if (canCopy) {
       _keyHandlers.push(new CopyKeyHandler(this));
     }
     var _movedColumns = movedColumnsProp.length > 0 ? movedColumnsProp : _model.initialMovedColumns;
     var movedRows = movedRowsProp.length > 0 ? movedRowsProp : _model.initialMovedRows;
-    var _metricCalculator = getMetricCalculator({
+    var metricCalculatorFactory = getMetricCalculator;
+    var _metricCalculator = metricCalculatorFactory({
       userColumnWidths: new Map(_userColumnWidths),
       userColumnWidthsByName: userColumnWidthsByName != null ? new Map(userColumnWidthsByName) : undefined,
       userRowHeights: new Map(userRowHeights),
       movedColumns: _movedColumns,
       initialColumnWidths: new Map(_model === null || _model === void 0 || (_model$layoutHints = _model.layoutHints) === null || _model$layoutHints === void 0 || (_model$layoutHints = _model$layoutHints.hiddenColumns) === null || _model$layoutHints === void 0 ? void 0 : _model$layoutHints.map(name => [_model.getColumnIndexByName(name), 0]))
     });
+    // Remember the factory we used so we can detect a model-driven swap
+    // (e.g. pivot-builder's proxy swapping its inner model) on COLUMNS_CHANGED.
+    this.lastMetricCalculatorFactory = metricCalculatorFactory;
     var searchColumns = _selectedSearchColumns !== null && _selectedSearchColumns !== void 0 ? _selectedSearchColumns : [];
     var _searchFilter = CrossColumnSearch.createSearchFilter(_dh, _searchValue, searchColumns, _model.columns, _invertSearchColumns);
     this.tableUtils = new TableUtils(_dh);
-    this.mouseHandlers = _mouseHandlers;
+    this.mouseHandlers = mouseHandlers;
     this.keyHandlers = _keyHandlers;
     this.state = {
       isFilterBarShown: _isFilterBarShown,
@@ -810,31 +833,38 @@ class IrisGrid extends Component {
     };
   }
   componentDidMount() {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     this.initState();
     this.startListening(model);
   }
   componentDidUpdate(prevProps, prevState) {
-    var {
-      inputFilters,
-      isSelectingColumn,
-      settings,
-      model,
-      customFilters,
-      sorts
-    } = this.props;
+    var _this$props = this.props,
+      inputFilters = _this$props.inputFilters,
+      isSelectingColumn = _this$props.isSelectingColumn,
+      settings = _this$props.settings,
+      model = _this$props.model,
+      customFilters = _this$props.customFilters,
+      sorts = _this$props.sorts,
+      getMetricCalculator = _this$props.getMetricCalculator;
     if (model !== prevProps.model) {
       this.stopListening(prevProps.model);
       this.startListening(model);
     }
+
+    // The renderer and mouse handlers flow through memoized getters in
+    // render(), so a `renderer` / `mouseHandlers` prop change naturally
+    // propagates on the next render. The metric calculator, however, lives in
+    // component state, so mirror that path when the `getMetricCalculator` prop
+    // changes (e.g. the pivot-builder middleware swapping the pivot factory in
+    // or out) so the calculator stays in sync. Moved columns are not touched
+    // here — a model swap resets them via `handleModelChanged`.
+    if (getMetricCalculator !== prevProps.getMetricCalculator) {
+      this.maybeRebuildMetricCalculator();
+    }
     var changedInputFilters = inputFilters !== prevProps.inputFilters ? inputFilters.filter(inputFilter => !prevProps.inputFilters.includes(inputFilter)) : [];
     if (changedInputFilters.length > 0) {
       var _advancedSettings$get;
-      var {
-        advancedSettings
-      } = this.props;
+      var advancedSettings = this.props.advancedSettings;
       var replaceExistingFilters = (_advancedSettings$get = advancedSettings.get(AdvancedSettingsType.FILTER_CONTROL_CHANGE_CLEARS_ALL_FILTERS)) !== null && _advancedSettings$get !== void 0 ? _advancedSettings$get : false;
       if (replaceExistingFilters) {
         this.clearGridInputField();
@@ -861,10 +891,8 @@ class IrisGrid extends Component {
     if (sorts !== prevProps.sorts) {
       this.updateSorts(sorts);
     }
-    var {
-      loadingScrimStartTime,
-      loadingScrimFinishTime
-    } = this;
+    var loadingScrimStartTime = this.loadingScrimStartTime,
+      loadingScrimFinishTime = this.loadingScrimFinishTime;
     if (loadingScrimStartTime != null && loadingScrimFinishTime != null) {
       window.requestAnimationFrame(() => {
         var now = Date.now();
@@ -886,9 +914,7 @@ class IrisGrid extends Component {
         });
       });
     }
-    var {
-      openOptions
-    } = this.state;
+    var openOptions = this.state.openOptions;
     if (openOptions !== prevState.openOptions) {
       var isAggEditType = option => option.type === OptionType.AGGREGATION_EDIT;
       if (!openOptions.some(isAggEditType) && prevState.openOptions.some(isAggEditType)) {
@@ -898,9 +924,7 @@ class IrisGrid extends Component {
     this.sendStateChange();
   }
   componentWillUnmount() {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     this.stopListening(model);
     this.pending.cancel();
     this.updateSearchFilter.cancel();
@@ -918,9 +942,7 @@ class IrisGrid extends Component {
     return (_this$grid$canvasWrap = (_this$grid = this.grid) === null || _this$grid === void 0 ? void 0 : _this$grid.canvasWrapper.current) !== null && _this$grid$canvasWrap !== void 0 ? _this$grid$canvasWrap : null;
   }
   getKeyHandlers() {
-    var {
-      keyHandlers
-    } = this.props;
+    var keyHandlers = this.props.keyHandlers;
     return this.getCachedKeyHandlers(keyHandlers);
   }
   getMetricState() {
@@ -929,52 +951,40 @@ class IrisGrid extends Component {
     if (gridMetricState == null) {
       return undefined;
     }
-    var {
-      advancedFilters,
-      hoverSelectColumn,
-      isFilterBarShown,
-      isMenuShown,
-      loadingScrimProgress,
-      quickFilters,
-      sorts,
-      reverse,
-      rollupConfig
-    } = this.state;
-    var {
-      model,
-      isSelectingColumn
-    } = this.props;
+    var _this$state = this.state,
+      advancedFilters = _this$state.advancedFilters,
+      hoverSelectColumn = _this$state.hoverSelectColumn,
+      isFilterBarShown = _this$state.isFilterBarShown,
+      isMenuShown = _this$state.isMenuShown,
+      loadingScrimProgress = _this$state.loadingScrimProgress,
+      quickFilters = _this$state.quickFilters,
+      sorts = _this$state.sorts,
+      reverse = _this$state.reverse,
+      rollupConfig = _this$state.rollupConfig;
+    var _this$props2 = this.props,
+      model = _this$props2.model,
+      isSelectingColumn = _this$props2.isSelectingColumn;
     return _objectSpread(_objectSpread({}, gridMetricState), this.getCachedStateOverride(model, this.getTheme(), hoverSelectColumn, isFilterBarShown, isSelectingColumn, loadingScrimProgress, quickFilters, advancedFilters, sorts, reverse, rollupConfig, isMenuShown));
   }
   get renderer() {
-    var {
-      renderer
-    } = this.props;
+    var renderer = this.props.renderer;
     return this.getCachedRenderer(renderer);
   }
   getMouseHandlers() {
-    var {
-      mouseHandlers
-    } = this.props;
+    var mouseHandlers = this.props.mouseHandlers;
     return this.getCachedMouseHandlers(mouseHandlers);
   }
   getValueForCell(columnIndex, rowIndex) {
     var rawValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var {
-      model
-    } = this.props;
-    var {
-      dh
-    } = model;
+    var model = this.props.model;
+    var dh = model.dh;
     var modelColumn = this.getModelColumn(columnIndex);
     var modelRow = this.getModelRow(rowIndex);
     if (rawValue && modelColumn != null && modelRow != null) {
       var value = model.valueForCell(modelColumn, modelRow);
       if (TableUtils.isDateType(model.columns[modelColumn].type)) {
         // The returned value is just a long value, we should return the value formatted as a full date string
-        var {
-          formatter
-        } = model;
+        var formatter = model.formatter;
         return dh.i18n.DateTimeFormat.format(UNFORMATTED_DATE_PATTERN, value, dh.i18n.TimeZone.getTimeZone(formatter.timeZone));
       }
       return value;
@@ -994,13 +1004,9 @@ class IrisGrid extends Component {
    * @returns Model column index, or null if not found
    */
   getModelColumn(columnIndex) {
-    var {
-      metrics
-    } = this.state;
+    var metrics = this.state.metrics;
     assertNotNull(metrics);
-    var {
-      modelColumns
-    } = metrics;
+    var modelColumns = metrics.modelColumns;
     if (modelColumns == null) {
       return null;
     }
@@ -1011,13 +1017,9 @@ class IrisGrid extends Component {
     return columnIndex != null ? modelColumns.get(columnIndex) : null;
   }
   getModelRow(rowIndex) {
-    var {
-      metrics
-    } = this.state;
+    var metrics = this.state.metrics;
     assertNotNull(metrics);
-    var {
-      modelRows
-    } = metrics;
+    var modelRows = metrics.modelRows;
     if (modelRows == null) {
       return null;
     }
@@ -1025,21 +1027,17 @@ class IrisGrid extends Component {
   }
   getTheme() {
     var _ref4;
-    var {
-      model,
-      theme,
-      density
-    } = this.props;
-    var {
-      theme: contextTheme,
-      density: contextDensity
-    } = this.context;
+    var _this$props3 = this.props,
+      model = _this$props3.model,
+      theme = _this$props3.theme,
+      density = _this$props3.density;
+    var _this$context = this.context,
+      contextTheme = _this$context.theme,
+      contextDensity = _this$context.density;
     return this.getCachedTheme(contextTheme, theme, (_ref4 = isEditableGridModel(model) && model.isEditable) !== null && _ref4 !== void 0 ? _ref4 : false, model.floatingTopRowCount + model.floatingBottomRowCount, density !== null && density !== void 0 ? density : contextDensity);
   }
   getVisibleColumn(modelIndex) {
-    var {
-      movedColumns
-    } = this.state;
+    var movedColumns = this.state.movedColumns;
     return GridUtils.getVisibleIndex(modelIndex, movedColumns);
   }
   makeQuickFilter(column, text, timeZone) {
@@ -1060,27 +1058,20 @@ class IrisGrid extends Component {
    */
   applyInputFilters(inputFilters) {
     var replaceExisting = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var {
-      model
-    } = this.props;
-    var {
-      advancedFilters,
-      quickFilters
-    } = this.state;
+    var model = this.props.model;
+    var _this$state2 = this.state,
+      advancedFilters = _this$state2.advancedFilters,
+      quickFilters = _this$state2.quickFilters;
     var newAdvancedFilters = replaceExisting ? new Map() : new Map(advancedFilters);
     var newQuickFilters = replaceExisting ? new Map() : new Map(quickFilters);
     var isChanged = replaceExisting && advancedFilters.size > 0;
     inputFilters.forEach(_ref5 => {
-      var {
-        name,
-        type,
-        value
-      } = _ref5;
+      var name = _ref5.name,
+        type = _ref5.type,
+        value = _ref5.value;
       var modelIndex = model.columns.findIndex(_ref6 => {
-        var {
-          name: columnName,
-          type: columnType
-        } = _ref6;
+        var columnName = _ref6.name,
+          columnType = _ref6.type;
         return columnName === name && columnType === type;
       });
       if (modelIndex >= 0) {
@@ -1107,19 +1098,13 @@ class IrisGrid extends Component {
    * @returns True if the filters have changed because this quick filter was applied
    */
   applyQuickFilter(modelIndex, value, quickFilters) {
-    var {
-      model
-    } = this.props;
-    var {
-      formatter
-    } = model;
+    var model = this.props.model;
+    var formatter = model.formatter;
     var column = model.columns[modelIndex];
     if (value != null && "".concat(value).trim().length > 0) {
       var quickFilter = quickFilters.get(modelIndex);
       if (quickFilter != null) {
-        var {
-          text
-        } = quickFilter;
+        var text = quickFilter.text;
         if (text === value) {
           log.debug2('Ignoring change to existing filter');
           return false;
@@ -1144,9 +1129,7 @@ class IrisGrid extends Component {
       resetRanges: true
     });
     this.setState(_ref7 => {
-      var {
-        advancedFilters
-      } = _ref7;
+      var advancedFilters = _ref7.advancedFilters;
       var newAdvancedFilters = new Map(advancedFilters);
       if (filter == null) {
         newAdvancedFilters.delete(modelIndex);
@@ -1174,9 +1157,7 @@ class IrisGrid extends Component {
       resetRanges: true
     });
     this.setState(_ref8 => {
-      var {
-        quickFilters
-      } = _ref8;
+      var quickFilters = _ref8.quickFilters;
       var newQuickFilters = new Map(quickFilters);
       newQuickFilters.set(modelIndex, {
         filter,
@@ -1195,21 +1176,15 @@ class IrisGrid extends Component {
   setFilterMap(filterMap) {
     var _advancedSettings$get2;
     log.debug('setFilterMap', filterMap);
-    var {
-      advancedSettings
-    } = this.props;
+    var advancedSettings = this.props.advancedSettings;
     var clearFiltersOnLinkerFilterUpdate = (_advancedSettings$get2 = advancedSettings.get(AdvancedSettingsType.LINK_CHANGE_CLEARS_ALL_FILTERS)) !== null && _advancedSettings$get2 !== void 0 ? _advancedSettings$get2 : false;
     if (clearFiltersOnLinkerFilterUpdate) {
       this.clearAllFilters();
     }
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     filterMap.forEach((_ref9, columnName) => {
-      var {
-        columnType,
-        filterList
-      } = _ref9;
+      var columnType = _ref9.columnType,
+        filterList = _ref9.filterList;
       var column = model.columns.find(c => c.name === columnName && c.type === columnType);
       if (column == null) {
         return;
@@ -1220,9 +1195,7 @@ class IrisGrid extends Component {
       if (combinedText.length === 0) {
         this.removeQuickFilter(columnIndex);
       } else {
-        var {
-          formatter
-        } = model;
+        var formatter = model.formatter;
         this.setQuickFilter(columnIndex, this.makeQuickFilter(column, combinedText, formatter.timeZone), "".concat(combinedText));
       }
     });
@@ -1233,10 +1206,8 @@ class IrisGrid extends Component {
     });
     var clearRange = Array.isArray(modelRange) ? modelRange : [modelRange, modelRange];
     this.setState(_ref0 => {
-      var {
-        advancedFilters,
-        quickFilters
-      } = _ref0;
+      var advancedFilters = _ref0.advancedFilters,
+        quickFilters = _ref0.quickFilters;
       var newAdvancedFilters = advancedFilters ? new Map(advancedFilters) : new Map();
       var newQuickFilters = quickFilters ? new Map(quickFilters) : new Map();
       newAdvancedFilters.forEach((_, column) => {
@@ -1260,9 +1231,7 @@ class IrisGrid extends Component {
       resetRanges: true
     });
     this.setState(_ref1 => {
-      var {
-        quickFilters
-      } = _ref1;
+      var quickFilters = _ref1.quickFilters;
       var newQuickFilters = new Map(quickFilters);
       newQuickFilters.delete(modelColumn);
       return {
@@ -1272,11 +1241,10 @@ class IrisGrid extends Component {
   }
   clearAllFilters() {
     log.debug('Clearing all filters');
-    var {
-      advancedFilters,
-      quickFilters,
-      searchFilter
-    } = this.state;
+    var _this$state3 = this.state,
+      advancedFilters = _this$state3.advancedFilters,
+      quickFilters = _this$state3.quickFilters,
+      searchFilter = _this$state3.searchFilter;
     if (quickFilters.size === 0 && advancedFilters.size === 0 && searchFilter === null) {
       return;
     }
@@ -1316,28 +1284,21 @@ class IrisGrid extends Component {
    * Rebuilds all the current filters. Necessary if something like the time zone has changed.
    */
   rebuildFilters() {
-    var {
-      model
-    } = this.props;
-    var {
-      advancedFilters,
-      quickFilters
-    } = this.state;
+    var model = this.props.model;
+    var _this$state4 = this.state,
+      advancedFilters = _this$state4.advancedFilters,
+      quickFilters = _this$state4.quickFilters;
     if (advancedFilters.size === 0 && quickFilters.size === 0) {
       log.debug('No filters to rebuild');
       return;
     }
-    var {
-      columns,
-      formatter
-    } = model;
+    var columns = model.columns,
+      formatter = model.formatter;
     log.debug('Rebuilding filters');
     var newAdvancedFilters = new Map();
     var newQuickFilters = new Map();
     advancedFilters.forEach((value, key) => {
-      var {
-        options
-      } = value;
+      var options = value.options;
       var column = columns[key];
       var filter = this.tableUtils.makeAdvancedFilter(column, options, formatter.timeZone);
       newAdvancedFilters.set(key, {
@@ -1346,9 +1307,7 @@ class IrisGrid extends Component {
       });
     });
     quickFilters.forEach((value, key) => {
-      var {
-        text
-      } = value;
+      var text = value.text;
       var column = columns[key];
       newQuickFilters.set(key, {
         text,
@@ -1364,10 +1323,8 @@ class IrisGrid extends Component {
     });
   }
   setFilters(_ref10) {
-    var {
-      quickFilters,
-      advancedFilters
-    } = _ref10;
+    var quickFilters = _ref10.quickFilters,
+      advancedFilters = _ref10.advancedFilters;
     this.setState({
       quickFilters,
       advancedFilters
@@ -1410,12 +1367,8 @@ class IrisGrid extends Component {
   updateFormatter(updatedFormats) {
     var _this$globalColumnFor;
     var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var {
-      customColumnFormatMap
-    } = this.state;
-    var {
-      model
-    } = this.props;
+    var customColumnFormatMap = this.state.customColumnFormatMap;
+    var model = this.props.model;
     var update = _objectSpread({
       customColumnFormatMap
     }, updatedFormats);
@@ -1431,15 +1384,11 @@ class IrisGrid extends Component {
     });
   }
   initFormatter() {
-    var {
-      settings
-    } = this.props;
+    var settings = this.props.settings;
     this.updateFormatterSettings(settings);
   }
   initState() {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     try {
       if (isPartitionedGridModel(model) && model.isPartitionRequired) {
         this.loadPartitionsTable(model);
@@ -1451,18 +1400,17 @@ class IrisGrid extends Component {
     }
   }
   loadTableState() {
-    var {
-      applyInputFiltersOnInit,
-      inputFilters,
-      sorts,
-      model,
-      reverse,
-      reverseType,
-      customColumns,
-      searchValue,
-      selectedSearchColumns,
-      invertSearchColumns
-    } = this.props;
+    var _this$props4 = this.props,
+      applyInputFiltersOnInit = _this$props4.applyInputFiltersOnInit,
+      inputFilters = _this$props4.inputFilters,
+      sorts = _this$props4.sorts,
+      model = _this$props4.model,
+      reverse = _this$props4.reverse,
+      reverseType = _this$props4.reverseType,
+      customColumns = _this$props4.customColumns,
+      searchValue = _this$props4.searchValue,
+      selectedSearchColumns = _this$props4.selectedSearchColumns,
+      invertSearchColumns = _this$props4.invertSearchColumns;
     var searchColumns = selectedSearchColumns !== null && selectedSearchColumns !== void 0 ? selectedSearchColumns : [];
     var searchFilter = CrossColumnSearch.createSearchFilter(model.dh, searchValue, searchColumns, model.columns, invertSearchColumns);
     if (applyInputFiltersOnInit) {
@@ -1484,9 +1432,7 @@ class IrisGrid extends Component {
     var _this = this;
     return _asyncToGenerator(function* () {
       try {
-        var {
-          partitionConfig
-        } = _this.state;
+        var partitionConfig = _this.state.partitionConfig;
         if (!partitionConfig) {
           _this.startLoading('Loading partitions...', {
             loadingCancelShown: false,
@@ -1512,9 +1458,7 @@ class IrisGrid extends Component {
     var _this2 = this;
     return _asyncToGenerator(function* () {
       var keyTable = yield _this2.pending.add(model.partitionKeysTable(), resolved => resolved.close());
-      var {
-        dh
-      } = model;
+      var dh = model.dh;
       var sorts = keyTable.columns.map(column => column.sort().desc());
       keyTable.applySort(sorts);
       keyTable.setViewport(0, 0);
@@ -1523,9 +1467,7 @@ class IrisGrid extends Component {
       // It's possible that the key table does not have any rows of data yet, so just wait until it does have one
       keyTable.addEventListener(dh.Table.EVENT_UPDATED, event => {
         try {
-          var {
-            detail: data
-          } = event;
+          var data = event.detail;
           if (data.rows.length === 0) {
             // We received an update and the table is still empty. Stop showing the loading spinner so we know
             _this2.stopLoading();
@@ -1557,18 +1499,20 @@ class IrisGrid extends Component {
    * @returns A promise that resolves when the partition key has been successfully selected.
    */
   selectPartitionKeyFromTable(rowIndex) {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     assertNotNull(rowIndex);
     if (isPartitionedGridModel(model)) {
       var data = this.getRowDataMap(rowIndex);
       var partitionColumnSet = new Set(model.partitionColumns.map(column => column.name));
       var values = Object.entries(data).filter(_ref11 => {
-        var [key, _] = _ref11;
+        var _ref12 = _slicedToArray(_ref11, 2),
+          key = _ref12[0],
+          _ = _ref12[1];
         return partitionColumnSet.has(key);
-      }).map(_ref12 => {
-        var [key, columnData] = _ref12;
+      }).map(_ref13 => {
+        var _ref14 = _slicedToArray(_ref13, 2),
+          key = _ref14[0],
+          columnData = _ref14[1];
         return columnData.value;
       });
       var newPartition = {
@@ -1583,9 +1527,7 @@ class IrisGrid extends Component {
   }
   copyCell(columnIndex, rowIndex) {
     var rawValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var {
-      canCopy
-    } = this.props;
+    var canCopy = this.props.canCopy;
     if (canCopy) {
       var value = String(this.getValueForCell(columnIndex, rowIndex, rawValue));
       copyToClipboard(value).catch(e => log.error('Unable to copy cell', e));
@@ -1598,12 +1540,8 @@ class IrisGrid extends Component {
     if (columnIndex === null) {
       return;
     }
-    var {
-      canCopy
-    } = this.props;
-    var {
-      movedColumns
-    } = this.state;
+    var canCopy = this.props.canCopy;
+    var movedColumns = this.state.movedColumns;
     if (canCopy) {
       var copyOperation = {
         columnIndex,
@@ -1629,14 +1567,12 @@ class IrisGrid extends Component {
     var includeHeaders = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var formatValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     var error = arguments.length > 3 ? arguments[3] : undefined;
-    var {
-      model,
-      canCopy
-    } = this.props;
-    var {
-      metricCalculator,
-      movedColumns
-    } = this.state;
+    var _this$props5 = this.props,
+      model = _this$props5.model,
+      canCopy = _this$props5.canCopy;
+    var _this$state5 = this.state,
+      metricCalculator = _this$state5.metricCalculator,
+      movedColumns = _this$state5.movedColumns;
     var userColumnWidths = metricCalculator.getUserColumnWidths();
     if (canCopy) {
       var copyOperation = {
@@ -1655,11 +1591,13 @@ class IrisGrid extends Component {
     }
   }
   startLoading(loadingText) {
-    var {
-      resetRanges = false,
-      loadingCancelShown = true,
-      loadingBlocksGrid = true
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var _ref15 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref15$resetRanges = _ref15.resetRanges,
+      resetRanges = _ref15$resetRanges === void 0 ? false : _ref15$resetRanges,
+      _ref15$loadingCancelS = _ref15.loadingCancelShown,
+      loadingCancelShown = _ref15$loadingCancelS === void 0 ? true : _ref15$loadingCancelS,
+      _ref15$loadingBlocksG = _ref15.loadingBlocksGrid,
+      loadingBlocksGrid = _ref15$loadingBlocksG === void 0 ? true : _ref15$loadingBlocksG;
     this.setState({
       loadingText,
       loadingCancelShown,
@@ -1674,10 +1612,8 @@ class IrisGrid extends Component {
     }
     if (this.loadingScrimStartTime == null) {
       var _this$gridWrapper$get, _this$gridWrapper;
-      var {
-        minScrimTransitionTime,
-        maxScrimTransitionTime
-      } = theme;
+      var minScrimTransitionTime = theme.minScrimTransitionTime,
+        maxScrimTransitionTime = theme.maxScrimTransitionTime;
       assertNotNull(minScrimTransitionTime);
       assertNotNull(maxScrimTransitionTime);
       var height = (_this$gridWrapper$get = (_this$gridWrapper = this.gridWrapper) === null || _this$gridWrapper === void 0 ? void 0 : _this$gridWrapper.getBoundingClientRect().height) !== null && _this$gridWrapper$get !== void 0 ? _this$gridWrapper$get : 0;
@@ -1716,17 +1652,16 @@ class IrisGrid extends Component {
   rollback() {
     if (this.lastLoadedConfig) {
       log.debug('loading last loading config', this.lastLoadedConfig);
-      var {
-        advancedFilters,
-        aggregationSettings,
-        customColumns,
-        quickFilters,
-        reverse,
-        rollupConfig,
-        searchFilter,
-        selectDistinctColumns,
-        sorts
-      } = this.lastLoadedConfig;
+      var _this$lastLoadedConfi = this.lastLoadedConfig,
+        advancedFilters = _this$lastLoadedConfi.advancedFilters,
+        aggregationSettings = _this$lastLoadedConfi.aggregationSettings,
+        customColumns = _this$lastLoadedConfi.customColumns,
+        quickFilters = _this$lastLoadedConfi.quickFilters,
+        reverse = _this$lastLoadedConfi.reverse,
+        rollupConfig = _this$lastLoadedConfi.rollupConfig,
+        searchFilter = _this$lastLoadedConfi.searchFilter,
+        selectDistinctColumns = _this$lastLoadedConfi.selectDistinctColumns,
+        sorts = _this$lastLoadedConfi.sorts;
       this.lastLoadedConfig = null;
       this.setState({
         advancedFilters,
@@ -1764,33 +1699,33 @@ class IrisGrid extends Component {
   startListening(model) {
     model.addEventListener(IrisGridModel.EVENT.UPDATED, this.handleUpdate);
     model.addEventListener(IrisGridModel.EVENT.REQUEST_FAILED, this.handleRequestFailed);
+    model.addEventListener(IrisGridModel.EVENT.PENDING, this.handlePending);
+    model.addEventListener(IrisGridModel.EVENT.PENDING_CLEARED, this.handlePendingCleared);
     model.addEventListener(IrisGridModel.EVENT.COLUMNS_CHANGED, this.handleCustomColumnsChanged);
     model.addEventListener(IrisGridModel.EVENT.PENDING_DATA_UPDATED, this.handlePendingDataUpdated);
     model.addEventListener(IrisGridModel.EVENT.VIEWPORT_UPDATED, this.handleViewportUpdated);
     model.addEventListener(IrisGridModel.EVENT.TABLE_CHANGED, this.handleTableChanged);
+    model.addEventListener(IrisGridModel.EVENT.MODEL_CHANGED, this.handleModelChanged);
   }
   stopListening(model) {
     model.removeEventListener(IrisGridModel.EVENT.UPDATED, this.handleUpdate);
     model.removeEventListener(IrisGridModel.EVENT.REQUEST_FAILED, this.handleRequestFailed);
+    model.removeEventListener(IrisGridModel.EVENT.PENDING, this.handlePending);
+    model.removeEventListener(IrisGridModel.EVENT.PENDING_CLEARED, this.handlePendingCleared);
     model.removeEventListener(IrisGridModel.EVENT.COLUMNS_CHANGED, this.handleCustomColumnsChanged);
     model.removeEventListener(IrisGridModel.EVENT.PENDING_DATA_UPDATED, this.handlePendingDataUpdated);
     model.removeEventListener(IrisGridModel.EVENT.VIEWPORT_UPDATED, this.handleViewportUpdated);
     model.removeEventListener(IrisGridModel.EVENT.TABLE_CHANGED, this.handleTableChanged);
+    model.removeEventListener(IrisGridModel.EVENT.MODEL_CHANGED, this.handleModelChanged);
   }
   focus() {
     var _this$grid3;
     (_this$grid3 = this.grid) === null || _this$grid3 === void 0 || _this$grid3.focus();
   }
   focusFilterBar(column) {
-    var {
-      movedColumns
-    } = this.state;
-    var {
-      model
-    } = this.props;
-    var {
-      columnCount
-    } = model;
+    var movedColumns = this.state.movedColumns;
+    var model = this.props.model;
+    var columnCount = model.columnCount;
     var modelColumn = GridUtils.getModelIndex(column, movedColumns);
     if (column == null || columnCount <= column || !model.isFilterable(modelColumn)) {
       this.setState({
@@ -1798,10 +1733,9 @@ class IrisGrid extends Component {
       });
       return;
     }
-    var {
-      metricCalculator,
-      metrics
-    } = this.state;
+    var _this$state6 = this.state,
+      metricCalculator = _this$state6.metricCalculator,
+      metrics = _this$state6.metrics;
     assertNotNull(metrics);
     var metricState = this.getMetricState();
     assertNotNull(metricState);
@@ -1821,21 +1755,17 @@ class IrisGrid extends Component {
   }
   hideColumnByVisibleIndex(columnVisibleIndex) {
     var _this$grid5;
-    var {
-      metricCalculator,
-      movedColumns
-    } = this.state;
+    var _this$state7 = this.state,
+      metricCalculator = _this$state7.metricCalculator,
+      movedColumns = _this$state7.movedColumns;
     metricCalculator.setColumnWidth(GridUtils.getModelIndex(columnVisibleIndex, movedColumns), 0);
     (_this$grid5 = this.grid) === null || _this$grid5 === void 0 || _this$grid5.forceUpdate();
   }
   freezeColumnByColumnName(columnName) {
-    var {
-      frozenColumns,
-      movedColumns
-    } = this.state;
-    var {
-      model
-    } = this.props;
+    var _this$state8 = this.state,
+      frozenColumns = _this$state8.frozenColumns,
+      movedColumns = _this$state8.movedColumns;
+    var model = this.props.model;
     log.debug2('freezing column', columnName);
     var allFrozenColumns = frozenColumns == null ? new Set(model.frozenColumns) : new Set(frozenColumns);
     allFrozenColumns.add(columnName);
@@ -1849,13 +1779,10 @@ class IrisGrid extends Component {
     });
   }
   unFreezeColumnByColumnName(columnName) {
-    var {
-      frozenColumns,
-      movedColumns
-    } = this.state;
-    var {
-      model
-    } = this.props;
+    var _this$state9 = this.state,
+      frozenColumns = _this$state9.frozenColumns,
+      movedColumns = _this$state9.movedColumns;
+    var model = this.props.model;
     log.debug2('unfreezing column', columnName);
     var allFrozenColumns = frozenColumns == null ? new Set(model.frozenColumns) : new Set(frozenColumns);
     allFrozenColumns.delete(columnName);
@@ -1883,37 +1810,30 @@ class IrisGrid extends Component {
   }
   toggleExpandColumn(modelIndex, expandDescendants) {
     log.debug2('Toggle expand column', modelIndex);
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     if (isExpandableColumnGridModel(model) && model.hasExpandableColumns) {
       model.setColumnExpanded(modelIndex, !model.isColumnExpanded(modelIndex), expandDescendants);
     }
   }
   expandAllColumns() {
     log.debug2('Expand all columns');
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     if (isExpandableColumnGridModel(model) && model.isExpandAllColumnsAvailable) {
       model.expandAllColumns();
     }
   }
   collapseAllColumns() {
     log.debug2('Collapse all columns');
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     if (isExpandableColumnGridModel(model) && model.isExpandAllColumnsAvailable) {
       model.collapseAllColumns();
     }
   }
   handleColumnVisibilityChanged(modelIndexes, isVisible) {
     var _this$grid6;
-    var {
-      metricCalculator,
-      metrics
-    } = this.state;
+    var _this$state0 = this.state,
+      metricCalculator = _this$state0.metricCalculator,
+      metrics = _this$state0.metrics;
     assertNotNull(metrics);
     if (isVisible) {
       modelIndexes.forEach(modelIndex => {
@@ -1938,12 +1858,8 @@ class IrisGrid extends Component {
   }
   handleColumnVisibilityReset() {
     var _model$layoutHints$fr, _model$layoutHints2;
-    var {
-      metricCalculator
-    } = this.state;
-    var {
-      model
-    } = this.props;
+    var metricCalculator = this.state.metricCalculator;
+    var model = this.props.model;
     metricCalculator.resetAllColumnWidths();
     this.handleMovedColumnsChanged(model.initialMovedColumns);
     this.handleHeaderGroupsChanged(model.initialColumnHeaderGroups);
@@ -1952,9 +1868,7 @@ class IrisGrid extends Component {
     });
   }
   handleCrossColumnSearch(searchValue, selectedSearchColumns, invertSearchColumns) {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     this.startLoading('Searching...');
     this.updateSearchFilter(searchValue, selectedSearchColumns, model.columns, invertSearchColumns);
     this.setState({
@@ -1981,9 +1895,7 @@ class IrisGrid extends Component {
   }
   handlePartitionChange(partitionConfig) {
     this.startLoading('Partitioning...');
-    var {
-      partitionConfig: prevConfig
-    } = this.state;
+    var prevConfig = this.state.partitionConfig;
     if (prevConfig !== partitionConfig) {
       this.setState({
         partitionConfig
@@ -1995,19 +1907,14 @@ class IrisGrid extends Component {
       return;
     }
     log.error(error);
-    var {
-      onError
-    } = this.props;
+    var onError = this.props.onError;
     onError(error);
   }
   handleViewportUpdated() {
-    var {
-      model
-    } = this.props;
-    var {
-      loadingText,
-      loadingSpinnerShown
-    } = this.state;
+    var model = this.props.model;
+    var _this$state1 = this.state,
+      loadingText = _this$state1.loadingText,
+      loadingSpinnerShown = _this$state1.loadingSpinnerShown;
     var loadingMessage = 'Waiting for viewport...';
 
     // pending and no timer already exists
@@ -2020,13 +1927,13 @@ class IrisGrid extends Component {
   }
   showAllColumns() {
     var _this$grid8;
-    var {
-      metricCalculator
-    } = this.state;
+    var metricCalculator = this.state.metricCalculator;
     var userColumnWidths = metricCalculator.getUserColumnWidths();
     var entries = [...userColumnWidths.entries()];
     for (var i = 0; i < entries.length; i += 1) {
-      var [modelIndex, columnWidth] = entries[i];
+      var _entries$i = _slicedToArray(entries[i], 2),
+        modelIndex = _entries$i[0],
+        columnWidth = _entries$i[1];
       if (columnWidth === 0) {
         metricCalculator.resetColumnWidth(modelIndex);
       }
@@ -2046,15 +1953,11 @@ class IrisGrid extends Component {
   }
   toggleSort(columnIndex, addToExisting) {
     log.info('Toggling sort for column', columnIndex);
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     var modelColumn = this.getModelColumn(columnIndex);
     assertNotNull(modelColumn);
     if (model.isColumnSortable(columnIndex)) {
-      var {
-        sorts: currentSorts
-      } = this.state;
+      var currentSorts = this.state.sorts;
       var sorts = TableUtils.toggleSortForColumn(currentSorts, model.columns, modelColumn, addToExisting);
       this.updateSorts(sorts);
     } else {
@@ -2075,9 +1978,7 @@ class IrisGrid extends Component {
     var isAbs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var addToExisting = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     assertNotNull(modelColumn);
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     var sorts = TableUtils.sortColumn(model.sort, model.columns, modelColumn, direction, isAbs, addToExisting);
     this.startLoading('Sorting...');
     this.setState({
@@ -2094,16 +1995,12 @@ class IrisGrid extends Component {
     (_this$grid10 = this.grid) === null || _this$grid10 === void 0 || _this$grid10.forceUpdate();
   }
   isReversible() {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     return model.isReversible;
   }
   toggleFilterBar() {
     var focusIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.lastFocusedFilterBarColumn;
-    var {
-      isFilterBarShown
-    } = this.state;
+    var isFilterBarShown = this.state.isFilterBarShown;
     isFilterBarShown = !isFilterBarShown;
     this.setState({
       isFilterBarShown
@@ -2113,12 +2010,8 @@ class IrisGrid extends Component {
         this.focusFilterBar(focusIndex);
       } else {
         var columnIndex = 0;
-        var {
-          model
-        } = this.props;
-        var {
-          columnCount
-        } = model;
+        var model = this.props.model;
+        var columnCount = model.columnCount;
         for (var i = 0; i < columnCount; i += 1) {
           var modelColumn = this.getModelColumn(i);
           if (modelColumn != null) {
@@ -2138,13 +2031,10 @@ class IrisGrid extends Component {
   }
   isTableSearchAvailable() {
     var _model$layoutHints3, _dh$SearchDisplayMode, _dh$SearchDisplayMode2;
-    var {
-      model,
-      canToggleSearch
-    } = this.props;
-    var {
-      dh
-    } = model;
+    var _this$props6 = this.props,
+      model = _this$props6.model,
+      canToggleSearch = _this$props6.canToggleSearch;
+    var dh = model.dh;
     var searchDisplayMode = model === null || model === void 0 || (_model$layoutHints3 = model.layoutHints) === null || _model$layoutHints3 === void 0 ? void 0 : _model$layoutHints3.searchDisplayMode;
     if (searchDisplayMode === ((_dh$SearchDisplayMode = dh.SearchDisplayMode) === null || _dh$SearchDisplayMode === void 0 ? void 0 : _dh$SearchDisplayMode.SEARCH_DISPLAY_HIDE)) {
       return false;
@@ -2155,9 +2045,7 @@ class IrisGrid extends Component {
     return canToggleSearch;
   }
   toggleSearchBar() {
-    var {
-      showSearchBar
-    } = this.state;
+    var showSearchBar = this.state.showSearchBar;
     if (!this.isTableSearchAvailable()) {
       return;
     }
@@ -2180,9 +2068,7 @@ class IrisGrid extends Component {
     var row = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     var columnName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-    var {
-      isGotoShown
-    } = this.state;
+    var isGotoShown = this.state.isGotoShown;
     if (row || value) {
       var _this$gotoRowRef$curr;
       // if invoked with a row, keep open instead of toggle
@@ -2213,12 +2099,8 @@ class IrisGrid extends Component {
       return;
     }
     // if a row is selected
-    var {
-      model
-    } = this.props;
-    var {
-      name
-    } = model.columns[cursorColumn];
+    var model = this.props.model;
+    var name = model.columns[cursorColumn].name;
 
     // Use raw value (same as Copy Cell Unformatted) to preserve full precision and timezone
     var text = String(this.getValueForCell(cursorColumn, cursorRow, true));
@@ -2236,15 +2118,11 @@ class IrisGrid extends Component {
     var _this3 = this;
     return _asyncToGenerator(function* () {
       var _document;
-      var {
-        model
-      } = _this3.props;
+      var model = _this3.props.model;
       if (!isEditableGridModel(model) || !model.isEditable) {
         throw new Error('Cannot save, table is not editable');
       }
-      var {
-        pendingSavePromise
-      } = _this3.state;
+      var pendingSavePromise = _this3.state.pendingSavePromise;
       if (pendingSavePromise != null) {
         throw new Error('Save already in progress');
       }
@@ -2280,9 +2158,7 @@ class IrisGrid extends Component {
   discardPending() {
     var _this4 = this;
     return _asyncToGenerator(function* () {
-      var {
-        pendingSavePromise
-      } = _this4.state;
+      var pendingSavePromise = _this4.state.pendingSavePromise;
       if (pendingSavePromise != null) {
         throw new Error('Cannot cancel a save in progress');
       }
@@ -2300,9 +2176,7 @@ class IrisGrid extends Component {
    * @param column The column in this table to link
    */
   selectColumn(column) {
-    var {
-      onColumnSelected
-    } = this.props;
+    var onColumnSelected = this.props.onColumnSelected;
     onColumnSelected(column);
   }
 
@@ -2311,9 +2185,7 @@ class IrisGrid extends Component {
    */
   selectData(columnIndex, rowIndex) {
     var dataMap = this.getRowDataMap(rowIndex);
-    var {
-      onDataSelected
-    } = this.props;
+    var onDataSelected = this.props.onDataSelected;
     onDataSelected(rowIndex, dataMap);
   }
 
@@ -2324,20 +2196,14 @@ class IrisGrid extends Component {
    */
   getRowDataMap(rowIndex) {
     var _this5 = this;
-    var {
-      model
-    } = this.props;
-    var {
-      columns,
-      groupedColumns
-    } = model;
+    var model = this.props.model;
+    var columns = model.columns,
+      groupedColumns = model.groupedColumns;
     var dataMap = {};
     var _loop = function _loop() {
       var column = columns[i];
-      var {
-        name,
-        type
-      } = column;
+      var name = column.name,
+        type = column.type;
       var value = model.valueForCell(i, rowIndex);
       var text = model.textForCell(i, rowIndex);
       var visibleIndex = _this5.getVisibleColumn(i);
@@ -2358,9 +2224,7 @@ class IrisGrid extends Component {
     return dataMap;
   }
   handleAdvancedFilterChange(column, filter, options) {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     var index = model.getColumnIndexByName(column.name);
     assertNotNull(index);
     this.setAdvancedFilter(index, filter, options);
@@ -2368,9 +2232,7 @@ class IrisGrid extends Component {
   handleAdvancedFilterSortChange(column, direction) {
     var _this$grid15;
     var addToExisting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     var columnIndex = model.getColumnIndexByName(column.name);
     assertNotNull(columnIndex);
     var columnName = model.columns[columnIndex].name;
@@ -2396,10 +2258,8 @@ class IrisGrid extends Component {
     (_this$grid16 = this.grid) === null || _this$grid16 === void 0 || _this$grid16.focus();
   }
   handleAdvancedFilterToggleMaximize(column) {
-    this.setState(_ref13 => {
-      var {
-        maximizedAdvancedFilter
-      } = _ref13;
+    this.setState(_ref16 => {
+      var maximizedAdvancedFilter = _ref16.maximizedAdvancedFilter;
       return {
         maximizedAdvancedFilter: maximizedAdvancedFilter === column ? null : column
       };
@@ -2425,10 +2285,9 @@ class IrisGrid extends Component {
   }
   handleAdvancedMenuClosed(columnIndex) {
     var _this$filterInputRef;
-    var {
-      focusedFilterBarColumn,
-      isFilterBarShown
-    } = this.state;
+    var _this$state10 = this.state,
+      focusedFilterBarColumn = _this$state10.focusedFilterBarColumn,
+      isFilterBarShown = _this$state10.isFilterBarShown;
     if (isFilterBarShown && focusedFilterBarColumn === columnIndex && ((_this$filterInputRef = this.filterInputRef) === null || _this$filterInputRef === void 0 ? void 0 : _this$filterInputRef.current) !== null) {
       var _this$filterInputRef2;
       (_this$filterInputRef2 = this.filterInputRef) === null || _this$filterInputRef2 === void 0 || _this$filterInputRef2.current.focus();
@@ -2453,10 +2312,9 @@ class IrisGrid extends Component {
     // TODO: IDS-4242 Update Chart Preview
   }
   handleChartCreate(settings) {
-    var {
-      model,
-      onCreateChart
-    } = this.props;
+    var _this$props7 = this.props,
+      model = _this$props7.model,
+      onCreateChart = _this$props7.onCreateChart;
     onCreateChart(settings, model);
   }
   handleGridError(error) {
@@ -2472,11 +2330,9 @@ class IrisGrid extends Component {
     this.startLoading('Filtering...', {
       resetRanges: true
     });
-    this.setState(_ref14 => {
-      var {
-        focusedFilterBarColumn,
-        quickFilters
-      } = _ref14;
+    this.setState(_ref17 => {
+      var focusedFilterBarColumn = _ref17.focusedFilterBarColumn,
+        quickFilters = _ref17.quickFilters;
       var newQuickFilters = new Map(quickFilters);
       if (focusedFilterBarColumn != null) {
         var modelIndex = this.getModelColumn(focusedFilterBarColumn);
@@ -2502,9 +2358,7 @@ class IrisGrid extends Component {
     }
   }
   handleFilterBarTab(backward) {
-    var {
-      focusedFilterBarColumn
-    } = this.state;
+    var focusedFilterBarColumn = this.state.focusedFilterBarColumn;
     assertNotNull(focusedFilterBarColumn);
     if (backward) {
       this.focusFilterBar(focusedFilterBarColumn - 1);
@@ -2513,13 +2367,9 @@ class IrisGrid extends Component {
     }
   }
   handleFormatSelection(modelIndex, selectedFormat) {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     var column = model.columns[modelIndex];
-    var {
-      customColumnFormatMap: prevCustomColumnFormatMap
-    } = this.state;
+    var prevCustomColumnFormatMap = this.state.customColumnFormatMap;
     var customColumnFormatMap = new Map(prevCustomColumnFormatMap);
     if (selectedFormat != null) {
       var normalizedType = TableUtils.getNormalizedType(column.type);
@@ -2534,14 +2384,11 @@ class IrisGrid extends Component {
     });
   }
   handleColumnAlignmentChange(modelIndex, alignment) {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     var column = model.columns[modelIndex];
-    this.setState(_ref15 => {
-      var {
-        columnAlignmentMap = EMPTY_MAP
-      } = _ref15;
+    this.setState(_ref18 => {
+      var _ref18$columnAlignmen = _ref18.columnAlignmentMap,
+        columnAlignmentMap = _ref18$columnAlignmen === void 0 ? EMPTY_MAP : _ref18$columnAlignmen;
       var newColumnAlignmentMap = new Map(columnAlignmentMap);
       if (alignment != null) {
         newColumnAlignmentMap.set(column.name, alignment);
@@ -2566,10 +2413,8 @@ class IrisGrid extends Component {
     });
   }
   handleMenuBack() {
-    this.setState(_ref16 => {
-      var {
-        openOptions
-      } = _ref16;
+    this.setState(_ref19 => {
+      var openOptions = _ref19.openOptions;
       var newOptions = [...openOptions];
       newOptions.pop();
       return {
@@ -2578,24 +2423,19 @@ class IrisGrid extends Component {
     });
   }
   handleMenuSelect(option) {
-    this.setState(_ref17 => {
-      var {
-        openOptions
-      } = _ref17;
+    this.setState(_ref20 => {
+      var openOptions = _ref20.openOptions;
       return {
         openOptions: [...openOptions, option]
       };
     });
   }
   handleRequestFailed(event) {
-    var {
-      detail: error
-    } = event;
+    var _ref21 = event,
+      error = _ref21.detail;
     log.error('request failed:', error);
     this.stopLoading();
-    var {
-      partitionConfig
-    } = this.state;
+    var partitionConfig = this.state.partitionConfig;
     if (isMissingPartitionError(error) && partitionConfig != null) {
       // We'll try loading the initial partition again
       this.startLoading('Reloading partition...', {
@@ -2613,26 +2453,52 @@ class IrisGrid extends Component {
       this.rollback();
     } else {
       log.error('Table failed and unable to rollback');
-      var {
-        onError
-      } = this.props;
+      var onError = this.props.onError;
       onError(new Error("Error displaying table: ".concat(error)));
     }
   }
+
+  /**
+   * Raise the loading scrim in response to a model-driven `PENDING` event. The
+   * model is the start signal, mirroring how `UPDATED`/`COLUMNS_CHANGED` are
+   * already the model-driven stop signal. Idempotent: the first message within
+   * a commit wins (the `loadingScrimStartTime == null` guard collapses multiple
+   * pending operations into a single scrim).
+   */
+  handlePending(event) {
+    var _ref22 = event,
+      detail = _ref22.detail;
+    var _ref23 = detail !== null && detail !== void 0 ? detail : {},
+      text = _ref23.text,
+      options = _ref23.options;
+    if (this.loadingScrimStartTime == null) {
+      this.startLoading(text !== null && text !== void 0 ? text : 'Loading...', _objectSpread({
+        loadingCancelShown: false
+      }, options));
+    }
+  }
+
+  /**
+   * Clear the loading scrim in response to a model-driven `PENDING_CLEARED`
+   * event. Only needed for operations that do not naturally end in
+   * `UPDATED`/`COLUMNS_CHANGED`/`REQUEST_FAILED`.
+   */
+  handlePendingCleared() {
+    this.stopLoading();
+  }
   handleUpdate() {
     var _this$grid18;
     log.debug2('Received model update');
-    var {
-      advancedFilters,
-      aggregationSettings,
-      customColumns,
-      quickFilters,
-      reverse,
-      rollupConfig,
-      searchFilter,
-      selectDistinctColumns,
-      sorts
-    } = this.state;
+    var _this$state11 = this.state,
+      advancedFilters = _this$state11.advancedFilters,
+      aggregationSettings = _this$state11.aggregationSettings,
+      customColumns = _this$state11.customColumns,
+      quickFilters = _this$state11.quickFilters,
+      reverse = _this$state11.reverse,
+      rollupConfig = _this$state11.rollupConfig,
+      searchFilter = _this$state11.searchFilter,
+      selectDistinctColumns = _this$state11.selectDistinctColumns,
+      sorts = _this$state11.sorts;
     var config = {
       advancedFilters,
       aggregationSettings,
@@ -2653,35 +2519,39 @@ class IrisGrid extends Component {
     this.stopLoading();
   }
   handleTableChanged() {
-    var {
-      model
-    } = this.props;
-    // movedColumns reset triggers metricCalculator update in the Grid component
-    this.setState({
-      movedColumns: model.initialMovedColumns
-    });
+    var model = this.props.model;
     // For partitioned tables, we want to rebuild filters on table change to ensure filters are applied to the new partition
-    var {
-      partitionConfig
-    } = this.state;
+    var partitionConfig = this.state.partitionConfig;
     if (isPartitionedGridModel(model) && (partitionConfig === null || partitionConfig === void 0 ? void 0 : partitionConfig.mode) !== 'keys') {
       this.rebuildFilters();
     }
   }
+
+  /**
+   * Handle an inner-model swap on a proxy model (`MODEL_CHANGED`). The previous
+   * model's `movedColumns` reference indices that may not exist in the new
+   * model (e.g. a pivot exposes a different column set), so reset them to the
+   * new model's initial order. The metric calculator is rebuilt separately when
+   * the `getMetricCalculator` prop changes (see `componentDidUpdate`); a calc
+   * whose seed `movedColumns` are now stale self-heals because `getMetrics`
+   * reconciles against the grid's current `movedColumns` at draw time.
+   */
+  handleModelChanged() {
+    var model = this.props.model;
+    this.setState({
+      movedColumns: model.initialMovedColumns
+    });
+  }
   handleViewChanged(metrics) {
     var _this$grid$state, _this$grid19;
-    var {
-      model
-    } = this.props;
-    var {
-      selectionEndRow = 0
-    } = (_this$grid$state = (_this$grid19 = this.grid) === null || _this$grid19 === void 0 ? void 0 : _this$grid19.state) !== null && _this$grid$state !== void 0 ? _this$grid$state : {};
+    var model = this.props.model;
+    var _ref24 = (_this$grid$state = (_this$grid19 = this.grid) === null || _this$grid19 === void 0 ? void 0 : _this$grid19.state) !== null && _this$grid$state !== void 0 ? _this$grid$state : {},
+      _ref24$selectionEndRo = _ref24.selectionEndRow,
+      selectionEndRow = _ref24$selectionEndRo === void 0 ? 0 : _ref24$selectionEndRo;
     var pendingRowCount = 0;
     if (isEditableGridModel(model) && model.isEditable) {
       assertNotNull(metrics);
-      var {
-        bottomViewport
-      } = metrics;
+      var bottomViewport = metrics.bottomViewport;
 
       // We have an editable table that we can add new rows to
       // Display empty rows beneath the table rows that user can fill in
@@ -2704,12 +2574,8 @@ class IrisGrid extends Component {
   }
   handleSelectionChanged(selectedRanges) {
     assertNotNull(selectedRanges);
-    var {
-      onSelectionChanged
-    } = this.props;
-    var {
-      copyOperation
-    } = this.state;
+    var onSelectionChanged = this.props.onSelectionChanged;
+    var copyOperation = this.state.copyOperation;
     this.setState({
       selectedRanges
     });
@@ -2736,12 +2602,8 @@ class IrisGrid extends Component {
     }, onChangeApplied);
   }
   handleHeaderGroupsChanged(columnHeaderGroups) {
-    var {
-      model
-    } = this.props;
-    var {
-      columnHeaderGroups: prevColumnHeaderGroups
-    } = this.state;
+    var model = this.props.model;
+    var prevColumnHeaderGroups = this.state.columnHeaderGroups;
     if (prevColumnHeaderGroups === columnHeaderGroups) {
       return;
     }
@@ -2769,10 +2631,9 @@ class IrisGrid extends Component {
   }
   handleConditionalFormatCreate() {
     log.debug('Create new conditional format');
-    var {
-      openOptions,
-      conditionalFormats
-    } = this.state;
+    var _this$state12 = this.state,
+      openOptions = _this$state12.openOptions,
+      conditionalFormats = _this$state12.conditionalFormats;
     this.setState({
       openOptions: [...openOptions, {
         type: OptionType.CONDITIONAL_FORMATTING_EDIT,
@@ -2785,10 +2646,9 @@ class IrisGrid extends Component {
   }
   handleConditionalFormatEdit(index) {
     log.debug('Edit conditional format', index);
-    var {
-      openOptions,
-      conditionalFormats
-    } = this.state;
+    var _this$state13 = this.state,
+      openOptions = _this$state13.openOptions,
+      conditionalFormats = _this$state13.conditionalFormats;
     this.setState({
       openOptions: [...openOptions, {
         type: OptionType.CONDITIONAL_FORMATTING_EDIT,
@@ -2825,19 +2685,14 @@ class IrisGrid extends Component {
   }
   handleUpdateCustomColumns(customColumns) {
     log.info("handleUpdateCustomColumns:", customColumns);
-    var {
-      model
-    } = this.props;
-    var {
-      movedColumns,
-      sorts,
-      quickFilters,
-      advancedFilters,
-      selectDistinctColumns
-    } = this.state;
-    var {
-      columns
-    } = model;
+    var model = this.props.model;
+    var _this$state14 = this.state,
+      movedColumns = _this$state14.movedColumns,
+      sorts = _this$state14.sorts,
+      quickFilters = _this$state14.quickFilters,
+      advancedFilters = _this$state14.advancedFilters,
+      selectDistinctColumns = _this$state14.selectDistinctColumns;
+    var columns = model.columns;
     var oldCustomColumns = model.customColumns.map(customColumn => "".concat(customColumn));
     var removedColumnNames = IrisGridUtils.getRemovedCustomColumnNames(oldCustomColumns, customColumns);
     if (removedColumnNames.length > 0) {
@@ -2883,9 +2738,7 @@ class IrisGrid extends Component {
   }
   handleCustomColumnsChanged() {
     log.debug('Model columns changed');
-    var {
-      isReady
-    } = this.state;
+    var isReady = this.state.isReady;
     if (isReady) {
       this.updateMetrics();
 
@@ -2896,6 +2749,50 @@ class IrisGrid extends Component {
       this.loadTableState();
     }
   }
+
+  /**
+   * Rebuild the metric calculator when the `getMetricCalculator` prop swaps for
+   * a different factory (e.g. entering or leaving a pivot, where the
+   * pivot-builder middleware flips the prop). The renderer and mouse handlers
+   * are recomputed via their memoized getters on the next render and do not
+   * need explicit handling here.
+   *
+   * User column-widths / row-heights from the previous calculator are not
+   * carried over: a factory swap means the column set has effectively changed,
+   * so the stored sizes wouldn't map to anything meaningful.
+   *
+   * Moved columns are NOT reset here — that is owned by `handleModelChanged`
+   * (the `MODEL_CHANGED` event) so that a plain prop swap against the same
+   * model preserves the user's layout. The new calculator is seeded with the
+   * current moved columns; `getMetrics` reconciles against the grid's live
+   * `movedColumns` at draw time, so a later reset stays consistent.
+   */
+  maybeRebuildMetricCalculator() {
+    var _model$layoutHints4;
+    var getMetricCalculator = this.props.getMetricCalculator;
+    var factory = getMetricCalculator;
+    if (factory === this.lastMetricCalculatorFactory) return;
+    var model = this.props.model;
+    var movedColumns = this.state.movedColumns;
+    var next = factory({
+      userColumnWidths: new Map(),
+      userRowHeights: new Map(),
+      movedColumns,
+      initialColumnWidths: new Map(model === null || model === void 0 || (_model$layoutHints4 = model.layoutHints) === null || _model$layoutHints4 === void 0 || (_model$layoutHints4 = _model$layoutHints4.hiddenColumns) === null || _model$layoutHints4 === void 0 ? void 0 : _model$layoutHints4.map(name => [model.getColumnIndexByName(name), 0]))
+    });
+    this.lastMetricCalculatorFactory = factory;
+    log.debug('Swapping metric calculator', next);
+    // Also push the new calculator onto the Grid synchronously so any
+    // immediately-following read of `Grid.metricCalculator` (before React has
+    // committed the setState below) uses the new instance against the new
+    // model rather than invoking the old calculator and potentially throwing.
+    if (this.grid != null) {
+      this.grid.metricCalculator = next;
+    }
+    this.setState({
+      metricCalculator: next
+    });
+  }
   handlePendingCommitClicked() {
     return this.commitPending();
   }
@@ -2905,13 +2802,9 @@ class IrisGrid extends Component {
   handlePendingDataUpdated() {
     var _this$grid21;
     log.debug('pending data updated');
-    var {
-      model
-    } = this.props;
-    var {
-      pendingDataMap,
-      pendingDataErrors
-    } = model;
+    var model = this.props.model;
+    var pendingDataMap = model.pendingDataMap,
+      pendingDataErrors = model.pendingDataErrors;
     this.setState({
       pendingDataMap,
       pendingDataErrors,
@@ -2921,10 +2814,9 @@ class IrisGrid extends Component {
   }
   handleResizeColumn(modelIndex) {
     var _this$grid22;
-    var {
-      metrics,
-      metricCalculator
-    } = this.state;
+    var _this$state15 = this.state,
+      metrics = _this$state15.metrics,
+      metricCalculator = _this$state15.metricCalculator;
     if (!metrics) throw new Error('Metrics not set');
     var contentWidth = getOrThrow(metrics.contentColumnWidths, modelIndex);
     var userWidths = metricCalculator.getUserColumnWidths();
@@ -2938,17 +2830,19 @@ class IrisGrid extends Component {
   }
   handleResizeAllColumns() {
     var _this$grid23;
-    var {
-      metrics,
-      metricCalculator
-    } = this.state;
+    var _this$state16 = this.state,
+      metrics = _this$state16.metrics,
+      metricCalculator = _this$state16.metricCalculator;
     if (!metrics) throw new Error('Metrics not set');
     var allColumns = [...metrics.allColumnWidths.entries()];
-    var visibleColumns = allColumns.filter(_ref18 => {
-      var [_, width] = _ref18;
+    var visibleColumns = allColumns.filter(_ref25 => {
+      var _ref26 = _slicedToArray(_ref25, 2),
+        _ = _ref26[0],
+        width = _ref26[1];
       return width !== 0;
-    }).map(_ref19 => {
-      var [modelIndex] = _ref19;
+    }).map(_ref27 => {
+      var _ref28 = _slicedToArray(_ref27, 1),
+        modelIndex = _ref28[0];
       return modelIndex;
     });
     var contentWidths = metrics.contentColumnWidths;
@@ -2984,9 +2878,7 @@ class IrisGrid extends Component {
     var added = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     var removed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     log.debug('handleAggregationsChange', aggregationSettings, added, removed);
-    var {
-      rollupConfig
-    } = this.state;
+    var rollupConfig = this.state.rollupConfig;
     var isRollup = ((_rollupConfig$columns = rollupConfig === null || rollupConfig === void 0 || (_rollupConfig$columns2 = rollupConfig.columns) === null || _rollupConfig$columns2 === void 0 ? void 0 : _rollupConfig$columns2.length) !== null && _rollupConfig$columns !== void 0 ? _rollupConfig$columns : 0) > 0;
     // Do not start loading if this is rollup and added / removed aggregations are prohibited for rollups
     var changes = [...added, ...removed];
@@ -3006,19 +2898,15 @@ class IrisGrid extends Component {
   handleAggregationChange(aggregation) {
     var _rollupConfig$columns3, _rollupConfig$columns4;
     log.debug('handleAggregationChange', aggregation);
-    var {
-      rollupConfig
-    } = this.state;
+    var rollupConfig = this.state.rollupConfig;
     var isRollup = ((_rollupConfig$columns3 = rollupConfig === null || rollupConfig === void 0 || (_rollupConfig$columns4 = rollupConfig.columns) === null || _rollupConfig$columns4 === void 0 ? void 0 : _rollupConfig$columns4.length) !== null && _rollupConfig$columns3 !== void 0 ? _rollupConfig$columns3 : 0) > 0;
     // Do not start loading if this is rollup and the aggregation is prohibited for rollups
     var shouldStartLoading = !(isRollup && AggregationUtils.isRollupProhibited(aggregation.operation));
     if (shouldStartLoading) {
       this.startLoading("Aggregating ".concat(aggregation.operation, "..."));
     }
-    this.setState(_ref20 => {
-      var {
-        aggregationSettings
-      } = _ref20;
+    this.setState(_ref29 => {
+      var aggregationSettings = _ref29.aggregationSettings;
       return {
         selectedAggregation: aggregation,
         aggregationSettings: _objectSpread(_objectSpread({}, aggregationSettings), {}, {
@@ -3034,9 +2922,7 @@ class IrisGrid extends Component {
    */
   handleAggregationEdit(aggregation) {
     log.debug('handleAggregationEdit', aggregation);
-    var {
-      openOptions
-    } = this.state;
+    var openOptions = this.state.openOptions;
     this.setState({
       openOptions: [...openOptions, {
         type: OptionType.AGGREGATION_EDIT,
@@ -3051,9 +2937,7 @@ class IrisGrid extends Component {
 
     // Un-hide hidden group-by columns.
     if ((rollupConfig === null || rollupConfig === void 0 ? void 0 : rollupConfig.columns) != null && rollupConfig.columns.length > 0) {
-      var {
-        metricCalculator
-      } = this.state;
+      var metricCalculator = this.state.metricCalculator;
       var userColumnWidthsByName = metricCalculator.getUserColumnWidthsByName();
       rollupConfig.columns.forEach(name => {
         if (userColumnWidthsByName.get(name) === 0) {
@@ -3092,9 +2976,7 @@ class IrisGrid extends Component {
     });
   }
   handleDownloadTableStart() {
-    var {
-      canDownloadCsv
-    } = this.props;
+    var canDownloadCsv = this.props.canDownloadCsv;
     if (canDownloadCsv) {
       this.setState({
         isTableDownloading: true,
@@ -3107,9 +2989,7 @@ class IrisGrid extends Component {
     }
   }
   handleDownloadTable(fileName, frozenTable, tableSubscription, snapshotRanges, modelRanges, includeColumnHeaders, useUnformattedValues) {
-    var {
-      canDownloadCsv
-    } = this.props;
+    var canDownloadCsv = this.props.canDownloadCsv;
     if (canDownloadCsv) {
       log.info('start table downloading', fileName, frozenTable, tableSubscription, snapshotRanges, modelRanges, includeColumnHeaders, useUnformattedValues);
       this.setState(() => {
@@ -3130,13 +3010,9 @@ class IrisGrid extends Component {
    */
   removeEmptyAggregations() {
     log.debug('removeEmptyAggregations');
-    this.setState(_ref21 => {
-      var {
-        aggregationSettings
-      } = _ref21;
-      var {
-        aggregations
-      } = aggregationSettings;
+    this.setState(_ref30 => {
+      var aggregationSettings = _ref30.aggregationSettings;
+      var aggregations = aggregationSettings.aggregations;
       var newAggregations = aggregations.filter(a => a.selected.length > 0 || a.invert);
       if (newAggregations.length !== aggregations.length) {
         return {
@@ -3158,16 +3034,11 @@ class IrisGrid extends Component {
     return _asyncToGenerator(function* () {
       var _this6$grid;
       var isBackwards = _arguments.length > 1 && _arguments[1] !== undefined ? _arguments[1] : false;
-      var {
-        gotoValueSelectedColumnName: selectedColumnName,
-        gotoValueSelectedFilter
-      } = _this6.state;
-      var {
-        model
-      } = _this6.props;
-      var {
-        dh
-      } = model;
+      var _this6$state = _this6.state,
+        selectedColumnName = _this6$state.gotoValueSelectedColumnName,
+        gotoValueSelectedFilter = _this6$state.gotoValueSelectedFilter;
+      var model = _this6.props.model;
+      var dh = model.dh;
       if (!model.isSeekRowAvailable) {
         return;
       }
@@ -3186,9 +3057,7 @@ class IrisGrid extends Component {
       var isIgnoreCase = gotoValueSelectedFilter === FilterType.eqIgnoreCase || gotoValueSelectedFilter === FilterType.containsIgnoreCase;
       try {
         var _this6$grid2;
-        var {
-          formatter
-        } = model;
+        var formatter = model.formatter;
         var columnDataType = TableUtils.getNormalizedType(selectedColumn.type);
         var rowIndex;
         switch (columnDataType) {
@@ -3200,7 +3069,9 @@ class IrisGrid extends Component {
             }
           case TableUtils.dataType.DATETIME:
             {
-              var [startDate] = DateUtils.parseDateRange(dh, inputString, formatter.timeZone);
+              var _DateUtils$parseDateR = DateUtils.parseDateRange(dh, inputString, formatter.timeZone),
+                _DateUtils$parseDateR2 = _slicedToArray(_DateUtils$parseDateR, 1),
+                startDate = _DateUtils$parseDateR2[0];
               rowIndex = yield model.seekRow(searchFromRow, selectedColumn, dh.ValueType.DATETIME, startDate, undefined, undefined, isBackwards !== null && isBackwards !== void 0 ? isBackwards : false);
               break;
             }
@@ -3263,9 +3134,7 @@ class IrisGrid extends Component {
    * @param ranges The ranges to delete
    */
   deleteRanges(ranges) {
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     if (!isDeletableGridModel(model) || !model.isDeletable) {
       throw new Error('Model does not support deleting ranges');
     }
@@ -3279,13 +3148,9 @@ class IrisGrid extends Component {
     if (this.grid == null) {
       return;
     }
-    var {
-      isSelectingColumn
-    } = this.props;
+    var isSelectingColumn = this.props.isSelectingColumn;
     if (isSelectingColumn) {
-      var {
-        columnAllowedCursor
-      } = this.props;
+      var columnAllowedCursor = this.props.columnAllowedCursor;
       this.grid.setState({
         cursor: columnAllowedCursor
       });
@@ -3315,15 +3180,9 @@ class IrisGrid extends Component {
     if (!this.grid) {
       return;
     }
-    var {
-      state: irisGridState
-    } = this;
-    var {
-      state: gridState
-    } = this.grid;
-    var {
-      onStateChange
-    } = this.props;
+    var irisGridState = this.state;
+    var gridState = this.grid.state;
+    var onStateChange = this.props.onStateChange;
     onStateChange(irisGridState, gridState);
   }
   handleOverflowClose() {
@@ -3346,22 +3205,19 @@ class IrisGrid extends Component {
   }
   getColumnBoundingRect() {
     var _this$gridWrapper2;
-    var {
-      metrics,
-      shownColumnTooltip
-    } = this.state;
+    var _this$state17 = this.state,
+      metrics = _this$state17.metrics,
+      shownColumnTooltip = _this$state17.shownColumnTooltip;
     assertNotNull(metrics);
     assertNotNull(shownColumnTooltip);
     var gridRect = (_this$gridWrapper2 = this.gridWrapper) === null || _this$gridWrapper2 === void 0 ? void 0 : _this$gridWrapper2.getBoundingClientRect();
     var popperMargin = 20;
     assertNotNull(gridRect);
-    var {
-      columnHeaderHeight,
-      allColumnXs,
-      allColumnWidths,
-      width,
-      columnHeaderMaxDepth
-    } = metrics;
+    var columnHeaderHeight = metrics.columnHeaderHeight,
+      allColumnXs = metrics.allColumnXs,
+      allColumnWidths = metrics.allColumnWidths,
+      width = metrics.width,
+      columnHeaderMaxDepth = metrics.columnHeaderMaxDepth;
     var columnX = allColumnXs.get(shownColumnTooltip);
     var columnWidth = allColumnWidths.get(shownColumnTooltip);
     assertNotNull(columnX);
@@ -3382,18 +3238,12 @@ class IrisGrid extends Component {
     };
   }
   handleGotoRowSelectedRowNumberSubmit() {
-    var {
-      gotoRow: rowNumber
-    } = this.state;
+    var rowNumber = this.state.gotoRow;
     this.focusRowInGrid(rowNumber);
   }
   focusRowInGrid(rowNumber) {
-    var {
-      model
-    } = this.props;
-    var {
-      rowCount
-    } = model;
+    var model = this.props.model;
+    var rowCount = model.rowCount;
     this.setState({
       gotoRow: rowNumber
     });
@@ -3437,13 +3287,11 @@ class IrisGrid extends Component {
     this.focusRowInGrid(rowNumber);
   }
   getColumnTooltip(visibleIndex, metrics, model) {
-    var {
-      columnHeaderHeight,
-      columnHeaderMaxDepth,
-      allColumnXs,
-      allColumnWidths,
-      width
-    } = metrics;
+    var columnHeaderHeight = metrics.columnHeaderHeight,
+      columnHeaderMaxDepth = metrics.columnHeaderMaxDepth,
+      allColumnXs = metrics.allColumnXs,
+      allColumnWidths = metrics.allColumnWidths,
+      width = metrics.width;
     var columnX = allColumnXs.get(visibleIndex);
     var columnWidth = allColumnWidths.get(visibleIndex);
     if (columnX == null || columnWidth == null) {
@@ -3526,14 +3374,11 @@ class IrisGrid extends Component {
   }
   handleGotoValueSelectedColumnNameChanged(columnName) {
     var _this$grid28;
-    var {
-      model
-    } = this.props;
+    var model = this.props.model;
     var cursorRow = (_this$grid28 = this.grid) === null || _this$grid28 === void 0 ? void 0 : _this$grid28.state.cursorRow;
-    var {
-      gotoValueSelectedColumnName: prevColumnName,
-      gotoValueManuallyChanged
-    } = this.state;
+    var _this$state18 = this.state,
+      prevColumnName = _this$state18.gotoValueSelectedColumnName,
+      gotoValueManuallyChanged = _this$state18.gotoValueManuallyChanged;
     if (cursorRow != null) {
       var index = model.getColumnIndexByName(columnName);
       var column = IrisGridUtils.getColumnByName(model.columns, columnName);
@@ -3572,9 +3417,7 @@ class IrisGrid extends Component {
     });
   }
   handleGotoValueSubmitted(isBackwards) {
-    var {
-      gotoValue
-    } = this.state;
+    var gotoValue = this.state.gotoValue;
     this.seekRow(gotoValue, isBackwards);
   }
 
@@ -3601,15 +3444,11 @@ class IrisGrid extends Component {
       return null;
     }
     var debounceMs = Math.min(Math.max(IrisGrid.minDebounce, Math.round(metrics.rowCount / 200)), IrisGrid.maxDebounce);
-    var {
-      x,
-      y,
-      width: fieldWidth,
-      height: fieldHeight
-    } = filterBoxCoordinates;
-    var {
-      width
-    } = metrics;
+    var x = filterBoxCoordinates.x,
+      y = filterBoxCoordinates.y,
+      fieldWidth = filterBoxCoordinates.width,
+      fieldHeight = filterBoxCoordinates.height;
+    var width = metrics.width;
     var style = {
       top: y,
       left: x,
@@ -3658,99 +3497,96 @@ class IrisGrid extends Component {
       _this7 = this,
       _this$grid30,
       _openOptions;
-    var {
-      children,
-      customFilters,
-      getDownloadWorker,
-      isSelectingColumn,
-      isStuckToBottom,
-      isStuckToRight,
-      model,
-      name,
-      onlyFetchVisibleColumns,
-      alwaysFetchColumns,
-      advancedSettings,
-      onAdvancedSettingsChange,
-      canDownloadCsv,
-      onCreateChart
-    } = this.props;
-    var {
-      metricCalculator,
-      metrics,
-      isFilterBarShown,
-      isSelectingPartition,
-      isMenuShown,
-      isReady,
-      copyOperation,
-      focusedFilterBarColumn,
-      loadingText,
-      loadingScrimProgress,
-      loadingSpinnerShown,
-      loadingCancelShown,
-      loadingBlocksGrid,
-      shownColumnTooltip,
-      hoverAdvancedFilter,
-      shownAdvancedFilter,
-      maximizedAdvancedFilter,
-      hoverSelectColumn,
-      quickFilters,
-      advancedFilters,
-      searchFilter,
-      selectDistinctColumns,
-      movedColumns,
-      movedRows,
-      formatter,
-      conditionalFormats,
-      conditionalFormatPreview,
-      conditionalFormatEditIndex,
-      columnAlignmentMap,
-      sorts,
-      reverse,
-      customColumns,
-      selectedRanges,
-      isTableDownloading,
-      tableDownloadStatus,
-      tableDownloadProgress,
-      tableDownloadEstimatedTime,
-      showSearchBar,
-      searchValue,
-      selectedSearchColumns,
-      invertSearchColumns,
-      aggregationSettings,
-      selectedAggregation,
-      rollupConfig,
-      openOptions,
-      pendingSavePromise,
-      pendingSaveError,
-      pendingRowCount,
-      pendingDataErrors,
-      pendingDataMap,
-      toastMessage,
-      frozenColumns,
-      columnHeaderGroups,
-      showOverflowModal,
-      showNoPastePermissionModal,
-      noPastePermissionError,
-      overflowText,
-      overflowButtonTooltipProps,
-      expandCellTooltipProps,
-      hoverTooltipProps,
-      isGotoShown,
-      gotoRow,
-      gotoRowError,
-      gotoValueError,
-      gotoValueSelectedColumnName,
-      gotoValue,
-      gotoValueSelectedFilter,
-      partitionConfig
-    } = this.state;
+    var _this$props8 = this.props,
+      children = _this$props8.children,
+      customFilters = _this$props8.customFilters,
+      getDownloadWorker = _this$props8.getDownloadWorker,
+      isSelectingColumn = _this$props8.isSelectingColumn,
+      isStuckToBottom = _this$props8.isStuckToBottom,
+      isStuckToRight = _this$props8.isStuckToRight,
+      model = _this$props8.model,
+      name = _this$props8.name,
+      onlyFetchVisibleColumns = _this$props8.onlyFetchVisibleColumns,
+      alwaysFetchColumns = _this$props8.alwaysFetchColumns,
+      advancedSettings = _this$props8.advancedSettings,
+      onAdvancedSettingsChange = _this$props8.onAdvancedSettingsChange,
+      canDownloadCsv = _this$props8.canDownloadCsv,
+      onCreateChart = _this$props8.onCreateChart,
+      transformTableOptions = _this$props8.transformTableOptions;
+    var _this$state19 = this.state,
+      metricCalculator = _this$state19.metricCalculator,
+      metrics = _this$state19.metrics,
+      isFilterBarShown = _this$state19.isFilterBarShown,
+      isSelectingPartition = _this$state19.isSelectingPartition,
+      isMenuShown = _this$state19.isMenuShown,
+      isReady = _this$state19.isReady,
+      copyOperation = _this$state19.copyOperation,
+      focusedFilterBarColumn = _this$state19.focusedFilterBarColumn,
+      loadingText = _this$state19.loadingText,
+      loadingScrimProgress = _this$state19.loadingScrimProgress,
+      loadingSpinnerShown = _this$state19.loadingSpinnerShown,
+      loadingCancelShown = _this$state19.loadingCancelShown,
+      loadingBlocksGrid = _this$state19.loadingBlocksGrid,
+      shownColumnTooltip = _this$state19.shownColumnTooltip,
+      hoverAdvancedFilter = _this$state19.hoverAdvancedFilter,
+      shownAdvancedFilter = _this$state19.shownAdvancedFilter,
+      maximizedAdvancedFilter = _this$state19.maximizedAdvancedFilter,
+      hoverSelectColumn = _this$state19.hoverSelectColumn,
+      quickFilters = _this$state19.quickFilters,
+      advancedFilters = _this$state19.advancedFilters,
+      searchFilter = _this$state19.searchFilter,
+      selectDistinctColumns = _this$state19.selectDistinctColumns,
+      movedColumns = _this$state19.movedColumns,
+      movedRows = _this$state19.movedRows,
+      formatter = _this$state19.formatter,
+      conditionalFormats = _this$state19.conditionalFormats,
+      conditionalFormatPreview = _this$state19.conditionalFormatPreview,
+      conditionalFormatEditIndex = _this$state19.conditionalFormatEditIndex,
+      columnAlignmentMap = _this$state19.columnAlignmentMap,
+      sorts = _this$state19.sorts,
+      reverse = _this$state19.reverse,
+      customColumns = _this$state19.customColumns,
+      selectedRanges = _this$state19.selectedRanges,
+      isTableDownloading = _this$state19.isTableDownloading,
+      tableDownloadStatus = _this$state19.tableDownloadStatus,
+      tableDownloadProgress = _this$state19.tableDownloadProgress,
+      tableDownloadEstimatedTime = _this$state19.tableDownloadEstimatedTime,
+      showSearchBar = _this$state19.showSearchBar,
+      searchValue = _this$state19.searchValue,
+      selectedSearchColumns = _this$state19.selectedSearchColumns,
+      invertSearchColumns = _this$state19.invertSearchColumns,
+      aggregationSettings = _this$state19.aggregationSettings,
+      selectedAggregation = _this$state19.selectedAggregation,
+      rollupConfig = _this$state19.rollupConfig,
+      openOptions = _this$state19.openOptions,
+      pendingSavePromise = _this$state19.pendingSavePromise,
+      pendingSaveError = _this$state19.pendingSaveError,
+      pendingRowCount = _this$state19.pendingRowCount,
+      pendingDataErrors = _this$state19.pendingDataErrors,
+      pendingDataMap = _this$state19.pendingDataMap,
+      toastMessage = _this$state19.toastMessage,
+      frozenColumns = _this$state19.frozenColumns,
+      columnHeaderGroups = _this$state19.columnHeaderGroups,
+      showOverflowModal = _this$state19.showOverflowModal,
+      showNoPastePermissionModal = _this$state19.showNoPastePermissionModal,
+      noPastePermissionError = _this$state19.noPastePermissionError,
+      overflowText = _this$state19.overflowText,
+      overflowButtonTooltipProps = _this$state19.overflowButtonTooltipProps,
+      expandCellTooltipProps = _this$state19.expandCellTooltipProps,
+      hoverTooltipProps = _this$state19.hoverTooltipProps,
+      isGotoShown = _this$state19.isGotoShown,
+      gotoRow = _this$state19.gotoRow,
+      gotoRowError = _this$state19.gotoRowError,
+      gotoValueError = _this$state19.gotoValueError,
+      gotoValueSelectedColumnName = _this$state19.gotoValueSelectedColumnName,
+      gotoValue = _this$state19.gotoValue,
+      gotoValueSelectedFilter = _this$state19.gotoValueSelectedFilter,
+      partitionConfig = _this$state19.partitionConfig;
     if (!isReady) {
       return null;
     }
     var theme = this.getTheme();
-    var {
-      columnHeaderHeight: singleColumnHeaderHeight
-    } = theme;
+    var singleColumnHeaderHeight = theme.columnHeaderHeight;
     var filter = this.getCachedFilter(customFilters, quickFilters, advancedFilters, searchFilter);
     var userColumnWidths = metricCalculator.getUserColumnWidths();
     var stateOverride = this.getCachedStateOverride(model, theme, hoverSelectColumn, isFilterBarShown, isSelectingColumn, loadingScrimProgress, quickFilters, advancedFilters, sorts, reverse, rollupConfig, isMenuShown);
@@ -3807,9 +3643,7 @@ class IrisGrid extends Component {
       var metricState = this.getMetricState();
 
       // Advanced Filter buttons
-      var {
-        visibleColumns
-      } = metrics;
+      var visibleColumns = metrics.visibleColumns;
       var _loop2 = function _loop2() {
         var columnIndex = visibleColumns[i];
         var modelColumn = _this7.getModelColumn(columnIndex);
@@ -3817,10 +3651,8 @@ class IrisGrid extends Component {
           var isFilterable = model.isFilterable(modelColumn);
           var buttonCoordinates = isFilterable && metricState ? metricCalculator.getAdvancedFilterButtonCoordinates(columnIndex, metricState, metrics) : null;
           if (buttonCoordinates != null) {
-            var {
-              x,
-              y
-            } = buttonCoordinates;
+            var x = buttonCoordinates.x,
+              y = buttonCoordinates.y;
             var style = {
               position: 'absolute',
               top: y,
@@ -3881,13 +3713,11 @@ class IrisGrid extends Component {
     }
     var advancedFilterMenus = [];
     if (metrics) {
-      var {
-        gridX,
-        visibleColumns: _visibleColumns,
-        allColumnXs,
-        allColumnWidths,
-        columnHeaderHeight
-      } = metrics;
+      var gridX = metrics.gridX,
+        _visibleColumns = metrics.visibleColumns,
+        allColumnXs = metrics.allColumnXs,
+        allColumnWidths = metrics.allColumnWidths,
+        columnHeaderHeight = metrics.columnHeaderHeight;
       var _loop3 = function _loop3() {
         var columnIndex = _visibleColumns[_i4];
         var columnX = allColumnXs.get(columnIndex);
@@ -3918,9 +3748,8 @@ class IrisGrid extends Component {
               return 1; // continue
             }
             var advancedFilter = advancedFilters.get(modelColumn);
-            var {
-              options: advancedFilterOptions
-            } = advancedFilter || {};
+            var _ref31 = advancedFilter || {},
+              advancedFilterOptions = _ref31.options;
             var sort = TableUtils.getSortForColumn(model.sort, column.name);
             var sortDirection = sort ? sort.direction : null;
             if (!isSortDirection(sortDirection)) {
@@ -3953,7 +3782,8 @@ class IrisGrid extends Component {
         if (_loop3()) continue;
       }
     }
-    var optionItems = this.getCachedOptionItems(onCreateChart !== undefined && model.isChartBuilderAvailable, model.isCustomColumnsAvailable, model.isFormatColumnsAvailable, model.isOrganizeColumnsAvailable, model.isRollupAvailable, model.isTotalsAvailable || isRollup, model.isSelectDistinctAvailable, model.isExportAvailable, this.toggleFilterBarAction, this.toggleSearchBarAction, this.toggleGotoRowAction, isFilterBarShown, showSearchBar, canDownloadCsv, this.isTableSearchAvailable(), isGotoShown, advancedSettings.size > 0);
+    var defaultOptionItems = this.getCachedOptionItems(onCreateChart !== undefined && model.isChartBuilderAvailable, model.isCustomColumnsAvailable, model.isFormatColumnsAvailable, model.isOrganizeColumnsAvailable, model.isRollupAvailable, model.isTotalsAvailable || isRollup, model.isSelectDistinctAvailable, model.isExportAvailable, this.toggleFilterBarAction, this.toggleSearchBarAction, this.toggleGotoRowAction, isFilterBarShown, showSearchBar, canDownloadCsv, this.isTableSearchAvailable(), isGotoShown, advancedSettings.size > 0);
+    var optionItems = this.getCachedTransformedOptionItems(defaultOptionItems, transformTableOptions);
     var hiddenColumns = this.getCachedHiddenColumns(metricCalculator, userColumnWidths);
     var openOptionsStack = openOptions.map(option => {
       switch (option.type) {
@@ -4048,7 +3878,25 @@ class IrisGrid extends Component {
             onChange: onAdvancedSettingsChange
           });
         default:
-          throw Error("Unexpected option type ".concat(option.type));
+          {
+            // Plugin-contributed items render their own page via
+            // `configPage`. The page is isolated inside an error
+            // boundary so a throwing plugin doesn't tear down the
+            // entire grid subtree. Built-in items that hit the default
+            // case indicate a programmer error (unhandled enum case).
+            var PluginPage = option.configPage;
+            if (PluginPage == null) {
+              throw Error("Unexpected option type ".concat(option.type));
+            }
+            return /*#__PURE__*/_jsx(PluginTableOptionsErrorBoundary, {
+              itemType: String(option.type),
+              onBack: this.handleMenuBack,
+              children: /*#__PURE__*/_jsx(PluginPage, {
+                model: model,
+                onBack: this.handleMenuBack
+              })
+            }, String(option.type));
+          }
       }
     });
     return /*#__PURE__*/_jsxs("div", {