@deephaven/grid 0.15.1 → 0.15.2

package/dist/GridRenderer.js

@@ -1,11 +1,13 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+import clamp from 'lodash.clamp';
 import memoizeClear from "./memoizeClear.js";
 import GridUtils from "./GridUtils.js";
 import GridColorUtils from "./GridColorUtils.js";
 import { isExpandableGridModel } from "./ExpandableGridModel.js";
 import { getOrThrow } from "./GridMetricCalculator.js";
 import { isEditableGridModel } from "./EditableGridModel.js";
+import GridColumnSeparatorMouseHandler from "./mouse-handlers/GridColumnSeparatorMouseHandler.js";
 
 /* eslint react/destructuring-assignment: "off" */
 
@@ -1134,7 +1136,8 @@ export class GridRenderer {
       theme,
       metrics,
       draggingColumnSeparator,
-      isDragging
+      isDragging,
+      model
     } = state;
     var {
       columnHeaderHeight,
@@ -1144,7 +1147,11 @@ export class GridRenderer {
       visibleColumns,
       visibleColumnWidths,
       visibleColumnXs,
-      floatingLeftColumnCount
+      floatingLeftColumnCount,
+      floatingLeftWidth,
+      floatingRightWidth,
+      modelColumns,
+      columnHeaderMaxDepth
     } = metrics;
 
     if (columnHeaderHeight <= 0) {
@@ -1152,168 +1159,269 @@ export class GridRenderer {
     }
 
     var {
-      headerBackgroundColor,
-      headerColor,
       headerHiddenSeparatorSize,
       headerHiddenSeparatorHoverColor,
       headerSeparatorColor,
       headerSeparatorHoverColor
     } = theme;
     var hiddenSeparatorHeight = columnHeaderHeight * 0.5;
-    var hiddenY = columnHeaderHeight * 0.5 - hiddenSeparatorHeight * 0.5;
+    var hiddenY = columnHeaderHeight * (columnHeaderMaxDepth - 1) + columnHeaderHeight * 0.5 - hiddenSeparatorHeight * 0.5;
     var containsFrozenColumns = floatingLeftColumnCount > 0;
-    var floatingLeftColumnsWidth = 0;
     context.save();
-    context.beginPath(); // Fill in the background
-
-    context.fillStyle = headerBackgroundColor;
-    context.fillRect(0, 0, width, columnHeaderHeight);
-    context.fillStyle = headerColor; // Visible columns.
+    this.drawColumnHeadersForRange(context, state, [visibleColumns[0], visibleColumns[visibleColumns.length - 1]], {
+      minX: gridX + floatingLeftWidth,
+      maxX: width - floatingRightWidth
+    });
 
-    for (var i = 0; i < visibleColumns.length; i += 1) {
-      var column = visibleColumns[i];
-      var columnWidth = getOrThrow(visibleColumnWidths, column);
-      var x = getOrThrow(visibleColumnXs, column) + gridX;
-      this.drawColumnHeader(context, state, column, x, columnWidth);
+    if (containsFrozenColumns) {
+      this.drawColumnHeadersForRange(context, state, [floatingColumns[0], floatingColumns[floatingColumns.length - 1]], {
+        minX: gridX,
+        maxX: gridX + floatingLeftWidth
+      });
     }
 
-    if (containsFrozenColumns) {
-      floatingLeftColumnsWidth = getOrThrow(visibleColumnXs, floatingLeftColumnCount - 1) + getOrThrow(visibleColumnWidths, floatingLeftColumnCount - 1); // Frozen columns' background
+    if (headerSeparatorColor) {
+      context.strokeStyle = headerSeparatorColor;
+      var hiddenColumns = [...visibleColumnWidths.entries()].filter(_ref => {
+        var [_, w] = _ref;
+        return w === 0;
+      }).map(_ref2 => {
+        var [index] = _ref2;
+        return index;
+      }); // Now draw the hidden column separator boxes
 
-      context.fillStyle = headerBackgroundColor;
-      context.fillRect(gridX, 0, floatingLeftColumnsWidth, columnHeaderHeight); // Frozen columns.
+      context.beginPath();
+      context.fillStyle = headerSeparatorColor;
 
-      context.fillStyle = headerColor;
+      for (var i = 0; i < hiddenColumns.length; i += 1) {
+        var column = hiddenColumns[i];
+        var columnX = getOrThrow(visibleColumnXs, column);
+        var columnWidth = getOrThrow(visibleColumnWidths, column);
+        var minX = gridX + columnX + columnWidth + 0.5 - headerHiddenSeparatorSize * 0.5;
+        context.rect(minX, hiddenY, headerHiddenSeparatorSize, hiddenSeparatorHeight);
+      }
 
-      for (var _i5 = 0; _i5 < floatingColumns.length; _i5 += 1) {
-        var _column = floatingColumns[_i5];
+      context.fill();
+    }
 
-        var _columnWidth = getOrThrow(visibleColumnWidths, _column);
+    if (headerSeparatorHoverColor) {
+      var {
+        index: highlightedSeparator,
+        depth
+      } = draggingColumnSeparator !== null && draggingColumnSeparator !== void 0 ? draggingColumnSeparator : {};
+
+      if (highlightedSeparator == null && mouseX != null && mouseY != null) {
+        var separator = GridColumnSeparatorMouseHandler.getColumnSeparator(GridUtils.getGridPointFromXY(mouseX, mouseY, metrics), metrics, model, theme);
+        highlightedSeparator = separator === null || separator === void 0 ? void 0 : separator.index;
+        depth = separator === null || separator === void 0 ? void 0 : separator.depth;
+      }
 
-        var _x4 = getOrThrow(visibleColumnXs, _column) + gridX;
+      var shouldDrawSeparator;
 
-        this.drawColumnHeader(context, state, _column, _x4, _columnWidth);
+      if (highlightedSeparator == null) {
+        shouldDrawSeparator = false;
+      } else {
+        var columnIndex = modelColumns.get(highlightedSeparator);
+        var nextColumnIndex = modelColumns.get(highlightedSeparator + 1);
+
+        if (columnIndex == null || nextColumnIndex == null) {
+          shouldDrawSeparator = false;
+        } else {
+          shouldDrawSeparator = model.textForColumnHeader(columnIndex, depth) !== model.textForColumnHeader(nextColumnIndex, depth);
+        }
       }
-    } // Draw the separators, visible columns then floating columns.
 
+      if (shouldDrawSeparator && highlightedSeparator != null && depth != null && (!isDragging || draggingColumnSeparator != null)) {
+        context.strokeStyle = headerSeparatorHoverColor;
 
-    if (headerSeparatorColor) {
-      context.strokeStyle = headerSeparatorColor;
-      context.beginPath();
-      var hiddenColumns = []; // Draw visible column separators.
+        var _columnX = getOrThrow(visibleColumnXs, highlightedSeparator);
 
-      var isPreviousColumnHidden = false;
+        var _columnWidth = getOrThrow(visibleColumnWidths, highlightedSeparator);
 
-      for (var _i6 = 0; _i6 < visibleColumns.length; _i6 += 1) {
-        var _column2 = visibleColumns[_i6];
-        var columnX = getOrThrow(visibleColumnXs, _column2);
+        var x = gridX + _columnX + _columnWidth + 0.5;
+        var visibleColumnIndex = visibleColumns.indexOf(highlightedSeparator);
+        var nextColumn = visibleColumnIndex < visibleColumns.length - 1 ? visibleColumns[visibleColumnIndex + 1] : null;
+        var nextColumnWidth = nextColumn != null ? visibleColumnWidths.get(nextColumn) : null;
+        var isColumnHidden = _columnWidth === 0;
+        var isNextColumnHidden = nextColumnWidth != null && nextColumnWidth === 0;
 
-        var _columnWidth2 = getOrThrow(visibleColumnWidths, _column2);
+        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);
+        } // column seperator hover line
 
-        if (!(columnX < floatingLeftColumnsWidth - _columnWidth2)) {
-          if (_columnWidth2 > 0) {
-            var _x5 = gridX + columnX + _columnWidth2 + 0.5;
 
-            context.moveTo(_x5, 0);
-            context.lineTo(_x5, columnHeaderHeight - 0.5);
-            isPreviousColumnHidden = false;
-          } else if (!isPreviousColumnHidden) {
-            isPreviousColumnHidden = true;
-            hiddenColumns.push(_column2);
-          }
-        }
-      } // Draw floating column separators.
+        context.beginPath();
+        context.moveTo(x, (columnHeaderMaxDepth - depth - 1) * columnHeaderHeight);
+        context.lineTo(x, (columnHeaderMaxDepth - depth) * columnHeaderHeight - 1);
+        context.stroke();
+      }
+    }
 
+    context.restore();
+  }
 
-      isPreviousColumnHidden = false;
+  drawColumnHeadersForRange(context, state, range, bounds) {
+    var {
+      model
+    } = state;
+    var {
+      columnHeaderMaxDepth
+    } = model;
 
-      for (var _i7 = 0; _i7 < floatingColumns.length; _i7 += 1) {
-        var _column3 = floatingColumns[_i7];
+    if (columnHeaderMaxDepth === 0) {
+      return;
+    }
 
-        var _columnX = getOrThrow(visibleColumnXs, _column3);
+    for (var d = 0; d <= columnHeaderMaxDepth; d += 1) {
+      this.drawColumnHeadersAtDepth(context, state, range, bounds, d);
+    }
+  }
 
-        var _columnWidth3 = getOrThrow(visibleColumnWidths, _column3);
+  drawColumnHeadersAtDepth(context, state, range, bounds, depth) {
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    var {
+      modelColumns,
+      visibleColumnXs,
+      gridX,
+      calculatedColumnWidths,
+      userColumnWidths,
+      visibleColumnWidths,
+      movedColumns
+    } = metrics;
+    var {
+      headerBackgroundColor,
+      headerColor,
+      headerSeparatorColor,
+      columnHeaderHeight,
+      columnWidth
+    } = theme;
+    var {
+      columnHeaderMaxDepth
+    } = model;
+    var {
+      minX,
+      maxX
+    } = bounds;
+    var visibleWidth = maxX - minX;
 
-        if (_columnWidth3 > 0) {
-          var _x6 = gridX + _columnX + _columnWidth3 + 0.5;
+    if (columnHeaderMaxDepth === 0) {
+      return;
+    }
 
-          context.moveTo(_x6, 0);
-          context.lineTo(_x6, columnHeaderHeight - 0.5);
-          isPreviousColumnHidden = false;
-        } else if (!isPreviousColumnHidden) {
-          isPreviousColumnHidden = true;
-          hiddenColumns.push(_column3);
-        }
-      } // Bottom Border, should be interior to the header height
+    var startIndex = range[0];
+    var endIndex = range[1];
+    context.save();
+    context.translate(0, (columnHeaderMaxDepth - depth - 1) * columnHeaderHeight);
 
+    if (depth === 0) {
+      // Make sure base column header background always goes to the right edge
+      this.drawColumnHeader(context, state, '', minX, maxX, {
+        backgroundColor: headerBackgroundColor,
+        separatorColor: headerSeparatorColor
+      }); // Draw base column headers
 
-      context.moveTo(0, columnHeaderHeight - 0.5);
-      context.lineTo(width, columnHeaderHeight - 0.5);
-      context.stroke(); // Now draw the hidden column separator boxes
+      for (var i = startIndex; i <= endIndex; i += 1) {
+        this.drawColumnHeaderAtIndex(context, state, i, bounds);
+      }
+    } // Draw column header group
 
-      context.beginPath();
-      context.fillStyle = headerSeparatorColor;
 
-      for (var _i8 = 0; _i8 < hiddenColumns.length; _i8 += 1) {
-        var _column4 = hiddenColumns[_i8];
+    if (depth > 0) {
+      var columnIndex = startIndex;
 
-        var _columnX2 = getOrThrow(visibleColumnXs, _column4);
+      while (columnIndex <= endIndex) {
+        var modelColumn = getOrThrow(modelColumns, columnIndex);
+        var columnGroupName = model.textForColumnHeader(modelColumn, depth);
+        var columnGroupColor = model.colorForColumnHeader(modelColumn, depth);
+        var columnGroupLeft = getOrThrow(visibleColumnXs, columnIndex) + gridX;
+        var columnGroupRight = columnGroupLeft + getOrThrow(visibleColumnWidths, columnIndex);
 
-        var _columnWidth4 = getOrThrow(visibleColumnWidths, _column4);
+        if (columnGroupName != null) {
+          // Need to determine if the column group is at least the width of the bounds
+          // And if the left/right of the group extend past the bounds
+          // The group will be drawn as if it were a column with a max width of the bounds width
+          var prevColumnIndex = columnIndex - 1;
 
-        var minX = gridX + _columnX2 + _columnWidth4 + 0.5 - headerHiddenSeparatorSize * 0.5;
-        context.rect(minX, hiddenY, headerHiddenSeparatorSize, hiddenSeparatorHeight);
-      }
+          while (columnGroupRight - columnGroupLeft < visibleWidth || columnGroupLeft > minX) {
+            var _modelColumns$get, _ref3, _userColumnWidths$get;
 
-      context.fill();
-    }
+            var prevModelIndex = (_modelColumns$get = modelColumns.get(prevColumnIndex)) !== null && _modelColumns$get !== void 0 ? _modelColumns$get : GridUtils.getModelIndex(prevColumnIndex, movedColumns);
 
-    if (headerSeparatorHoverColor) {
-      var highlightedSeparator = draggingColumnSeparator;
+            if (prevModelIndex == null || model.textForColumnHeader(prevModelIndex, depth) !== columnGroupName) {
+              // Previous column not in the same group
+              break;
+            } // Use this instead of visibleColumnWidths b/c the columns may be off screen
 
-      if (highlightedSeparator == null && mouseX != null && mouseY != null) {
-        highlightedSeparator = GridUtils.getColumnSeparatorIndex(mouseX, mouseY, metrics, theme);
-      }
 
-      if (highlightedSeparator != null && (!isDragging || draggingColumnSeparator != null)) {
-        context.strokeStyle = headerSeparatorHoverColor;
+            var prevColumnWidth = (_ref3 = (_userColumnWidths$get = userColumnWidths.get(prevModelIndex)) !== null && _userColumnWidths$get !== void 0 ? _userColumnWidths$get : calculatedColumnWidths.get(prevModelIndex)) !== null && _ref3 !== void 0 ? _ref3 : columnWidth;
+            columnGroupLeft -= prevColumnWidth;
+            prevColumnIndex -= 1;
+          }
 
-        var _columnX3 = getOrThrow(visibleColumnXs, highlightedSeparator);
+          var nextColumnIndex = columnIndex + 1;
 
-        var _columnWidth5 = getOrThrow(visibleColumnWidths, highlightedSeparator);
+          while (columnGroupRight - columnGroupLeft < visibleWidth || columnGroupRight < maxX) {
+            var _modelColumns$get2, _ref4, _userColumnWidths$get2;
 
-        var _x7 = gridX + _columnX3 + _columnWidth5 + 0.5;
+            var nextModelIndex = (_modelColumns$get2 = modelColumns.get(nextColumnIndex)) !== null && _modelColumns$get2 !== void 0 ? _modelColumns$get2 : GridUtils.getModelIndex(nextColumnIndex, movedColumns);
 
-        var visibleColumnIndex = visibleColumns.indexOf(highlightedSeparator);
-        var nextColumn = visibleColumnIndex < visibleColumns.length - 1 ? visibleColumns[visibleColumnIndex + 1] : null;
-        var nextColumnWidth = nextColumn != null ? visibleColumnWidths.get(nextColumn) : null;
-        var isColumnHidden = _columnWidth5 === 0;
-        var isNextColumnHidden = nextColumnWidth != null && nextColumnWidth === 0;
+            if (model.textForColumnHeader(nextModelIndex, depth) !== columnGroupName) {
+              // Next column not in the same group
+              break;
+            } // Use this instead of visibleColumnWidths b/c the columns may be off screen
 
-        if (isColumnHidden) {
-          context.strokeStyle = headerHiddenSeparatorHoverColor;
-          context.fillStyle = headerHiddenSeparatorHoverColor;
-          context.fillRect(_x7, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
-        } else if (isNextColumnHidden) {
-          context.fillStyle = headerSeparatorHoverColor;
-          context.fillRect(_x7 - headerHiddenSeparatorSize * 0.5, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
-        } // column seperator hover line
 
+            var nextColumnWidth = (_ref4 = (_userColumnWidths$get2 = userColumnWidths.get(nextModelIndex)) !== null && _userColumnWidths$get2 !== void 0 ? _userColumnWidths$get2 : calculatedColumnWidths.get(nextModelIndex)) !== null && _ref4 !== void 0 ? _ref4 : columnWidth;
+            columnGroupRight += nextColumnWidth;
+            nextColumnIndex += 1;
+          } // Set column index to end of the current group
 
-        context.beginPath();
-        context.moveTo(_x7, 0);
-        context.lineTo(_x7, columnHeaderHeight - 1);
-        context.stroke();
+
+          columnIndex = nextColumnIndex - 1;
+          var isFullWidth = columnGroupRight - columnGroupLeft >= visibleWidth;
+          var x = columnGroupLeft;
+
+          if (isFullWidth) {
+            if (columnGroupRight < maxX) {
+              x = columnGroupRight - visibleWidth;
+            } else if (columnGroupLeft < minX) {
+              x = minX;
+            }
+          }
+
+          this.drawColumnHeader(context, state, columnGroupName, x, Math.min(columnGroupRight - columnGroupLeft, visibleWidth), {
+            backgroundColor: columnGroupColor !== null && columnGroupColor !== void 0 ? columnGroupColor : headerBackgroundColor,
+            textColor: headerColor,
+            separatorColor: headerSeparatorColor
+          }, bounds);
+        }
+
+        columnIndex += 1;
       }
     }
 
     context.restore();
   }
+  /**
+   * Draws the column header for the given visible index
+   * @param context Canvas context
+   * @param state Grid render state
+   * @param index Visible index of the column header to draw
+   * @param bounds The horizontal bounds the header can be drawn in
+   */
 
-  drawColumnHeader(context, state, column, columnX, columnWidth) {
-    if (columnWidth <= 0) {
-      return;
-    }
+
+  drawColumnHeaderAtIndex(context, state, index, bounds) {
+    var _model$colorForColumn;
 
     var {
       metrics,
@@ -1321,44 +1429,131 @@ export class GridRenderer {
       theme
     } = state;
     var {
-      modelColumns
+      modelColumns,
+      visibleColumnWidths,
+      visibleColumnXs,
+      gridX
     } = metrics;
-    var modelColumn = getOrThrow(modelColumns, column);
+    var width = getOrThrow(visibleColumnWidths, index);
+    var x = getOrThrow(visibleColumnXs, index) + gridX;
+    var modelColumn = getOrThrow(modelColumns, index);
     var text = model.textForColumnHeader(modelColumn);
     var {
-      headerHorizontalPadding
+      headerBackgroundColor,
+      headerColor,
+      headerSeparatorColor
     } = theme;
+
+    if (text == null) {
+      return;
+    }
+
+    this.drawColumnHeader(context, state, text, x, width, {
+      backgroundColor: (_model$colorForColumn = model.colorForColumnHeader(modelColumn)) !== null && _model$colorForColumn !== void 0 ? _model$colorForColumn : headerBackgroundColor,
+      textColor: headerColor,
+      separatorColor: headerSeparatorColor
+    }, bounds);
+  }
+
+  drawColumnHeader(context, state, columnText, columnX, columnWidth, style, bounds) {
+    if (columnWidth <= 0) {
+      return;
+    }
+
     var {
-      columnHeaderHeight,
-      fontWidths
+      metrics,
+      theme
+    } = state;
+    var {
+      headerHorizontalPadding,
+      columnHeaderHeight
+    } = theme;
+    var {
+      fontWidths,
+      width
     } = metrics;
     var fontWidth = fontWidths.get(context.font) || GridRenderer.DEFAULT_FONT_WIDTH;
-    var maxLength = (columnWidth - headerHorizontalPadding * 2) / fontWidth;
+    var maxWidth = columnWidth - headerHorizontalPadding * 2;
+    var maxLength = maxWidth / fontWidth;
+    var {
+      backgroundColor,
+      textColor = '#ffffff',
+      separatorColor
+    } = style !== null && style !== void 0 ? style : {};
+    var {
+      minX = 0,
+      maxX = width
+    } = bounds !== null && bounds !== void 0 ? bounds : {};
+    context.save();
+    context.rect(minX, 0, maxX - minX, columnHeaderHeight);
+    context.clip(); // Fill background color if specified
 
-    if (maxLength <= 0) {
-      return;
+    if (backgroundColor) {
+      context.fillStyle = backgroundColor;
+      context.fillRect(columnX, 0, columnWidth, columnHeaderHeight);
+    }
+
+    if (separatorColor) {
+      context.strokeStyle = separatorColor;
+      context.beginPath(); // Don't draw left separator if column touches the left edge
+
+      if (columnX > 0) {
+        context.moveTo(columnX + 0.5, 0);
+        context.lineTo(columnX + 0.5, columnHeaderHeight);
+      }
+
+      context.moveTo(columnX + columnWidth + 0.5, 0);
+      context.lineTo(columnX + columnWidth + 0.5, columnHeaderHeight); // Bottom Border, should be interior to the header height
+
+      context.moveTo(columnX, columnHeaderHeight - 0.5);
+      context.lineTo(columnX + columnWidth, columnHeaderHeight - 0.5);
+      context.stroke();
     }
 
-    context.save();
     context.beginPath();
     context.rect(columnX, 0, columnWidth, columnHeaderHeight);
     context.clip();
+    context.fillStyle = textColor;
+    var renderText = columnText;
 
-    if (text.length > maxLength) {
-      text = "".concat(text.substring(0, maxLength - 1), "\u2026");
-      var x = columnX + headerHorizontalPadding;
-      var y = columnHeaderHeight * 0.5;
-      context.textAlign = 'left';
-      context.fillText(text, x, y);
-    } else {
-      var _x8 = columnX + columnWidth * 0.5;
-
-      var _y5 = columnHeaderHeight * 0.5;
-
-      context.textAlign = 'center';
-      context.fillText(text, _x8, _y5);
+    if (maxLength <= 0) {
+      renderText = '';
+    } else if (renderText.length > maxLength) {
+      renderText = "".concat(renderText.substring(0, maxLength - 1), "\u2026");
+    }
+
+    var textWidth = renderText.length * fontWidth;
+    var x = columnX + columnWidth * 0.5;
+    var y = columnHeaderHeight * 0.5;
+    minX += headerHorizontalPadding;
+    maxX -= headerHorizontalPadding;
+    var columnLeft = columnX + headerHorizontalPadding;
+    var visibleLeft = clamp(columnLeft, minX, maxX);
+    var columnRight = columnX + columnWidth - headerHorizontalPadding;
+    var visibleRight = clamp(columnRight, minX, maxX);
+    var visibleWidth = visibleRight - visibleLeft;
+    var isBeyondLeft = x - textWidth * 0.5 < minX;
+    var isBeyondRight = x + textWidth * 0.5 > maxX;
+
+    if (isBeyondLeft) {
+      // Column name would be off the left side of the canvas
+      if (textWidth < visibleWidth) {
+        // Can render the entire text in the visible space. Stick to left
+        x = minX + textWidth * 0.5;
+      } else {
+        x = columnRight - textWidth * 0.5;
+      }
+    } else if (isBeyondRight) {
+      if (textWidth < visibleWidth) {
+        // Can render the entire text in the visible space. Stick to right
+        x = maxX - textWidth * 0.5;
+      } else {
+        x = columnLeft + textWidth * 0.5;
+      }
     }
 
+    context.textAlign = 'center';
+    context.fillText(renderText, x, y);
     context.restore();
   }
 
@@ -1431,8 +1626,8 @@ export class GridRenderer {
       context.beginPath();
       context.fillStyle = headerSeparatorColor;
 
-      for (var _i9 = 0; _i9 < hiddenRows.length; _i9 += 1) {
-        var _row4 = hiddenRows[_i9];
+      for (var _i5 = 0; _i5 < hiddenRows.length; _i5 += 1) {
+        var _row4 = hiddenRows[_i5];
 
         var _rowY = getOrThrow(visibleRowYs, _row4);
 
@@ -1446,7 +1641,9 @@ export class GridRenderer {
     }
 
     if (headerSeparatorHoverColor) {
-      var highlightedSeparator = draggingRowSeparator;
+      var {
+        index: highlightedSeparator = null
+      } = draggingRowSeparator !== null && draggingRowSeparator !== void 0 ? draggingRowSeparator : {};
 
       if (highlightedSeparator == null && mouseX != null && mouseY != null) {
         highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
@@ -1459,7 +1656,7 @@ export class GridRenderer {
 
         var _rowHeight2 = getOrThrow(visibleRowHeights, highlightedSeparator);
 
-        var _y6 = gridY + _rowY2 + _rowHeight2 + 0.5;
+        var _y5 = gridY + _rowY2 + _rowHeight2 + 0.5;
 
         var visibleRowIndex = visibleRows.indexOf(highlightedSeparator);
         var nextRow = visibleRowIndex < visibleRows.length - 1 ? visibleRows[visibleRowIndex + 1] : null;
@@ -1470,15 +1667,15 @@ export class GridRenderer {
         if (isRowHidden) {
           context.strokeStyle = headerHiddenSeparatorHoverColor;
           context.fillStyle = headerHiddenSeparatorHoverColor;
-          context.fillRect(hiddenX, _y6, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+          context.fillRect(hiddenX, _y5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
         } else if (isNextRowHidden) {
           context.fillStyle = headerSeparatorHoverColor;
-          context.fillRect(hiddenX, _y6 - headerHiddenSeparatorSize * 0.5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+          context.fillRect(hiddenX, _y5 - headerHiddenSeparatorSize * 0.5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
         }
 
         context.beginPath();
-        context.moveTo(0.5, _y6);
-        context.lineTo(rowHeaderWidth + 0.5, _y6);
+        context.moveTo(0.5, _y5);
+        context.lineTo(rowHeaderWidth + 0.5, _y5);
         context.stroke();
       }
     } // Fill in the text
@@ -1490,14 +1687,14 @@ export class GridRenderer {
     context.fillStyle = headerColor;
     context.textAlign = 'right';
 
-    for (var _i10 = 0; _i10 < visibleRows.length; _i10 += 1) {
-      var _row5 = visibleRows[_i10];
+    for (var _i6 = 0; _i6 < visibleRows.length; _i6 += 1) {
+      var _row5 = visibleRows[_i6];
 
       var _rowHeight3 = getOrThrow(visibleRowHeights, _row5);
 
-      var _y7 = getOrThrow(visibleRowYs, _row5) + gridY;
+      var _y6 = getOrThrow(visibleRowYs, _row5) + gridY;
 
-      this.drawRowHeader(context, state, _row5, _y7, _rowHeight3);
+      this.drawRowHeader(context, state, _row5, _y6, _rowHeight3);
     }
 
     context.restore();
@@ -1600,8 +1797,8 @@ export class GridRenderer {
       context.beginPath();
       context.fillStyle = headerSeparatorColor;
 
-      for (var _i11 = 0; _i11 < hiddenRows.length; _i11 += 1) {
-        var _row6 = hiddenRows[_i11];
+      for (var _i7 = 0; _i7 < hiddenRows.length; _i7 += 1) {
+        var _row6 = hiddenRows[_i7];
 
         var _rowY3 = getOrThrow(visibleRowYs, _row6);
 
@@ -1615,7 +1812,9 @@ export class GridRenderer {
     }
 
     if (headerSeparatorHoverColor) {
-      var highlightedSeparator = draggingRowSeparator;
+      var {
+        index: highlightedSeparator = null
+      } = draggingRowSeparator !== null && draggingRowSeparator !== void 0 ? draggingRowSeparator : {};
 
       if (highlightedSeparator == null && mouseX != null && mouseY != null) {
         highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
@@ -1628,7 +1827,7 @@ export class GridRenderer {
 
         var _rowHeight5 = getOrThrow(visibleRowHeights, highlightedSeparator);
 
-        var _y8 = gridY + _rowY4 + _rowHeight5 + 0.5;
+        var _y7 = gridY + _rowY4 + _rowHeight5 + 0.5;
 
         var visibleRowIndex = visibleRows.indexOf(highlightedSeparator);
         var nextRow = visibleRowIndex < visibleRows.length - 1 ? visibleRows[visibleRowIndex + 1] : null;
@@ -1639,15 +1838,15 @@ export class GridRenderer {
         if (isRowHidden) {
           context.strokeStyle = headerHiddenSeparatorHoverColor;
           context.fillStyle = headerHiddenSeparatorHoverColor;
-          context.fillRect(hiddenX, _y8, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+          context.fillRect(hiddenX, _y7, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
         } else if (isNextRowHidden) {
           context.fillStyle = headerSeparatorHoverColor;
-          context.fillRect(hiddenX, _y8 - headerHiddenSeparatorSize * 0.5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+          context.fillRect(hiddenX, _y7 - headerHiddenSeparatorSize * 0.5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
         }
 
         context.beginPath();
-        context.moveTo(x + 0.5, _y8);
-        context.lineTo(x + rowFooterWidth + 0.5, _y8);
+        context.moveTo(x + 0.5, _y7);
+        context.lineTo(x + rowFooterWidth + 0.5, _y7);
         context.stroke();
       }
     } // Fill in the text
@@ -1660,8 +1859,8 @@ export class GridRenderer {
     context.textAlign = 'left';
     var textX = x + cellHorizontalPadding;
 
-    for (var _i12 = 0; _i12 < visibleRows.length; _i12 += 1) {
-      var _row7 = visibleRows[_i12];
+    for (var _i8 = 0; _i8 < visibleRows.length; _i8 += 1) {
+      var _row7 = visibleRows[_i8];
 
       var _rowHeight6 = getOrThrow(visibleRowHeights, _row7);
 
@@ -1740,13 +1939,13 @@ export class GridRenderer {
 
       if (endRow >= top && bottom >= startRow && endColumn >= left && right >= startColumn) {
         // Need to offset the x/y coordinates so that the line draws nice and crisp
-        var _x9 = startColumn >= left && visibleColumnXs.has(startColumn) ? Math.round(getOrThrow(visibleColumnXs, startColumn)) + 0.5 : minX;
+        var _x4 = startColumn >= left && visibleColumnXs.has(startColumn) ? Math.round(getOrThrow(visibleColumnXs, startColumn)) + 0.5 : minX;
 
-        var _y9 = startRow >= top && visibleRowYs.has(startRow) ? Math.max(Math.round(getOrThrow(visibleRowYs, startRow)) + 0.5, 0.5) : minY;
+        var _y8 = startRow >= top && visibleRowYs.has(startRow) ? Math.max(Math.round(getOrThrow(visibleRowYs, startRow)) + 0.5, 0.5) : minY;
 
         var endX = endColumn <= right && visibleColumnXs.has(endColumn) ? Math.round(getOrThrow(visibleColumnXs, endColumn) + getOrThrow(visibleColumnWidths, endColumn)) - 0.5 : maxX;
         var endY = endRow <= bottom && visibleRowYs.has(endRow) ? Math.round(getOrThrow(visibleRowYs, endRow) + getOrThrow(visibleRowHeights, endRow)) - 0.5 : maxY;
-        context.rect(_x9, _y9, endX - _x9, endY - _y9);
+        context.rect(_x4, _y8, endX - _x4, endY - _y8);
       } // draw the inner transparent fill
 
 
@@ -1848,27 +2047,49 @@ export class GridRenderer {
   }
 
   drawDraggingColumn(context, state) {
+    var _modelColumns$get3;
+
     var {
       draggingColumn,
-      draggingColumnOffset,
       metrics,
       mouseX,
-      theme
+      theme,
+      model
     } = state;
 
     if (draggingColumn == null || mouseX == null) {
       return;
     }
 
+    var {
+      range: draggingColumnVisibleRange,
+      depth: draggingColumnDepth
+    } = draggingColumn;
     var {
       gridX,
       gridY,
       visibleColumnXs,
       visibleColumnWidths,
-      height
+      height,
+      width,
+      columnHeaderMaxDepth,
+      columnHeaderHeight,
+      movedColumns,
+      modelColumns,
+      floatingLeftWidth
     } = metrics;
-    var x = getOrThrow(visibleColumnXs, draggingColumn);
-    var columnWidth = getOrThrow(visibleColumnWidths, draggingColumn) + 1;
+    var draggingModelIndex = (_modelColumns$get3 = modelColumns.get(draggingColumnVisibleRange[0])) !== null && _modelColumns$get3 !== void 0 ? _modelColumns$get3 : GridUtils.getModelIndex(draggingColumnVisibleRange[0], movedColumns);
+    var draggingGroup = model.getColumnHeaderGroup(draggingModelIndex, draggingColumnDepth);
+
+    if (draggingColumnDepth > 0 && !draggingGroup) {
+      return;
+    }
+
+    var [startIndex, endIndex] = draggingColumnVisibleRange;
+    var originalLeft = getOrThrow(visibleColumnXs, startIndex);
+    var originalRight = getOrThrow(visibleColumnXs, endIndex) + getOrThrow(visibleColumnWidths, endIndex);
+    var originalWidth = originalRight - originalLeft;
+    var draggingLeft = draggingColumn.left;
     var {
       backgroundColor,
       font,
@@ -1877,30 +2098,58 @@ export class GridRenderer {
       shadowBlur,
       shadowColor
     } = theme;
+    var columnHeaderOffset = (columnHeaderMaxDepth - draggingColumnDepth - 1) * columnHeaderHeight;
+    context.save();
+    context.translate(gridX, 0);
     context.save();
-    context.translate(gridX, 0); // First, we need to draw over the row stripes where the column is coming from
+    context.beginPath(); // Don't draw over frozen columns
+
+    context.rect(floatingLeftWidth, 0, width, height);
+    context.clip(); // First, we need to draw over where the column is coming from
 
     context.fillStyle = backgroundColor;
-    context.fillRect(x, 0, columnWidth, height);
-    context.translate(mouseX - x - gridX - (draggingColumnOffset !== null && draggingColumnOffset !== void 0 ? draggingColumnOffset : 0), gridY + reorderOffset); // Then draw the shadow of the moving column
+    context.fillRect(originalLeft, columnHeaderOffset, originalWidth, height);
+    context.restore(); // Then draw the shadow of the moving column
 
+    context.translate(0, reorderOffset);
     context.save();
     context.shadowColor = shadowColor;
     context.shadowBlur = shadowBlur;
     context.fillStyle = backgroundColor;
-    context.fillRect(x, -gridY, columnWidth, height);
-    context.restore(); // Now set the clipping region and pretty much just redraw this column and all it's contents
+    context.fillRect(draggingColumn.left, columnHeaderOffset + reorderOffset, draggingColumn.width, height);
+    context.restore(); // Reset style
+    // Now set the clipping region and pretty much just redraw this column and all it's contents
 
     context.beginPath();
-    context.rect(x, -gridY, columnWidth, height);
+    context.rect(draggingColumn.left, columnHeaderOffset, draggingColumn.width + 1, height);
     context.clip();
+    context.translate(draggingLeft - originalLeft, 0);
+    context.font = headerFont;
+    var visibleColumns = [];
+
+    for (var i = draggingColumn.range[0]; i <= draggingColumn.range[1]; i += 1) {
+      visibleColumns.push(i);
+    }
+    /**
+     * This will not draw the header text properly, but extensions of Grid
+     * may draw extra things in the header like sorts and filters
+     */
+
+
+    this.drawColumnHeaders(context, state); // Ensure the column header gets drawn
+
+    this.drawColumnHeadersForRange(context, state, [visibleColumns[0], visibleColumns[visibleColumns.length - 1]], {
+      minX: originalLeft,
+      maxX: width
+    });
+    context.translate(0, gridY);
     context.font = font;
     this.drawGridBackground(context, state);
-    this.drawColumnCellContents(context, state, draggingColumn); // Now translate it back up and draw the header
 
-    context.translate(-gridX, -gridY);
-    context.font = headerFont;
-    this.drawColumnHeaders(context, state);
+    for (var _i9 = startIndex; _i9 <= endIndex; _i9 += 1) {
+      this.drawColumnCellContents(context, state, _i9);
+    }
+
     context.restore();
   }
 
@@ -2094,15 +2343,15 @@ export class GridRenderer {
     }
 
     if (hasVerticalBar) {
-      var _x10 = width - rowHeaderWidth - vScrollBarSize;
+      var _x5 = width - rowHeaderWidth - vScrollBarSize;
 
-      var _y10 = scrollY; // scrollbar casing
+      var _y9 = scrollY; // scrollbar casing
 
       context.fillStyle = scrollBarCasingColor;
-      context.fillRect(_x10, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar track
+      context.fillRect(_x5, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar track
 
       context.fillStyle = isVerticalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
-      context.fillRect(_x10 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar thumb
+      context.fillRect(_x5 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar thumb
 
       if (isDraggingVerticalScrollBar) {
         context.fillStyle = scrollBarActiveColor;
@@ -2112,7 +2361,7 @@ export class GridRenderer {
         context.fillStyle = scrollBarColor;
       }
 
-      context.fillRect(_x10 + scrollBarCasingWidth, _y10, vScrollBarSize - scrollBarCasingWidth, handleHeight);
+      context.fillRect(_x5 + scrollBarCasingWidth, _y9, vScrollBarSize - scrollBarCasingWidth, handleHeight);
 
       if (!autoSelectColumn && scrollBarSelectionTick && scrollBarSelectionTickColor != null && scrollBarActiveSelectionTickColor != null) {
         // Scrollbar Selection Tick
@@ -2141,8 +2390,8 @@ export class GridRenderer {
 
         var _mergedRanges = GridUtils.mergeSortedRanges(_sortedRanges);
 
-        for (var _i13 = 0; _i13 < _mergedRanges.length; _i13 += 1) {
-          var _range = _mergedRanges[_i13];
+        for (var _i10 = 0; _i10 < _mergedRanges.length; _i10 += 1) {
+          var _range = _mergedRanges[_i10];
           var startRow = _range[0];
           var endRow = _range[1];
 
@@ -2150,7 +2399,7 @@ export class GridRenderer {
             var tickY = getTickY(startRow);
             var trackWidth = vScrollBarSize - scrollBarCasingWidth;
             var tickHeight = Math.max(1, Math.round(getTickY(endRow + 1) - tickY));
-            context.fillRect(_x10 + scrollBarCasingWidth + Math.round(trackWidth / 3), tickY, Math.round(trackWidth / 3), tickHeight);
+            context.fillRect(_x5 + scrollBarCasingWidth + Math.round(trackWidth / 3), tickY, Math.round(trackWidth / 3), tickHeight);
           }
         } // Current Active Tick
 
@@ -2162,7 +2411,7 @@ export class GridRenderer {
 
           var _tickHeight = 2;
           context.fillStyle = scrollBarActiveSelectionTickColor;
-          context.fillRect(_x10 + scrollBarCasingWidth, _tickY, _trackWidth, _tickHeight);
+          context.fillRect(_x5 + scrollBarCasingWidth, _tickY, _trackWidth, _tickHeight);
         }
       }
     }