canvas-datagrid 0.25.3 → 0.26.0

package/lib/draw.js

@@ -2,6 +2,8 @@
 /*globals XMLSerializer: false, define: true, Blob: false, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false*/
 'use strict';
 
+import { isCellSelected } from './selections/util';
+
 export default function (self) {
   var perfCounters = [],
     cachedImagesDrawn = false,
@@ -108,6 +110,98 @@ export default function (self) {
           '</svg>\n',
       );
   }
+  /**
+   * @param {number[]} coords [x0,y0, x1,y1, x2,y2, ...]
+   * @param {boolean} [fill] fill the area that construct by these lines but not stroke
+   */
+  function drawLines(coords, fill) {
+    if (coords.length < 4) return;
+    self.ctx.beginPath();
+    self.ctx.moveTo(
+      coords[0] + self.canvasOffsetLeft,
+      coords[1] + self.canvasOffsetTop,
+    );
+    for (let i = 2; i < coords.length; i += 2) {
+      const x = coords[i] + self.canvasOffsetLeft;
+      const y = coords[i + 1] + self.canvasOffsetTop;
+      self.ctx.lineTo(x, y);
+    }
+    if (fill) self.ctx.fill();
+    else self.ctx.stroke();
+  }
+  /**
+   * @param {number} x based-X (left-top)
+   * @param {number} y based-Y (left-top)
+   * @param {number} width
+   * @param {boolean} collapsed true: '+'; false: '-'
+   */
+  function drawGroupHandle(x, y, width, collapsed) {
+    fillRect(x, y, width, width);
+    strokeRect(x, y, width, width);
+    const cx = x + width * 0.5;
+    const cy = y + width * 0.5;
+    drawLines([x + width * 0.2, cy, x + width * 0.78, cy]);
+    if (collapsed) drawLines([cx, y + width * 0.22, cx, y + width * 0.8]);
+  }
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @param {number} size
+   * @param {string} dir Direction of the triangle, one of the 't','b','l' and 'r'
+   * @param {boolean} [active]
+   */
+  function drawUnhideIndicator(x, y, size, dir, active) {
+    const minPadding = size * 0.2;
+    const maxPadding = size * 0.3;
+    /** The long edge width of the triangle */
+    const longEdge = size - 2 * minPadding;
+    /** The median width of the triangle */
+    const median = size - 2 * maxPadding;
+    const halfLongEdge = longEdge * 0.5;
+    let x0, y0;
+    let coords, borderCoords;
+    switch (dir) {
+      case 'r':
+        x0 = x + maxPadding;
+        y0 = y + minPadding;
+        borderCoords = [x, y, x + size, y, x + size, y + size, x, y + size];
+        coords = [x0, y0, x0, y0 + longEdge, x0 + median, y0 + halfLongEdge];
+        break;
+      case 'l':
+        x0 = x + size - maxPadding;
+        y0 = y + minPadding;
+        borderCoords = [x + size, y, x, y, x, y + size, x + size, y + size];
+        coords = [x0, y0, x0, y0 + longEdge, x0 - median, y0 + halfLongEdge];
+        break;
+      case 't':
+        x0 = x + minPadding;
+        y0 = y + size - maxPadding;
+        borderCoords = [x, y + size, x, y, x + size, y, x + size, y + size];
+        coords = [x0, y0, x0 + longEdge, y0, x0 + halfLongEdge, y0 - median];
+        break;
+      case 'b':
+        x0 = x + minPadding;
+        y0 = y + maxPadding;
+        borderCoords = [x, y, x, y + size, x + size, y + size, x + size, y];
+        coords = [x0, y0, x0 + longEdge, y0, x0 + halfLongEdge, y0 + median];
+        break;
+    }
+
+    if (active) {
+      self.ctx.strokeStyle = self.style.unhideIndicatorBorderColor;
+      self.ctx.lineWidth = 2;
+      drawLines(borderCoords);
+
+      self.ctx.fillStyle = self.style.unhideIndicatorBackgroundColor;
+      let offset = dir === 'r' || dir === 'b' ? 1 : 0;
+      if (dir === 'l' || dir === 'r')
+        fillRect(x - offset, y, size + offset, size);
+      else fillRect(x, y - offset, size, size + offset);
+    }
+
+    self.ctx.fillStyle = self.style.unhideIndicatorColor;
+    drawLines(coords, true);
+  }
   function drawOrderByArrow(x, y) {
     var mt = self.style.columnHeaderOrderByArrowMarginTop * self.scale,
       ml = self.style.columnHeaderOrderByArrowMarginLeft * self.scale,
@@ -122,15 +216,15 @@ export default function (self) {
     x = x + ml;
     y = y + mt;
     if (self.orderDirection === 'asc') {
-      self.ctx.moveTo(x, y);
-      self.ctx.lineTo(x + aw, y);
-      self.ctx.lineTo(x + aw * 0.5, y + ah);
-      self.ctx.moveTo(x, y);
-    } else {
       self.ctx.lineTo(x, y + ah);
       self.ctx.lineTo(x + aw, y + ah);
       self.ctx.lineTo(x + aw * 0.5, y);
       self.ctx.lineTo(x, y + ah);
+    } else {
+      self.ctx.moveTo(x, y);
+      self.ctx.lineTo(x + aw, y);
+      self.ctx.lineTo(x + aw * 0.5, y + ah);
+      self.ctx.moveTo(x, y);
     }
     self.ctx.stroke();
     self.ctx.fill();
@@ -164,6 +258,82 @@ export default function (self) {
     self.ctx.fill();
     return ml + aw + mr;
   }
+  function drawCellTreeIcon(cell, tree, rowTree) {
+    const parentCount = rowTree ? tree.parentCount : 0;
+    const iconSize = self.style.cellTreeIconWidth * self.scale,
+      marginTop = self.style.cellTreeIconMarginTop * self.scale,
+      marginRight = self.style.cellTreeIconMarginRight * self.scale,
+      marginLeft =
+        self.style.cellTreeIconMarginLeft * self.scale +
+        parentCount * (iconSize + cell.paddingLeft);
+
+    let x = cell.x + cell.paddingLeft + self.canvasOffsetLeft + marginLeft,
+      y = cell.y + self.canvasOffsetTop + marginTop;
+
+    if (tree.icon) {
+      self.ctx.beginPath();
+      const oldFillStyle = self.ctx.fillStyle;
+      const oldStrokeStyle = self.ctx.strokeStyle;
+
+      if (cell.hovered && self.hovers.onCellTreeIcon) {
+        self.ctx.fillStyle = self.style.cellTreeIconHoverFillColor;
+      } else {
+        self.ctx.fillStyle = self.style.cellTreeIconFillColor;
+      }
+
+      self.ctx.fillRect(x, y, iconSize, iconSize);
+      self.ctx.strokeStyle = self.style.cellTreeIconBorderColor;
+      self.ctx.rect(x, y, iconSize, iconSize);
+      self.ctx.stroke();
+
+      self.ctx.beginPath();
+      if (tree.expand) {
+        self.ctx.moveTo(x + 3, y + iconSize * 0.5);
+        self.ctx.lineTo(x + iconSize - 3, y + iconSize * 0.5);
+      } else {
+        self.ctx.moveTo(x + 2, y + iconSize * 0.5);
+        self.ctx.lineTo(x + iconSize - 2, y + iconSize * 0.5);
+        self.ctx.moveTo(x + iconSize * 0.5, y + 2);
+        self.ctx.lineTo(x + iconSize * 0.5, y + iconSize - 2);
+      }
+      self.ctx.lineWidth = self.style.cellTreeIconLineWidth;
+      self.ctx.strokeStyle = self.style.cellTreeIconLineColor;
+      self.ctx.stroke();
+
+      self.ctx.strokeStyle = oldStrokeStyle;
+      self.ctx.fillStyle = oldFillStyle;
+    }
+
+    return marginLeft + iconSize + marginRight;
+  }
+  function drawFilterButtonArrow(x, y) {
+    var mt =
+        ((self.style.filterButtonHeight - self.style.filterButtonArrowHeight) /
+          2) *
+        self.scale,
+      ml =
+        ((self.style.filterButtonWidth - self.style.filterButtonArrowWidth) /
+          2) *
+        self.scale,
+      aw = self.style.filterButtonArrowWidth * self.scale,
+      ah = self.style.filterButtonArrowHeight * self.scale;
+    x += self.canvasOffsetLeft;
+    y += self.canvasOffsetTop;
+    self.ctx.fillStyle = self.style.filterButtonArrowColor;
+    self.ctx.strokeStyle = self.style.filterButtonArrowBorderColor;
+    self.ctx.beginPath();
+    x = x + ml;
+    y = y + mt;
+
+    self.ctx.moveTo(x, y);
+    self.ctx.lineTo(x + aw, y);
+    self.ctx.lineTo(x + aw * 0.5, y + ah);
+    self.ctx.moveTo(x, y);
+
+    self.ctx.stroke();
+    self.ctx.fill();
+    return ml + aw;
+  }
   function radiusRect(x, y, w, h, radius) {
     x += self.canvasOffsetLeft;
     y += self.canvasOffsetTop;
@@ -362,9 +532,10 @@ export default function (self) {
     elWidth = self.ctx.measureText(' ' + et).width;
     for (x = 0; x < words.length; x += 1) {
       word = words[x];
-      var measure = self.ctx.measureText(word + splitChar);
+      var curSplitChar = word[word.length - 1] === '-' ? '' : splitChar;
+      var measure = self.ctx.measureText(word + curSplitChar);
       if (line.width + measure.width + elWidth < cell.paddedWidth) {
-        line.value += word + splitChar;
+        line.value += word + curSplitChar;
         line.width += measure.width;
         continue;
       }
@@ -373,13 +544,17 @@ export default function (self) {
       // then back up and re-read new split set
       // this behavior seems right, it might not be
       if (/\w-\w/.test(word) && cell.paddedWidth < measure.width) {
-        words.splice(x, 1, word.split('-')[0] + '-', word.split('-')[1]);
+        var arr = word.split('-');
+        arr = arr.map((item, index) => {
+          return index === arr.length - 1 ? item : item + '-';
+        });
+        words.splice(x, 1, ...arr);
         x -= 1;
         continue;
       }
       line = {
         width: measure.width,
-        value: word + splitChar,
+        value: word + curSplitChar,
       };
       if (x === 0) {
         lines = [];
@@ -427,35 +602,58 @@ export default function (self) {
       height: cell.calculatedLineHeight * lines.length,
     };
   }
-  function drawText(cell) {
+  function drawText(cell, treeCellPadding = 0) {
     var ll = cell.text.lines.length,
       h = cell.fontHeight * cell.lineHeight,
       x,
       line,
       wrap = self.style.cellWhiteSpace !== 'nowrap',
       textHeight = 0;
+    // text supplied by a rendertext handler may omit width/height (#460)
+    var textBlockHeight =
+      cell.text.height === undefined
+        ? cell.calculatedLineHeight * ll
+        : cell.text.height;
     for (x = 0; x < cell.text.lines.length; x += 1) {
       line = cell.text.lines[x];
+      if (line.width === undefined) {
+        line.width = self.ctx.measureText(
+          line.value === undefined || line.value === null
+            ? ''
+            : String(line.value),
+        ).width;
+      }
       var vPos =
           Math.max(
             (cell.height -
-              (wrap ? cell.text.height : cell.calculatedLineHeight)) *
+              (wrap ? textBlockHeight : cell.calculatedLineHeight)) *
               0.5,
             0,
           ) + h,
-        hPos = cell.paddingLeft + cell.treeArrowWidth + cell.orderByArrowWidth;
+        hPos =
+          cell.paddingLeft +
+          treeCellPadding +
+          cell.treeArrowWidth +
+          cell.orderByArrowWidth;
       if (cell.horizontalAlignment === 'right') {
-        hPos = cell.paddingLeft + cell.paddedWidth - line.width;
+        hPos =
+          cell.paddingLeft + treeCellPadding + cell.paddedWidth - line.width;
       } else if (cell.horizontalAlignment === 'center') {
         hPos =
           cell.paddingLeft +
+          treeCellPadding +
           (cell.paddedWidth + cell.paddingRight) / 2 -
           line.width / 2;
       }
       if (cell.verticalAlignment === 'top') {
         vPos = cell.calculatedLineHeight;
       } else if (cell.verticalAlignment === 'bottom') {
-        vPos = cell.height - cell.paddingBottom - cell.text.height;
+        // baseline of the last line sits on the bottom padding (#530)
+        vPos =
+          cell.height -
+          cell.paddingBottom -
+          textBlockHeight +
+          cell.calculatedLineHeight;
       }
       line.height = h + cell.lineSpacing;
       line.offsetLeft = hPos;
@@ -505,6 +703,7 @@ export default function (self) {
       s = self.getSchema(),
       x = 0,
       n = Math.min(self.frozenColumn, s.length),
+      collapsedGroups = self.getCollapsedColumnGroups(),
       column;
     hiddenFrozenColumnCount = 0;
     while (x < n) {
@@ -512,7 +711,15 @@ export default function (self) {
       if (column.hidden) {
         hiddenFrozenColumnCount += 1;
       } else {
-        w += self.getColummnWidth(x);
+        const isCollapsed =
+          collapsedGroups.findIndex(
+            (group) => x >= group.from && x <= group.to,
+          ) >= 0;
+        if (isCollapsed) {
+          hiddenFrozenColumnCount += 1;
+        } else {
+          w += self.getColumnWidth(x);
+        }
       }
       x += 1;
     }
@@ -568,43 +775,100 @@ export default function (self) {
       c,
       h,
       w,
-      s,
-      r,
-      rd,
+      schema,
+      rowIndex,
+      rowData,
       aCell,
-      data = self.data || [],
+      viewData = self.viewData || [],
       bc = self.style.gridBorderCollapse === 'collapse',
       selectionBorders = [],
       moveBorders = [],
       selectionHandles = [],
       rowHeaders = [],
-      l = data.length,
+      l = viewData.length,
       u = self.currentCell || {},
       columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
       rowHeaderCellWidth = self.getRowHeaderCellWidth(),
-      cellHeight = self.style.cellHeight;
+      rowGroupsAreaWidth = self.getRowGroupAreaWidth(),
+      columnGroupsAreaHeight = self.getColumnGroupAreaHeight(),
+      /** key: boundRowIndex, value: `{y,h}` */
+      rowGroupsRectInfo = {},
+      /** value: `{y,h}` */
+      rowGroupsFrozenInfo = {},
+      /** key: columnIndex, value: `{x,w}` */
+      columnGroupsRectInfo = {},
+      collapsedColumnGroups = self.getCollapsedColumnGroups(),
+      collapsedRowGroups = self.getCollapsedRowGroups(),
+      cellHeight = self.style.cellHeight,
+      currentRowIndexOffset = 0,
+      /** @type {Array<{from:number,plus:number}>} */
+      rowIndexOffsetByHiddenRows = self.hiddenRowRanges
+        .map((range) => ({
+          from: range[0],
+          plus: range[1] - range[0] + 1,
+        }))
+        .sort((a, b) => a.from - b.from);
     drawCount += 1;
     p = performance.now();
     self.visibleRowHeights = [];
     // if data length has changed, there is no way to know
-    if (data.length > self.orders.rows.length) {
+    if (viewData.length > self.orders.rows.length) {
       self.createRowOrders();
     }
+    function saveRowGroupsRectInfo(cell) {
+      let index = cell.boundRowIndex;
+      if (index >= -1 === false)
+        if (cell.rowIndex === -1) index = -1;
+        else return;
+      if (rowGroupsRectInfo[index]) return;
+      rowGroupsRectInfo[index] = { y: cell.y, h: cell.height };
+    }
+    function saveColumnGroupsRectInfo(cell) {
+      const index = cell.columnIndex;
+      if (columnGroupsRectInfo[index]) return;
+      columnGroupsRectInfo[index] = { x: cell.x, w: cell.width };
+    }
+    /**
+     * @param {number} columnIndex
+     * @returns {boolean}
+     */
+    function isColumnCollapsedByGroup(columnIndex) {
+      return (
+        collapsedColumnGroups.findIndex(
+          (group) => columnIndex >= group.from && columnIndex <= group.to,
+        ) >= 0
+      );
+    }
+
     function drawScrollBars() {
       var drawCorner,
         en = self.scrollBox.entities,
         m = self.style.scrollBarBoxMargin * 2;
       self.ctx.strokeStyle = self.style.scrollBarBorderColor;
       self.ctx.lineWidth = self.style.scrollBarBorderWidth;
-      en.horizontalBox.x =
-        rowHeaderCellWidth +
-        self.style.scrollBarBoxMargin +
-        (en.horizontalBar.width - self.scrollBox.scrollBoxWidth) *
-          (self.scrollBox.scrollLeft / self.scrollBox.scrollWidth);
+      if (self.frozenColumn > 0) {
+        en.horizontalBox.x =
+          rowHeaderCellWidth +
+          self.style.scrollBarBoxMargin +
+          self.scrollCache.x[self.frozenColumn - 1] +
+          (en.horizontalBar.width -
+            self.scrollCache.x[self.frozenColumn - 1] -
+            self.scrollBox.scrollBoxWidth) *
+            (self.scrollBox.scrollLeft / self.scrollBox.scrollWidth);
+      } else {
+        en.horizontalBox.x =
+          rowHeaderCellWidth +
+          self.style.scrollBarBoxMargin +
+          (en.horizontalBar.width - self.scrollBox.scrollBoxWidth) *
+            (self.scrollBox.scrollLeft / self.scrollBox.scrollWidth);
+      }
       en.verticalBox.y =
         columnHeaderCellHeight +
         self.style.scrollBarBoxMargin +
-        (en.verticalBar.height - self.scrollBox.scrollBoxHeight) *
+        self.scrollCache.y[self.frozenRow] +
+        (en.verticalBar.height -
+          self.scrollBox.scrollBoxHeight -
+          self.scrollCache.y[self.frozenRow]) *
           (self.scrollBox.scrollTop / self.scrollBox.scrollHeight);
       if (self.scrollBox.horizontalBarVisible) {
         self.ctx.fillStyle = self.style.scrollBarBackgroundColor;
@@ -698,13 +962,17 @@ export default function (self) {
           selectionHandles.push([cell, 'tr']);
           cell.selectionHandle = 'tr';
         }
-        if (
-          cell.selectionBorderTop &&
-          cell.selectionBorderLeft &&
-          self.mobile
-        ) {
-          selectionHandles.push([cell, 'tl']);
-          cell.selectionHandle = 'tl';
+        if (cell.selectionBorderTop && cell.selectionBorderLeft) {
+          if (self.mobile) {
+            selectionHandles.push([cell, 'tl']);
+            cell.selectionHandle = 'tl';
+          }
+          if (self.fillOverlay.handle) {
+            self.fillOverlay.snapTo = {
+              x: cell.x,
+              y: cell.y,
+            };
+          }
         }
         if (
           cell.selectionBorderBottom &&
@@ -721,6 +989,22 @@ export default function (self) {
         ) {
           selectionHandles.push([cell, 'br']);
           cell.selectionHandle = 'br';
+
+          if (self.fillOverlay.handle) {
+            self.fillOverlay.handle.x = cell.x + cell.width;
+            self.fillOverlay.handle.y = cell.y + cell.height;
+          }
+        }
+
+        if (self.fillOverlay.handle) {
+          // Some corners may not be displaying, so we get at least
+          // one correct axis in order to display a fill overlay.
+          if (self.fillOverlay.snapTo.x === -1 && cell.selectionBorderLeft) {
+            self.fillOverlay.snapTo.x = cell.x;
+          }
+          if (self.fillOverlay.snapTo.y === -1 && cell.selectionBorderTop) {
+            self.fillOverlay.snapTo.y = cell.y;
+          }
         }
       }
     }
@@ -730,21 +1014,23 @@ export default function (self) {
       propPrefix,
       offsetPoint,
     ) {
-      offsetPoint = offsetPoint || { x: 0, y: 0 };
       cell.selectionBorder = '';
-      if (
-        !cell.isRowHeader &&
-        self.selections[cell.rowIndex + -offsetPoint.y] &&
-        self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-          cell.columnIndex + -offsetPoint.x,
-        ) !== -1
-      ) {
+      // TODO: optimize it by `getSelectionStateFromCells`
+      const isSelected = offsetPoint
+        ? (row, col) =>
+            isCellSelected(
+              self.selections,
+              row - offsetPoint.y,
+              col - offsetPoint.x,
+            )
+        : (row, col) => isCellSelected(self.selections, row, col);
+      const lastColumnIndex = Math.max(schema.length - 1, 0);
+      const lastRowIndex = Math.max(viewData.length - 1, 0);
+      const { isRowHeader, rowIndex, columnIndex } = cell;
+
+      if (!isRowHeader && isSelected(rowIndex, columnIndex)) {
         if (
-          (!self.selections[cell.rowIndex - 1 + -offsetPoint.y] ||
-            self.selections[cell.rowIndex - 1 + -offsetPoint.y].indexOf(
-              cell.columnIndex + -offsetPoint.x,
-            ) === -1 ||
-            cell.rowIndex === 0) &&
+          (!isSelected(rowIndex - 1, columnIndex) || rowIndex === 0) &&
           !cell.isHeader
         ) {
           drawArray.push([cell, 't']);
@@ -752,32 +1038,21 @@ export default function (self) {
           cell[propPrefix + 'Border'] += 't';
         }
         if (
-          !self.selections[cell.rowIndex + 1 + -offsetPoint.y] ||
-          self.selections[cell.rowIndex + 1 + -offsetPoint.y].indexOf(
-            cell.columnIndex + -offsetPoint.x,
-          ) === -1
+          rowIndex >= lastRowIndex ||
+          !isSelected(rowIndex + 1, columnIndex)
         ) {
           drawArray.push([cell, 'b']);
           cell[propPrefix + 'BorderBottom'] = true;
           cell[propPrefix + 'Border'] += 'b';
         }
-        if (
-          !self.selections[cell.rowIndex + -offsetPoint.y] ||
-          cell.columnIndex === 0 ||
-          self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-            cell.columnIndex - 1 + -offsetPoint.x,
-          ) === -1
-        ) {
+        if (columnIndex === 0 || !isSelected(rowIndex, columnIndex - 1)) {
           drawArray.push([cell, 'l']);
           cell[propPrefix + 'BorderLeft'] = true;
           cell[propPrefix + 'Border'] += 'l';
         }
         if (
-          !self.selections[cell.rowIndex + -offsetPoint.y] ||
-          cell.columnIndex === s.length ||
-          self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-            cell.columnIndex + 1 + -offsetPoint.x,
-          ) === -1
+          columnIndex >= lastColumnIndex ||
+          !isSelected(rowIndex, columnIndex + 1)
         ) {
           drawArray.push([cell, 'r']);
           cell[propPrefix + 'BorderRight'] = true;
@@ -785,7 +1060,11 @@ export default function (self) {
         }
       }
     }
-    function drawCell(d, rowOrderIndex, rowIndex) {
+    function drawCell(rowData, rowOrderIndex, rowIndex) {
+      const isActiveRowHeader =
+        self.orders.rows[self.activeCell.rowIndex] === rowOrderIndex ||
+        self.isRowSelected(rowOrderIndex);
+
       return function drawEach(header, headerIndex, columnOrderIndex) {
         if (header.hidden) {
           return 0;
@@ -797,38 +1076,55 @@ export default function (self) {
           isCorner = /cornerCell/.test(cellStyle),
           isRowHeader = 'rowHeaderCell' === cellStyle,
           isColumnHeader = 'columnHeaderCell' === cellStyle,
+          isFilterable =
+            self.filterable.rows.includes(rowIndex) &&
+            self.filterable.columns.includes(headerIndex),
           wrap = self.style.cellWhiteSpace !== 'nowrap',
-          selected =
-            self.selections[rowOrderIndex] &&
-            self.selections[rowOrderIndex].indexOf(columnOrderIndex) !== -1,
+          // TODO: optimize it by `getSelectionStateFromCells`
+          selected = isCellSelected(
+            self.selections,
+            rowOrderIndex,
+            columnOrderIndex,
+          ),
           hovered =
             self.hovers.rowIndex === rowOrderIndex &&
-            self.hovers.columnIndex === columnOrderIndex,
+            (self.attributes.hoverMode === 'row' ||
+              self.hovers.columnIndex === columnOrderIndex),
+          openedFilter =
+            self.selectedFilterButton.rowIndex == rowIndex &&
+            self.selectedFilterButton.columnIndex == headerIndex,
           active =
             self.activeCell.rowIndex === rowOrderIndex &&
             self.activeCell.columnIndex === columnOrderIndex,
           isColumnHeaderCellCap = cellStyle === 'columnHeaderCellCap',
-          rawValue = d ? d[header.name] : undefined,
+          rawValue = rowData ? rowData[header.name] : undefined,
           isGrid = header.type === 'canvas-datagrid',
-          activeHeader =
-            (self.orders.rows[self.activeCell.rowIndex] === rowOrderIndex ||
-              self.orders.columns[self.activeCell.columnIndex] ===
-                headerIndex) &&
-            (columnOrderIndex === -1 || rowOrderIndex === -1)
-              ? isRowHeader
-                ? 'activeRowHeaderCell'
-                : 'activeColumnHeaderCell'
-              : false,
           val,
           f = self.formatters[header.type || 'string'],
           orderByArrowSize = 0,
           treeArrowSize = 0,
-          cellWidth = self.sizes.columns[headerIndex] || header.width,
+          cellWidth =
+            headerIndex >= 0
+              ? self.getColumnWidth(headerIndex)
+              : self.sizes.columns[headerIndex] || header.width,
           ev = {
             value: rawValue,
-            row: d,
+            row: rowData,
             header: header,
           };
+
+        const isActiveColumnHeader =
+          self.orders.columns[self.activeCell.columnIndex] === headerIndex ||
+          self.isColumnSelected(self.activeCell.viewColumnIndex);
+        let activeHeader = false;
+        if (
+          (isActiveColumnHeader || isActiveRowHeader) &&
+          (columnOrderIndex === -1 || rowOrderIndex === -1)
+        )
+          activeHeader = isRowHeader
+            ? 'activeRowHeaderCell'
+            : 'activeColumnHeaderCell';
+
         if (isColumnHeaderCellCap) {
           cellWidth = w - x;
         }
@@ -836,7 +1132,9 @@ export default function (self) {
         if (cellWidth === undefined) {
           cellWidth = self.style.cellWidth;
         }
-        cellWidth = cellWidth * self.scale;
+        if (headerIndex < 0) {
+          cellWidth = cellWidth * self.scale;
+        }
         if (x + cellWidth + self.style.cellBorderWidth < 0) {
           x += cellWidth + self.style.cellBorderWidth;
         }
@@ -889,18 +1187,30 @@ export default function (self) {
           offsetHeight: cellHeight,
           parentNode: self.intf.parentNode,
           offsetParent: self.intf.parentNode,
-          data: d,
+          data: rowData,
           isCorner: isCorner,
           isHeader: isHeader,
           isColumnHeader: isColumnHeader,
           isColumnHeaderCellCap: isColumnHeaderCellCap,
           isRowHeader: isRowHeader,
+          isFilterable: isFilterable,
+          openedFilter: openedFilter,
           rowOpen: rowOpen,
           header: header,
+
           columnIndex: columnOrderIndex,
           rowIndex: rowOrderIndex,
+
+          viewRowIndex: rowOrderIndex,
+          viewColumnIndex: columnOrderIndex,
+
+          boundRowIndex: self.getBoundRowIndexFromViewRowIndex(rowOrderIndex),
+          boundColumnIndex:
+            self.getBoundColumnIndexFromViewColumnIndex(columnOrderIndex),
+
           sortColumnIndex: headerIndex,
           sortRowIndex: rowIndex,
+
           isGrid: isGrid,
           isNormal: !isGrid && !isCorner && !isHeader,
           gridId: (self.attributes.name || '') + rowIndex + ':' + headerIndex,
@@ -909,6 +1219,15 @@ export default function (self) {
           activeHeader: activeHeader,
           value:
             isHeader && !isRowHeader ? header.title || header.name : rawValue,
+          isRowTree:
+            rowOrderIndex >= 0 &&
+            columnOrderIndex == self.cellTree.rowTreeColIndex &&
+            self.cellTree.rows.length > 0 &&
+            self.cellTree.rows[rowOrderIndex].icon,
+          isColumnTree:
+            columnOrderIndex >= 0 &&
+            self.cellTree.columns[rowOrderIndex] &&
+            self.cellTree.columns[rowOrderIndex][columnOrderIndex].icon,
         };
         cell.calculatedLineHeight =
           cell.fontHeight * cell.lineHeight + cell.lineSpacing;
@@ -920,6 +1239,8 @@ export default function (self) {
           ? self.sizes.columns.cornerCell
           : self.sizes.columns[headerIndex];
         self.visibleCells.unshift(cell);
+        saveRowGroupsRectInfo(cell);
+        saveColumnGroupsRectInfo(cell);
         if (self.dispatchEvent('beforerendercell', ev)) {
           return;
         }
@@ -994,9 +1315,8 @@ export default function (self) {
               if (self.dispatchEvent('beforecreatecellgrid', ev)) {
                 return;
               }
-              self.childGrids[cell.gridId] = self.createGrid(
-                cellGridAttributes,
-              );
+              self.childGrids[cell.gridId] =
+                self.createGrid(cellGridAttributes);
               self.sizes.rows[rowIndex] =
                 self.sizes.rows[rowIndex] || self.style.cellGridHeight;
               checkScrollHeight = true;
@@ -1040,9 +1360,8 @@ export default function (self) {
                   ' add a cellFormater',
               );
             }
-            cell.formattedValue = (val !== undefined && val !== null
-              ? val
-              : ''
+            cell.formattedValue = (
+              val !== undefined && val !== null ? val : ''
             ).toString();
             if (
               self.columnFilters &&
@@ -1051,10 +1370,7 @@ export default function (self) {
             ) {
               cell.formattedValue = self.attributes.filterTextPrefix + val;
             }
-            self.ctx.font =
-              self.style[cellStyle + 'FontHeight'] * self.scale +
-              'px ' +
-              self.style[cellStyle + 'FontName'];
+            self.ctx.font = self.getScaledFont(cellStyle + 'Font');
             if (!self.dispatchEvent('formattext', ev)) {
               cell.text = wrapText(cell, ' ');
             }
@@ -1062,7 +1378,53 @@ export default function (self) {
               if (cell.innerHTML || header.type === 'html') {
                 drawHtml(cell);
               } else {
-                drawText(cell);
+                let treeCellPadding = 0,
+                  isDrawText = true;
+                if (
+                  cell.columnIndex == self.cellTree.rowTreeColIndex &&
+                  !cell.isColumnHeader &&
+                  self.cellTree.rows.length > 0 &&
+                  Object.keys(self.cellTree.rows[cell.rowIndex]).length > 1
+                )
+                  treeCellPadding = drawCellTreeIcon(
+                    cell,
+                    self.cellTree.rows[cell.rowIndex],
+                    true,
+                  );
+
+                if (
+                  !cell.isRowHeader &&
+                  cell.rowIndex > 0 &&
+                  self.cellTree.columns[cell.rowIndex - 1] &&
+                  self.cellTree.columns[cell.rowIndex - 1][cell.columnIndex]
+                    .icon
+                ) {
+                  for (let r = cell.rowIndex - 1; r >= 0; r--) {
+                    if (!self.cellTree.columns[r]) break;
+                    if (!self.cellTree.columns[r][cell.columnIndex].icon) break;
+                    if (!self.cellTree.columns[r][cell.columnIndex].expand) {
+                      isDrawText = false;
+                      break;
+                    }
+                  }
+                }
+                if (
+                  isDrawText &&
+                  !cell.isRowHeader &&
+                  self.cellTree.columns[cell.rowIndex] &&
+                  self.cellTree.columns[cell.rowIndex][cell.columnIndex].icon
+                ) {
+                  if (
+                    self.viewData.length > 0 &&
+                    self.viewData[cell.rowIndex][cell.columnIndex].length > 0
+                  )
+                    treeCellPadding = drawCellTreeIcon(
+                      cell,
+                      self.cellTree.columns[cell.rowIndex][cell.columnIndex],
+                      false,
+                    );
+                }
+                if (isDrawText) drawText(cell, treeCellPadding);
               }
 
               if (wrap && cell.text && cell.text.height > rowHeight) {
@@ -1082,31 +1444,283 @@ export default function (self) {
           createBorderOverlayArray(cell, moveBorders, 'move', self.moveOffset);
         }
         self.ctx.restore();
+
+        if (isFilterable) {
+          drawFilterButton(cell);
+        }
+
+        // Gaps may occur in row numbers between consecutively rendered rows
+        // when we are filtering. We draw attention to this by drawing a thick
+        // border overlapping the two consecutive row headers. If sorting, visible
+        // row numbers stay the same (i.e. they don't correspond to the underlying
+        // data's row number), so we do not show row gaps in that case.
+        const isSorting =
+          self.orderings.columns && self.orderings.columns.length > 0;
+
+        if (
+          isRowHeader &&
+          self.attributes.showRowNumbers &&
+          self.attributes.showRowNumberGaps &&
+          isSorting === false
+        ) {
+          const previousRowNumber = self.getBoundRowIndexFromViewRowIndex(
+            rowOrderIndex - 1,
+          );
+          let hasRowGap =
+            previousRowNumber !== undefined &&
+            cell.boundRowIndex > 0 &&
+            cell.boundRowIndex - previousRowNumber > 1;
+          if (hasRowGap && collapsedRowGroups.length > 0) {
+            hasRowGap =
+              collapsedRowGroups.find(
+                (group) =>
+                  group.from === previousRowNumber &&
+                  group.to === cell.boundRowIndex,
+              ) >= 0;
+          }
+          // We don't treat the row index difference from hidden rows as the row gap.
+          if (hasRowGap && self.hiddenRowRanges.length > 0) {
+            for (let i = 0; i < self.hiddenRowRanges.length; i++) {
+              const [beginRowIndex, endRowIndex] = self.hiddenRowRanges[i];
+              if (
+                cell.boundRowIndex === endRowIndex + 1 &&
+                previousRowNumber === beginRowIndex - 1
+              ) {
+                hasRowGap = false;
+                break;
+              }
+            }
+          }
+
+          if (hasRowGap) {
+            const barHeight = self.style.rowHeaderCellRowNumberGapHeight;
+            const barColor = self.style.rowHeaderCellRowNumberGapColor;
+
+            self.ctx.save();
+
+            self.ctx.fillStyle = barColor;
+
+            fillRect(cell.x, cell.y - barHeight / 2, cell.width, barHeight);
+
+            self.ctx.restore();
+          }
+        }
+
+        //#region draw unhide indicator for column headers
+        if (isColumnHeader && self.attributes.showUnhideColumnsIndicator) {
+          const hovered = self.hovers.unhideIndicator;
+          const size = self.style.unhideIndicatorSize;
+          const cellX = x;
+          const topY = cell.y + Math.max(0.5 * (cell.height - size), 0);
+
+          const isActive = (orderIndex) =>
+            hovered &&
+            (hovered.dir === 'l' || hovered.dir === 'r') &&
+            orderIndex >= hovered.orderIndex0 &&
+            orderIndex <= hovered.orderIndex1;
+          const isHiddenColumn = (columnIndex) =>
+            columnIndex >= 0 &&
+            schema[columnIndex] &&
+            schema[columnIndex].hidden;
+
+          let orderIndex0, orderIndex1;
+          const drawIndicator = (leftX, dir, active) => {
+            self.visibleUnhideIndicators.push({
+              x: leftX - 1,
+              y: topY - 1,
+              x2: leftX + size + 2,
+              y2: topY + size + 2,
+              orderIndex0,
+              orderIndex1,
+              dir,
+            });
+            if (!active) {
+              const line = cell.text && cell.text.lines && cell.text.lines[0];
+              if (line) {
+                const iconsWidth = orderByArrowSize + treeArrowSize;
+                const lineX0 = iconsWidth > 0 ? iconsWidth : line.x;
+                const lineX1 = line.x + line.width;
+                if (leftX + size >= lineX0 && leftX <= lineX1) return;
+              }
+            }
+            drawUnhideIndicator(leftX, topY, size, dir, active);
+          }; // end of drawIndicator
+
+          let orderIndexPtr = columnOrderIndex - 1;
+          const prevColumnIndex = self.orders.columns[orderIndexPtr];
+          if (isHiddenColumn(prevColumnIndex)) {
+            const active = isActive(prevColumnIndex);
+            orderIndex0 = orderIndexPtr;
+            orderIndex1 = orderIndexPtr;
+            while (--orderIndexPtr >= 0) {
+              if (isHiddenColumn(self.orders.columns[orderIndexPtr]))
+                orderIndex0 = orderIndexPtr;
+              else break;
+            }
+            drawIndicator(cellX, 'r', active);
+          }
+
+          orderIndexPtr = columnOrderIndex + 1;
+          const nextColumnIndex = self.orders.columns[orderIndexPtr];
+          if (isHiddenColumn(nextColumnIndex)) {
+            const active = isActive(nextColumnIndex);
+            orderIndex0 = orderIndexPtr;
+            orderIndex1 = orderIndexPtr;
+            while (++orderIndexPtr < self.orders.columns.length) {
+              if (isHiddenColumn(self.orders.columns[orderIndexPtr]))
+                orderIndex1 = orderIndexPtr;
+              else break;
+            }
+            const indicatorX = x + cell.width - size;
+            drawIndicator(indicatorX, 'l', active);
+          }
+        }
+        //#endregion draw unhide indicator for column headers
+
+        //#region draw unhide indicator for row headers
+        if (
+          isRowHeader &&
+          self.attributes.showUnhideRowsIndicator &&
+          self.hiddenRowRanges.length > 0
+        ) {
+          // Leo's comment:
+          // from the first row to the last row, `rowIndex` is from 0 to the count of rows
+          // but `boundRowIndex` can be disordered if there are any ordered columns or filtered columns
+          // Like this statement:
+          // console.log(rowIndex, cell.boundRowIndex, cell.formattedValue);
+          // can output the result like this:
+          // 0 1 '2'
+          // 1 3 '4'
+          const hovered = self.hovers.unhideIndicator;
+          const size = self.style.unhideIndicatorSize;
+          const leftX = cell.x + cell.width - size - 2;
+          const cellY = y;
+          const topIndicators = {};
+          const bottomIndicators = {};
+          self.hiddenRowRanges.forEach((it) => {
+            topIndicators[it[0] - 1] = it;
+            bottomIndicators[it[1] + 1] = it;
+          });
+
+          const rowIndex = cell.rowIndex + currentRowIndexOffset;
+          const isActive = () =>
+            hovered &&
+            (hovered.dir === 't' || hovered.dir === 'b') &&
+            rowIndex >= hovered.orderIndex0 - 1 &&
+            rowIndex <= hovered.orderIndex1 + 1;
+
+          let orderIndex0, orderIndex1;
+          const drawIndicator = (topY, dir, active) => {
+            self.visibleUnhideIndicators.push({
+              x: leftX - 1,
+              y: topY - 1,
+              x2: leftX + size + 2,
+              y2: topY + size + 2,
+              orderIndex0,
+              orderIndex1,
+              dir,
+            });
+            drawUnhideIndicator(leftX, topY, size, dir, active);
+          }; // end of drawIndicator
+
+          let matched = topIndicators[rowIndex];
+          if (matched) {
+            const indicatorY = cellY + cell.height - size;
+            [orderIndex0, orderIndex1] = matched;
+            drawIndicator(indicatorY, 't', isActive());
+          }
+          matched = bottomIndicators[rowIndex];
+          if (matched) {
+            const indicatorY = cellY;
+            [orderIndex0, orderIndex1] = matched;
+            drawIndicator(indicatorY, 'b', isActive());
+          }
+        }
+        //#endregion draw unhide indicator for row headers
+
         x += cell.width + (bc ? 0 : self.style.cellBorderWidth);
         return cell.width;
-      };
+      }; // end of drawEach
+    }
+    function drawFilterButton(cell, ev) {
+      var posX = cell.x + cell.width - self.style.filterButtonWidth - 1;
+      var posY = cell.y + cell.height - self.style.filterButtonHeight - 2;
+      if (self.dispatchEvent('beforerenderfilterbutton', ev)) {
+        return;
+      }
+      self.ctx.save();
+      self.ctx.strokeStyle = self.style.filterButtonBorderColor;
+      self.ctx.fillStyle = self.style.filterButtonBackgroundColor;
+      if (cell.openedFilter) {
+        self.ctx.fillStyle = self.style.filterButtonActiveBackgroundColor;
+      } else if (cell.hovered && self.hovers.onFilterButton) {
+        self.ctx.fillStyle = self.style.filterButtonHoverBackgroundColor;
+      }
+      radiusRect(
+        posX,
+        posY,
+        self.style.filterButtonWidth,
+        self.style.filterButtonHeight,
+        self.style.filterButtonBorderRadius,
+      );
+      self.ctx.stroke();
+      self.ctx.fill();
+      drawFilterButtonArrow(posX, posY);
+      self.ctx.clip();
+      self.dispatchEvent('afterrenderfilterbutton', ev);
+      self.ctx.restore();
     }
-    function drawRowHeader(rowData, index, rowOrderIndex) {
-      var a, i;
+    function drawRowHeader(rowData, rowIndex, rowOrderIndex) {
       if (self.attributes.showRowHeaders) {
         x = 0;
-        i = index + 1;
-        rowHeaderCell = { rowHeaderCell: i };
-        a = {
+
+        // When filtering we'd like to display the actual row numbers,
+        // as it is in the unfiltered data, instead of simply the viewed
+        // row index + 1. If rowIndex > viewData.length, it's a new row
+        // added to the end, and we want to render that new row's number
+        let filteredRowNumber;
+        if (self.viewData && rowIndex < self.viewData.length)
+          filteredRowNumber =
+            self.getBoundRowIndexFromViewRowIndex(rowIndex) + 1;
+        else
+          filteredRowNumber = self.originalData
+            ? self.originalData.length + 1
+            : rowOrderIndex + 1;
+
+        let rowHeaderValue =
+          self.hasActiveFilters() || self.hasCollapsedRowGroup()
+            ? filteredRowNumber
+            : rowIndex + 1;
+        rowHeaderValue += currentRowIndexOffset;
+
+        const rowHeaderCell = { rowHeaderCell: rowHeaderValue };
+        const headerDescription = {
           name: 'rowHeaderCell',
           width: self.sizes.columns[-1] || self.style.rowHeaderCellWidth,
           style: 'rowHeaderCell',
           type: 'string',
-          data: i,
+          data: rowHeaderValue,
           index: -1,
         };
-        rowOpen = self.openChildren[index];
-        drawCell(rowHeaderCell, index, rowOrderIndex)(a, -1, -1);
+        rowOpen = self.openChildren[rowIndex];
+        drawCell(rowHeaderCell, rowOrderIndex, rowIndex)(
+          headerDescription,
+          -1,
+          -1,
+        );
+
+        if (
+          rowIndexOffsetByHiddenRows[0] &&
+          rowHeaderValue >= rowIndexOffsetByHiddenRows[0].from
+        ) {
+          const { plus } = rowIndexOffsetByHiddenRows.shift();
+          currentRowIndexOffset += plus;
+        }
       }
     }
     function drawHeaders() {
       var d,
-        g = s.length,
+        g = schema.length,
         i,
         o,
         columnHeaderCell,
@@ -1116,8 +1730,8 @@ export default function (self) {
         end = Math.min(end, g);
         for (o = start; o < end; o += 1) {
           i = self.orders.columns[o];
-          header = s[i];
-          if (!header.hidden) {
+          header = schema[i];
+          if (!header.hidden && !isColumnCollapsedByGroup(o)) {
             d = {
               title: header.title,
               name: header.name,
@@ -1182,7 +1796,7 @@ export default function (self) {
             isColumnHeaderCell: true,
             isColumnHeaderCellCap: true,
             type: 'string',
-            index: s.length,
+            index: schema.length,
           };
           drawCell({ endCap: '' }, -1, -1)(c, -1, -1);
         }
@@ -1201,20 +1815,20 @@ export default function (self) {
         }
       }
     }
-    function drawRow(r, d) {
-      var i,
+    function drawRow(rowOrderIndex, rowIndex) {
+      var headerIndex,
         treeHeight,
         rowSansTreeHeight,
-        o,
-        g = s.length;
+        columnOrderIndex,
+        g = schema.length;
       if (y - cellHeight * 2 > h) {
         return false;
       }
-      rd = data[r];
-      rowOpen = self.openChildren[r];
+      rowData = viewData[rowOrderIndex];
+      rowOpen = self.openChildren[rowOrderIndex];
       rowSansTreeHeight =
-        (self.sizes.rows[r] || self.style.cellHeight) * self.scale;
-      treeHeight = (rowOpen ? self.sizes.trees[r] : 0) * self.scale;
+        (self.sizes.rows[rowOrderIndex] || self.style.cellHeight) * self.scale;
+      treeHeight = (rowOpen ? self.sizes.trees[rowOrderIndex] : 0) * self.scale;
       rowHeight = rowSansTreeHeight + treeHeight;
       if (y < -rowHeight) {
         return false;
@@ -1224,23 +1838,43 @@ export default function (self) {
       }
       cellHeight = rowHeight;
       //draw normal columns
-      for (o = self.scrollIndexLeft; o < g; o += 1) {
-        i = self.orders.columns[o];
-        x += drawCell(rd, r, d)(s[i], i, o);
+      for (
+        columnOrderIndex = self.scrollIndexLeft;
+        columnOrderIndex < g;
+        columnOrderIndex += 1
+      ) {
+        if (!isColumnCollapsedByGroup(columnOrderIndex)) {
+          headerIndex = self.orders.columns[columnOrderIndex];
+          x += drawCell(rowData, rowOrderIndex, rowIndex)(
+            schema[headerIndex],
+            headerIndex,
+            columnOrderIndex,
+          );
+        }
         if (x > self.width) {
-          self.scrollIndexRight = o;
+          self.scrollIndexRight = columnOrderIndex;
           self.scrollPixelRight = x;
           break;
         }
       }
       //draw frozen columns
-      x = 0;
+      x = 1;
       if (self.attributes.showRowHeaders) {
         x += rowHeaderCellWidth;
       }
-      for (o = 0; o < self.frozenColumn; o += 1) {
-        i = self.orders.columns[o];
-        x += drawCell(rd, r, d)(s[i], i, o);
+      for (
+        columnOrderIndex = 0;
+        columnOrderIndex < self.frozenColumn;
+        columnOrderIndex += 1
+      ) {
+        if (!isColumnCollapsedByGroup(columnOrderIndex)) {
+          headerIndex = self.orders.columns[columnOrderIndex];
+          x += drawCell(rowData, rowOrderIndex, rowIndex)(
+            schema[headerIndex],
+            headerIndex,
+            columnOrderIndex,
+          );
+        }
         if (x > self.width) {
           break;
         }
@@ -1253,8 +1887,8 @@ export default function (self) {
         self.scrollPixelLeft +
         self.style.cellBorderWidth;
       // don't draw a tree for the new row
-      treeGrid = self.childGrids[r];
-      if (r !== data.length && rowOpen) {
+      treeGrid = self.childGrids[rowOrderIndex];
+      if (rowOrderIndex !== viewData.length && rowOpen) {
         treeGrid.visible = true;
         treeGrid.parentNode = {
           offsetTop: y + rowSansTreeHeight + self.canvasOffsetTop,
@@ -1268,10 +1902,19 @@ export default function (self) {
           nodeType: 'canvas-datagrid-tree',
           scrollTop: self.scrollBox.scrollTop,
           scrollLeft: self.scrollBox.scrollLeft,
-          rowIndex: r,
+          rowIndex: rowOrderIndex,
+          columnGroupsAreaHeight: columnGroupsAreaHeight,
+          rowGroupsAreaWidth: rowGroupsAreaWidth,
         };
+        if (self.intf.parentNode) {
+          const { columnGroupsAreaHeight, rowGroupsAreaWidth } =
+            self.intf.parentNode;
+          treeGrid.parentNode.columnGroupsAreaHeight +=
+            columnGroupsAreaHeight || 0;
+          treeGrid.parentNode.rowGroupsAreaWidth += rowGroupsAreaWidth || 0;
+        }
         self.visibleCells.unshift({
-          rowIndex: r,
+          rowIndex: rowOrderIndex,
           columnIndex: 0,
           y: treeGrid.parentNode.offsetTop,
           x: treeGrid.parentNode.offsetLeft,
@@ -1283,51 +1926,432 @@ export default function (self) {
         treeGrid.draw();
       } else if (treeGrid) {
         treeGrid.parentNode.offsetHeight = 0;
-        delete self.sizes.trees[r];
+        delete self.sizes.trees[rowOrderIndex];
       }
-      rowHeaders.push([rd, r, d, y, rowHeight]);
-      self.visibleRowHeights[r] = rowHeight;
+      rowHeaders.push([rowData, rowOrderIndex, rowIndex, y, rowHeight]);
+      self.visibleRowHeights[rowOrderIndex] = rowHeight;
       y += cellHeight + (bc ? 0 : self.style.cellBorderWidth);
       return true;
     }
     function initDraw() {
       self.visibleRows = [];
-      s = self.getSchema();
+      schema = self.getSchema();
       self.visibleCells = [];
+      self.visibleGroups = [];
+      self.visibleUnhideIndicators = [];
       self.canvasOffsetTop = self.isChildGrid ? self.parentNode.offsetTop : 0.5;
       self.canvasOffsetLeft = self.isChildGrid
         ? self.parentNode.offsetLeft
         : -0.5;
       h = self.height;
       w = self.width;
+
+      // patch for first row being hidden
+      const firstRowIndexOffset = rowIndexOffsetByHiddenRows[0];
+      if (firstRowIndexOffset && firstRowIndexOffset.from === 0) {
+        currentRowIndexOffset = firstRowIndexOffset.plus;
+        rowIndexOffsetByHiddenRows.shift();
+      }
     }
     function drawBackground() {
       radiusRect(0, 0, w, h, 0);
       self.ctx.clip();
+      self.ctx.clearRect(0, 0, w, h);
       self.ctx.fillStyle = self.style.gridBackgroundColor;
       fillRect(0, 0, w, h);
     }
+    function initGroupArea() {
+      self.ctx.translate(rowGroupsAreaWidth, columnGroupsAreaHeight);
+    }
+    function drawGroupArea() {
+      const mx = rowGroupsAreaWidth;
+      const my = columnGroupsAreaHeight;
+      const frozenColumnsWidth = getFrozenColumnsWidth();
+      const frozenRowsHeight =
+        rowGroupsFrozenInfo.y + rowGroupsFrozenInfo.h - columnHeaderCellHeight;
+      const onTheLeft = self.attributes.columnGroupIndicatorPosition === 'left';
+      const onTheTop = self.attributes.rowGroupIndicatorPosition === 'top';
+
+      /** @type {CanvasRenderingContext2D} */
+      const ctx = self.ctx;
+      ctx.save();
+      ctx.fillStyle = self.style.groupingAreaBackgroundColor;
+      fillRect(0, -my, w, my);
+      fillRect(-mx, -my, mx, h);
+      ctx.restore();
+
+      //#region Columns Grouping
+      /** it extends `self.groupedRows` */
+      const groupedColumns = [];
+      for (let row = 0; row < self.groupedColumns.length; row++) {
+        const groups = self.groupedColumns[row];
+        for (let j = 0; j < groups.length; j++) {
+          groupedColumns.push(Object.assign({ row }, groups[j]));
+        }
+      }
+      if (groupedColumns.length > 0) {
+        const rowHeight = self.style.columnGroupRowHeight;
+        const toggleHandleSize = rowHeight * 0.5;
+        const toggleHandlePadding = (rowHeight - toggleHandleSize) * 0.5;
+
+        for (let i = 0; i < groupedColumns.length; i++) {
+          const group = groupedColumns[i];
+          const { row, collapsed } = group;
+
+          const topY = -my + row * rowHeight;
+          const centerY = topY + rowHeight * 0.5;
+          const bottomY = topY + rowHeight - toggleHandlePadding;
+          const leftmostX =
+            rowHeaderCellWidth - toggleHandleSize - toggleHandlePadding;
+
+          const drawGroupHandleAtX = (x) =>
+            drawGroupHandle(
+              x,
+              topY + toggleHandlePadding,
+              toggleHandleSize,
+              group.collapsed,
+            );
+          const pushToVisibleGroups = (leftX, rightX) =>
+            self.visibleGroups.push({
+              type: 'c',
+              collapsed,
+              from: group.from,
+              to: group.to,
+              row,
+              x: leftX + mx,
+              y: topY + my,
+              x2: rightX + mx,
+              y2: bottomY + my,
+            });
+
+          //#region check the relationship between this group and frozen columns
+          const crossTheFrozen =
+            group.from < self.frozenColumn && group.to >= self.frozenColumn;
+          const notInFrozen = group.from >= self.frozenColumn;
+          //#endregion
+
+          if (collapsed) {
+            let leftX = leftmostX + toggleHandleSize;
+            // This group is not sticking on the first column
+            if (group.from > 0) {
+              let colIndex = group.to + 1;
+              let col = columnGroupsRectInfo[colIndex];
+              if (!col) {
+                colIndex = group.from - 1;
+                col = columnGroupsRectInfo[colIndex];
+                if (!col) continue; // don't draw this group indicator because it is invisible
+                leftX = col.x + col.w - toggleHandleSize * 0.5;
+              } else {
+                leftX = col.x + toggleHandlePadding;
+              }
+              if (colIndex >= self.frozenColumn) {
+                const compare =
+                  frozenColumnsWidth + rowHeaderCellWidth - toggleHandlePadding;
+                // don't draw this group indicator because it is hidden by frozen columns
+                if (leftX < compare) continue;
+              }
+            }
+            const rightX = leftX + toggleHandleSize;
+            ctx.save();
+            ctx.strokeStyle = self.style.groupIndicatorColor;
+            ctx.fillStyle = self.style.groupIndicatorBackgroundColor;
+            drawGroupHandleAtX(leftX);
+            ctx.restore();
+            pushToVisibleGroups(leftX, rightX);
+          } // end of collapsed group
+
+          /** @type {number} pointer for loop */
+          let ptr;
+          let left = columnGroupsRectInfo[group.from];
+          let right = columnGroupsRectInfo[group.to];
+
+          let containsBegining = true;
+          let containsEnd = true;
+          ptr = group.from;
+          while (!left && ptr < group.to) {
+            left = columnGroupsRectInfo[++ptr];
+            containsBegining = false;
+          }
+          ptr = group.to;
+          while (!right && ptr > group.from) {
+            right = columnGroupsRectInfo[--ptr];
+            containsEnd = false;
+          }
+          if (!left || !right) continue;
+          let rightX = right.x + right.w;
+          let leftX = left.x;
+          if (crossTheFrozen) {
+            const rightCompare = columnGroupsRectInfo[self.frozenColumn - 1];
+            if (rightCompare) {
+              let compareX = rightCompare.x + rightCompare.w;
+              if (!onTheLeft) compareX += toggleHandleSize;
+              if (compareX >= rightX) {
+                right = rightCompare;
+                rightX = right.x + right.w;
+                containsEnd = false;
+              }
+            }
+          }
+
+          let minLeftX =
+            rowHeaderCellWidth + (notInFrozen ? frozenColumnsWidth : 0);
+          if (rightX + (onTheLeft ? 0 : toggleHandleSize) < minLeftX) continue;
+
+          rightX -= toggleHandlePadding;
+          leftX += toggleHandlePadding;
+
+          ctx.save();
+          ctx.strokeStyle = self.style.groupIndicatorColor;
+          ctx.fillStyle = self.style.groupIndicatorBackgroundColor;
+          const lineCoords = [];
+
+          if (onTheLeft) {
+            // avoid lines from two groups be overlapping
+            minLeftX += toggleHandlePadding * 2;
+            if (leftX < minLeftX) leftX = minLeftX;
+            if (group.from === 0) leftX -= toggleHandlePadding * 2;
+            if (rightX >= leftX) {
+              lineCoords.push(leftX, centerY, rightX, centerY);
+              if (containsEnd) lineCoords.push(rightX, bottomY);
+            } else {
+              rightX = leftX;
+            }
+
+            leftX -= toggleHandleSize;
+            drawGroupHandleAtX(leftX);
+            // add more clickable area into `visibleGroups`
+            rightX += toggleHandlePadding - 1;
+          } else {
+            // handle on the right
+            if (leftX < minLeftX) leftX = minLeftX;
+            if (group.from === 0) leftX -= toggleHandlePadding * 2;
+            if (containsEnd) {
+              if (group.to === self.frozenColumn - 1) {
+                rightX -= toggleHandleSize;
+              } else {
+                rightX += toggleHandlePadding * 2;
+              }
+              drawGroupHandleAtX(rightX);
+            }
+            if (leftX > rightX) {
+              leftX = rightX;
+            } else {
+              if (group.from === 0) {
+                containsBegining = true;
+                leftX = leftmostX + toggleHandleSize;
+              }
+              if (containsBegining) lineCoords.push(leftX, bottomY);
+              lineCoords.push(leftX, centerY, rightX, centerY);
+            }
+
+            // add more clickable area into `visibleGroups`
+            leftX -= toggleHandlePadding + 1;
+            if (containsEnd) rightX += toggleHandleSize;
+          }
+          drawLines(lineCoords);
+          ctx.restore();
+          pushToVisibleGroups(leftX, rightX);
+        }
+      }
+      //#endregion Columns Grouping
+
+      //#region Rows Grouping
+      /** it extends `self.groupedRows` */
+      const groupedRows = [];
+      for (let col = 0; col < self.groupedRows.length; col++) {
+        const groups = self.groupedRows[col];
+        for (let j = 0; j < groups.length; j++) {
+          groupedRows.push(Object.assign({ col }, groups[j]));
+        }
+      }
+      if (groupedRows.length > 0) {
+        const colWidth = self.style.rowGroupColumnWidth;
+        const toggleHandleSize = colWidth * 0.5;
+        const toggleHandlePadding = (colWidth - toggleHandleSize) * 0.5;
+
+        for (let i = 0; i < groupedRows.length; i++) {
+          const group = groupedRows[i];
+          const { col, collapsed } = group;
+
+          const leftX = -mx + col * colWidth;
+          const centerX = leftX + colWidth * 0.5;
+          const rightX = leftX + colWidth - toggleHandlePadding;
+          const topmostY =
+            columnHeaderCellHeight - toggleHandleSize - toggleHandlePadding;
+
+          const drawGroupHandleAtY = (y) =>
+            drawGroupHandle(
+              leftX + toggleHandlePadding,
+              y,
+              toggleHandleSize,
+              group.collapsed,
+            );
+          const pushToVisibleGroups = (topY, bottomY) =>
+            self.visibleGroups.push({
+              type: 'r',
+              collapsed,
+              from: group.from,
+              to: group.to,
+              col,
+              x: leftX + mx,
+              y: topY + my,
+              x2: rightX + mx,
+              y2: bottomY + my,
+            });
+
+          //#region check the relationship between this group and frozen columns
+          const crossTheFrozen =
+            group.from < self.frozenRow && group.to >= self.frozenRow;
+          const notInFrozen = group.from >= self.frozenRow;
+          //#endregion
+
+          if (collapsed) {
+            let topY = topmostY + toggleHandleSize;
+            // This group is not sticking on the first column
+            if (group.from > 0) {
+              let rowIndex = group.to + 1;
+              let row = rowGroupsRectInfo[rowIndex];
+              if (!row) {
+                rowIndex = group.from - 1;
+                row = rowGroupsRectInfo[rowIndex];
+                if (!row) continue; // don't draw this group indicator because it is invisible
+                topY = row.y + row.h - toggleHandleSize * 0.5;
+              } else {
+                topY = row.y;
+              }
+              if (rowIndex >= self.frozenRow) {
+                const compare =
+                  frozenRowsHeight +
+                  columnHeaderCellHeight -
+                  toggleHandlePadding;
+                // don't draw this group indicator because it is hidden by frozen columns
+                if (topY < compare) continue;
+              }
+            }
+            const bottomY = topY + toggleHandleSize;
+            ctx.save();
+            ctx.strokeStyle = self.style.groupIndicatorColor;
+            ctx.fillStyle = self.style.groupIndicatorBackgroundColor;
+            drawGroupHandleAtY(topY);
+            ctx.restore();
+            pushToVisibleGroups(topY, bottomY);
+          } // end of collapsed group
+
+          /** @type {number} pointer for loop */
+          let ptr;
+          let top = rowGroupsRectInfo[group.from];
+          let bottom = rowGroupsRectInfo[group.to];
+
+          let containsBegining = true;
+          let containsEnd = true;
+          ptr = group.from;
+          while (!top && ptr < group.to) {
+            top = rowGroupsRectInfo[++ptr];
+            containsBegining = false;
+          }
+          ptr = group.to;
+          while (!bottom && ptr > group.from) {
+            bottom = rowGroupsRectInfo[--ptr];
+            containsEnd = false;
+          }
+          if (!top || !bottom) continue;
+          let bottomY = bottom.y + bottom.h;
+          let topY = top.y;
+          if (crossTheFrozen) {
+            const bottomCompare = rowGroupsRectInfo[self.frozenRow - 1];
+            if (bottomCompare) {
+              let compareY = bottomCompare.y + bottomCompare.h;
+              if (!onTheTop) compareY += toggleHandleSize;
+              if (compareY >= bottomY) {
+                bottom = bottomCompare;
+                bottomY = bottom.y + bottom.h;
+                containsEnd = false;
+              }
+            }
+          }
+
+          let minTopY =
+            columnHeaderCellHeight + (notInFrozen ? frozenRowsHeight : 0);
+          if (bottomY + (onTheTop ? 0 : toggleHandleSize) < minTopY) continue;
+
+          bottomY -= toggleHandlePadding;
+          topY += toggleHandlePadding;
+
+          ctx.save();
+          ctx.strokeStyle = self.style.groupIndicatorColor;
+          ctx.fillStyle = self.style.groupIndicatorBackgroundColor;
+          const lineCoords = [];
+
+          if (onTheTop) {
+            // avoid lines from two groups be overlapping
+            minTopY += toggleHandlePadding * 2;
+            if (topY < minTopY) topY = minTopY;
+            if (group.from === 0) topY -= toggleHandlePadding * 2;
+            if (bottomY >= topY) {
+              lineCoords.push(centerX, topY, centerX, bottomY);
+              if (containsEnd) lineCoords.push(rightX, bottomY);
+            } else {
+              bottomY = topY;
+            }
+
+            topY -= toggleHandleSize;
+            drawGroupHandleAtY(topY);
+
+            // add more clickable area into `visibleGroups`
+            bottomY += toggleHandlePadding - 1;
+          } else {
+            // handle on the bottom
+            if (topY < minTopY) topY = minTopY;
+            if (group.from === 0) topY -= toggleHandlePadding * 2;
+            if (containsEnd) {
+              if (group.to === self.frozenRow - 1) {
+                bottomY -= toggleHandleSize;
+              } else {
+                // bottomY += toggleHandlePadding * 2;
+              }
+              drawGroupHandleAtY(bottomY);
+            }
+            if (topY > bottomY) {
+              topY = bottomY;
+            } else {
+              if (group.from === 0) {
+                containsBegining = true;
+                topY = topmostY + toggleHandleSize;
+              }
+              if (containsBegining) lineCoords.push(rightX, topY);
+              lineCoords.push(centerX, topY, centerX, bottomY);
+              // add more clickable area into `visibleGroups`
+              topY -= toggleHandlePadding + 1;
+            }
+            // add more clickable area into `visibleGroups`
+            if (containsEnd) bottomY += toggleHandleSize;
+          }
+          drawLines(lineCoords);
+          ctx.restore();
+          pushToVisibleGroups(topY, bottomY);
+        }
+      }
+      //#endregion Rows Grouping
+    }
     function drawFrozenRows() {
-      var n,
-        ln = Math.min(data.length, self.frozenRow);
+      var rowOrderIndex,
+        ln = Math.min(viewData.length, self.frozenRow);
       x =
         -self.scrollBox.scrollLeft +
         self.scrollPixelLeft +
         self.style.cellBorderWidth;
       y = columnHeaderCellHeight;
-      for (r = 0; r < ln; r += 1) {
-        n = self.orders.rows[r];
-        if (!drawRow(n, r)) {
+      for (rowIndex = 0; rowIndex < ln; rowIndex += 1) {
+        rowOrderIndex = self.orders.rows[rowIndex];
+        if (!drawRow(rowOrderIndex, rowIndex)) {
           break;
         }
       }
       if (self.attributes.allowFreezingRows) {
         // HACK great, another stupid magic number.
         // Background will appear as a 0.5px artifact behind the row freeze bar without this hack
-        y +=
-          self.style.frozenMarkerBorderWidth +
-          self.style.frozenMarkerWidth -
-          0.4999999999;
+        if (y > columnHeaderCellHeight) y += self.style.frozenMarkerWidth;
+        y += self.style.frozenMarkerBorderWidth - 0.4999999999;
       }
       self.lastFrozenRowPixel = y;
     }
@@ -1343,10 +2367,10 @@ export default function (self) {
         );
         self.ctx.clip();
       }
-      var o,
-        n,
-        i,
-        g = s.length;
+      var columnOrderIndex,
+        rowOrderIndex,
+        headerIndex,
+        g = schema.length;
       x =
         -self.scrollBox.scrollLeft +
         self.scrollPixelLeft +
@@ -1357,11 +2381,21 @@ export default function (self) {
           self.scrollPixelTop +
           self.style.cellBorderWidth;
       }
-      for (r = self.frozenRow + self.scrollIndexTop; r < l; r += 1) {
-        n = self.orders.rows[r];
-        self.scrollIndexBottom = r;
+      for (
+        rowIndex = self.frozenRow + self.scrollIndexTop;
+        rowIndex < l;
+        rowIndex += 1
+      ) {
+        rowOrderIndex = self.orders.rows[rowIndex];
+        self.scrollIndexBottom = rowIndex;
         self.scrollPixelBottom = y;
-        if (!drawRow(n, r)) {
+        if (
+          self.cellTree.rows.length > 0 &&
+          Object.keys(self.cellTree.rows[rowOrderIndex]).length > 0 &&
+          self.cellTree.rows[rowOrderIndex].hide
+        )
+          continue;
+        if (!drawRow(rowOrderIndex, rowIndex)) {
           break;
         }
       }
@@ -1371,14 +2405,30 @@ export default function (self) {
         }
         rowHeight = cellHeight = self.style.cellHeight;
         rowOpen = false;
-        for (o = self.scrollIndexLeft; o < g; o += 1) {
-          i = self.orders.columns[o];
-          x += drawCell(self.newRow, data.length, data.length)(s[i], i, o);
+        for (
+          columnOrderIndex = self.scrollIndexLeft;
+          columnOrderIndex < g;
+          columnOrderIndex += 1
+        ) {
+          if (!isColumnCollapsedByGroup(columnOrderIndex)) {
+            headerIndex = self.orders.columns[columnOrderIndex];
+            x += drawCell(self.newRow, viewData.length, viewData.length)(
+              schema[headerIndex],
+              headerIndex,
+              columnOrderIndex,
+            );
+          }
           if (x > self.width + self.scrollBox.scrollLeft) {
             break;
           }
         }
-        rowHeaders.push([self.newRow, data.length, data.length, y, rowHeight]);
+        rowHeaders.push([
+          self.newRow,
+          viewData.length,
+          viewData.length,
+          y,
+          rowHeight,
+        ]);
       }
       self.ctx.restore();
     }
@@ -1414,6 +2464,7 @@ export default function (self) {
       self.ctx.lineWidth = self.style.reorderMarkerBorderWidth;
       self.ctx.strokeStyle = self.style.reorderMarkerBorderColor;
       if (self.dragMode === 'row-reorder') {
+        b.height = self.getSelectedRowsHeight();
         b.width = w;
         b.x = 0;
         m.width = w;
@@ -1424,6 +2475,7 @@ export default function (self) {
         self.ctx.lineWidth = self.style.reorderMarkerIndexBorderWidth;
         self.ctx.strokeStyle = self.style.reorderMarkerIndexBorderColor;
         if (
+          !self.isRowSelected(self.reorderTarget.sortRowIndex) &&
           self.currentCell.rowIndex !== self.reorderObject.rowIndex &&
           self.currentCell.rowIndex > -1 &&
           self.currentCell.rowIndex < l
@@ -1436,6 +2488,7 @@ export default function (self) {
           );
         }
       } else if (self.dragMode === 'column-reorder' && self.reorderObject) {
+        b.width = self.getSelectedColumnsWidth();
         b.height = h;
         b.y = 0;
         m.height = h;
@@ -1447,10 +2500,12 @@ export default function (self) {
         self.ctx.lineWidth = self.style.reorderMarkerIndexBorderWidth;
         self.ctx.strokeStyle = self.style.reorderMarkerIndexBorderColor;
         if (
+          !self.isColumnSelected(self.reorderTarget.sortColumnIndex) &&
           self.currentCell.sortColumnIndex !==
             self.reorderObject.sortColumnIndex &&
+          self.reorderTarget.columnIndex !== self.reorderObject.columnIndex &&
           self.currentCell.sortColumnIndex > -1 &&
-          self.currentCell.sortColumnIndex < s.length
+          self.currentCell.sortColumnIndex < schema.length
         ) {
           addBorderLine(
             m,
@@ -1461,16 +2516,43 @@ export default function (self) {
         }
       }
     }
+    function drawResizeMarkers() {
+      if (
+        !self.attributes.resizeAfterDragged ||
+        !self.draggingItem ||
+        !self.pendingDragResize ||
+        (self.dragMode != 'ew-resize' && self.dragMode != 'ns-resize')
+      ) {
+        return;
+      }
+
+      const resizingRow = self.dragMode == 'ns-resize';
+      const height = resizingRow ? self.style.resizeMarkerSize : self.height;
+      const width = resizingRow ? self.width : self.style.resizeMarkerSize;
+      const minX =
+        self.dragStart.x -
+        (self.resizingStartingWidth - self.style.minColumnWidth);
+      const minY =
+        self.dragStart.y -
+        (self.resizingStartingHeight - self.style.minRowHeight);
+      const x = resizingRow ? 0 : Math.max(self.pendingDragResize.x, minX);
+      const y = !resizingRow ? 0 : Math.max(self.pendingDragResize.y, minY);
+
+      self.ctx.fillStyle = self.style.resizeMarkerColor;
+      fillRect(x, y, width, height);
+    }
     function drawBorder() {
       self.ctx.lineWidth = self.style.gridBorderWidth;
       self.ctx.strokeStyle = self.style.gridBorderColor;
       strokeRect(0, 0, self.width, self.height);
     }
     function drawSelectionBorders() {
-      self.ctx.lineWidth = self.style.selectionOverlayBorderWidth;
-      self.ctx.strokeStyle = self.style.selectionOverlayBorderColor;
       function dsb(c) {
-        addBorderLine(c[0], c[1]);
+        if (!self.fillOverlay.handle) {
+          self.ctx.lineWidth = self.style.selectionOverlayBorderWidth;
+          self.ctx.strokeStyle = self.style.selectionOverlayBorderColor;
+          addBorderLine(c[0], c[1]);
+        }
       }
       selectionBorders
         .filter(function (c) {
@@ -1513,9 +2595,14 @@ export default function (self) {
         })
         .forEach(dsb);
       self.ctx.restore();
+
+      drawFillOverlay();
     }
     function drawSelectionHandles() {
-      if (self.mobile || self.attributes.allowMovingSelection) {
+      if (
+        (self.mobile || self.attributes.allowMovingSelection) &&
+        self.attributes.editable
+      ) {
         self.ctx.lineWidth = self.style.selectionHandleBorderWidth;
         self.ctx.strokeStyle = self.style.selectionHandleBorderColor;
         self.ctx.fillStyle = self.style.selectionHandleColor;
@@ -1536,6 +2623,62 @@ export default function (self) {
         });
       }
     }
+    function drawFillOverlay() {
+      if (!self.fillOverlay.handle || !self.fillOverlay.snapTo) {
+        return;
+      }
+
+      self.ctx.save();
+
+      const overlay = self.fillOverlay;
+      const handle = overlay.handle;
+      const toX = overlay.snapTo.x;
+      const toY = overlay.snapTo.y;
+
+      // The cell that the cursor is moving over. This may be unavailable
+      // when the cursor is outside the grid or is pointing to something else.
+      //
+      // When unavailable, we use the actual position of the cursor to draw
+      // the overlay.
+      const snap = overlay.snap;
+
+      // Calculate the X, Y coordinates of the cursor with snap positions and
+      // the direction of the movement in mind.
+      //
+      // When the movement is horizontal, we get the Y coordinate from the handle,
+      // and vice-versa.
+      const cursorX =
+        overlay.direction === 'x'
+          ? snap
+            ? snap.x + (overlay.x < toX ? 0 : snap.width)
+            : overlay.x
+          : handle.x;
+      const cursorY =
+        overlay.direction === undefined || overlay.direction === 'y'
+          ? snap
+            ? snap.y + (overlay.y < toY ? 0 : snap.height)
+            : overlay.y
+          : handle.y;
+
+      // The final coordinates of the rect. We use 'minX' and 'minY' to avoid
+      // drawing on the frozen area.
+      const x = Math.max(Math.min(toX, cursorX), overlay.minX);
+      const y = Math.max(Math.min(toY, cursorY), overlay.minY);
+
+      // Width and height of the rect are the difference between the
+      // coordinates of both the rect and the cursor. The user may be pointing
+      // behind and/or upwards of the rect, so we need to take that into
+      // account.
+      const width = Math.max(toX, cursorX) - x;
+      const height = Math.max(toY, cursorY) - y;
+
+      self.ctx.strokeStyle = self.style.fillOverlayBorderColor;
+      self.ctx.lineWidth = self.style.fillOverlayBorderWidth;
+      self.ctx.setLineDash([3, 3]);
+      strokeRect(x, y, width, height);
+      self.ctx.setLineDash([]);
+      self.ctx.restore();
+    }
     function drawActiveCell() {
       if (!aCell) {
         return;
@@ -1570,77 +2713,171 @@ export default function (self) {
     }
     function drawFrozenMarkers() {
       var my = self.lastFrozenRowPixel - self.style.frozenMarkerWidth,
-        mx = self.lastFrozenColumnPixel - self.style.frozenMarkerBorderWidth,
+        mx = self.lastFrozenColumnPixel - self.style.frozenMarkerWidth,
         xHover =
           self.currentCell && self.currentCell.style === 'frozen-row-marker',
         yHover =
           self.currentCell && self.currentCell.style === 'frozen-column-marker';
+      let rowHeaderCellWidth = self.getRowHeaderCellWidth();
       self.ctx.lineWidth = self.style.frozenMarkerBorderWidth;
       if (self.attributes.allowFreezingColumns) {
-        self.ctx.fillStyle = yHover
-          ? self.style.frozenMarkerHoverColor
-          : self.style.frozenMarkerColor;
-        self.ctx.strokeStyle = yHover
-          ? self.style.frozenMarkerHoverBorderColor
-          : self.style.frozenMarkerBorderColor;
-        fillRect(mx, 0, self.style.frozenMarkerWidth, self.height);
-        strokeRect(mx, 0, self.style.frozenMarkerWidth, self.height);
-        self.visibleCells.unshift({
-          x: mx,
-          y: 0,
-          height: self.height,
-          width:
-            self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth,
-          style: 'frozen-column-marker',
-        });
-      }
-      if (self.attributes.allowFreezingRows) {
-        self.ctx.fillStyle = xHover
-          ? self.style.frozenMarkerHoverColor
-          : self.style.frozenMarkerColor;
-        self.ctx.strokeStyle = xHover
-          ? self.style.frozenMarkerHoverBorderColor
-          : self.style.frozenMarkerBorderColor;
-        fillRect(0, my, self.width, self.style.frozenMarkerWidth);
-        strokeRect(0, my, self.width, self.style.frozenMarkerWidth);
-        self.visibleCells.unshift({
-          x: 0,
-          y: my,
-          height:
-            self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth,
-          width: self.width,
-          style: 'frozen-row-marker',
-        });
-      }
-      if (self.freezeMarkerPosition) {
-        self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
-        self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
-        if (self.dragMode === 'frozen-column-marker') {
+        if (
+          !self.freezeMarkerPosition ||
+          (self.freezeMarkerPosition && self.dragMode === 'frozen-row-marker')
+        ) {
+          if (mx > self.style.rowHeaderCellWidth) {
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(mx, 0, self.style.frozenMarkerWidth, self.height);
+            strokeRect(mx, 0, self.style.frozenMarkerWidth, self.height);
+          }
+          self.ctx.fillStyle = yHover
+            ? self.style.frozenMarkerHoverColor
+            : self.style.frozenMarkerHeaderColor;
+          self.ctx.strokeStyle = yHover
+            ? self.style.frozenMarkerHoverBorderColor
+            : self.style.frozenMarkerHeaderColor;
           fillRect(
-            self.freezeMarkerPosition.x,
+            mx,
             0,
             self.style.frozenMarkerWidth,
-            self.height,
+            self.style.columnHeaderCellHeight,
           );
           strokeRect(
-            self.freezeMarkerPosition.x,
+            mx,
             0,
             self.style.frozenMarkerWidth,
-            self.height,
+            self.style.columnHeaderCellHeight,
           );
-        } else {
+        }
+
+        if (
+          !self.dragStartObject ||
+          (self.dragStartObject &&
+            self.dragStartObject.style !== 'rowHeaderCell')
+        ) {
+          self.visibleCells.unshift({
+            x: mx,
+            y: 0,
+            height: self.height,
+            width: self.style.frozenMarkerWidth, // + self.style.frozenMarkerBorderWidth,
+            style: 'frozen-column-marker',
+          });
+        }
+      }
+      if (self.attributes.allowFreezingRows) {
+        if (
+          !self.freezeMarkerPosition ||
+          (self.freezeMarkerPosition &&
+            self.dragMode === 'frozen-column-marker')
+        ) {
+          if (my > rowHeaderCellWidth) {
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(0, my, self.width, self.style.frozenMarkerWidth);
+            strokeRect(0, my, self.width, self.style.frozenMarkerWidth);
+          }
+          self.ctx.fillStyle = xHover
+            ? self.style.frozenMarkerHoverColor
+            : self.style.frozenMarkerHeaderColor;
+          self.ctx.strokeStyle = xHover
+            ? self.style.frozenMarkerHoverBorderColor
+            : self.style.frozenMarkerHeaderColor;
+          fillRect(0, my, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          strokeRect(0, my, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+        }
+        var height =
+          self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth;
+        if (
+          !self.dragStartObject ||
+          (self.dragStartObject &&
+            self.dragStartObject.style !== 'columnHeaderCell')
+        ) {
+          self.visibleCells.unshift({
+            x: 0,
+            y: my,
+            height: height,
+            width: self.width,
+            style: 'frozen-row-marker',
+          });
+        }
+        rowGroupsFrozenInfo = { y: my, h: height };
+      }
+      if (self.freezeMarkerPosition) {
+        self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
+        self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
+        if (self.dragMode === 'frozen-column-marker') {
+          let posX = self.freezeMarkerPosition.x;
+          let nearCell = self.getCellAt(posX, 0);
+          if (self.freezeMarkerPosition.isGrab) posX = mx;
+          if (posX > rowHeaderCellWidth) {
+            let x =
+              nearCell.x -
+              self.style.frozenMarkerWidth -
+              self.style.frozenMarkerBorderWidth;
+            if (posX > x + nearCell.width / 2) x = x + nearCell.width;
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(x, 0, self.style.frozenMarkerWidth, self.height);
+            strokeRect(x, 0, self.style.frozenMarkerWidth, self.height);
+            self.ctx.fillStyle = self.style.frozenMarkerHeaderColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerHeaderColor;
+            fillRect(
+              x,
+              0,
+              self.style.frozenMarkerWidth,
+              self.style.columnHeaderCellHeight,
+            );
+            strokeRect(
+              x,
+              0,
+              self.style.frozenMarkerWidth,
+              self.style.columnHeaderCellHeight,
+            );
+          }
+          self.ctx.fillStyle = self.style.frozenMarkerActiveHeaderColor;
+          self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
           fillRect(
+            posX,
             0,
-            self.freezeMarkerPosition.y,
-            self.width,
             self.style.frozenMarkerWidth,
+            self.style.columnHeaderCellHeight,
           );
           strokeRect(
+            posX,
             0,
-            self.freezeMarkerPosition.y,
-            self.width,
             self.style.frozenMarkerWidth,
+            self.style.columnHeaderCellHeight,
           );
+          self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
+          fillRect(posX, 0, self.style.frozenMarkerWidth, self.height);
+          strokeRect(posX, 0, self.style.frozenMarkerWidth, self.height);
+        } else {
+          let posY = self.freezeMarkerPosition.y;
+          let nearCell = self.getCellAt(0, posY);
+          if (self.freezeMarkerPosition.isGrab) posY = my;
+          if (posY > self.style.columnHeaderCellHeight) {
+            let y =
+              nearCell.y -
+              self.style.frozenMarkerWidth -
+              self.style.frozenMarkerBorderWidth;
+            if (posY > y + nearCell.height / 2) y = y + nearCell.height;
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(0, y, self.width, self.style.frozenMarkerWidth);
+            strokeRect(0, y, self.width, self.style.frozenMarkerWidth);
+            self.ctx.fillStyle = self.style.frozenMarkerHeaderColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerHeaderColor;
+            fillRect(0, y, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+            strokeRect(0, y, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          }
+          self.ctx.fillStyle = self.style.frozenMarkerActiveHeaderColor;
+          self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
+          fillRect(0, posY, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          strokeRect(0, posY, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
+          fillRect(0, posY, self.width, self.style.frozenMarkerWidth);
+          strokeRect(0, posY, self.width, self.style.frozenMarkerWidth);
         }
       }
     }
@@ -1849,6 +3086,7 @@ export default function (self) {
     self.ctx.save();
     initDraw();
     drawBackground();
+    initGroupArea();
     drawFrozenRows();
     drawRows();
     drawActiveCell();
@@ -1857,12 +3095,14 @@ export default function (self) {
     drawSelectionHandles();
     drawReorderMarkers();
     drawMoveMarkers();
+    drawResizeMarkers();
     drawBorder();
     drawSelectionBorders();
     drawScrollBars();
     if (checkScrollHeight) {
       self.resize(true);
     }
+    drawGroupArea();
     drawDebug();
     drawPerfLines();
     if (self.dispatchEvent('afterdraw', {})) {