canvas-datagrid 0.3.25 → 0.4.3

package/lib/draw.js

@@ -108,6 +108,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,
@@ -164,6 +256,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 +600,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 +616,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 +684,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 +692,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,7 +770,25 @@ export default function (self) {
       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 = [];
@@ -623,6 +796,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 +1174,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 +1194,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 +1338,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 +1426,31 @@ 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;
+          }
+          // 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;
@@ -1190,9 +1466,141 @@ export default function (self) {
           }
         }
 
+        //#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;
@@ -1230,16 +1638,20 @@ export default function (self) {
         // 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
-        const filteredRowNumber =
-          self.viewData && rowIndex < self.viewData.length
-            ? self.getBoundRowIndexFromViewRowIndex(rowIndex) + 1
-            : self.originalData
+        let filteredRowNumber;
+        if (self.viewData && rowIndex < self.viewData.length)
+          filteredRowNumber =
+            self.getBoundRowIndexFromViewRowIndex(rowIndex) + 1;
+        else
+          filteredRowNumber = self.originalData
             ? self.originalData.length + 1
             : rowOrderIndex + 1;
 
-        const rowHeaderValue = self.hasActiveFilters()
-          ? filteredRowNumber
-          : rowIndex + 1;
+        let rowHeaderValue =
+          self.hasActiveFilters() || self.hasCollapsedRowGroup()
+            ? filteredRowNumber
+            : rowIndex + 1;
+        rowHeaderValue += currentRowIndexOffset;
 
         const rowHeaderCell = { rowHeaderCell: rowHeaderValue };
         const headerDescription = {
@@ -1256,6 +1668,14 @@ export default function (self) {
           -1,
           -1,
         );
+
+        if (
+          rowIndexOffsetByHiddenRows[0] &&
+          rowHeaderValue >= rowIndexOffsetByHiddenRows[0].from
+        ) {
+          const { plus } = rowIndexOffsetByHiddenRows.shift();
+          currentRowIndexOffset += plus;
+        }
       }
     }
     function drawHeaders() {
@@ -1271,7 +1691,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 +1803,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 +1827,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 +1863,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,12 +1899,21 @@ export default function (self) {
       self.visibleRows = [];
       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);
@@ -1477,6 +1921,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;
+          }
+          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 rowOrderIndex,
         ln = Math.min(viewData.length, self.frozenRow);
@@ -1535,6 +2352,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 +2373,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 +2592,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 +2627,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 +2875,7 @@ export default function (self) {
     self.ctx.save();
     initDraw();
     drawBackground();
+    initGroupArea();
     drawFrozenRows();
     drawRows();
     drawActiveCell();
@@ -2061,6 +2890,7 @@ export default function (self) {
     if (checkScrollHeight) {
       self.resize(true);
     }
+    drawGroupArea();
     drawDebug();
     drawPerfLines();
     if (self.dispatchEvent('afterdraw', {})) {