canvas-datagrid 0.3.25 → 0.4.3

package/lib/contextMenu.js

@@ -538,8 +538,114 @@ export default function (self) {
       });
     }
   }
+
+  /**
+   * Return a tuple if the user selected contiguous columns, otherwise `null`.
+   * Info: Because the user may reorder the columns,
+   * the schemaIndex of the first item may be greater than the schemaIndex of the second item,
+   * but the columnIndex of the firs item must less than the columnIndex of the second item.
+   * @param {any[]} schema from `self.getSchema()`
+   * @returns {any[]} column schemas tuple (each schema has an additional field `schemaIndex`)
+   */
+  function getSelectedContiguousColumns(ev, schema) {
+    const memoKey = '__contiguousColumns';
+    if (Array.isArray(ev[memoKey]) || ev[memoKey] === null) return ev[memoKey];
+    ev[memoKey] = null;
+
+    if (!Array.isArray(self.selections) || self.selections.length === 0) return;
+    const selection = self.selections[0];
+    if (!selection || selection.length === 0) return;
+    for (let rowIndex = 0; rowIndex < self.viewData.length; rowIndex++) {
+      const row = self.viewData[rowIndex];
+      if (!row) continue;
+      const compare = self.selections[rowIndex];
+      if (!compare) return;
+      if (compare.length !== selection.length) return;
+      for (let i = 0; i < selection.length; i++)
+        if (selection[i] !== compare[i]) return;
+    }
+    selection.sort((a, b) => a - b);
+
+    /** @type {number[][]} */
+    const ranges = [];
+    let begin = selection[0];
+    let end = selection[0];
+    for (let i = 1; i < selection.length; i++) {
+      const orderIndex = selection[i];
+      if (orderIndex === end + 1) {
+        end = orderIndex;
+        continue;
+      }
+      ranges.push([begin, end]);
+      begin = orderIndex;
+      end = orderIndex;
+    }
+    ranges.push([begin, end]);
+
+    const currentOrderIndex = ev.cell.columnIndex;
+    const matchedRange = ranges.find(
+      (range) =>
+        currentOrderIndex >= range[0] &&
+        currentOrderIndex <= range[1] &&
+        range[0] !== range[1],
+    );
+    if (!matchedRange) return;
+
+    /** @type {number[]} orders[index] => columnIndex */
+    const orders = self.orders.columns;
+    if (!Array.isArray(orders)) return;
+
+    const matchedSchema = matchedRange.map((orderIndex) => {
+      const schemaIndex = orders[orderIndex];
+      const thisSchema = schema[schemaIndex];
+      return Object.assign({}, thisSchema, { orderIndex });
+    });
+    if (matchedSchema.findIndex((it) => !it) >= 0) return;
+    return (ev[memoKey] = matchedSchema);
+  }
+  /**
+   * @param {boolean} [allowOnlyOneRow]
+   * @returns {number[]} a rowIndex tuple. It can contains one row index or two row indexes.
+   */
+  function getSelectedContiguousRows(allowOnlyOneRow) {
+    let range = [];
+    let prev = -2;
+    let ok = true;
+    self.selections.forEach(function (row, index) {
+      if (!ok) return;
+      if (prev < -1) {
+        prev = index;
+        range[0] = index;
+        return;
+      }
+      if (index !== prev + 1 || !row || row.length === 0) {
+        ok = false;
+        return;
+      }
+      prev = index;
+      range[1] = index;
+    });
+    if (ok) {
+      if (range.length === 1) return allowOnlyOneRow ? range : null;
+      return range;
+    }
+  }
   function addDefaultContextMenuItem(e) {
-    var isNormalCell =
+    const schema = self.getSchema();
+    /**
+     * A map between columnIndex and column data
+     * @type {Map<string,any>}
+     */
+    let columns;
+    const getColumnsMap = () => {
+      if (!columns)
+        columns = new Map(schema.map((_col) => [_col.columnIndex, _col]));
+      return columns;
+    };
+    const isSorting =
+      self.orderings.columns && self.orderings.columns.length > 0;
+
+    const isNormalCell =
       !(
         e.cell.isBackground ||
         e.cell.isColumnHeaderCellCap ||
@@ -609,20 +715,35 @@ export default function (self) {
         },
       });
       if (e.cell && e.cell.header && e.cell.columnIndex > -1) {
+        // This variable represents the order index because of the following codes from `draw.js`:
+        //     columnIndex: columnOrderIndex,
+        const columnOrderIndex = e.cell.columnIndex;
+        const columnIndex = self.orders.columns[columnOrderIndex];
+
+        const contiguousColumns = getSelectedContiguousColumns(e, schema);
+        let title = '';
+        if (contiguousColumns) {
+          title = contiguousColumns
+            .map((col) => col.title || col.name)
+            .join('-');
+        } else {
+          const column = schema[columnIndex];
+          if (column) title = column.title || column.name;
+        }
         e.items.push({
-          title: self.attributes.hideColumnText.replace(
-            /%s/gi,
-            e.cell.header.title || e.cell.header.name,
-          ),
+          title: self.attributes.hideColumnText.replace(/%s/gi, title),
           click: function (ev) {
-            self.getSchema()[e.cell.columnIndex].hidden = true;
             ev.preventDefault();
             self.stopPropagation(ev);
             self.disposeContextMenu();
-            self.setStorageData();
-            setTimeout(function () {
-              self.resize(true);
-            }, 10);
+            if (contiguousColumns) {
+              self.hideColumns(
+                contiguousColumns[0].orderIndex,
+                contiguousColumns[1].orderIndex,
+              );
+            } else {
+              self.hideColumns(columnOrderIndex);
+            }
           },
         });
       }
@@ -684,6 +805,254 @@ export default function (self) {
         },
       });
     }
+
+    //#region hide rows
+    const canHideRows = !isSorting && e.cell.isRowHeader && e.cell.header;
+    if (canHideRows) {
+      const range = getSelectedContiguousRows(true);
+      if (range) {
+        const boundRowIndexes = range.map((viewRowIndex) =>
+          self.getBoundRowIndexFromViewRowIndex(viewRowIndex),
+        );
+        let title;
+        if (boundRowIndexes.length === 1) {
+          if (typeof boundRowIndexes[0] === 'number')
+            title = boundRowIndexes[0] + 1;
+          else title = range[0] + 1;
+
+          title = self.attributes.showHideRow.replace('%s', title);
+          // hide one row
+          e.items.push({
+            title,
+            click: function (ev) {
+              ev.preventDefault();
+              self.hideRows(boundRowIndexes[0], boundRowIndexes[0]);
+            },
+          });
+        } else if (boundRowIndexes[0] <= boundRowIndexes[1]) {
+          title = boundRowIndexes
+            .map((it, index) => {
+              if (typeof it === 'number') return it + 1;
+              return range[index] + 1;
+            })
+            .join('-');
+          title = self.attributes.showHideRows.replace('%s', title);
+          // hide rows
+          e.items.push({
+            title,
+            click: function (ev) {
+              ev.preventDefault();
+              self.hideRows(boundRowIndexes[0], boundRowIndexes[1]);
+            },
+          });
+        }
+      }
+    }
+    //#endregion hide rows
+
+    //#region group/ungroup columns
+    const groupAreaHeight = self.getColumnGroupAreaHeight();
+    const groupAreaWidth = self.getRowGroupAreaWidth();
+    const setCollapseStateForAllGroups = (allGroups, collapsed) => {
+      if (allGroups.length === 0) return;
+      for (let i = 0; i < allGroups.length; i++) {
+        const groups = allGroups[i];
+        for (let j = 0; j < groups.length; j++) {
+          const group = groups[j];
+          group.collapsed = collapsed;
+        }
+      }
+      self.refresh();
+    };
+    if (e.pos && e.pos.y < groupAreaHeight) {
+      e.items.push({
+        title: self.attributes.showRemoveAllGroupColumns,
+        click: function (ev) {
+          ev.preventDefault();
+          self.groupedColumns = [];
+          self.refresh();
+        },
+      });
+      e.items.push({
+        title: self.attributes.showExpandAllGroupColumns,
+        click: function (ev) {
+          ev.preventDefault();
+          setCollapseStateForAllGroups(self.groupedColumns, false);
+        },
+      });
+      e.items.push({
+        title: self.attributes.showCollapseAllGroupColumns,
+        click: function (ev) {
+          ev.preventDefault();
+          setCollapseStateForAllGroups(self.groupedColumns, true);
+        },
+      });
+    }
+    if (e.pos && e.pos.x < groupAreaWidth) {
+      e.items.push({
+        title: self.attributes.showRemoveAllGroupRows,
+        click: function (ev) {
+          ev.preventDefault();
+          self.groupedRows = [];
+          self.refresh();
+        },
+      });
+      e.items.push({
+        title: self.attributes.showExpandAllGroupRows,
+        click: function (ev) {
+          ev.preventDefault();
+          setCollapseStateForAllGroups(self.groupedRows, false);
+        },
+      });
+      e.items.push({
+        title: self.attributes.showCollapseAllGroupRows,
+        click: function (ev) {
+          ev.preventDefault();
+          setCollapseStateForAllGroups(self.groupedRows, true);
+        },
+      });
+    }
+
+    const canGroupByColumns =
+      self.attributes.allowGroupingColumns &&
+      e.cell.isColumnHeader &&
+      e.cell.header &&
+      e.cell.header.index > 0;
+    const canUngroupColumns =
+      self.attributes.allowGroupingColumns && e.cell.isColumnHeader;
+    const canGroupByRows =
+      !isSorting &&
+      self.attributes.allowGroupingRows &&
+      e.cell.isRowHeader &&
+      e.cell.header;
+    const canUngroupRows =
+      self.attributes.allowGroupingRows && e.cell.isRowHeader;
+
+    if (canGroupByColumns) {
+      /** @type {number[]} */
+      const groupIndexes = [];
+      /** @type {number} */
+      const headerIndex = e.cell.header.index;
+      let col = headerIndex;
+      for (; col >= 0; col--) {
+        if (!self.isColumnSelected(col)) break;
+        groupIndexes[0] = col;
+      }
+      for (col = headerIndex; ; col++) {
+        if (!self.isColumnSelected(col)) break;
+        groupIndexes[1] = col;
+      }
+      if (
+        col !== headerIndex &&
+        groupIndexes.length === 2 &&
+        groupIndexes[1] > groupIndexes[0] &&
+        self.isNewGroupRangeValid(
+          self.groupedColumns,
+          groupIndexes[0],
+          groupIndexes[1],
+        )
+      ) {
+        const columns = getColumnsMap();
+        const groupTitles = [];
+        const groupNames = [];
+        for (let i = 0; i < groupIndexes.length; i++) {
+          const columnIndex = groupIndexes[i];
+          const column = columns.get(columnIndex);
+          if (column) {
+            groupNames.push(column.name);
+            groupTitles.push(column.title || column.name || column.index);
+          }
+        }
+        if (groupNames[0] && groupNames[1]) {
+          // show group options
+          e.items.push({
+            title: self.attributes.showGroupColumns.replace(
+              '%s',
+              groupTitles[0] + '-' + groupTitles[1],
+            ),
+            click: function (ev) {
+              ev.preventDefault();
+              self.groupColumns(groupNames[0], groupNames[1]);
+              self.controlInput.focus();
+            },
+          });
+        }
+      }
+    }
+    if (canUngroupColumns) {
+      const columnIndex = e.cell.columnIndex;
+      const groups = self.getGroupsColumnBelongsTo(columnIndex);
+      const columns = getColumnsMap();
+      for (let i = 0; i < groups.length; i++) {
+        const { from, to } = groups[i];
+        const cell0 = columns.get(from);
+        const cell1 = columns.get(to);
+        if (cell0 && cell1) {
+          const formatArgs =
+            (cell0.title || cell0.name || cell0.index) +
+            '-' +
+            (cell1.title || cell1.name || cell1.index);
+          e.items.push({
+            title: self.attributes.showRemoveGroupColumns.replace(
+              '%s',
+              formatArgs,
+            ),
+            click: function (ev) {
+              ev.preventDefault();
+              self.removeGroupColumns(cell0.name, cell1.name);
+              self.controlInput.focus();
+            },
+          });
+        } else {
+          console.warn(`Cannot find column ${from} or column ${to}`);
+        }
+      }
+    }
+    if (canGroupByRows) {
+      const range = getSelectedContiguousRows(false) || [];
+      const rangeTitle = range
+        .map((rowIndex) => {
+          const index = self.getBoundRowIndexFromViewRowIndex(rowIndex);
+          if (typeof index === 'number') return index + 1;
+          return rowIndex + 1;
+        })
+        .join('-');
+      if (
+        range.length === 2 &&
+        self.isNewGroupRangeValid(self.groupedRows, range[0], range[1])
+      ) {
+        e.items.push({
+          title: self.attributes.showGroupRows.replace('%s', rangeTitle),
+          click: function (ev) {
+            ev.preventDefault();
+            self.groupRows(range[0], range[1]);
+          },
+        });
+      }
+    }
+    if (canUngroupRows) {
+      const rowIndex = e.cell.rowIndex;
+      const groups = self.getGroupsRowBelongsTo(rowIndex);
+      for (let i = 0; i < groups.length; i++) {
+        const { from, to } = groups[i];
+        const rangeTitle = [from, to]
+          .map((rowIndex) => {
+            const index = self.getBoundRowIndexFromViewRowIndex(rowIndex);
+            if (typeof index === 'number') return index + 1;
+            return rowIndex + 1;
+          })
+          .join('-');
+        e.items.push({
+          title: self.attributes.showRemoveGroupRows.replace('%s', rangeTitle),
+          click: function (ev) {
+            ev.preventDefault();
+            self.removeGroupRows(from, to);
+            self.controlInput.focus();
+          },
+        });
+      }
+    }
+    //#endregion group/ungroup columns
   }
   self.disposeAutocomplete = function () {
     if (autoCompleteContext) {
@@ -709,6 +1078,53 @@ export default function (self) {
     if (!self.hasFocus && e.target !== self.canvas) {
       return;
     }
+    // don't create context menu for parents if current position is located in child grid
+    const children = Object.keys(self.childGrids);
+    for (let i = 0; i < children.length; i++) {
+      const childGrid = self.childGrids[children[i]];
+      const parentNode = childGrid && childGrid.parentNode;
+      if (!parentNode) continue;
+      const { offsetLeft, offsetWidth, offsetTop, offsetHeight } = parentNode;
+      if ((e.x >= offsetLeft && e.x <= offsetLeft + offsetWidth) === false)
+        continue;
+      if ((e.y >= offsetTop && e.y <= offsetTop + offsetHeight) === false)
+        continue;
+      return; // in child grid
+    }
+    // don't create context menu for child if current position is located in parent grid
+    if (self.isChildGrid && self.parentNode) {
+      //#region check is current child grid closed
+      const childGridsOfParent = self.parentGrid && self.parentGrid.childGrids;
+      if (!childGridsOfParent || !Array.isArray(childGridsOfParent)) return;
+      const matchedMe = childGridsOfParent.find((grid) => {
+        const nodeA = grid.parentNode;
+        const nodeB = self.parentNode;
+        return (
+          nodeA.offsetTop == nodeB.offsetTop &&
+          nodeA.offsetLeft === nodeB.offsetLeft
+        );
+      });
+      if (!matchedMe) return;
+      //#endregion
+
+      let x0 = self.parentNode.offsetLeft;
+      let x1 = self.parentNode.offsetLeft + self.parentNode.offsetWidth;
+      let y0 = self.parentNode.offsetTop;
+      let y1 = self.parentNode.offsetTop + self.parentNode.offsetHeight;
+      let node = self.parentNode.parentNode;
+      while (node) {
+        const { offsetLeft, offsetWidth, offsetTop, offsetHeight } = node;
+        if (offsetLeft > x0) x0 = offsetLeft;
+        if (offsetTop > y0) y0 = offsetTop;
+        const newX1 = offsetLeft + offsetWidth;
+        const newY1 = offsetTop + offsetHeight;
+        if (newX1 < x1) x1 = newX1;
+        if (newY1 < y1) y1 = newY1;
+        if (node.nodeType !== 'canvas-datagrid-tree') break;
+        node = node.parentNode;
+      }
+      if ((e.x >= x0 && e.x <= x1 && e.y >= y0 && e.y <= y1) === false) return;
+    }
     function createDisposeEvent() {
       requestAnimationFrame(function () {
         document.addEventListener('click', self.disposeContextMenu);
@@ -721,6 +1137,7 @@ export default function (self) {
       ev = {
         NativeEvent: e,
         cell: self.getCellAt(pos.x, pos.y),
+        pos,
         items: items,
       };
     if (!ev.cell.isGrid) {

package/lib/defaults.js

@@ -16,6 +16,8 @@ export default function (self) {
       ['allowRowResize', true],
       ['allowRowResizeFromCell', false],
       ['allowSorting', true],
+      ['allowGroupingRows', true],
+      ['allowGroupingColumns', true],
       ['animationDurationShowContextMenu', 50],
       ['animationDurationHideContextMenu', 50],
       ['autoGenerateSchema', false],
@@ -43,6 +45,10 @@ export default function (self) {
       ['filterFrozenRows', true],
       ['globalRowResize', false],
       ['hideColumnText', 'Hide %s'],
+      ['showUnhideColumnsIndicator', false],
+      ['showUnhideRowsIndicator', false],
+      ['showHideRow', 'Hide row %s'],
+      ['showHideRows', 'Hide rows %s'],
       ['hoverMode', 'cell'],
       ['keepFocusOnMouseOut', false],
       ['maxAutoCompleteItems', 200],
@@ -55,6 +61,7 @@ export default function (self) {
       ['reorderDeadZone', 3],
       ['resizeScrollZone', 20],
       ['rowGrabZoneSize', 5],
+      ['columnGrabZoneSize', 30],
       ['saveAppearance', true],
       ['scrollAnimationPPSThreshold', 0.75],
       ['scrollPointerLock', false],
@@ -74,6 +81,20 @@ export default function (self) {
       ['showOrderByOption', true],
       ['showOrderByOptionTextAsc', 'Order by %s ascending'],
       ['showOrderByOptionTextDesc', 'Order by %s descending'],
+      //#region grouping
+      ['showGroupColumns', 'Group columns %s'],
+      ['showGroupRows', 'Group rows %s'],
+      ['showRemoveGroupColumns', 'Remove group %s'],
+      ['showRemoveGroupRows', 'Remove group %s'],
+      ['showRemoveAllGroupColumns', 'Remove all column groups'],
+      ['showRemoveAllGroupRows', 'Remove all row groups'],
+      ['showExpandAllGroupColumns', 'Expand all column groups'],
+      ['showExpandAllGroupRows', 'Expand all row groups'],
+      ['showCollapseAllGroupColumns', 'Collapse all column groups'],
+      ['showCollapseAllGroupRows', 'Collapse all row groups'],
+      ['columnGroupIndicatorPosition', 'right'],
+      ['rowGroupIndicatorPosition', 'bottom'],
+      //#endregion grouping
       ['showPaste', false],
       ['showPerformance', false],
       ['showRowHeaders', true],
@@ -95,6 +116,11 @@ export default function (self) {
       ['maxPixelRatio', 2],
       ['tree', false],
       ['treeHorizontalScroll', false],
+      ['rowTree', []],
+      ['rowTreeColIndex', 0],
+      ['columnTree', []],
+      ['columnTreeRowStartIndex', 0],
+      ['columnTreeRowEndIndex', 0],
     ],
     styles: [
       ['activeCellBackgroundColor', 'rgba(255, 255, 255, 1)'],
@@ -149,6 +175,15 @@ export default function (self) {
       ['cellPaddingTop', 5],
       ['cellSelectedBackgroundColor', 'rgba(236, 243, 255, 1)'],
       ['cellSelectedColor', 'rgba(0, 0, 0, 1)'],
+      ['cellTreeIconBorderColor', 'rgba(162, 174, 207, 1)'],
+      ['cellTreeIconFillColor', 'rgba(240, 240, 240, 1)'],
+      ['cellTreeIconHoverFillColor', 'rgba(198, 217, 233, 1)'],
+      ['cellTreeIconLineColor', 'rgba(43, 53, 81, 1)'],
+      ['cellTreeIconLineWidth', 1.5],
+      ['cellTreeIconMarginLeft', 0],
+      ['cellTreeIconMarginRight', 5],
+      ['cellTreeIconMarginTop', 6],
+      ['cellTreeIconWidth', 13],
       ['cellVerticalAlignment', 'center'],
       ['cellWidth', 250],
       ['cellWidthWithChildGrid', 250],
@@ -159,6 +194,7 @@ export default function (self) {
       ['childContextMenuArrowHTML', '►'],
       ['childContextMenuMarginLeft', -11],
       ['childContextMenuMarginTop', -6],
+      ['columnGroupRowHeight', 25],
       ['columnHeaderCellBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['columnHeaderCellBorderColor', 'rgba(172, 172, 172, 1)'],
       ['columnHeaderCellBorderWidth', 1],
@@ -267,10 +303,13 @@ export default function (self) {
       ['frozenMarkerBorderColor', 'rgba(168, 168, 168, 1)'],
       ['frozenMarkerBorderWidth', 1],
       ['frozenMarkerWidth', 2],
+      ['groupingAreaBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['gridBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['gridBorderCollapse', 'collapse'],
       ['gridBorderColor', 'rgba(202, 202, 202, 1)'],
       ['gridBorderWidth', 1],
+      ['groupIndicatorColor', 'rgba(155, 155, 155, 1)'],
+      ['groupIndicatorBackgroundColor', 'rgba(255, 255, 255, 1)'],
       ['height', 'auto'],
       ['maxHeight', 'inherit'],
       ['maxWidth', 'inherit'],
@@ -293,6 +332,7 @@ export default function (self) {
       ['reorderMarkerBorderWidth', 1.25],
       ['reorderMarkerIndexBorderColor', 'rgba(66, 133, 244, 1)'],
       ['reorderMarkerIndexBorderWidth', 2.75],
+      ['rowGroupColumnWidth', 25],
       ['rowHeaderCellBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['rowHeaderCellBorderColor', 'rgba(200, 200, 200, 1)'],
       ['rowHeaderCellBorderWidth', 1],
@@ -341,6 +381,10 @@ export default function (self) {
       ['treeArrowMarginTop', 6],
       ['treeArrowWidth', 13],
       ['treeGridHeight', 250],
+      ['unhideIndicatorColor', 'rgba(0, 0, 0, 1)'],
+      ['unhideIndicatorBackgroundColor', 'rgba(255, 255, 255, 1)'],
+      ['unhideIndicatorBorderColor', 'rgba(174, 193, 232, 1)'],
+      ['unhideIndicatorSize', 16],
       ['width', 'auto'],
     ],
   };

package/lib/docs.js

@@ -37,6 +37,8 @@
  * @param {string} [args.blanksText=(Blanks)] - The text that appears on the context menu for filtering blank values (i.e. `undefined`, `null`, `''`).
  * @param {string} [args.ellipsisText=...] - The text used as ellipsis text on truncated values.
  * @param {boolean} [args.allowSorting=true] - Allow user to sort rows by clicking on column headers.
+ * @param {boolean} [args.allowGroupingColumns=true] - Allow user to group columns by clicking on column headers.
+ * @param {boolean} [args.allowGroupingRows=true] - Allow user to group rows by clicking on rows headers.
  * @param {boolean} [args.showFilter=true] - When true, filter will be an option in the context menu.
  * @param {number} [args.pageUpDownOverlap=1] - Amount of rows to overlap when pageup/pagedown is used.
  * @param {boolean} [args.persistantSelectionMode=false] - When true, selections will behave as if the command/control key is held down at all times. Conflicts with singleSelectionMode.
@@ -64,6 +66,18 @@
  * @param {string} [args.clearSettingsOptionText='Clear saved settings'] - Text that appears on the clear settings option.
  * @param {string} [args.showOrderByOptionTextDesc='Order by %s ascending'] - Text that appears on the order by descending option.
  * @param {string} [args.showOrderByOptionTextAsc='Order by %s desc'] - Text that appears on the order by ascending option.
+ * @param {string} [args.showGroupColumns='Group columns %s'] - Text that appears on the group columns option.
+ * @param {string} [args.showGroupRows='Group row %s'] - Text that appears on the group rows option.
+ * @param {string} [args.showRemoveGroupColumns='Remove group %s'] - Text that appears on the remove columns group option.
+ * @param {string} [args.showRemoveGroupRows='Remove group %s'] - Text that appears on the remove rows group option.
+ * @param {string} [args.showRemoveAllGroupColumns='Remove all column groups'] - Text that appears on the remove all column groups option.
+ * @param {string} [args.showRemoveAllGroupRows='Remove all row groups'] - Text that appears on the remove all row groups option.
+ * @param {string} [args.showExpandAllGroupColumns='Expand all column groups'] - Text that appears on the expand all column groups option.
+ * @param {string} [args.showExpandAllGroupRows='Expand all row groups'] - Text that appears on the expand all row groups option.
+ * @param {string} [args.showCollapseAllGroupColumns='Collapse all column groups'] - Text that appears on the collapsed all column groups option.
+ * @param {string} [args.showCollapseAllGroupRows='Collapse all row groups'] - Text that appears on the collapsed all row groups option.
+ * @param {string} [args.columnGroupIndicatorPosition='right'] - The position of the column group inidcator(icon), available values: 'left' and 'right'.
+ * @param {string} [args.rowGroupIndicatorPosition='bottom'] - Ths position of the row group indicator(icon), available values: 'top' and 'bottom'.
  * @param {boolean} [args.showOrderByOption=true] - Show an option on the context menu sort rows.
  * @param {boolean} [args.showPaste=false] - Show the paste option in the context menu when applicable.
  * @param {array} [args.schema=[]] - Sets the schema. See {@link canvasDatagrid.schema}.
@@ -298,6 +312,7 @@
  * @property {number} [childContextMenuMarginTop=0] - Style of childContextMenuMarginTop.
  * @property {string} [childContextMenuArrowHTML=►] - Style of childContextMenuArrowHTML.
  * @property {string} [childContextMenuArrowColor=rgba(43, 48, 43, 1)] - Style of childContextMenuArrowColor.
+ * @property {number} [columnGroupRowHeight=25] - Style of columnGroupRowHeight.
  * @property {string} [contextMenuChildArrowFontSize=12px] - Style of contextMenuChildArrowFontSize.
  * @property {number} [cellWidth=250] - Style of cellWidth.
  * @property {string} [contextMenuBackground=rgba(240, 240, 240, 1)] - Style of contextMenuBackground.
@@ -352,6 +367,8 @@
  * @property {string} [gridBackgroundColor=rgba(240, 240, 240, 1)] - Style of gridBackgroundColor.
  * @property {string} [gridBorderColor=rgba(202, 202, 202, 1)] - Style of gridBorderColor.
  * @property {number} [gridBorderWidth=1] - Style of gridBorderWidth.
+ * @property {string} [groupIndicatorColor=rgba(155, 155, 155, 1)'] - Foreground color of the group indicator(icon).
+ * @property {string} [groupIndicatorBackgroundColor=rgba(255, 255, 255, 1)'] - Background color of the group indicator(icon).
  * @property {string} [columnHeaderCellCapBackgroundColor=rgba(240, 240, 240, 1)] - Style of columnHeaderCellBackgroundColor.
  * @property {string} [columnHeaderCellCapBorderColor=rgba(172, 172, 172, 1)] - Style of columnHeaderCellBackgroundColor.
  * @property {number} [columnHeaderCellCapBorderWidth=1] - Style of columnHeaderCellBackgroundColor.
@@ -386,6 +403,7 @@
  * @property {number} [reorderMarkerBorderWidth=1.25] - Style of reorderMarkerBorderWidth.
  * @property {string} [reorderMarkerIndexBorderColor=rgba(66, 133, 244, 1)] - Style of reorderMarkerIndexBorderColor.
  * @property {number} [reorderMarkerIndexBorderWidth=2.75] - Style of reorderMarkerIndexBorderWidth.
+ * @property {number} [rowGroupColumnWidth=25] - Style of rowGroupColumnWidth.
  * @property {string} [rowHeaderCellBackgroundColor=rgba(240, 240, 240, 1)] - Style of rowHeaderCellBackgroundColor.
  * @property {string} [rowHeaderCellBorderColor=rgba(152, 152, 152, 1)] - Style of rowHeaderCellBorderColor.
  * @property {number} [rowHeaderCellBorderWidth=0.25] - Style of rowHeaderCellBorderWidth.

package/lib/dom.js

@@ -123,14 +123,27 @@ export default function (self) {
         self.input.style.width = self.width - borderWidth - 1 + 'px';
         return;
       }
+      let groupAreaOffsetY = self.getColumnGroupAreaHeight();
+      let groupAreaOffsetX = self.getRowGroupAreaWidth();
+      if (self.parentNode) {
+        const { columnGroupsAreaHeight, rowGroupsAreaWidth } = self.parentNode;
+        if (columnGroupsAreaHeight) groupAreaOffsetY += columnGroupsAreaHeight;
+        if (rowGroupsAreaWidth) groupAreaOffsetX += rowGroupsAreaWidth;
+      }
       self.input.style.left =
-        pos.left + cell.x + self.canvasOffsetLeft - s.left + 'px';
+        pos.left +
+        cell.x +
+        self.canvasOffsetLeft -
+        s.left +
+        groupAreaOffsetX +
+        'px';
       self.input.style.top =
         pos.top +
         cell.y -
         self.style.cellBorderWidth +
         self.canvasOffsetTop -
         s.top +
+        groupAreaOffsetY +
         'px';
       self.input.style.height = cell.height - borderWidth + 'px';
       self.input.style.width = cell.width - self.style.cellPaddingLeft + 'px';
@@ -171,6 +184,10 @@ export default function (self) {
     if (self.isChildGrid) {
       pos.x -= self.canvasOffsetLeft;
       pos.y -= self.canvasOffsetTop;
+      if (self.parentNode.rowGroupsAreaWidth)
+        pos.x -= self.parentNode.rowGroupsAreaWidth;
+      if (self.parentNode.columnGroupsAreaHeight)
+        pos.y -= self.parentNode.columnGroupsAreaHeight;
     }
     return {
       x: pos.x,