@deephaven/js-plugin-pivot 0.2.1-dev.1002 → 0.3.1

package/dist/index.js

@@ -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)
@@ -1690,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) {
@@ -2349,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
@@ -2666,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,
@@ -2683,7 +2694,8 @@ class GridUtils {
       visibleColumns,
       allColumnXs,
       allColumnWidths,
-      columnHeaderMaxDepth
+      columnHeaderMaxDepth,
+      modelColumns
     } = metrics;
     var {
       allowColumnResize,
@@ -2694,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;
@@ -2710,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;
@@ -2735,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;
@@ -5874,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;
@@ -6963,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
@@ -7026,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() {
@@ -7257,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() {
@@ -7313,7 +7302,7 @@ class GridColumnSeparatorMouseHandler extends GridSeparatorMouseHandler$1 {
     var {
       modelColumns
     } = metrics;
-    var separatorIndex = GridUtils.getColumnSeparatorIndex(x, y, metrics, theme);
+    var separatorIndex = GridUtils.getColumnSeparatorIndex(x, y, metrics, theme, model);
     if (separatorIndex == null || depth == null) {
       return null;
     }
@@ -7341,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() {
@@ -7424,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() {
@@ -7801,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() {
@@ -8009,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() {
@@ -9020,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);
@@ -9030,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;
           }
@@ -9957,6 +9923,16 @@ class PivotColumnHeaderGroup 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;
@@ -9972,6 +9948,7 @@ function makeColumn({
   type,
   index,
   description,
+  isFilterable = false,
   isSortable = false,
   depth = ROOT_DEPTH,
   hasChildren = false,
@@ -9989,6 +9966,7 @@ function makeColumn({
     displayName,
     type,
     isPartitionColumn: false,
+    isFilterable,
     isSortable,
     isProxy,
     description,
@@ -10065,10 +10043,12 @@ function makePlaceholderColumn(valueSource, originalIndex, offset) {
 }
 function makeColumnFromSource(source, index) {
   const { name, type, isSortable, description } = source;
+  const isFilterable = true;
   return makeColumn({
     name,
     type,
     index,
+    isFilterable,
     isSortable,
     description,
     filter: source.filter.bind(source),
@@ -10192,7 +10172,7 @@ function makeColumnGroups(pivotTable, snapshotColumns, isRootColumnExpanded = tr
   );
   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;
@@ -10342,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
           );
@@ -10365,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,
@@ -10385,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 = {
@@ -10398,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
@@ -10419,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,
@@ -10453,9 +10433,12 @@ 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();
   }
   hydratePivotSort(sort) {
     const sourceIndex = this.getColumnIndexByName(sort.column.name);
@@ -10466,19 +10449,19 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     return this._sorts ?? EMPTY_ARRAY;
   }
   set sort(sorts) {
-    log$3.debug("Setting sorts on pivot table", 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$3.warn(`Cannot hydrate sort for source: ${s.column.name}`, s);
+        log$4.warn(`Cannot hydrate sort for source: ${s.column.name}`, s);
         return;
       }
       const index = this.getColumnIndexByName(sort.name);
       if (index == null) {
-        log$3.warn(`Cannot find index for source: ${s.column.name}`, s);
+        log$4.warn(`Cannot find index for source: ${s.column.name}`, s);
         return;
       }
       if (index < 0) {
@@ -10684,7 +10667,8 @@ 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) {
     var _a;
@@ -10740,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 }));
   }
@@ -10754,7 +10738,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     this.formattedStringData = [];
     this.viewportData = this.extractSnapshotData(snapshot);
     this.updatePendingExpandCollapseState();
-    log$3.debug2("Pivot updated", {
+    log$4.debug2("Pivot updated", {
       columns: this.columns,
       snapshot,
       snapshotColumns: this.snapshotColumns,
@@ -10769,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));
   }
@@ -10919,7 +10903,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     }
   }
   close() {
-    log$3.debug("close");
+    log$4.debug("close");
     this.pivotTable.close();
   }
   get formatter() {
@@ -11011,11 +10995,11 @@ 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) {
@@ -11040,7 +11024,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     return ((_a = this.columns[x]) == null ? void 0 : _a.isExpanded) ?? false;
   }
   setColumnExpanded(x, isExpanded, expandDescendants = false) {
-    log$3.debug2("setColumnExpanded", {
+    log$4.debug2("setColumnExpanded", {
       x,
       isExpanded,
       expandDescendants
@@ -11059,7 +11043,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     return depth;
   }
   textValueForCell(x, y) {
-    var _a;
+    var _a, _b;
     if (((_a = this.formattedStringData[x]) == null ? void 0 : _a[y]) === void 0) {
       const value2 = this.valueForCell(x, y);
       if (value2 === null) {
@@ -11069,10 +11053,22 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
         return void 0;
       }
       const column = this.columns[x];
+      let columnType = column.type;
+      let columnName = column.name;
+      const groupOffset = this.groupColumn == null ? 0 : 1;
+      if (groupOffset === 1 && x === 0 && y !== 0) {
+        const rowDepth = ((_b = this.row(y)) == null ? void 0 : _b.depth) ?? 2;
+        const keyCount = this.keyColumns.length;
+        if (rowDepth > 0 && rowDepth < keyCount) {
+          const sourceKeyColumn = this.keyColumns[rowDepth - 1];
+          columnType = sourceKeyColumn.type;
+          columnName = sourceKeyColumn.name;
+        }
+      }
       const hasCustomColumnFormat = this.getCachedCustomColumnFormatFlag(
         this.formatter,
-        column.name,
-        column.type
+        columnName,
+        columnType
       );
       let formatOverride;
       if (!hasCustomColumnFormat) {
@@ -11083,8 +11079,8 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
       }
       const text = this.displayString(
         value2,
-        column.type,
-        column.name,
+        columnType,
+        columnName,
         formatOverride
       );
       this.cacheFormattedValue(x, y, text);
@@ -11174,7 +11170,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
       this.virtualColumns.length,
       this.snapshotValueSources.length
     );
-    log$3.debug2("applyBufferedViewport", {
+    log$4.debug2("applyBufferedViewport", {
       top,
       bottom,
       columns,
@@ -11253,17 +11249,17 @@ function useIrisGridPivotModel(fetch) {
   }
   throw new Error("Invalid state");
 }
-const log$2 = Log.module("@deephaven/js-plugin-pivot/usePivotTableFetch");
+const log$3 = Log.module("@deephaven/js-plugin-pivot/usePivotTableFetch");
 function usePivotTableFetch(fetch) {
   const api = jsapiBootstrap.useApi();
   return React.useCallback(
     () => fetch().then((widget) => {
-      log$2.debug("Pivot fetch result:", 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$2.debug("Created pivot table:", pivotTable);
+      log$3.debug("Created pivot table:", pivotTable);
       return pivotTable;
     }),
     [api, fetch]
@@ -11321,41 +11317,276 @@ class PivotColumnGroupMouseHandler extends GridMouseHandler {
     return false;
   }
 }
-class PivotSortMouseHandler extends GridMouseHandler {
-  constructor(irisGrid2) {
-    super();
-    __publicField(this, "columnSource");
-    __publicField(this, "irisGrid");
-    this.columnSource = null;
-    this.irisGrid = irisGrid2;
+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 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;
+      }
+    ));
   }
   /**
-   * Get the column source from a grid point
-   * @param gridPoint The grid point to check
-   * @returns The column source index if the grid point is in a column source header, else null
+   * Resets column width caches if filter bar visibility has changed
+   * to adjust for the minimum filter box width.
+   * @param state The current IrisGridPivotMetricState
    */
-  getColumnSourceHeaderFromGridPoint(gridPoint) {
-    const { column, row, columnHeaderDepth } = gridPoint;
-    const { model } = this.irisGrid.props;
-    assertNotNull(model);
-    const sourceIndex = columnHeaderDepth != null ? -columnHeaderDepth : null;
-    if (column == null || row !== null || columnHeaderDepth == null) {
+  resetHeaderWidthsIfFilterBarChanged(state) {
+    const { isFilterBarShown } = state;
+    if (this.cachedIsFilterBarShown !== isFilterBarShown) {
+      this.resetCalculatedHeaderGroupWidths();
+    }
+    this.cachedIsFilterBarShown = isFilterBarShown;
+  }
+  getColumnHeaderGroupWidth(modelColumn, depth, state, maxColumnWidth) {
+    const baseWidth = super.getColumnHeaderGroupWidth(
+      modelColumn,
+      depth,
+      state,
+      maxColumnWidth
+    );
+    const { isFilterBarShown, model } = state;
+    if (!isFilterBarShown) {
+      return baseWidth;
+    }
+    const group = model.getColumnHeaderGroup(modelColumn, depth);
+    if (!isPivotColumnHeaderGroup(group) || !group.isKeyColumnGroup) {
+      return baseWidth;
+    }
+    const { theme } = state;
+    const { columnSourceFilterMinWidth } = theme;
+    return baseWidth + columnSourceFilterMinWidth;
+  }
+  /**
+   * 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 group = model.getColumnHeaderGroup(column, columnHeaderDepth);
-    if (sourceIndex != null && sourceIndex < 0 && isIrisGridPivotModel(model) && model.isColumnSortable(sourceIndex) && isPivotColumnHeaderGroup(group) && group.isKeyColumnGroup) {
-      return sourceIndex;
+    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) {
-    this.columnSource = this.getColumnSourceHeaderFromGridPoint(gridPoint);
+    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 columnSource = this.getColumnSourceHeaderFromGridPoint(gridPoint);
-    if (columnSource != null && columnSource === this.columnSource) {
+    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;
@@ -11363,10 +11594,55 @@ class PivotSortMouseHandler extends GridMouseHandler {
     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)
     ],
     []
@@ -11377,23 +11653,19 @@ function getColumnGroupName(model, modelColumn, depth) {
   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 { metrics, model, theme } = state;
+    const { isFilterBarShown, metrics, model, theme } = state;
     if (!isIrisGridPivotModel(model)) {
       throw new Error("Unsupported model type");
     }
-    const {
-      modelColumns,
-      allColumnXs,
-      gridX,
-      userColumnWidths,
-      allColumnWidths,
-      movedColumns
-    } = metrics;
-    const { columnHeaderHeight, columnWidth } = theme;
+    const { modelColumns } = metrics;
+    const { columnHeaderHeight } = theme;
     const { columnHeaderMaxDepth } = model;
     const { minX, maxX } = bounds;
-    const visibleWidth = maxX - minX;
     if (columnHeaderMaxDepth === 0) {
       return;
     }
@@ -11413,71 +11685,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 = model.colorForColumnHeader(
           modelColumn,
           depth,
           theme
         );
-        const headerGroup = model.getColumnHeaderGroup(modelColumn, depth ?? 0);
+        const headerGroup = model.getColumnHeaderGroup(modelColumn, depth);
         const isExpandable = isPivotColumnHeaderGroup(headerGroup) && headerGroup.isExpandable;
         const isExpanded = isPivotColumnHeaderGroup(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 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,
-            jsapiUtils.TableUtils.getSortForColumn(model.sort, columnGroupName)
-          );
         }
         columnIndex += 1;
       }
     }
     context.restore();
   }
-  drawColumnHeader(context, state, columnText, columnX, columnWidth, style, bounds, isExpandable = false, isExpanded = false, sort = null) {
+  drawColumnHeader(context, state, columnText, columnX, columnWidth, style, bounds, isExpandable = false, isExpanded = false, sort = null, headerRightPadding) {
     if (columnWidth <= 0) {
       return;
     }
@@ -11493,7 +11755,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
@@ -11539,7 +11801,7 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
     const renderText = this.textCellRenderer.getCachedTruncatedString(
       context,
       columnText,
-      maxWidth,
+      maxLabelWidth,
       fontWidthLower,
       fontWidthUpper
     );
@@ -11549,15 +11811,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;
@@ -11622,9 +11884,13 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
     );
   }
   drawColumnSourceSortIndicator(context, state, sort, columnText, columnX, columnWidth, bounds) {
-    const { metrics, theme } = state;
-    const { gridX, columnHeaderHeight } = metrics;
-    const { headerHorizontalPadding, iconSize: themeIconSize } = theme;
+    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;
@@ -11633,12 +11899,15 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
     if (!icon) {
       return;
     }
-    const textWidth = this.getCachedHeaderWidth(context, columnText);
-    const textRight = gridX + columnX + textWidth + headerHorizontalPadding;
-    let { maxX } = bounds;
-    maxX -= headerHorizontalPadding;
-    const defaultX = gridX + columnX + columnWidth - iconSize;
-    const x = textRight > maxX ? textRight + 1 : Math.min(maxX, defaultX);
+    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;
@@ -11646,6 +11915,218 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
     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(), []);
@@ -11656,7 +12137,8 @@ const IrisGridPivotThemeColors = Object.freeze({
 });
 function getIrisGridPivotTheme() {
   return Object.freeze({
-    ...components.resolveCssVariablesInRecord(IrisGridPivotThemeColors)
+    ...components.resolveCssVariablesInRecord(IrisGridPivotThemeColors),
+    columnSourceFilterMinWidth: 120
   });
 }
 const log$1 = Log.module("@deephaven/js-plugin-pivot/usePivotTheme");
@@ -11667,6 +12149,12 @@ function usePivotTheme() {
     return getIrisGridPivotTheme();
   }, [theme]);
 }
+function usePivotMetricCalculatorFactory() {
+  return React.useMemo(
+    () => (...args) => new IrisGridPivotMetricCalculator(...args),
+    []
+  );
+}
 function PivotWidget({
   fetch
 }) {
@@ -11674,6 +12162,7 @@ function PivotWidget({
   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 });
@@ -11694,7 +12183,8 @@ function PivotWidget({
       model,
       mouseHandlers,
       renderer,
-      theme: pivotTheme
+      theme: pivotTheme,
+      getMetricCalculator: getPivotMetricCalculator
     }
   );
 }
@@ -11707,6 +12197,7 @@ function useHydratePivotGrid(id, metadata) {
   const mouseHandlers = usePivotMouseHandlers();
   const renderer = usePivotRenderer();
   const theme = usePivotTheme();
+  const getMetricCalculator = usePivotMetricCalculatorFactory();
   const { status } = objectFetch;
   if (status === "loading") {
     log.debug("Widget is loading");
@@ -11739,7 +12230,8 @@ function useHydratePivotGrid(id, metadata) {
       metadata,
       mouseHandlers,
       renderer,
-      theme
+      theme,
+      getMetricCalculator
     }
   };
 }