@deephaven/js-plugin-pivot 0.0.3-dev.984 → 0.2.0-alpha-pivots.225e162

package/dist/index.js

@@ -10,8 +10,8 @@ const plugin = require("@deephaven/plugin");
 const icons = require("@deephaven/icons");
 const React = require("react");
 const irisGrid = require("@deephaven/iris-grid");
-const jsapiBootstrap = require("@deephaven/jsapi-bootstrap");
 const components = require("@deephaven/components");
+const jsapiBootstrap = require("@deephaven/jsapi-bootstrap");
 const Log = require("@deephaven/log");
 const jsapiUtils = require("@deephaven/jsapi-utils");
 const dashboardCorePlugins = require("@deephaven/dashboard-core-plugins");
@@ -274,6 +274,9 @@ class EventShimCustomEvent extends CustomEvent {
     super(typeArg, eventInitDict);
   }
 }
+function isNotNullOrUndefined(value2) {
+  return value2 != null;
+}
 function assertNotNull(value2) {
   var message = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "Value is null or undefined";
   if (value2 == null)
@@ -499,9 +502,6 @@ function isEditableGridModel(model) {
 function isExpandableGridModel(model) {
   return (model === null || model === void 0 ? void 0 : model.hasExpandableRows) !== void 0;
 }
-function isExpandableColumnGridModel(model) {
-  return (model === null || model === void 0 ? void 0 : model.hasExpandableColumns) !== void 0;
-}
 var NAN = 0 / 0;
 var symbolTag = "[object Symbol]";
 var reTrim = /^\s+|\s+$/g;
@@ -1693,30 +1693,24 @@ function find(str2, type = null, opts = null) {
   }
   return filtered;
 }
-function _defineProperty$9(obj, key, value2) {
-  key = _toPropertyKey$9(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value: value2, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value2;
-  }
-  return obj;
-}
-function _toPropertyKey$9(arg) {
-  var key = _toPrimitive$9(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive$9(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+function _defineProperty$9(e, r, t) {
+  return (r = _toPropertyKey$9(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey$9(t) {
+  var i = _toPrimitive$9(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive$9(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 var SELECTION_DIRECTION;
 (function(SELECTION_DIRECTION2) {
@@ -2352,51 +2346,45 @@ function isAxisRange(range) {
 function isBoundedAxisRange(range) {
   return isAxisRange(range) && range[0] != null && range[1] != null;
 }
-function ownKeys$1(object, enumerableOnly) {
-  var keys2 = Object.keys(object);
+function ownKeys$1(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys2.push.apply(keys2, symbols);
-  }
-  return keys2;
-}
-function _objectSpread$1(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys$1(Object(source), true).forEach(function(key) {
-      _defineProperty$8(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread$1(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys$1(Object(t), true).forEach(function(r2) {
+      _defineProperty$8(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
     });
   }
-  return target;
+  return e;
 }
-function _defineProperty$8(obj, key, value2) {
-  key = _toPropertyKey$8(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value: value2, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value2;
-  }
-  return obj;
-}
-function _toPropertyKey$8(arg) {
-  var key = _toPrimitive$8(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive$8(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+function _defineProperty$8(e, r, t) {
+  return (r = _toPropertyKey$8(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey$8(t) {
+  var i = _toPrimitive$8(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive$8(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 class GridUtils {
   // use same constant as chrome source for windows
@@ -2669,15 +2657,35 @@ class GridUtils {
     } = metrics;
     return GridUtils.getNextShownItem(startIndex, modelRows, visibleRows, userRowHeights);
   }
+  /**
+   * Check if a separator exists between a column and the next column at a given depth.
+   * A separator exists if adjacent columns have different header text at the specified depth.
+   *
+   * @param model The grid model
+   * @param depth The header depth to check at
+   * @param columnIndex The current model column index
+   * @param nextColumnIndex The next model column index (undefined for last column)
+   * @returns true if a separator should be shown, false otherwise
+   */
+  static hasColumnSeparatorAtDepth(model, depth, columnIndex, nextColumnIndex) {
+    if (depth == null || columnIndex == null) {
+      return false;
+    }
+    if (nextColumnIndex == null) {
+      return true;
+    }
+    return model.textForColumnHeader(columnIndex, depth) !== model.textForColumnHeader(nextColumnIndex, depth);
+  }
   /**
    * Gets the column index if the x/y coordinates provided are close enough to the separator, otherwise null
    * @param x Mouse x coordinate
    * @param y Mouse y coordinate
    * @param metrics The grid metrics
    * @param theme The grid theme with potential user overrides
+   * @param model The grid model
    * @returns Index of the column separator at the coordinates provided, or null if none match
    */
-  static getColumnSeparatorIndex(x, y, metrics, theme) {
+  static getColumnSeparatorIndex(x, y, metrics, theme, model) {
     var {
       rowHeaderWidth,
       columnHeaderHeight,
@@ -2686,7 +2694,8 @@ class GridUtils {
       visibleColumns,
       allColumnXs,
       allColumnWidths,
-      columnHeaderMaxDepth
+      columnHeaderMaxDepth,
+      modelColumns
     } = metrics;
     var {
       allowColumnResize,
@@ -2697,6 +2706,7 @@ class GridUtils {
     }
     var gridX = x - rowHeaderWidth;
     var halfSeparatorSize = headerSeparatorHandleSize * 0.5;
+    var depth = GridUtils.getColumnHeaderDepthAtY(y, metrics);
     var isPreviousColumnHidden = false;
     for (var i = floatingColumns.length - 1; i >= 0; i -= 1) {
       var _allColumnXs$get, _allColumnWidths$get;
@@ -2713,7 +2723,7 @@ class GridUtils {
         }
         var minX = midX - halfSeparatorSize;
         var maxX = midX + halfSeparatorSize;
-        if (minX <= gridX && gridX <= maxX) {
+        if (minX <= gridX && gridX <= maxX && GridUtils.hasColumnSeparatorAtDepth(model, depth, modelColumns.get(column), modelColumns.get(column + 1))) {
           return column;
         }
         isPreviousColumnHidden = isColumnHidden;
@@ -2738,7 +2748,7 @@ class GridUtils {
         }
         var _minX = _midX - halfSeparatorSize;
         var _maxX = _midX + halfSeparatorSize;
-        if (_minX <= gridX && gridX <= _maxX) {
+        if (_minX <= gridX && gridX <= _maxX && GridUtils.hasColumnSeparatorAtDepth(model, depth, modelColumns.get(_column), modelColumns.get(_column + 1))) {
           return _column;
         }
         isPreviousColumnHidden = _isColumnHidden;
@@ -5877,51 +5887,45 @@ var memoizee = function(fn) {
     requireRefCounter();
   return plain(fn, options);
 };
-function ownKeys(object, enumerableOnly) {
-  var keys2 = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys2.push.apply(keys2, symbols);
-  }
-  return keys2;
-}
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
-      _defineProperty$7(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty$7(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
     });
   }
-  return target;
+  return e;
 }
-function _defineProperty$7(obj, key, value2) {
-  key = _toPropertyKey$7(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value: value2, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value2;
-  }
-  return obj;
-}
-function _toPropertyKey$7(arg) {
-  var key = _toPrimitive$7(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive$7(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+function _defineProperty$7(e, r, t) {
+  return (r = _toPropertyKey$7(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey$7(t) {
+  var i = _toPrimitive$7(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive$7(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 var memoizeClear = (fn, options) => {
   var isClearingCache = false;
@@ -6966,30 +6970,24 @@ const GridColorUtils = {
   rgbToHex,
   lerpColor
 };
-function _defineProperty$6(obj, key, value2) {
-  key = _toPropertyKey$6(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value: value2, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value2;
-  }
-  return obj;
-}
-function _toPropertyKey$6(arg) {
-  var key = _toPrimitive$6(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive$6(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+function _defineProperty$6(e, r, t) {
+  return (r = _toPropertyKey$6(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey$6(t) {
+  var i = _toPrimitive$6(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive$6(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 class GridMouseHandler {
   // What order this mouse handler should trigger in. Smaller numbers trigger first
@@ -7029,30 +7027,24 @@ class GridMouseHandler {
     return false;
   }
 }
-function _defineProperty$5(obj, key, value2) {
-  key = _toPropertyKey$5(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value: value2, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value2;
-  }
-  return obj;
-}
-function _toPropertyKey$5(arg) {
-  var key = _toPrimitive$5(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive$5(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+function _defineProperty$5(e, r, t) {
+  return (r = _toPropertyKey$5(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey$5(t) {
+  var i = _toPrimitive$5(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive$5(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 class GridSeparatorMouseHandler extends GridMouseHandler {
   constructor() {
@@ -7260,30 +7252,24 @@ class GridSeparatorMouseHandler extends GridMouseHandler {
   }
 }
 const GridSeparatorMouseHandler$1 = GridSeparatorMouseHandler;
-function _defineProperty$4(obj, key, value2) {
-  key = _toPropertyKey$4(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value: value2, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value2;
-  }
-  return obj;
-}
-function _toPropertyKey$4(arg) {
-  var key = _toPrimitive$4(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive$4(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+function _defineProperty$4(e, r, t) {
+  return (r = _toPropertyKey$4(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey$4(t) {
+  var i = _toPrimitive$4(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive$4(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 class GridColumnSeparatorMouseHandler extends GridSeparatorMouseHandler$1 {
   constructor() {
@@ -7311,20 +7297,20 @@ class GridColumnSeparatorMouseHandler extends GridSeparatorMouseHandler$1 {
     var {
       x,
       y,
-      columnHeaderDepth
+      columnHeaderDepth: depth
     } = gridPoint;
     var {
       modelColumns
     } = metrics;
-    var separatorIndex = GridUtils.getColumnSeparatorIndex(x, y, metrics, theme);
-    if (separatorIndex == null || columnHeaderDepth == null || columnHeaderDepth > 0) {
+    var separatorIndex = GridUtils.getColumnSeparatorIndex(x, y, metrics, theme, model);
+    if (separatorIndex == null || depth == null) {
       return null;
     }
     var columnIndex = modelColumns.get(separatorIndex);
     if (columnIndex != null) {
       return {
         index: separatorIndex,
-        depth: 0
+        depth
       };
     }
     return null;
@@ -7344,30 +7330,24 @@ class GridColumnSeparatorMouseHandler extends GridSeparatorMouseHandler$1 {
 }
 const GridColumnSeparatorMouseHandler$1 = GridColumnSeparatorMouseHandler;
 var DEFAULT_FONT_WIDTH = 10;
-function _defineProperty$3(obj, key, value2) {
-  key = _toPropertyKey$3(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value: value2, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value2;
-  }
-  return obj;
-}
-function _toPropertyKey$3(arg) {
-  var key = _toPrimitive$3(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive$3(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+function _defineProperty$3(e, r, t) {
+  return (r = _toPropertyKey$3(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey$3(t) {
+  var i = _toPrimitive$3(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive$3(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 class CellRenderer {
   constructor() {
@@ -7427,30 +7407,24 @@ const CellRenderer$1 = CellRenderer;
 function isDataBarGridModel(model) {
   return (model === null || model === void 0 ? void 0 : model.dataBarOptionsForCell) !== void 0;
 }
-function _defineProperty$2(obj, key, value2) {
-  key = _toPropertyKey$2(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value: value2, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value2;
-  }
-  return obj;
-}
-function _toPropertyKey$2(arg) {
-  var key = _toPrimitive$2(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive$2(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+function _defineProperty$2(e, r, t) {
+  return (r = _toPropertyKey$2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey$2(t) {
+  var i = _toPrimitive$2(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive$2(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 class DataBarCellRenderer extends CellRenderer$1 {
   constructor() {
@@ -7804,30 +7778,24 @@ _defineProperty$2(DataBarCellRenderer, "getGradient", memoizeClear$1((width, col
   // Stringify the arguments for memoization. Lets the color arrays be different arrays in memory, but still cache hit
 }));
 const DataBarCellRenderer$1 = DataBarCellRenderer;
-function _defineProperty$1(obj, key, value2) {
-  key = _toPropertyKey$1(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value: value2, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value2;
-  }
-  return obj;
-}
-function _toPropertyKey$1(arg) {
-  var key = _toPrimitive$1(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive$1(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+function _defineProperty$1(e, r, t) {
+  return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey$1(t) {
+  var i = _toPrimitive$1(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive$1(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 class TextCellRenderer extends CellRenderer$1 {
   constructor() {
@@ -8012,30 +7980,24 @@ class TextCellRenderer extends CellRenderer$1 {
    */
 }
 const TextCellRenderer$1 = TextCellRenderer;
-function _defineProperty(obj, key, value2) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value: value2, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value2;
-  }
-  return obj;
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object")
-      return res;
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 class GridRenderer {
   constructor() {
@@ -9023,7 +8985,8 @@ class GridRenderer {
       var columnIndex = startIndex;
       while (columnIndex <= endIndex) {
         var {
-          columnCount
+          columnCount,
+          calculatedColumnWidths
         } = metrics;
         var modelColumn = getOrThrow(modelColumns, columnIndex);
         var columnGroupName = model.textForColumnHeader(modelColumn, depth);
@@ -9033,23 +8996,23 @@ class GridRenderer {
         if (columnGroupName != null) {
           var prevColumnIndex = columnIndex - 1;
           while (prevColumnIndex >= 0 && (columnGroupRight - columnGroupLeft < visibleWidth || columnGroupLeft > minX)) {
-            var _modelColumns$get, _ref3, _userColumnWidths$get;
+            var _modelColumns$get, _ref3, _ref4, _userColumnWidths$get;
             var prevModelIndex = (_modelColumns$get = modelColumns.get(prevColumnIndex)) !== null && _modelColumns$get !== void 0 ? _modelColumns$get : GridUtils.getModelIndex(prevColumnIndex, movedColumns);
             if (prevModelIndex == null || model.textForColumnHeader(prevModelIndex, depth) !== columnGroupName) {
               break;
             }
-            var prevColumnWidth = (_ref3 = (_userColumnWidths$get = userColumnWidths.get(prevModelIndex)) !== null && _userColumnWidths$get !== void 0 ? _userColumnWidths$get : allColumnWidths.get(prevColumnIndex)) !== null && _ref3 !== void 0 ? _ref3 : columnWidth;
+            var prevColumnWidth = (_ref3 = (_ref4 = (_userColumnWidths$get = userColumnWidths.get(prevModelIndex)) !== null && _userColumnWidths$get !== void 0 ? _userColumnWidths$get : allColumnWidths.get(prevColumnIndex)) !== null && _ref4 !== void 0 ? _ref4 : calculatedColumnWidths.get(prevModelIndex)) !== null && _ref3 !== void 0 ? _ref3 : columnWidth;
             columnGroupLeft -= prevColumnWidth;
             prevColumnIndex -= 1;
           }
           var nextColumnIndex = columnIndex + 1;
           while (nextColumnIndex < columnCount && (columnGroupRight - columnGroupLeft < visibleWidth || columnGroupRight < maxX)) {
-            var _modelColumns$get2, _ref4, _userColumnWidths$get2;
+            var _modelColumns$get2, _ref5, _userColumnWidths$get2;
             var nextModelIndex = (_modelColumns$get2 = modelColumns.get(nextColumnIndex)) !== null && _modelColumns$get2 !== void 0 ? _modelColumns$get2 : GridUtils.getModelIndex(nextColumnIndex, movedColumns);
             if (model.textForColumnHeader(nextModelIndex, depth) !== columnGroupName) {
               break;
             }
-            var nextColumnWidth = (_ref4 = (_userColumnWidths$get2 = userColumnWidths.get(nextModelIndex)) !== null && _userColumnWidths$get2 !== void 0 ? _userColumnWidths$get2 : allColumnWidths.get(nextColumnIndex)) !== null && _ref4 !== void 0 ? _ref4 : columnWidth;
+            var nextColumnWidth = (_ref5 = (_userColumnWidths$get2 = userColumnWidths.get(nextModelIndex)) !== null && _userColumnWidths$get2 !== void 0 ? _userColumnWidths$get2 : allColumnWidths.get(nextColumnIndex)) !== null && _ref5 !== void 0 ? _ref5 : columnWidth;
             columnGroupRight += nextColumnWidth;
             nextColumnIndex += 1;
           }
@@ -9920,10 +9883,10 @@ _defineProperty(GridRenderer, "getCachedColorWithAlpha", memoizeClear$1(GridColo
 _defineProperty(GridRenderer, "getCachedColorIsDark", memoizeClear$1(ColorUtils$1.isDark, {
   max: 1e3
 }));
-function isExpandableColumnHeaderGroup(group) {
-  return group instanceof ExpandableColumnHeaderGroup;
+function isPivotColumnHeaderGroup(group) {
+  return group instanceof PivotColumnHeaderGroup;
 }
-class ExpandableColumnHeaderGroup extends irisGrid.ColumnHeaderGroup {
+class PivotColumnHeaderGroup extends irisGrid.ColumnHeaderGroup {
   constructor({
     name,
     displayName,
@@ -9960,6 +9923,16 @@ class ExpandableColumnHeaderGroup extends irisGrid.ColumnHeaderGroup {
 function isCorePlusDh(dh) {
   return "coreplus" in dh;
 }
+function getKeyColumnGroups(model) {
+  const keyColumnGroups = [];
+  for (let depth = 0; depth <= model.columnHeaderMaxDepth; depth += 1) {
+    const group = model.getColumnHeaderGroup(0, depth);
+    if (isPivotColumnHeaderGroup(group) && group.isKeyColumnGroup) {
+      keyColumnGroups.push(group);
+    }
+  }
+  return keyColumnGroups;
+}
 const GRAND_TOTALS_GROUP_NAME = "Grand Total";
 const TOTALS_GROUP_NAME = "Total";
 const ROOT_DEPTH = 2;
@@ -9975,29 +9948,34 @@ function makeColumn({
   type,
   index,
   description,
+  isFilterable = false,
   isSortable = false,
   depth = ROOT_DEPTH,
   hasChildren = false,
-  isExpanded = false
+  isExpanded = false,
+  isProxy = false,
+  filter = () => {
+    throw new Error("Filter not implemented for virtual column");
+  },
+  sort = () => {
+    throw new Error("Sort not implemented for virtual column");
+  }
 }) {
   return {
     name,
     displayName,
     type,
     isPartitionColumn: false,
+    isFilterable,
     isSortable,
-    isProxy: false,
+    isProxy,
     description,
     index,
     depth,
     hasChildren,
     isExpanded,
-    filter: () => {
-      throw new Error("Filter not implemented for virtual column");
-    },
-    sort: () => {
-      throw new Error("Sort not implemented for virtual column");
-    },
+    filter,
+    sort,
     formatColor: () => {
       throw new Error("Color not implemented for virtual column");
     },
@@ -10022,15 +10000,15 @@ function makeGrandTotalColumnName(valueSource) {
   return `__GRAND_TOTAL/${valueSource.name}`;
 }
 function makeColumnName(keys2, depth) {
-  return keys2.slice(0, depth + 1).filter((k) => k != null).join("/");
+  return keys2.slice(0, depth + 1).filter((k) => k != null).map((k) => encodeURIComponent(String(k))).join("/");
 }
 function makeColumnGroupName(keys2, columnSources, depth) {
-  return keys2.slice(0, depth + 1).map((k, i) => k == null ? columnSources[i].name : k).join("/");
+  return keys2.slice(0, depth + 1).map((k, i) => k == null ? columnSources[i].name : k).map((k) => encodeURIComponent(String(k))).join("/");
 }
 function makeValueSourceColumnName(columnName, valueSource) {
   return `${columnName}/${valueSource.name}`;
 }
-function makeExpandableDisplayColumn(snapshotDim, valueSource, originalIndex, offset) {
+function makeColumnFromSnapshot(snapshotDim, valueSource, originalIndex, offset) {
   const keys2 = snapshotDim.getKeys(originalIndex);
   const depth = snapshotDim.getDepth(originalIndex);
   const hasChildren = snapshotDim.hasChildren(originalIndex);
@@ -10052,7 +10030,7 @@ function makeExpandableDisplayColumn(snapshotDim, valueSource, originalIndex, of
     hasChildren
   });
 }
-function makePlaceholderDisplayColumn(valueSource, originalIndex, offset) {
+function makePlaceholderColumn(valueSource, originalIndex, offset) {
   return makeColumn({
     name: makePlaceholderColumnName(originalIndex, valueSource),
     displayName: "",
@@ -10063,31 +10041,42 @@ function makePlaceholderDisplayColumn(valueSource, originalIndex, offset) {
     hasChildren: false
   });
 }
-function makeRowSourceColumn(source, index) {
+function makeColumnFromSource(source, index) {
   const { name, type, isSortable, description } = source;
-  return makeColumn({ name, type, index, isSortable, description });
+  const isFilterable = true;
+  return makeColumn({
+    name,
+    type,
+    index,
+    isFilterable,
+    isSortable,
+    description,
+    filter: source.filter.bind(source),
+    sort: source.sort.bind(source)
+  });
 }
 function checkColumnsChanged(prevColumns, newColumns) {
   return prevColumns.length !== newColumns.length || prevColumns.some((col, i) => col.name !== newColumns[i].name);
 }
-function getKeyColumnGroups(columnSources, rowSources) {
+function makeKeyColumnGroups(columnSources, rowSources, includeGroupColumn) {
+  const groupName = includeGroupColumn ? ["__GROUP__"] : [];
   const groups = columnSources.length === 0 ? [
-    new ExpandableColumnHeaderGroup({
-      // TODO:
-      name: "__All",
+    new PivotColumnHeaderGroup({
+      name: "/",
       displayName: "",
-      // TODO: what if rowSources is empty?
-      children: rowSources.map((c) => c.name),
+      // For empty row sources we will render a "dead column"
+      // or a Groups column, depending on the table settings
+      children: [...groupName, ...rowSources.map((c) => c.name)],
       childIndexes: [],
       isKeyColumnGroup: true,
       depth: 1,
       isExpandable: false
     })
   ] : columnSources.map(
-    (source, i) => new ExpandableColumnHeaderGroup({
+    (source, i) => new PivotColumnHeaderGroup({
       name: source.name,
       displayName: source.name,
-      children: i === columnSources.length - 1 ? rowSources.map((c) => c.name) : [columnSources[i + 1].name],
+      children: i === columnSources.length - 1 ? [...groupName, ...rowSources.map((c) => c.name)] : [columnSources[i + 1].name],
       childIndexes: [],
       isKeyColumnGroup: true,
       depth: columnSources.length - i,
@@ -10099,23 +10088,18 @@ function getKeyColumnGroups(columnSources, rowSources) {
     []
   ) : groups;
 }
-function getTotalsColumnGroups(columnSources, valueSources, isRootColumnExpanded) {
+function makeTotalsColumnGroups(columnSources, valueSources, isRootColumnExpanded) {
   const groupName = pluralize(valueSources.length, GRAND_TOTALS_GROUP_NAME);
   return columnSources.length === 0 ? [
-    new ExpandableColumnHeaderGroup({
-      // TODO:
-      name: "TMP__GrandTotals",
+    new PivotColumnHeaderGroup({
+      name: "/GrandTotals",
       displayName: groupName,
       children: valueSources.map((v) => makeGrandTotalColumnName(v)),
       childIndexes: [],
       depth: 1
-      // Only the top level is expandable
-      // TODO:
-      // isExpandable: i === 0,
-      // isExpanded: isRootColumnExpanded,
     })
   ] : columnSources.map(
-    (source, i) => new ExpandableColumnHeaderGroup({
+    (source, i) => new PivotColumnHeaderGroup({
       name: makeGrandTotalColumnName(source),
       displayName: i === 0 ? groupName : "",
       children: i === columnSources.length - 1 ? valueSources.map((v) => makeGrandTotalColumnName(v)) : [makeGrandTotalColumnName(columnSources[i + 1])],
@@ -10128,7 +10112,7 @@ function getTotalsColumnGroups(columnSources, valueSources, isRootColumnExpanded
     })
   );
 }
-function getSnapshotColumnGroups(snapshotColumns, columnSources, valueSources, formatValue) {
+function makeSnapshotColumnGroups(snapshotColumns, columnSources, valueSources, formatValue) {
   const maxDepth = Math.max(columnSources.length, 1);
   const groupMap = /* @__PURE__ */ new Map();
   const groupName = pluralize(valueSources.length, TOTALS_GROUP_NAME);
@@ -10141,7 +10125,7 @@ function getSnapshotColumnGroups(snapshotColumns, columnSources, valueSources, f
       const isTotalGroup = keys2[i] == null;
       const parentKey = i > 0 ? keys2[i - 1] : null;
       const totalsGroupDisplayName = parentKey == null ? "" : groupName;
-      const group = groupMap.get(name) ?? new ExpandableColumnHeaderGroup({
+      const group = groupMap.get(name) ?? new PivotColumnHeaderGroup({
         name,
         displayName: isTotalGroup ? totalsGroupDisplayName : keys2[i],
         isTotalGroup,
@@ -10168,27 +10152,44 @@ function getSnapshotColumnGroups(snapshotColumns, columnSources, valueSources, f
   }
   return [...groupMap.values()];
 }
-function getColumnGroups(pivotTable, snapshotColumns, isRootColumnExpanded = true, formatValue = (v, t) => String(v)) {
+function makeColumnGroups(pivotTable, snapshotColumns, isRootColumnExpanded = true, includeGroupColumn = false, formatValue = (v, t) => String(v)) {
   const virtualColumnGroups = [
-    ...getKeyColumnGroups(pivotTable.columnSources, pivotTable.rowSources),
-    ...getTotalsColumnGroups(
+    ...makeKeyColumnGroups(
+      pivotTable.columnSources,
+      pivotTable.rowSources,
+      includeGroupColumn
+    ),
+    ...makeTotalsColumnGroups(
       pivotTable.columnSources,
       pivotTable.valueSources,
       isRootColumnExpanded
     )
   ];
-  const snapshotColumnGroups = snapshotColumns == null ? [] : getSnapshotColumnGroups(
+  const snapshotColumnGroups = snapshotColumns == null ? [] : makeSnapshotColumnGroups(
     snapshotColumns,
     pivotTable.columnSources,
     pivotTable.valueSources
   );
   return [...virtualColumnGroups, ...snapshotColumnGroups];
 }
-const log$3 = Log.module("@deephaven/js-plugin-pivot/IrisGridPivotModel");
+const log$4 = Log.module("@deephaven/js-plugin-pivot/IrisGridPivotModel");
 const SET_VIEWPORT_THROTTLE = 150;
 const APPLY_VIEWPORT_THROTTLE = 0;
 const ROW_BUFFER_PAGES = 1;
 const COLUMN_BUFFER_PAGES = 1;
+const VirtualGroupColumn = Object.freeze(
+  makeColumn({
+    name: "__GROUP__",
+    displayName: "Group",
+    type: "java.lang.String",
+    index: 0,
+    depth: 2,
+    isProxy: true
+  })
+);
+function isIrisGridPivotModel(model) {
+  return typeof model === "object" && model !== null && "pivotTable" in model && "keyColumns" in model && "expandAll" in model && "collapseAll" in model && "hasExpandableRows" in model && "hasExpandableColumns" in model;
+}
 class IrisGridPivotModel extends irisGrid.IrisGridModel {
   constructor(dh, pivotTable, formatter = new jsapiUtils.Formatter(dh), config = {}) {
     if (!isCorePlusDh(dh)) {
@@ -10196,13 +10197,9 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     }
     super(dh);
     __publicField(this, "pivotTable");
-    __publicField(this, "keyColumns");
+    __publicField(this, "showExtraGroupCol", true);
     __publicField(this, "_layoutHints");
-    __publicField(this, "_columnHeaderGroupMap", /* @__PURE__ */ new Map());
-    __publicField(this, "columnHeaderParentMap", /* @__PURE__ */ new Map());
-    __publicField(this, "_columnHeaderMaxDepth", null);
-    __publicField(this, "_columnHeaderGroups", []);
-    __publicField(this, "_isColumnHeaderGroupsInitialized", false);
+    __publicField(this, "_sorts", EMPTY_ARRAY);
     __publicField(this, "viewportData", null);
     __publicField(this, "formattedStringData", []);
     __publicField(this, "snapshotColumns", null);
@@ -10219,73 +10216,80 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     __publicField(this, "dh");
     __publicField(this, "getCachedColumns", memoizeOne(
       (snapshotColumns, virtualColumns, valueSources) => {
+        const columns = [];
+        this.pivotTable.columnSources.forEach((source, col) => {
+          const index = -this.pivotTable.columnSources.length + col;
+          columns[index] = makeColumnFromSource(source, index);
+        });
+        columns.push(...virtualColumns);
         if (snapshotColumns == null) {
-          log$3.debug2("getCachedColumns", {
-            snapshotColumns,
-            valueSources
-          });
-          return virtualColumns;
+          return columns;
         }
-        const columns = [...virtualColumns];
         for (let i = 0; i < snapshotColumns.totalCount; i += 1) {
           const isColumnInViewport = i >= snapshotColumns.offset && i < snapshotColumns.offset + snapshotColumns.count;
           for (let v = 0; v < valueSources.length; v += 1) {
             columns.push(
-              isColumnInViewport ? makeExpandableDisplayColumn(
+              isColumnInViewport ? makeColumnFromSnapshot(
                 snapshotColumns,
                 valueSources[v],
                 i,
                 virtualColumns.length
-              ) : makePlaceholderDisplayColumn(
-                valueSources[v],
-                i,
-                virtualColumns.length
-              )
+              ) : makePlaceholderColumn(valueSources[v], i, virtualColumns.length)
             );
           }
         }
-        log$3.debug2("getCachedColumns", {
-          snapshotColumns,
-          valueSources,
-          columns: columns.map(({ name }) => name)
-        });
         return columns;
       }
     ));
     __publicField(this, "getCachedTotalsColumns", memoizeOne(
-      (pivotTable, valueSources) => valueSources.map(
+      (pivotTable, valueSources, groupColumn) => valueSources.map(
         (source, col) => makeColumn({
           name: makeGrandTotalColumnName(source),
           displayName: source.name,
           description: source.description,
           type: source.type,
-          index: pivotTable.rowSources.length + col,
+          index: pivotTable.rowSources.length + col + (groupColumn == null ? 0 : 1),
           depth: 2,
           isExpanded: true,
           hasChildren: true
         })
       )
     ));
+    __publicField(this, "getCachedKeyColumns", memoizeOne(
+      (pivotTable, groupColumn) => pivotTable.rowSources.map(
+        (source, index) => makeColumnFromSource(source, index + (groupColumn == null ? 0 : 1))
+      )
+    ));
     __publicField(this, "getCachedVirtualColumns", memoizeOne(
-      (keyColumns, totalsColumns) => [...keyColumns, ...totalsColumns]
+      (groupColumn, keyColumns, totalsColumns) => groupColumn ? [groupColumn, ...keyColumns, ...totalsColumns] : [...keyColumns, ...totalsColumns]
     ));
     /**
-     * Get the cached column header groups.
+     * Get the cached header groups data, including groups array, max depth, parent map, and group map.
      * Returns groups for the key columns, totals, and the snapshot column in the current viewport.
      * Placeholder columns are not included in the groups.
      */
-    __publicField(this, "getCachedColumnHeaderGroups", memoizeOne(
-      (snapshotColumns, isRootColumnExpanded, formatValue) => getColumnGroups(
-        this.pivotTable,
-        snapshotColumns,
-        isRootColumnExpanded,
-        formatValue
-      )
+    __publicField(this, "getCachedParsedColumnHeaderData", memoizeOne(
+      (snapshotColumns, groupColumn, formatter, isRootColumnExpanded) => {
+        const columnGroups = makeColumnGroups(
+          this.pivotTable,
+          snapshotColumns,
+          isRootColumnExpanded,
+          groupColumn != null,
+          (value2, type) => this.getCachedFormattedString(formatter, value2, type, "")
+        );
+        return irisGrid.IrisGridUtils.parseColumnHeaderGroups(
+          this,
+          columnGroups,
+          (args) => new PivotColumnHeaderGroup(args)
+        );
+      }
     ));
     __publicField(this, "getColumnIndicesByNameMap", memoizeOne(
       (columns) => {
         const indices = /* @__PURE__ */ new Map();
-        columns.forEach(({ name }, i) => indices.set(name, i));
+        Object.entries(columns).forEach(
+          ([i, { name }]) => indices.set(name, Number(i))
+        );
         return indices;
       }
     ));
@@ -10318,7 +10322,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
           return this.dh.RangeSet.ofRange(0, totalColumnCount);
         }
         if (viewportColumns.length === 0) {
-          log$3.debug(
+          log$4.debug(
             "Empty viewport columns, returning minimal range",
             viewportColumns
           );
@@ -10341,7 +10345,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
           ) ?? 0
         );
         if (minIndex > maxIndex) {
-          log$3.warn(
+          log$4.warn(
             "Invalid column range, minIndex > maxIndex",
             viewportColumns,
             minIndex,
@@ -10361,12 +10365,12 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     __publicField(this, "setViewport", lodash_throttle(
       (top, bottom, columns) => {
         if (bottom < top) {
-          log$3.error("Invalid viewport", top, bottom);
+          log$4.error("Invalid viewport", top, bottom);
           return;
         }
         const { viewport } = this;
         if (viewport != null && viewport.top === top && viewport.bottom === bottom && viewport.columns === columns) {
-          log$3.debug2("Ignoring duplicate viewport", viewport);
+          log$4.debug2("Ignoring duplicate viewport", viewport);
           return;
         }
         this.viewport = {
@@ -10374,7 +10378,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
           bottom,
           columns
         };
-        log$3.debug2("setViewport", this.viewport);
+        log$4.debug2("setViewport", this.viewport);
         this.applyViewport();
       },
       SET_VIEWPORT_THROTTLE
@@ -10395,7 +10399,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
         if (!this.viewport) {
           return;
         }
-        log$3.debug2("applyViewport", this.viewport);
+        log$4.debug2("applyViewport", this.viewport);
         const { top, bottom, columns } = this.viewport;
         const [viewportTop, viewportBottom] = this.getCachedViewportRowRange(
           top,
@@ -10417,9 +10421,6 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     this.snapshotValueSources = pivotTable.valueSources;
     this.rowBufferPages = config.rowBufferPages ?? ROW_BUFFER_PAGES;
     this.columnBufferPages = config.columnBufferPages ?? COLUMN_BUFFER_PAGES;
-    this.keyColumns = pivotTable.rowSources.map(
-      (source, col) => makeRowSourceColumn(source, col)
-    );
     this._layoutHints = {
       backColumns: [],
       hiddenColumns: [],
@@ -10432,14 +10433,45 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     };
   }
   get filter() {
-    return EMPTY_ARRAY;
+    return this.pivotTable.filter;
   }
-  set filter(_) {
+  set filter(filters) {
+    log$4.debug2("Setting filter on pivot table", filters);
+    this.pivotTable.applyFilter(filters);
+    this.applyViewport();
   }
-  get sort() {
-    return EMPTY_ARRAY;
+  hydratePivotSort(sort) {
+    const sourceIndex = this.getColumnIndexByName(sort.column.name);
+    const source = this.columns[sourceIndex ?? -1];
+    return (source == null ? void 0 : source.sort()[sort.direction === "ASC" ? "asc" : "desc"]()) ?? null;
   }
-  set sort(_) {
+  get sort() {
+    return this._sorts ?? EMPTY_ARRAY;
+  }
+  set sort(sorts) {
+    log$4.debug("Setting sorts on pivot table", sorts);
+    this._sorts = sorts;
+    const columnBySorts = [];
+    const rowBySorts = [];
+    sorts.forEach((s) => {
+      const sort = this.hydratePivotSort(s);
+      if (sort == null) {
+        log$4.warn(`Cannot hydrate sort for source: ${s.column.name}`, s);
+        return;
+      }
+      const index = this.getColumnIndexByName(sort.name);
+      if (index == null) {
+        log$4.warn(`Cannot find index for source: ${s.column.name}`, s);
+        return;
+      }
+      if (index < 0) {
+        columnBySorts.push(sort);
+      } else {
+        rowBySorts.push(sort);
+      }
+    });
+    this.pivotTable.applyRowSort(rowBySorts);
+    this.pivotTable.applyColumnSort(columnBySorts);
   }
   get customColumns() {
     return EMPTY_ARRAY;
@@ -10484,99 +10516,79 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
   async export() {
     throw new Error("Method not implemented.");
   }
-  async showFilter() {
-    throw new Error("Method not implemented.");
-  }
-  async quickFilter() {
-    throw new Error("Method not implemented.");
-  }
-  async autoResizeColumns() {
-    throw new Error("Method not implemented.");
-  }
-  async applySort() {
-    throw new Error("Method not implemented.");
+  get showExtraGroupColumn() {
+    return this.showExtraGroupCol;
   }
-  async clearFilter() {
-    throw new Error("Method not implemented.");
+  set showExtraGroupColumn(showExtraGroupCol) {
+    if (showExtraGroupCol === this.showExtraGroupCol) {
+      return;
+    }
+    this.showExtraGroupCol = showExtraGroupCol;
+    this.dispatchEvent(
+      new EventShimCustomEvent(irisGrid.IrisGridModel.EVENT.COLUMNS_CHANGED, {
+        detail: this.columns
+      })
+    );
   }
-  async applyFilter() {
-    throw new Error("Method not implemented.");
+  get groupColumn() {
+    return this.pivotTable.rowSources.length !== 1 && this.showExtraGroupCol ? VirtualGroupColumn : null;
   }
-  async copy() {
-    throw new Error("Method not implemented.");
+  get keyColumns() {
+    return this.getCachedKeyColumns(this.pivotTable, this.groupColumn);
   }
   get totalsColumns() {
     return this.getCachedTotalsColumns(
       this.pivotTable,
-      this.snapshotValueSources
+      this.snapshotValueSources,
+      this.groupColumn
     );
   }
   get virtualColumns() {
-    return this.getCachedVirtualColumns(this.keyColumns, this.totalsColumns);
+    return this.getCachedVirtualColumns(
+      this.groupColumn,
+      this.keyColumns,
+      this.totalsColumns
+    );
   }
-  get initialColumnHeaderGroups() {
-    const groups = this.getCachedColumnHeaderGroups(
+  getParsedColumnHeaderData() {
+    return this.getCachedParsedColumnHeaderData(
       this.snapshotColumns,
-      this.isRootColumnExpanded,
-      (value2, type) => (
-        // Ignore name based formatting, pass empty column name
-        this.getCachedFormattedString(this.formatter, value2, type, "")
-      )
+      this.groupColumn,
+      this.formatter,
+      this.isRootColumnExpanded
     );
-    log$3.debug2("initialColumnHeaderGroups", groups);
-    return groups;
+  }
+  get initialColumnHeaderGroups() {
+    return this.columnHeaderGroups;
   }
   get columnHeaderMaxDepth() {
-    return this._columnHeaderMaxDepth ?? 1;
+    const { maxDepth } = this.getParsedColumnHeaderData();
+    return maxDepth;
   }
-  set columnHeaderMaxDepth(depth) {
-    this._columnHeaderMaxDepth = depth;
+  get columnHeaderParentMap() {
+    const { parentMap } = this.getParsedColumnHeaderData();
+    return parentMap;
   }
   get columnHeaderGroupMap() {
-    this.initializeColumnHeaderGroups();
-    return this._columnHeaderGroupMap;
+    const { groupMap } = this.getParsedColumnHeaderData();
+    return groupMap;
   }
   get columnHeaderGroups() {
-    this.initializeColumnHeaderGroups();
-    return this._columnHeaderGroups;
+    const { groups } = this.getParsedColumnHeaderData();
+    return groups;
   }
   set columnHeaderGroups(_groups) {
   }
-  setInternalColumnHeaderGroups(groups) {
-    if (groups === this._columnHeaderGroups) {
-      return;
-    }
-    const {
-      groups: newGroups,
-      maxDepth,
-      parentMap,
-      groupMap
-    } = irisGrid.IrisGridUtils.parseColumnHeaderGroups(
-      this,
-      groups,
-      (args) => new ExpandableColumnHeaderGroup(args)
-    );
-    this._columnHeaderGroups = newGroups;
-    this.columnHeaderMaxDepth = maxDepth;
-    this.columnHeaderParentMap = parentMap;
-    this._columnHeaderGroupMap = groupMap;
-    this._isColumnHeaderGroupsInitialized = true;
-  }
-  initializeColumnHeaderGroups() {
-    if (!this._isColumnHeaderGroupsInitialized) {
-      this.setInternalColumnHeaderGroups(this.initialColumnHeaderGroups);
-    }
-  }
   textForColumnHeader(x, depth = 0) {
     const header = this.columnAtDepth(x, depth);
-    if (isExpandableColumnHeaderGroup(header)) {
+    if (isPivotColumnHeaderGroup(header)) {
       return header.isNew ? "" : header.displayName ?? header.name;
     }
     return (header == null ? void 0 : header.displayName) ?? (header == null ? void 0 : header.name);
   }
   colorForColumnHeader(x, depth = 0, theme = {}) {
     const column = this.columnAtDepth(x, depth);
-    if (isExpandableColumnHeaderGroup(column)) {
+    if (isPivotColumnHeaderGroup(column)) {
       if (column.isTotalGroup != null && column.isTotalGroup) {
         return theme.totalsHeaderBackground ?? null;
       }
@@ -10588,7 +10600,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
   }
   getColumnHeaderGroup(modelIndex, depth) {
     const group = this.columnAtDepth(modelIndex, depth);
-    if (isExpandableColumnHeaderGroup(group)) {
+    if (isPivotColumnHeaderGroup(group)) {
       return group;
     }
     return void 0;
@@ -10625,6 +10637,10 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
   get initialMovedColumns() {
     return EMPTY_ARRAY;
   }
+  /**
+   * Get the columns in the pivot model.
+   * Returned array includes column sources with negative indexes.
+   */
   get columns() {
     return this.getCachedColumns(
       this.snapshotColumns,
@@ -10651,10 +10667,12 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     return false;
   }
   isFilterable(columnIndex) {
-    return false;
+    var _a;
+    return ((_a = this.columns[columnIndex]) == null ? void 0 : _a.isFilterable) ?? false;
   }
   isColumnSortable(columnIndex) {
-    return false;
+    var _a;
+    return ((_a = this.columns[columnIndex]) == null ? void 0 : _a.isSortable) ?? false;
   }
   get isTotalsAvailable() {
     return false;
@@ -10706,7 +10724,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     }
   }
   handleModelEvent(event) {
-    log$3.debug2("handleModelEvent", event);
+    log$4.debug2("handleModelEvent", event);
     const { detail, type } = event;
     this.dispatchEvent(new EventShimCustomEvent(type, { detail }));
   }
@@ -10720,10 +10738,10 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     this.formattedStringData = [];
     this.viewportData = this.extractSnapshotData(snapshot);
     this.updatePendingExpandCollapseState();
-    this.setInternalColumnHeaderGroups(this.initialColumnHeaderGroups);
-    log$3.debug2("Pivot updated", {
+    log$4.debug2("Pivot updated", {
       columns: this.columns,
-      snapshot: this.snapshotColumns,
+      snapshot,
+      snapshotColumns: this.snapshotColumns,
       viewport: (_a = this.viewportData) == null ? void 0 : _a.rowTotalCount,
       columnCount: this.columnCount,
       rowCount: this.rowCount
@@ -10735,7 +10753,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
         })
       );
     } else {
-      log$3.debug2("Pivot columns did not change in the update");
+      log$4.debug2("Pivot columns did not change in the update");
     }
     this.dispatchEvent(new EventShimCustomEvent(irisGrid.IrisGridModel.EVENT.UPDATED));
   }
@@ -10774,10 +10792,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
       const keyData = /* @__PURE__ */ new Map();
       const totalsData = /* @__PURE__ */ new Map();
       for (let c = 0; c < keys2.length; c += 1) {
-        keyData.set(c, {
-          // Only render the value for the deepest level
-          value: c === depth - 1 ? keys2[c] : void 0
-        });
+        keyData.set(c, { value: keys2[c] });
       }
       for (let v = 0; v < snapshot.valueSources.length; v += 1) {
         totalsData.set(v, {
@@ -10888,7 +10903,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     }
   }
   close() {
-    log$3.debug("close");
+    log$4.debug("close");
     this.pivotTable.close();
   }
   get formatter() {
@@ -10980,49 +10995,41 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     return true;
   }
   expandAllColumns() {
-    log$3.debug("expandAllColumns");
+    log$4.debug("expandAllColumns");
     this.setColumnExpanded(this.keyColumns.length, true, true);
   }
   collapseAllColumns() {
-    log$3.debug("collapseAllColumns");
+    log$4.debug("collapseAllColumns");
     this.setColumnExpanded(this.keyColumns.length, false, true);
   }
   isColumnExpandable(x, depth) {
-    var _a, _b;
-    log$3.debug2("isColumnExpandable", {
-      x,
-      depth,
-      name: (_a = this.columns[x]) == null ? void 0 : _a.name,
-      v: this.virtualColumns,
-      cC: this.columnCount,
-      c: this.columns
-    });
-    if (x >= this.keyColumns.length && x < this.virtualColumns.length) {
+    var _a;
+    if (this.isGrandTotalsColumn(x)) {
       return !this.isRootColumnExpanded || this.columns.length > this.virtualColumns.length;
     }
     if (x < this.keyColumns.length) {
       return false;
     }
-    return ((_b = this.columns[x]) == null ? void 0 : _b.hasChildren) ?? false;
+    return ((_a = this.columns[x]) == null ? void 0 : _a.hasChildren) ?? false;
+  }
+  isGrandTotalsColumn(x) {
+    const totalsStartIndex = this.keyColumns.length + (this.groupColumn == null ? 0 : 1);
+    return x >= totalsStartIndex && x < this.virtualColumns.length;
   }
   isColumnExpanded(x) {
     var _a;
-    if (x >= this.keyColumns.length && x < this.virtualColumns.length) {
+    if (this.isGrandTotalsColumn(x)) {
       return this.isRootColumnExpanded;
     }
     return ((_a = this.columns[x]) == null ? void 0 : _a.isExpanded) ?? false;
   }
   setColumnExpanded(x, isExpanded, expandDescendants = false) {
-    var _a;
-    log$3.debug2("[0] setColumnExpanded", {
+    log$4.debug2("setColumnExpanded", {
       x,
       isExpanded,
-      name: (_a = this.columns[x]) == null ? void 0 : _a.name,
-      v: this.virtualColumns,
-      cC: this.columnCount,
-      c: this.columns
+      expandDescendants
     });
-    if (x >= this.keyColumns.length && x < this.virtualColumns.length) {
+    if (this.isGrandTotalsColumn(x)) {
       this.pivotTable.setRootColumnExpanded(isExpanded, expandDescendants);
       this.isRootColumnExpanded = isExpanded;
       return;
@@ -11088,15 +11095,27 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     this.formattedStringData[x][y] = text;
   }
   dataForCell(x, y) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     const keyCount = this.keyColumns.length;
-    if (x < keyCount) {
-      return (_a = this.row(y)) == null ? void 0 : _a.keyData.get(x);
+    const groupOffset = this.groupColumn == null ? 0 : 1;
+    if (groupOffset === 1 && x === 0) {
+      const rowDepth = ((_a = this.row(y)) == null ? void 0 : _a.depth) ?? 2;
+      return y === 0 ? (
+        // Empty value for the group cell in the totals row
+        { value: "" }
+      ) : {
+        // Render all key values except the last one in the group column
+        // to match the Rollup UI
+        value: rowDepth < keyCount ? (_c = (_b = this.row(y)) == null ? void 0 : _b.keyData.get(rowDepth - 1)) == null ? void 0 : _c.value : ""
+      };
+    }
+    if (x < keyCount + groupOffset) {
+      return (_d = this.row(y)) == null ? void 0 : _d.keyData.get(x - groupOffset);
     }
     if (x < this.virtualColumns.length) {
-      return (_b = this.row(y)) == null ? void 0 : _b.totalsData.get(x - keyCount);
+      return (_e = this.row(y)) == null ? void 0 : _e.totalsData.get(x - keyCount - groupOffset);
     }
-    return (_c = this.row(y)) == null ? void 0 : _c.data.get(x - this.virtualColumns.length);
+    return (_f = this.row(y)) == null ? void 0 : _f.data.get(x - this.virtualColumns.length);
   }
   formatForCell(x, y) {
     var _a;
@@ -11139,7 +11158,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
       this.virtualColumns.length,
       this.snapshotValueSources.length
     );
-    log$3.debug2("applyBufferedViewport", {
+    log$4.debug2("applyBufferedViewport", {
       top,
       bottom,
       columns,
@@ -11169,8 +11188,8 @@ function useIrisGridPivotModel(fetch) {
     [model]
   );
   const makeModel = React.useCallback(async () => {
-    const pivotWidget = await fetch();
-    return new IrisGridPivotModel(dh, pivotWidget);
+    const pivotTable = await fetch();
+    return new IrisGridPivotModel(dh, pivotTable);
   }, [dh, fetch]);
   const reload = React.useCallback(async () => {
     setIsLoading(true);
@@ -11218,6 +11237,22 @@ function useIrisGridPivotModel(fetch) {
   }
   throw new Error("Invalid state");
 }
+const log$3 = Log.module("@deephaven/js-plugin-pivot/usePivotTableFetch");
+function usePivotTableFetch(fetch) {
+  const api = jsapiBootstrap.useApi();
+  return React.useCallback(
+    () => fetch().then((widget) => {
+      log$3.debug("Pivot fetch result:", widget);
+      if (!isCorePlusDh(api)) {
+        throw new Error("CorePlus is not available");
+      }
+      const pivotTable = new api.coreplus.pivot.PivotTable(widget);
+      log$3.debug("Created pivot table:", pivotTable);
+      return pivotTable;
+    }),
+    [api, fetch]
+  );
+}
 class PivotColumnGroupMouseHandler extends GridMouseHandler {
   constructor(irisGrid2) {
     super();
@@ -11233,6 +11268,26 @@ class PivotColumnGroupMouseHandler extends GridMouseHandler {
     }
     return null;
   }
+  setCursor(gridPoint, grid) {
+    const { column, columnHeaderDepth } = gridPoint;
+    if (this.isExpandableColumnGroup(column, columnHeaderDepth)) {
+      this.cursor = "pointer";
+      return { stopPropagation: false, preventDefault: false };
+    }
+    this.cursor = null;
+    return false;
+  }
+  isExpandableColumnGroup(column, columnHeaderDepth = 0) {
+    const { model } = this.irisGrid.props;
+    if (column == null || model == null) {
+      return false;
+    }
+    const group = model.getColumnHeaderGroup(column, columnHeaderDepth);
+    return group != null && isPivotColumnHeaderGroup(group) && group.isExpandable;
+  }
+  onMove(gridPoint, grid) {
+    return this.setCursor(gridPoint, grid);
+  }
   // We need to remember where the down started, because the canvas element will trigger a click wherever mouseUp is
   onDown(gridPoint) {
     this.column = this.getColumnGroupFromGridPoint(gridPoint);
@@ -11240,177 +11295,365 @@ class PivotColumnGroupMouseHandler extends GridMouseHandler {
   }
   onClick(gridPoint, grid, event) {
     const column = this.getColumnGroupFromGridPoint(gridPoint);
-    if (column != null && column === this.column) {
-      this.irisGrid.toggleExpandColumn(column);
+    if (column != null && column === this.column && this.isExpandableColumnGroup(column, gridPoint.columnHeaderDepth)) {
+      this.irisGrid.toggleExpandColumn(
+        column,
+        GridUtils.isModifierKeyDown(event)
+      );
       return true;
     }
     return false;
   }
 }
-function getColumnGroupName(model, modelColumn, depth) {
-  var _a;
-  return (_a = model.getColumnHeaderGroup(modelColumn, depth ?? 0)) == null ? void 0 : _a.name;
+function getColumnWidth(column, metrics, themeColumnWidth) {
+  const {
+    firstColumn,
+    allColumnWidths,
+    calculatedColumnWidths,
+    userColumnWidths,
+    treePaddingX
+  } = metrics;
+  const modelColumn = GridUtils.getModelIndex(column, metrics.movedColumns);
+  return userColumnWidths.get(modelColumn) ?? allColumnWidths.get(column) ?? (calculatedColumnWidths.has(modelColumn) ? (calculatedColumnWidths.get(modelColumn) ?? 0) + (column === firstColumn ? treePaddingX : 0) : void 0) ?? themeColumnWidth;
+}
+function getColumnHeaderCoordinates(state, group) {
+  const { metrics, theme } = state;
+  const { childIndexes, depth } = group;
+  const firstChildIndex = childIndexes[0];
+  const lastChildIndex = childIndexes[childIndexes.length - 1];
+  if (firstChildIndex == null || lastChildIndex == null) {
+    throw new Error("Group has no child columns");
+  }
+  const { left, right, allColumnXs, allColumnWidths, gridX, gridY } = metrics;
+  const {
+    filterBarHeight,
+    columnHeaderHeight,
+    columnWidth: themeColumnWidth
+  } = theme;
+  const firstVisible = Math.max(left, firstChildIndex);
+  const lastVisible = Math.min(right, lastChildIndex);
+  if (firstVisible > lastChildIndex || lastVisible < firstChildIndex) {
+    return null;
+  }
+  const firstVisibleX = allColumnXs.get(firstVisible);
+  if (firstVisibleX == null) {
+    return null;
+  }
+  let groupX1 = firstVisibleX;
+  for (let i = firstChildIndex; i < firstVisible; i += 1) {
+    groupX1 -= getColumnWidth(i, metrics, themeColumnWidth);
+  }
+  const lastColumnX = allColumnXs.get(lastVisible);
+  const lastColumnWidth = allColumnWidths.get(lastVisible);
+  if (lastColumnX == null || lastColumnWidth == null) {
+    return null;
+  }
+  let groupX2 = lastColumnX + lastColumnWidth;
+  for (let i = lastVisible + 1; i <= lastChildIndex; i += 1) {
+    groupX2 += getColumnWidth(i, metrics, themeColumnWidth);
+  }
+  return {
+    x1: gridX + groupX1,
+    y1: gridY - filterBarHeight - (depth + 1) * columnHeaderHeight,
+    x2: gridX + groupX2,
+    y2: gridY - filterBarHeight - depth * columnHeaderHeight
+  };
 }
-class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
-  drawColumnHeaders(context, state) {
-    const {
-      mouseX,
-      mouseY,
-      theme,
-      metrics,
-      draggingColumnSeparator,
-      isDragging,
-      model
-    } = state;
-    const {
-      columnHeaderHeight,
-      floatingColumns,
-      gridX,
-      width,
-      visibleColumns,
-      allColumnWidths,
-      allColumnXs,
-      floatingLeftColumnCount,
-      floatingLeftWidth,
-      floatingRightWidth,
-      modelColumns,
-      columnHeaderMaxDepth
-    } = metrics;
-    if (columnHeaderHeight <= 0) {
-      return;
-    }
-    const {
-      headerHiddenSeparatorSize,
-      headerHiddenSeparatorHoverColor,
-      headerSeparatorColor,
-      headerSeparatorHoverColor
-    } = theme;
-    const hiddenSeparatorHeight = columnHeaderHeight * 0.5;
-    const hiddenY = columnHeaderHeight * (columnHeaderMaxDepth - 1) + columnHeaderHeight * 0.5 - hiddenSeparatorHeight * 0.5;
-    const containsFrozenColumns = floatingLeftColumnCount > 0;
-    if (!isExpandableColumnGridModel(model)) {
-      throw new Error("Unsupported model type");
+class IrisGridPivotMetricCalculator extends irisGrid.IrisGridMetricCalculator {
+  constructor() {
+    super(...arguments);
+    // Initialize with null to ensure the first check always triggers reset
+    __publicField(this, "cachedIsFilterBarShown", null);
+    __publicField(this, "getCachedColumnSourceLabelWidth", memoizeOne(
+      (keyColumnGroups, headerHorizontalPadding, maxColumnWidth, state) => {
+        let result = 0;
+        keyColumnGroups.forEach((group) => {
+          const sourceIndex = -group.depth;
+          const width = this.getColumnHeaderGroupWidth(
+            sourceIndex,
+            0,
+            state,
+            maxColumnWidth
+          );
+          result = Math.max(result, width + headerHorizontalPadding);
+        });
+        return result;
+      }
+    ));
+  }
+  /**
+   * Resets column width caches if filter bar visibility has changed
+   * to adjust for the minimum filter box width.
+   * @param state The current IrisGridPivotMetricState
+   */
+  resetHeaderWidthsIfFilterBarChanged(state) {
+    const { isFilterBarShown } = state;
+    if (this.cachedIsFilterBarShown !== isFilterBarShown) {
+      this.resetCalculatedHeaderGroupWidths();
     }
-    context.save();
-    this.drawColumnHeadersForRange(
-      context,
+    this.cachedIsFilterBarShown = isFilterBarShown;
+  }
+  getColumnHeaderGroupWidth(modelColumn, depth, state, maxColumnWidth) {
+    const baseWidth = super.getColumnHeaderGroupWidth(
+      modelColumn,
+      depth,
       state,
-      [visibleColumns[0], visibleColumns[visibleColumns.length - 1]],
-      {
-        minX: gridX + floatingLeftWidth,
-        maxX: width - floatingRightWidth
-      }
+      maxColumnWidth
     );
-    if (containsFrozenColumns) {
-      this.drawColumnHeadersForRange(
-        context,
-        state,
-        [floatingColumns[0], floatingColumns[floatingColumns.length - 1]],
-        {
-          minX: gridX,
-          maxX: gridX + floatingLeftWidth
-        }
-      );
-    }
-    if (headerSeparatorColor) {
-      context.strokeStyle = headerSeparatorColor;
-      const hiddenColumns = [...allColumnWidths.entries()].filter(([_, w]) => w === 0).map(([index]) => index);
-      context.beginPath();
-      context.fillStyle = headerSeparatorColor;
-      for (let i = 0; i < hiddenColumns.length; i += 1) {
-        const column = hiddenColumns[i];
-        const columnX = getOrThrow(allColumnXs, column);
-        const columnWidth = getOrThrow(allColumnWidths, column);
-        const minX = gridX + columnX + columnWidth + 0.5 - headerHiddenSeparatorSize * 0.5;
-        context.rect(
-          minX,
-          hiddenY,
-          headerHiddenSeparatorSize,
-          hiddenSeparatorHeight
-        );
-      }
-      context.fill();
+    const { isFilterBarShown, model } = state;
+    if (!isFilterBarShown) {
+      return baseWidth;
     }
-    if (headerSeparatorHoverColor) {
-      let { index: highlightedSeparator, depth } = draggingColumnSeparator ?? {};
-      if (highlightedSeparator == null && mouseX != null && mouseY != null) {
-        const separator = GridColumnSeparatorMouseHandler$1.getColumnSeparator(
-          GridUtils.getGridPointFromXY(mouseX, mouseY, metrics),
-          metrics,
-          model,
-          theme
-        );
-        highlightedSeparator = separator == null ? void 0 : separator.index;
-        depth = separator == null ? void 0 : separator.depth;
-      }
-      let shouldDrawSeparator;
-      if (highlightedSeparator == null) {
-        shouldDrawSeparator = false;
-      } else {
-        const columnIndex = modelColumns.get(highlightedSeparator);
-        const nextColumnIndex = modelColumns.get(highlightedSeparator + 1);
-        if (columnIndex == null || nextColumnIndex == null) {
-          shouldDrawSeparator = false;
-        } else {
-          shouldDrawSeparator = getColumnGroupName(model, columnIndex, depth) !== getColumnGroupName(model, nextColumnIndex, depth);
-        }
-      }
-      if (shouldDrawSeparator && highlightedSeparator != null && depth != null && (!isDragging || draggingColumnSeparator != null)) {
-        context.strokeStyle = headerSeparatorHoverColor;
-        const columnX = getOrThrow(allColumnXs, highlightedSeparator);
-        const columnWidth = getOrThrow(allColumnWidths, highlightedSeparator);
-        const x = gridX + columnX + columnWidth + 0.5;
-        const visibleColumnIndex = visibleColumns.indexOf(highlightedSeparator);
-        const nextColumn = visibleColumnIndex < visibleColumns.length - 1 ? visibleColumns[visibleColumnIndex + 1] : null;
-        const nextColumnWidth = nextColumn != null ? allColumnWidths.get(nextColumn) : null;
-        const isColumnHidden = columnWidth === 0;
-        const isNextColumnHidden = nextColumnWidth != null && nextColumnWidth === 0;
-        if (isColumnHidden) {
-          context.strokeStyle = headerHiddenSeparatorHoverColor;
-          context.fillStyle = headerHiddenSeparatorHoverColor;
-          context.fillRect(
-            x,
-            hiddenY,
-            headerHiddenSeparatorSize * 0.5,
-            hiddenSeparatorHeight
-          );
-        } else if (isNextColumnHidden) {
-          context.fillStyle = headerSeparatorHoverColor;
-          context.fillRect(
-            x - headerHiddenSeparatorSize * 0.5,
-            hiddenY,
-            headerHiddenSeparatorSize * 0.5,
-            hiddenSeparatorHeight
-          );
-        }
-        context.beginPath();
-        context.moveTo(
-          x,
-          (columnHeaderMaxDepth - depth - 1) * columnHeaderHeight
-        );
-        context.lineTo(
-          x,
-          (columnHeaderMaxDepth - depth) * columnHeaderHeight - 1
-        );
-        context.stroke();
-      }
+    const group = model.getColumnHeaderGroup(modelColumn, depth);
+    if (!isPivotColumnHeaderGroup(group) || !group.isKeyColumnGroup) {
+      return baseWidth;
     }
-    context.restore();
+    const { theme } = state;
+    const { columnSourceFilterMinWidth } = theme;
+    return baseWidth + columnSourceFilterMinWidth;
   }
-  drawColumnHeadersAtDepth(context, state, range, bounds, depth) {
-    const { metrics, model, theme } = state;
-    const {
-      modelColumns,
-      allColumnXs,
-      gridX,
-      userColumnWidths,
-      allColumnWidths,
-      movedColumns
-    } = metrics;
-    const { columnHeaderHeight, columnWidth } = theme;
+  /**
+   * Calculate the width needed for the column source labels
+   * @param model The IrisGridPivotModel instance
+   * @param state The current IrisGridPivotMetricState
+   * @returns The calculated width for the column source labels
+   */
+  calculateColumnSourceLabelWidth(model, state) {
+    const { theme } = state;
+    const { headerHorizontalPadding, maxColumnWidth } = theme;
+    const keyColumnGroups = getKeyColumnGroups(model);
+    return this.getCachedColumnSourceLabelWidth(
+      keyColumnGroups,
+      headerHorizontalPadding,
+      maxColumnWidth,
+      state
+    );
+  }
+  /**
+   * Gets the metrics for the current state. This method has to be called before setColumnSize or resetColumnSize.
+   * @param state The current IrisGridPivotMetricState
+   * @returns The metrics for the current state
+   */
+  getMetrics(state) {
+    const { model } = state;
+    if (!isIrisGridPivotModel(model)) {
+      throw new Error("Model is not an IrisGridPivotModel");
+    }
+    const columnSourceLabelWidth = this.calculateColumnSourceLabelWidth(
+      model,
+      state
+    );
+    this.resetHeaderWidthsIfFilterBarChanged(state);
+    return {
+      ...super.getMetrics(state),
+      columnSourceLabelWidth
+    };
+  }
+  /**
+   * Get metrics for positioning the filter bar input field.
+   * @param index The visible index of the column to get the filter box coordinates for
+   * @param state The current IrisGridMetricState
+   * @param metrics The grid metrics
+   * @returns Coordinates for the filter input field, or null if positioning cannot be calculated
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getFilterInputCoordinates(index, state, metrics) {
+    if (index >= 0) {
+      return super.getFilterInputCoordinates(index, state, metrics);
+    }
+    const { model, theme } = state;
+    if (!isIrisGridPivotModel(model)) {
+      return null;
+    }
+    const { gridY, columnSourceLabelWidth } = metrics;
+    const { columnSourceFilterMinWidth, filterBarHeight } = theme;
+    const depth = -index;
+    const keyColumnGroup = model.getColumnHeaderGroup(0, depth);
+    if (keyColumnGroup == null || !isPivotColumnHeaderGroup(keyColumnGroup) || !keyColumnGroup.isKeyColumnGroup) {
+      return null;
+    }
+    const groupCoords = getColumnHeaderCoordinates(
+      { metrics, theme, model },
+      keyColumnGroup
+    );
+    if (groupCoords == null) {
+      return null;
+    }
+    const { x1, x2 } = groupCoords;
+    const columnSourceFilterWidth = Math.max(
+      columnSourceFilterMinWidth,
+      x2 - x1 - columnSourceLabelWidth
+    );
+    const x = x2 - columnSourceFilterWidth;
+    const y = gridY - theme.columnHeaderHeight - (1 - index) * (filterBarHeight ?? 0);
+    return {
+      x,
+      y,
+      width: columnSourceFilterWidth + 1,
+      // cover right border
+      height: (filterBarHeight ?? 0) - 1
+      // remove bottom border
+    };
+  }
+  /**
+   * Calculate the new left index to bring the given column into view.
+   * @param column The column that should be scrolled into view
+   * @param state The current IrisGridMetricState
+   * @param metrics The grid metrics
+   * @returns The left column index to scroll to, or null if no scroll is needed
+   */
+  getScrollLeftForColumn(column, state, metrics) {
+    if (column < 0) {
+      return null;
+    }
+    return super.getScrollLeftForColumn(column, state, metrics);
+  }
+}
+function getColumnSourceHeaderFromGridPoint(model, gridPoint) {
+  const { column, row, columnHeaderDepth } = gridPoint;
+  const sourceIndex = columnHeaderDepth != null ? -columnHeaderDepth : null;
+  if (column == null || row !== null || columnHeaderDepth == null) {
+    return null;
+  }
+  const group = model.getColumnHeaderGroup(column, columnHeaderDepth);
+  if (sourceIndex != null && sourceIndex < 0 && isIrisGridPivotModel(model) && isPivotColumnHeaderGroup(group) && group.isKeyColumnGroup) {
+    return sourceIndex;
+  }
+  return null;
+}
+function isGridPointInColumnSourceFilterBox(model, gridPoint, metrics, theme) {
+  if (!isIrisGridPivotModel(model)) {
+    return false;
+  }
+  const { column, row, columnHeaderDepth } = gridPoint;
+  if (column == null || row !== null || columnHeaderDepth == null) {
+    return false;
+  }
+  const sourceIndex = getColumnSourceHeaderFromGridPoint(model, gridPoint);
+  if (sourceIndex == null) {
+    return false;
+  }
+  const group = model.getColumnHeaderGroup(column, columnHeaderDepth);
+  if (!isPivotColumnHeaderGroup(group)) {
+    return false;
+  }
+  const coords = getColumnHeaderCoordinates(
+    { metrics, theme, model },
+    group
+  );
+  if (coords == null) {
+    return false;
+  }
+  const { columnSourceFilterMinWidth } = theme;
+  const { columnSourceLabelWidth } = metrics;
+  const { x1, x2 } = coords;
+  const columnSourceFilterWidth = Math.max(
+    x2 - x1 - columnSourceLabelWidth,
+    columnSourceFilterMinWidth
+  );
+  return gridPoint.x > x2 - columnSourceFilterWidth;
+}
+const log$2 = Log.module("@deephaven/js-plugin-pivot/PivotSortMouseHandler");
+class PivotSortMouseHandler extends GridMouseHandler {
+  constructor(irisGrid2) {
+    super();
+    __publicField(this, "columnSource");
+    __publicField(this, "irisGrid");
+    this.columnSource = null;
+    this.irisGrid = irisGrid2;
+  }
+  // We need to remember where the down started, because the canvas element will trigger a click where mouseUp is
+  onDown(gridPoint, grid, event) {
+    const { model } = this.irisGrid.props;
+    assertNotNull(model);
+    this.columnSource = getColumnSourceHeaderFromGridPoint(model, gridPoint);
+    log$2.debug("onDown", gridPoint, this.columnSource);
+    return false;
+  }
+  onClick(gridPoint, grid, event) {
+    const { model } = this.irisGrid.props;
+    assertNotNull(model);
+    const columnSource = getColumnSourceHeaderFromGridPoint(model, gridPoint);
+    if (columnSource != null && columnSource === this.columnSource && model.isColumnSortable(columnSource)) {
+      const addToExisting = components.ContextActionUtils.isModifierKeyDown(event);
+      this.irisGrid.toggleSort(columnSource, addToExisting);
+      return true;
+    }
+    return false;
+  }
+}
+function isPivotGridMetrics(metrics) {
+  return metrics.columnSourceLabelWidth !== void 0;
+}
+class PivotFilterMouseHandler extends GridMouseHandler {
+  constructor(irisGrid2) {
+    super();
+    __publicField(this, "irisGrid");
+    this.irisGrid = irisGrid2;
+  }
+  onDown(gridPoint) {
+    const { model } = this.irisGrid.props;
+    const { isFilterBarShown, metrics } = this.irisGrid.state;
+    const sourceIndex = getColumnSourceHeaderFromGridPoint(model, gridPoint);
+    if (sourceIndex != null) {
+      assertNotNull(metrics, "Metrics not set");
+      if (!isPivotGridMetrics(metrics)) {
+        throw new Error("PivotGridMetrics required");
+      }
+      const theme = this.irisGrid.getTheme();
+      if (isFilterBarShown && theme.columnHeaderHeight != null && theme.filterBarHeight != null && isGridPointInColumnSourceFilterBox(model, gridPoint, metrics, theme)) {
+        this.irisGrid.focusFilterBar(sourceIndex);
+        return true;
+      }
+    }
+    return false;
+  }
+  onClick(gridPoint, grid, event) {
+    const { model } = this.irisGrid.props;
+    const { isFilterBarShown, metrics } = this.irisGrid.state;
+    const sourceIndex = getColumnSourceHeaderFromGridPoint(model, gridPoint);
+    if (sourceIndex != null) {
+      assertNotNull(metrics, "Metrics not set");
+      if (!isPivotGridMetrics(metrics)) {
+        throw new Error("PivotGridMetrics required");
+      }
+      const theme = this.irisGrid.getTheme();
+      if (isFilterBarShown && theme.columnHeaderHeight != null && theme.filterBarHeight != null && isGridPointInColumnSourceFilterBox(model, gridPoint, metrics, theme)) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+function usePivotMouseHandlers() {
+  return React.useMemo(
+    () => [
+      (irisGrid2) => new PivotColumnGroupMouseHandler(irisGrid2),
+      // Filter handler should consume events before sort
+      (irisGrid2) => new PivotFilterMouseHandler(irisGrid2),
+      (irisGrid2) => new PivotSortMouseHandler(irisGrid2)
+    ],
+    []
+  );
+}
+function getColumnGroupName(model, modelColumn, depth) {
+  var _a;
+  return (_a = model.getColumnHeaderGroup(modelColumn, depth ?? 0)) == null ? void 0 : _a.name;
+}
+class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
+  drawColumnHeaders(context, state) {
+    super.drawColumnHeaders(context, state);
+    this.drawColumnSourceFilters(context, state);
+  }
+  drawColumnHeadersAtDepth(context, state, range, bounds, depth) {
+    const { isFilterBarShown, metrics, model, theme } = state;
+    if (!isIrisGridPivotModel(model)) {
+      throw new Error("Unsupported model type");
+    }
+    const { modelColumns } = metrics;
+    const { columnHeaderHeight } = theme;
     const { columnHeaderMaxDepth } = model;
     const { minX, maxX } = bounds;
-    const visibleWidth = maxX - minX;
     if (columnHeaderMaxDepth === 0) {
       return;
     }
@@ -11430,66 +11673,61 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
     if (depth > 0) {
       let columnIndex = startIndex;
       while (columnIndex <= endIndex) {
-        const { columnCount } = metrics;
         const modelColumn = getOrThrow(modelColumns, columnIndex);
-        const columnGroupColor = isExpandableColumnGridModel(model) ? model.colorForColumnHeader(modelColumn, depth, theme) : model.colorForColumnHeader(modelColumn, depth);
-        const headerGroup = model.getColumnHeaderGroup(modelColumn, depth ?? 0);
-        const isExpandable = isExpandableColumnHeaderGroup(headerGroup) && headerGroup.isExpandable;
-        const isExpanded = isExpandableColumnHeaderGroup(headerGroup) && headerGroup.isExpanded;
-        const columnGroupName = getColumnGroupName(model, modelColumn, depth);
-        let columnGroupLeft = getOrThrow(allColumnXs, columnIndex) + gridX;
-        let columnGroupRight = columnGroupLeft + getOrThrow(allColumnWidths, columnIndex);
-        if (columnGroupName != null) {
-          let prevColumnIndex = columnIndex - 1;
-          while (prevColumnIndex >= 0 && (columnGroupRight - columnGroupLeft < visibleWidth || columnGroupLeft > minX)) {
-            const prevModelIndex = modelColumns.get(prevColumnIndex) ?? GridUtils.getModelIndex(prevColumnIndex, movedColumns);
-            if (prevModelIndex == null || getColumnGroupName(model, prevModelIndex, depth) !== columnGroupName) {
-              break;
-            }
-            const prevColumnWidth = userColumnWidths.get(prevModelIndex) ?? allColumnWidths.get(prevColumnIndex) ?? columnWidth;
-            columnGroupLeft -= prevColumnWidth;
-            prevColumnIndex -= 1;
-          }
-          let nextColumnIndex = columnIndex + 1;
-          while (nextColumnIndex < columnCount && (columnGroupRight - columnGroupLeft < visibleWidth || columnGroupRight < maxX)) {
-            const nextModelIndex = modelColumns.get(nextColumnIndex) ?? GridUtils.getModelIndex(nextColumnIndex, movedColumns);
-            if (getColumnGroupName(model, nextModelIndex, depth) !== columnGroupName) {
-              break;
-            }
-            const nextColumnWidth = userColumnWidths.get(nextModelIndex) ?? allColumnWidths.get(nextColumnIndex) ?? columnWidth;
-            columnGroupRight += nextColumnWidth;
-            nextColumnIndex += 1;
-          }
-          columnIndex = nextColumnIndex - 1;
-          const isFullWidth = columnGroupRight - columnGroupLeft >= visibleWidth;
-          let x = columnGroupLeft;
-          if (isFullWidth) {
-            if (columnGroupRight < maxX) {
-              x = columnGroupRight - visibleWidth;
-            } else if (columnGroupLeft < minX) {
-              x = minX;
+        const columnGroupColor = model.colorForColumnHeader(
+          modelColumn,
+          depth,
+          theme
+        );
+        const headerGroup = model.getColumnHeaderGroup(modelColumn, depth);
+        const isExpandable = isPivotColumnHeaderGroup(headerGroup) && headerGroup.isExpandable;
+        const isExpanded = isPivotColumnHeaderGroup(headerGroup) && headerGroup.isExpanded;
+        const groupName = getColumnGroupName(model, modelColumn, depth);
+        if (groupName != null && isPivotColumnHeaderGroup(headerGroup)) {
+          const coords = getColumnHeaderCoordinates(state, headerGroup);
+          if (coords != null) {
+            const { x1: columnGroupLeft, x2: columnGroupRight } = coords;
+            columnIndex = headerGroup.childIndexes[headerGroup.childIndexes.length - 1];
+            const columnWidth = columnGroupRight - columnGroupLeft;
+            let headerRightPadding;
+            if (isPivotColumnHeaderGroup(headerGroup) && headerGroup.isKeyColumnGroup === true && theme.columnSourceFilterMinWidth != null) {
+              if (isFilterBarShown) {
+                headerRightPadding = Math.max(
+                  theme.columnSourceFilterMinWidth,
+                  columnWidth - metrics.columnSourceLabelWidth
+                );
+              } else {
+                const { advancedFilters, quickFilters } = state;
+                const { filterBarCollapsedHeight } = theme;
+                if (advancedFilters.size > 0 || quickFilters.size > 0) {
+                  headerRightPadding = filterBarCollapsedHeight;
+                }
+              }
             }
+            const sort = jsapiUtils.TableUtils.getSortForColumn(model.sort, groupName);
+            this.drawColumnHeader(
+              context,
+              state,
+              model.textForColumnHeader(modelColumn, depth) ?? "",
+              columnGroupLeft,
+              columnWidth,
+              {
+                backgroundColor: columnGroupColor ?? void 0
+              },
+              bounds,
+              isExpandable,
+              isExpanded,
+              sort,
+              headerRightPadding
+            );
           }
-          this.drawColumnHeader(
-            context,
-            state,
-            model.textForColumnHeader(modelColumn, depth) ?? "",
-            x,
-            Math.min(columnGroupRight - columnGroupLeft, visibleWidth),
-            {
-              backgroundColor: columnGroupColor ?? void 0
-            },
-            bounds,
-            isExpandable,
-            isExpanded
-          );
         }
         columnIndex += 1;
       }
     }
     context.restore();
   }
-  drawColumnHeader(context, state, columnText, columnX, columnWidth, style, bounds, isExpandable = false, isExpanded = false) {
+  drawColumnHeader(context, state, columnText, columnX, columnWidth, style, bounds, isExpandable = false, isExpanded = false, sort = null, headerRightPadding) {
     if (columnWidth <= 0) {
       return;
     }
@@ -11505,7 +11743,7 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
       white
     } = theme;
     const { fontWidthsLower, fontWidthsUpper, width } = metrics;
-    const maxWidth = columnWidth - headerHorizontalPadding * 2;
+    const maxLabelWidth = columnWidth - headerHorizontalPadding * 2 - (headerRightPadding ?? 0);
     const {
       backgroundColor = headerBackgroundColor,
       separatorColor = headerSeparatorColor
@@ -11551,7 +11789,7 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
     const renderText = this.textCellRenderer.getCachedTruncatedString(
       context,
       columnText,
-      maxWidth,
+      maxLabelWidth,
       fontWidthLower,
       fontWidthUpper
     );
@@ -11561,15 +11799,15 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
     maxX -= headerHorizontalPadding;
     const treeMarkerPadding = isExpandable ? iconSize : 0;
     const contentLeft = columnX + headerHorizontalPadding;
-    const visibleLeft = lodash_clamp(contentLeft, minX, maxX);
-    const contentRight = columnX + columnWidth - headerHorizontalPadding;
-    const visibleRight = lodash_clamp(contentRight, minX, maxX);
-    const visibleWidth = visibleRight - visibleLeft;
+    const contentViewportLeft = lodash_clamp(contentLeft, minX, maxX);
+    const contentRight = columnX + columnWidth - headerHorizontalPadding - (headerRightPadding ?? 0);
+    const contentViewportRight = lodash_clamp(contentRight, minX, maxX);
+    const contentViewportWidth = contentViewportRight - contentViewportLeft;
     const textWidth = this.getCachedHeaderWidth(context, renderText);
     const contentWidth = textWidth + treeMarkerPadding;
     const isBeyondLeft = contentLeft < minX;
     if (isBeyondLeft) {
-      if (contentWidth < visibleWidth) {
+      if (contentWidth < contentViewportWidth) {
         x = minX;
       } else {
         x = contentRight - contentWidth;
@@ -11597,6 +11835,15 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
         isExpanded
       );
     }
+    this.drawColumnSourceSortIndicator(
+      context,
+      state,
+      sort,
+      columnText,
+      columnX,
+      columnWidth,
+      { minX, maxX }
+    );
     context.restore();
   }
   drawColumnHeaderTreeMarker(context, state, columnX, columnWidth, headerY, headerHeight, treeBox, isExpanded) {
@@ -11624,39 +11871,287 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
       isExpanded
     );
   }
+  drawColumnSourceSortIndicator(context, state, sort, columnText, columnX, columnWidth, bounds) {
+    const { isFilterBarShown, metrics, theme, quickFilters, advancedFilters } = state;
+    const { gridX, columnHeaderHeight, columnSourceLabelWidth } = metrics;
+    const {
+      iconSize: themeIconSize,
+      columnSourceFilterMinWidth,
+      filterBarCollapsedHeight
+    } = theme;
+    const iconSize = Math.round(themeIconSize * 0.75);
+    if (sort == null) {
+      return;
+    }
+    const icon = this.getSortIcon(sort, iconSize);
+    if (!icon) {
+      return;
+    }
+    if (columnSourceFilterMinWidth == null || columnSourceFilterMinWidth <= 0) {
+      return;
+    }
+    const expandedFilterWidth = Math.max(
+      columnWidth - columnSourceLabelWidth,
+      columnSourceFilterMinWidth
+    );
+    const collapsedFilterWidth = advancedFilters.size > 0 || quickFilters.size > 0 ? filterBarCollapsedHeight : 0;
+    const x = gridX + columnX + columnWidth - iconSize - (isFilterBarShown ? expandedFilterWidth : collapsedFilterWidth) - 1;
+    const y = (columnHeaderHeight - iconSize) * 0.5;
+    context.save();
+    context.fillStyle = theme.headerSortBarColor;
+    context.translate(x, y);
+    context.fill(icon);
+    context.restore();
+  }
+  drawColumnSourceFilters(context, state) {
+    const { isFilterBarShown, quickFilters, advancedFilters } = state;
+    if (isFilterBarShown) {
+      this.drawExpandedColumnSourceFilters(context, state);
+    } else if (quickFilters != null && quickFilters.size > 0 || advancedFilters != null && advancedFilters.size > 0) {
+      this.drawCollapsedColumnSourceFilters(context, state);
+    }
+  }
+  drawExpandedColumnSourceFilters(context, state) {
+    const { model, metrics, theme, quickFilters, advancedFilters } = state;
+    const { columnSourceFilterMinWidth } = theme;
+    if (columnSourceFilterMinWidth == null || columnSourceFilterMinWidth <= 0) {
+      return;
+    }
+    const { columnSourceLabelWidth } = metrics;
+    const filterBoxes = getKeyColumnGroups(model).map((group) => {
+      const coords = getColumnHeaderCoordinates(state, group);
+      if (coords == null) {
+        return null;
+      }
+      const { x1, y1, x2, y2 } = coords;
+      const columnSourceFilterWidth = Math.max(
+        x2 - x1 - columnSourceLabelWidth,
+        columnSourceFilterMinWidth
+      );
+      return {
+        depth: group.depth,
+        x1: x2 - columnSourceFilterWidth,
+        y1,
+        x2,
+        y2
+      };
+    }).filter(isNotNullOrUndefined);
+    if (filterBoxes.length === 0) {
+      return;
+    }
+    context.save();
+    context.font = theme.filterBarFont;
+    context.textAlign = "left";
+    if (quickFilters != null && quickFilters.size > 0 || advancedFilters != null && advancedFilters.size > 0) {
+      context.fillStyle = theme.filterBarExpandedActiveBackgroundColor;
+    } else {
+      context.fillStyle = theme.filterBarExpandedBackgroundColor;
+    }
+    context.fillRect(
+      filterBoxes[0].x1,
+      filterBoxes[filterBoxes.length - 1].y1,
+      filterBoxes[0].x2 - filterBoxes[0].x1,
+      filterBoxes[0].y2 - filterBoxes[filterBoxes.length - 1].y1
+    );
+    context.strokeStyle = theme.filterBarSeparatorColor;
+    context.beginPath();
+    filterBoxes.forEach(({ x1, y1, x2, y2 }) => {
+      const w = x2 - x1;
+      const h = y2 - y1;
+      context.rect(x1 + 0.5, y1 + 0.5, w, h - 2);
+    });
+    context.stroke();
+    filterBoxes.forEach(({ x1, x2, depth }) => {
+      this.drawExpandedColumnSourceFilter(context, state, depth, x1, x2 - x1);
+    });
+    context.restore();
+  }
+  drawExpandedColumnSourceFilter(context, state, headerDepth, inputX, inputWidth) {
+    if (inputWidth <= 0) {
+      return;
+    }
+    const { metrics, theme, quickFilters, advancedFilters } = state;
+    const {
+      filterBarHeight,
+      filterBarExpandedActiveCellBackgroundColor,
+      filterBarErrorColor,
+      filterBarHorizontalPadding,
+      headerColor
+    } = theme;
+    const { columnHeaderHeight, gridY } = metrics;
+    const filterIndex = -headerDepth;
+    const quickFilter = quickFilters.get(filterIndex);
+    const advancedFilter = advancedFilters.get(filterIndex);
+    if (quickFilter == null && advancedFilter == null) {
+      return;
+    }
+    let text = null;
+    if (quickFilter != null) {
+      const { text: filterText } = quickFilter;
+      text = filterText;
+      if (text == null || text === "") {
+        text = jsapiUtils.TableUtils.getFilterText(quickFilter.filter);
+      }
+      if (text != null) {
+        const { fontWidthsLower, fontWidthsUpper } = metrics;
+        const fontWidthLower = fontWidthsLower.get(context.font);
+        const fontWidthUpper = fontWidthsUpper.get(context.font);
+        const maxLength = inputWidth - filterBarHorizontalPadding * 2;
+        text = this.textCellRenderer.getCachedTruncatedString(
+          context,
+          text,
+          maxLength,
+          fontWidthLower,
+          fontWidthUpper
+        );
+      }
+    }
+    const inputY = gridY - filterBarHeight - columnHeaderHeight - columnHeaderHeight * headerDepth;
+    const isFilterValid = irisGrid.IrisGridRenderer.isFilterValid(
+      advancedFilter,
+      quickFilter
+    );
+    context.save();
+    if (isFilterValid && filterBarExpandedActiveCellBackgroundColor != null) {
+      context.fillStyle = filterBarExpandedActiveCellBackgroundColor;
+      context.fillRect(
+        inputX + 1,
+        // +1 left border
+        inputY + 1,
+        // +1 top border
+        inputWidth - 1,
+        // -1 right border
+        filterBarHeight - 3
+        // -3 top, bottom border and bottom casing
+      );
+    } else if (filterBarErrorColor != null) {
+      context.fillStyle = filterBarErrorColor;
+      context.lineWidth = 2;
+      context.strokeStyle = filterBarErrorColor;
+      const rectLeft = inputX + 2;
+      const rectTop = inputY + 2;
+      const rectWidth = inputWidth - 3;
+      const rectHeight = filterBarHeight - 5;
+      context.strokeRect(rectLeft, rectTop, rectWidth, rectHeight);
+    }
+    if (text != null && text !== "") {
+      const textX = inputX + filterBarHorizontalPadding;
+      const textY = inputY + filterBarHeight * 0.5 + 1;
+      context.fillStyle = headerColor;
+      context.fillText(text, textX, textY);
+    }
+    context.restore();
+  }
+  drawCollapsedColumnSourceFilters(context, state) {
+    const { metrics, model, theme } = state;
+    const { gridX, gridY, columnHeaderHeight, columnHeaderMaxDepth } = metrics;
+    const { headerSeparatorColor, filterBarCollapsedHeight } = theme;
+    if (filterBarCollapsedHeight <= 0) {
+      return;
+    }
+    const filterBoxes = getKeyColumnGroups(model).map((group) => {
+      const coords = getColumnHeaderCoordinates(state, group);
+      if (coords == null) {
+        return null;
+      }
+      const { x2: x22, y1, y2 } = coords;
+      return {
+        depth: group.depth,
+        x1: x22 - filterBarCollapsedHeight,
+        y1,
+        x2: x22,
+        y2
+      };
+    }).filter(isNotNullOrUndefined);
+    if (filterBoxes.length === 0) {
+      return;
+    }
+    context.save();
+    const { x2 } = filterBoxes[filterBoxes.length - 1];
+    context.fillStyle = headerSeparatorColor;
+    context.fillRect(
+      gridX + x2 - filterBarCollapsedHeight,
+      gridY - columnHeaderHeight * columnHeaderMaxDepth - filterBarCollapsedHeight,
+      filterBarCollapsedHeight,
+      columnHeaderHeight * (columnHeaderMaxDepth - 1)
+    );
+    filterBoxes.forEach(({ x2: columnRight, depth }) => {
+      this.drawCollapsedColumnSourceFilter(context, state, depth, columnRight);
+    });
+    context.restore();
+  }
+  // eslint-disable-next-line class-methods-use-this
+  drawCollapsedColumnSourceFilter(context, state, headerDepth, columnRight) {
+    if (columnRight <= 0) {
+      return;
+    }
+    const { metrics, theme, quickFilters, advancedFilters } = state;
+    const { columnHeaderHeight, gridY } = metrics;
+    const filterIndex = -headerDepth;
+    const quickFilter = quickFilters.get(filterIndex);
+    const advancedFilter = advancedFilters.get(filterIndex);
+    const {
+      filterBarCollapsedHeight,
+      filterBarActiveColor,
+      filterBarActiveBackgroundColor,
+      filterBarErrorColor
+    } = theme;
+    context.save();
+    const isFilterValid = irisGrid.IrisGridRenderer.isFilterValid(
+      advancedFilter,
+      quickFilter
+    );
+    if (filterBarActiveBackgroundColor != null && quickFilter == null && advancedFilter == null) {
+      context.fillStyle = filterBarActiveBackgroundColor;
+    } else if (filterBarActiveColor != null && isFilterValid) {
+      context.fillStyle = filterBarActiveColor;
+    } else if (filterBarErrorColor != null) {
+      context.fillStyle = filterBarErrorColor;
+    }
+    const x = columnRight - filterBarCollapsedHeight + 1;
+    const y = gridY - filterBarCollapsedHeight - columnHeaderHeight - columnHeaderHeight * headerDepth;
+    const rectWidth = filterBarCollapsedHeight - 1;
+    const rectHeight = columnHeaderHeight - 1;
+    context.fillRect(x, y, rectWidth, rectHeight);
+    context.restore();
+  }
+}
+function usePivotRenderer() {
+  return React.useMemo(() => new IrisGridPivotRenderer(), []);
 }
-const IrisGridPivotTheme = Object.freeze({
+const IrisGridPivotThemeColors = Object.freeze({
   columnSourceHeaderBackground: "var(--dh-color-grid-bg)",
   totalsHeaderBackground: "var(--dh-color-grid-bg)"
 });
-const log$2 = Log.module("@deephaven/js-plugin-pivot/PivotWidget");
-function PivotWidget({
-  fetch
-}) {
-  const dh = jsapiBootstrap.useApi();
-  const mouseHandlers = React.useMemo(
-    () => [(irisGrid2) => new PivotColumnGroupMouseHandler(irisGrid2)],
-    []
-  );
-  const renderer = React.useMemo(() => new IrisGridPivotRenderer(), []);
+function getIrisGridPivotTheme() {
+  return Object.freeze({
+    ...components.resolveCssVariablesInRecord(IrisGridPivotThemeColors),
+    columnSourceFilterMinWidth: 120
+  });
+}
+const log$1 = Log.module("@deephaven/js-plugin-pivot/usePivotTheme");
+function usePivotTheme() {
   const theme = components.useTheme();
-  const pivotTheme = React.useMemo(() => {
-    log$2.debug("Theme changed, updating pivot theme", theme);
-    return components.resolveCssVariablesInRecord(IrisGridPivotTheme);
+  return React.useMemo(() => {
+    log$1.debug("Theme changed, updating pivot theme", theme);
+    return getIrisGridPivotTheme();
   }, [theme]);
-  const pivotTableFetch = React.useCallback(
-    () => fetch().then((result) => {
-      log$2.debug("pivotWidget fetch result:", result);
-      if (!isCorePlusDh(dh)) {
-        throw new Error("CorePlus is not available");
-      }
-      const pivot = new dh.coreplus.pivot.PivotTable(result);
-      log$2.debug("Created pivot table:", pivot);
-      return pivot;
-    }),
-    [dh, fetch]
+}
+function usePivotMetricCalculatorFactory() {
+  return React.useMemo(
+    () => (...args) => new IrisGridPivotMetricCalculator(...args),
+    []
   );
-  const fetchResult = useIrisGridPivotModel(pivotTableFetch);
+}
+function PivotWidget({
+  fetch
+}) {
+  const pivotFetch = usePivotTableFetch(fetch);
+  const mouseHandlers = usePivotMouseHandlers();
+  const renderer = usePivotRenderer();
+  const pivotTheme = usePivotTheme();
+  const getPivotMetricCalculator = usePivotMetricCalculatorFactory();
+  const fetchResult = useIrisGridPivotModel(pivotFetch);
   if (fetchResult.status === "loading") {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(components.LoadingOverlay, { isLoading: true });
   }
@@ -11676,74 +12171,89 @@ function PivotWidget({
       model,
       mouseHandlers,
       renderer,
-      theme: pivotTheme
+      theme: pivotTheme,
+      getMetricCalculator: getPivotMetricCalculator
     }
   );
 }
-const log$1 = Log.module("@deephaven/js-plugin-pivot/useHydratePivotGrid");
-function useHydratePivotGrid(fetch, id, metadata) {
+const log = Log.module("@deephaven/js-plugin-pivot/useHydratePivotGrid");
+function useHydratePivotGrid(id, metadata) {
+  assertNotNull(metadata, "Missing Pivot metadata");
+  const objectFetch = jsapiBootstrap.useObjectFetch(metadata);
   const api = jsapiBootstrap.useApi();
   const loadPlugin = dashboardCorePlugins.useLoadTablePlugin();
-  const fetchTable = React.useCallback(
-    () => fetch().then((result) => {
-      log$1.debug("pivotWidget fetch result:", result);
-      if (!isCorePlusDh(api)) {
-        throw new Error("CorePlus is not available");
-      }
-      const pivot = new api.coreplus.pivot.PivotTable(result);
-      log$1.debug("Created pivot table:", pivot);
-      return pivot;
-    }),
-    [api, fetch]
-  );
-  const mouseHandlers = React.useMemo(
-    () => [(irisGrid2) => new PivotColumnGroupMouseHandler(irisGrid2)],
-    []
-  );
-  const renderer = React.useMemo(() => new IrisGridPivotRenderer(), []);
-  const theme = components.useTheme();
-  const pivotTheme = React.useMemo(() => {
-    log$1.debug("Theme changed, updating pivot theme", theme);
-    return components.resolveCssVariablesInRecord(IrisGridPivotTheme);
-  }, [theme]);
-  const hydratedProps = React.useMemo(
-    () => ({
+  const mouseHandlers = usePivotMouseHandlers();
+  const renderer = usePivotRenderer();
+  const theme = usePivotTheme();
+  const getMetricCalculator = usePivotMetricCalculatorFactory();
+  const { status } = objectFetch;
+  if (status === "loading") {
+    log.debug("Widget is loading");
+    return { status: "loading" };
+  }
+  if (status === "error") {
+    log.debug("Error fetching widget:", objectFetch.error);
+    return {
+      status: "error",
+      error: objectFetch.error
+    };
+  }
+  const { fetch } = objectFetch;
+  return {
+    status: "success",
+    props: {
       loadPlugin,
       localDashboardId: id,
-      makeModel: async () => {
-        const pivotWidget = await fetchTable();
-        return new IrisGridPivotModel(api, pivotWidget);
+      makeModel: async function makeModel() {
+        log.debug("Fetching pivot widget");
+        const widget = await fetch();
+        log.debug("Pivot fetch result:", widget);
+        if (!isCorePlusDh(api)) {
+          throw new Error("CorePlus is not available");
+        }
+        const pivotTable = new api.coreplus.pivot.PivotTable(widget);
+        log.debug("Created pivot table:", pivotTable);
+        return new IrisGridPivotModel(api, pivotTable);
       },
       metadata,
       mouseHandlers,
       renderer,
-      theme: pivotTheme
-    }),
-    [
-      api,
-      fetchTable,
-      id,
-      loadPlugin,
-      metadata,
-      mouseHandlers,
-      renderer,
-      pivotTheme
-    ]
-  );
-  return hydratedProps;
-}
-function PivotPanel(props) {
-  const { localDashboardId, fetch, metadata } = props;
-  const hydratedProps = useHydratePivotGrid(fetch, localDashboardId, metadata);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    dashboardCorePlugins.IrisGridPanel,
-    {
-      ...props,
-      ...hydratedProps
+      theme,
+      getMetricCalculator
     }
-  );
+  };
 }
-PivotPanel.COMPONENT = "PivotPanel";
+const PivotPanel = React.forwardRef(
+  // Unconnected IrisGridPanel type is not exported from dashboard-core-plugins
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (panelProps, ref) => {
+    const { localDashboardId, metadata, panelState, ...props } = panelProps;
+    const hydrateResult = useHydratePivotGrid(localDashboardId, metadata);
+    if (hydrateResult.status === "loading") {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(components.LoadingOverlay, { isLoading: true });
+    }
+    if (hydrateResult.status === "error") {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        components.LoadingOverlay,
+        {
+          errorMessage: getErrorMessage(hydrateResult.error),
+          isLoading: false
+        }
+      );
+    }
+    const { props: hydratedProps } = hydrateResult;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      dashboardCorePlugins.IrisGridPanel,
+      {
+        ref,
+        ...props,
+        ...hydratedProps,
+        panelState
+      }
+    );
+  }
+);
+PivotPanel.displayName = "PivotPanel";
 const PivotPlugin = {
   name: "@deephaven/js-plugin-pivot",
   type: plugin.PluginType.WIDGET_PLUGIN,
@@ -11753,62 +12263,15 @@ const PivotPlugin = {
   icon: icons.dhTable,
   title: "Pivot Table"
 };
-const urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let nanoid = (size = 21) => {
-  let id = "";
-  let bytes = crypto.getRandomValues(new Uint8Array(size |= 0));
-  while (size--) {
-    id += urlAlphabet[bytes[size] & 63];
-  }
-  return id;
-};
 const VARIABLE_TYPE = "PivotTable";
-const log = Log.module("@deephaven/js-plugin-pivot/DashboardPlugin");
-function DashboardPlugin({
-  id,
-  layout,
-  registerComponent
-}) {
-  const handlePanelOpen = React.useCallback(
-    ({
-      dragEvent,
-      fetch,
-      metadata = {},
-      panelId = nanoid(),
-      widget
-    }) => {
-      const { name, type } = widget;
-      if (type !== VARIABLE_TYPE) {
-        return;
-      }
-      log.info("Panel opened of type", type);
-      const config = {
-        type: "react-component",
-        component: PivotPanel.COMPONENT,
-        props: {
-          localDashboardId: id,
-          id: panelId,
-          metadata: {
-            ...metadata,
-            ...widget
-          },
-          fetch
-        },
-        title: name ?? void 0,
-        id: panelId
-      };
-      const { root: root2 } = layout;
-      dashboard.LayoutUtils.openComponent({ root: root2, config, dragEvent });
-    },
-    [id, layout]
-  );
-  React.useEffect(() => {
-    const cleanups = [registerComponent(PivotPanel.COMPONENT, PivotPanel)];
-    return () => {
-      cleanups.forEach((cleanup) => cleanup());
-    };
-  }, [registerComponent]);
-  dashboard.useListener(layout.eventHub, "PanelEvent.OPEN", handlePanelOpen);
+function DashboardPlugin(dashboardProps) {
+  assertNotNull(PivotPanel.displayName);
+  dashboard.useDashboardPanel({
+    dashboardProps,
+    componentName: PivotPanel.displayName,
+    supportedTypes: VARIABLE_TYPE,
+    component: PivotPanel
+  });
   return null;
 }
 exports.DashboardPlugin = DashboardPlugin;