canvas-datagrid 0.3.24 → 0.4.2

package/lib/draw.js

@@ -108,6 +108,37 @@ export default function (self) {
           '</svg>\n',
       );
   }
+  /**
+   * @param {number[]} coords [x0,y0, x1,y1, x2,y2, ...]
+   */
+  function strokeLines(coords) {
+    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);
+    }
+    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;
+    strokeLines([x + width * 0.2, cy, x + width * 0.78, cy]);
+    if (collapsed) strokeLines([cx, y + width * 0.22, cx, y + width * 0.8]);
+  }
   function drawOrderByArrow(x, y) {
     var mt = self.style.columnHeaderOrderByArrowMarginTop * self.scale,
       ml = self.style.columnHeaderOrderByArrowMarginLeft * self.scale,
@@ -164,6 +195,54 @@ 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) /
@@ -460,7 +539,7 @@ 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,
@@ -476,12 +555,18 @@ export default function (self) {
               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;
       }
@@ -538,6 +623,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) {
@@ -545,7 +631,15 @@ export default function (self) {
       if (column.hidden) {
         hiddenFrozenColumnCount += 1;
       } else {
-        w += self.getColumnWidth(x);
+        const isCollapsed =
+          collapsedGroups.findIndex(
+            (group) => x >= group.from && x <= group.to,
+          ) >= 0;
+        if (isCollapsed) {
+          hiddenFrozenColumnCount += 1;
+        } else {
+          w += self.getColumnWidth(x);
+        }
       }
       x += 1;
     }
@@ -615,6 +709,16 @@ export default function (self) {
       u = self.currentCell || {},
       columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
       rowHeaderCellWidth = self.getRowHeaderCellWidth(),
+      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;
     drawCount += 1;
     p = performance.now();
@@ -623,6 +727,31 @@ export default function (self) {
     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,
@@ -976,6 +1105,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;
@@ -987,6 +1125,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;
         }
@@ -1129,7 +1269,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) {
@@ -1171,10 +1357,18 @@ export default function (self) {
           const previousRowNumber = self.getBoundRowIndexFromViewRowIndex(
             rowOrderIndex - 1,
           );
-          const hasRowGap =
+          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;
+          }
 
           if (hasRowGap) {
             const barHeight = self.style.rowHeaderCellRowNumberGapHeight;
@@ -1237,9 +1431,10 @@ export default function (self) {
             ? self.originalData.length + 1
             : rowOrderIndex + 1;
 
-        const rowHeaderValue = self.hasActiveFilters()
-          ? filteredRowNumber
-          : rowIndex + 1;
+        const rowHeaderValue =
+          self.hasActiveFilters() || self.hasCollapsedRowGroup()
+            ? filteredRowNumber
+            : rowIndex + 1;
 
         const rowHeaderCell = { rowHeaderCell: rowHeaderValue };
         const headerDescription = {
@@ -1271,7 +1466,7 @@ export default function (self) {
         for (o = start; o < end; o += 1) {
           i = self.orders.columns[o];
           header = schema[i];
-          if (!header.hidden) {
+          if (!header.hidden && !isColumnCollapsedByGroup(o)) {
             d = {
               title: header.title,
               name: header.name,
@@ -1383,12 +1578,14 @@ export default function (self) {
         columnOrderIndex < g;
         columnOrderIndex += 1
       ) {
-        headerIndex = self.orders.columns[columnOrderIndex];
-        x += drawCell(rowData, rowOrderIndex, rowIndex)(
-          schema[headerIndex],
-          headerIndex,
-          columnOrderIndex,
-        );
+        if (!isColumnCollapsedByGroup(columnOrderIndex)) {
+          headerIndex = self.orders.columns[columnOrderIndex];
+          x += drawCell(rowData, rowOrderIndex, rowIndex)(
+            schema[headerIndex],
+            headerIndex,
+            columnOrderIndex,
+          );
+        }
         if (x > self.width) {
           self.scrollIndexRight = columnOrderIndex;
           self.scrollPixelRight = x;
@@ -1405,12 +1602,14 @@ export default function (self) {
         columnOrderIndex < self.frozenColumn;
         columnOrderIndex += 1
       ) {
-        headerIndex = self.orders.columns[columnOrderIndex];
-        x += drawCell(rowData, rowOrderIndex, rowIndex)(
-          schema[headerIndex],
-          headerIndex,
-          columnOrderIndex,
-        );
+        if (!isColumnCollapsedByGroup(columnOrderIndex)) {
+          headerIndex = self.orders.columns[columnOrderIndex];
+          x += drawCell(rowData, rowOrderIndex, rowIndex)(
+            schema[headerIndex],
+            headerIndex,
+            columnOrderIndex,
+          );
+        }
         if (x > self.width) {
           break;
         }
@@ -1439,7 +1638,18 @@ export default function (self) {
           scrollTop: self.scrollBox.scrollTop,
           scrollLeft: self.scrollBox.scrollLeft,
           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: rowOrderIndex,
           columnIndex: 0,
@@ -1464,6 +1674,7 @@ export default function (self) {
       self.visibleRows = [];
       schema = self.getSchema();
       self.visibleCells = [];
+      self.visibleGroups = [];
       self.canvasOffsetTop = self.isChildGrid ? self.parentNode.offsetTop : 0.5;
       self.canvasOffsetLeft = self.isChildGrid
         ? self.parentNode.offsetLeft
@@ -1477,6 +1688,379 @@ export default function (self) {
       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;
+          }
+          strokeLines(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;
+          }
+          strokeLines(lineCoords);
+          ctx.restore();
+          pushToVisibleGroups(topY, bottomY);
+        }
+      }
+      //#endregion Rows Grouping
+    }
     function drawFrozenRows() {
       var rowOrderIndex,
         ln = Math.min(viewData.length, self.frozenRow);
@@ -1535,6 +2119,12 @@ export default function (self) {
         rowOrderIndex = self.orders.rows[rowIndex];
         self.scrollIndexBottom = rowIndex;
         self.scrollPixelBottom = y;
+        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;
         }
@@ -1550,12 +2140,14 @@ export default function (self) {
           columnOrderIndex < g;
           columnOrderIndex += 1
         ) {
-          headerIndex = self.orders.columns[columnOrderIndex];
-          x += drawCell(self.newRow, viewData.length, viewData.length)(
-            schema[headerIndex],
-            headerIndex,
-            columnOrderIndex,
-          );
+          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;
           }
@@ -1767,6 +2359,7 @@ export default function (self) {
       self.ctx.restore();
     }
     function drawFrozenMarkers() {
+      if (self.dragStartObject !== undefined) return;
       var my = self.lastFrozenRowPixel - self.style.frozenMarkerWidth,
         mx = self.lastFrozenColumnPixel - self.style.frozenMarkerBorderWidth,
         xHover =
@@ -1801,14 +2394,16 @@ export default function (self) {
           : self.style.frozenMarkerBorderColor;
         fillRect(0, my, self.width, self.style.frozenMarkerWidth);
         strokeRect(0, my, self.width, self.style.frozenMarkerWidth);
+        const height =
+          self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth;
         self.visibleCells.unshift({
           x: 0,
           y: my,
-          height:
-            self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth,
+          height,
           width: self.width,
           style: 'frozen-row-marker',
         });
+        rowGroupsFrozenInfo = { y: my, h: height };
       }
       if (self.freezeMarkerPosition) {
         self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
@@ -2047,6 +2642,7 @@ export default function (self) {
     self.ctx.save();
     initDraw();
     drawBackground();
+    initGroupArea();
     drawFrozenRows();
     drawRows();
     drawActiveCell();
@@ -2061,6 +2657,7 @@ export default function (self) {
     if (checkScrollHeight) {
       self.resize(true);
     }
+    drawGroupArea();
     drawDebug();
     drawPerfLines();
     if (self.dispatchEvent('afterdraw', {})) {