canvas-datagrid 0.3.24 → 0.4.2

package/dist/types.d.ts

@@ -74,6 +74,8 @@
  * @param [args.blanksText = (Blanks)] - The text that appears on the context menu for filtering blank values (i.e. `undefined`, `null`, `''`).
  * @param [args.ellipsisText = ...] - The text used as ellipsis text on truncated values.
  * @param [args.allowSorting = true] - Allow user to sort rows by clicking on column headers.
+ * @param [args.allowGroupingColumns = true] - Allow user to group columns by clicking on column headers.
+ * @param [args.allowGroupingRows = true] - Allow user to group rows by clicking on rows headers.
  * @param [args.showFilter = true] - When true, filter will be an option in the context menu.
  * @param [args.pageUpDownOverlap = 1] - Amount of rows to overlap when pageup/pagedown is used.
  * @param [args.persistantSelectionMode = false] - When true, selections will behave as if the command/control key is held down at all times. Conflicts with singleSelectionMode.
@@ -101,6 +103,18 @@
  * @param [args.clearSettingsOptionText = 'Clear saved settings'] - Text that appears on the clear settings option.
  * @param [args.showOrderByOptionTextDesc = 'Order by %s ascending'] - Text that appears on the order by descending option.
  * @param [args.showOrderByOptionTextAsc = 'Order by %s desc'] - Text that appears on the order by ascending option.
+ * @param [args.showGroupColumns = 'Group columns %s'] - Text that appears on the group columns option.
+ * @param [args.showGroupRows = 'Group row %s'] - Text that appears on the group rows option.
+ * @param [args.showRemoveGroupColumns = 'Remove group %s'] - Text that appears on the remove columns group option.
+ * @param [args.showRemoveGroupRows = 'Remove group %s'] - Text that appears on the remove rows group option.
+ * @param [args.showRemoveAllGroupColumns = 'Remove all column groups'] - Text that appears on the remove all column groups option.
+ * @param [args.showRemoveAllGroupRows = 'Remove all row groups'] - Text that appears on the remove all row groups option.
+ * @param [args.showExpandAllGroupColumns = 'Expand all column groups'] - Text that appears on the expand all column groups option.
+ * @param [args.showExpandAllGroupRows = 'Expand all row groups'] - Text that appears on the expand all row groups option.
+ * @param [args.showCollapseAllGroupColumns = 'Collapse all column groups'] - Text that appears on the collapsed all column groups option.
+ * @param [args.showCollapseAllGroupRows = 'Collapse all row groups'] - Text that appears on the collapsed all row groups option.
+ * @param [args.columnGroupIndicatorPosition = 'right'] - The position of the column group inidcator(icon), available values: 'left' and 'right'.
+ * @param [args.rowGroupIndicatorPosition = 'bottom'] - Ths position of the row group indicator(icon), available values: 'top' and 'bottom'.
  * @param [args.showOrderByOption = true] - Show an option on the context menu sort rows.
  * @param [args.showPaste = false] - Show the paste option in the context menu when applicable.
  * @param [args.schema = []] - Sets the schema. See {@link canvasDatagrid.schema}.
@@ -163,6 +177,8 @@ declare class canvasDatagrid {
         blanksText?: string;
         ellipsisText?: string;
         allowSorting?: boolean;
+        allowGroupingColumns?: boolean;
+        allowGroupingRows?: boolean;
         showFilter?: boolean;
         pageUpDownOverlap?: number;
         persistantSelectionMode?: boolean;
@@ -190,6 +206,18 @@ declare class canvasDatagrid {
         clearSettingsOptionText?: string;
         showOrderByOptionTextDesc?: string;
         showOrderByOptionTextAsc?: string;
+        showGroupColumns?: string;
+        showGroupRows?: string;
+        showRemoveGroupColumns?: string;
+        showRemoveGroupRows?: string;
+        showRemoveAllGroupColumns?: string;
+        showRemoveAllGroupRows?: string;
+        showExpandAllGroupColumns?: string;
+        showExpandAllGroupRows?: string;
+        showCollapseAllGroupColumns?: string;
+        showCollapseAllGroupRows?: string;
+        columnGroupIndicatorPosition?: string;
+        rowGroupIndicatorPosition?: string;
         showOrderByOption?: boolean;
         showPaste?: boolean;
         schema?: any[];
@@ -401,6 +429,16 @@ declare class canvasDatagrid {
      * @param imgSrc - icon path to add into button.
      */
     static addButton(columnIndex: number, rowIndex: number, offset: any, items: any, imgSrc: string): void;
+    /**
+     * Expand/Collapse CellTree.
+     * @param treeData - The array of cellTree to expand or collapse.
+     */
+    static toggleCellCollapseTree(treeData: any[]): void;
+    /**
+     * Expand/Collapse CellTree.
+     * @param treeData - The array of cellTree to expand or collapse.
+     */
+    static expandCollapseCellTree(treeData: any[]): void;
     /**
      * Scrolls the cell at cell x, row y into view if it is not already.
      * @param x - The column index of the cell to scroll into view.
@@ -499,6 +537,42 @@ declare class canvasDatagrid {
      * @param [dontSetStorageData] - Don't store this setting for future use.
      */
     static order(columnName: number, direction: string, sortFunction?: (...params: any[]) => any, dontSetStorageData?: boolean): void;
+    /**
+     * Grouping columns
+     * @param firstColumnName - Name of the first column to be grouped.
+     * @param lastColumnName - Name of the last column to be grouped.
+     */
+    static groupColumns(firstColumnName: number | string, lastColumnName: number | string): void;
+    /**
+     * Grouping columns
+     * @param rowIndexFrom - The row index which is the beginning of the group
+     * @param rowIndexTo - The row index which is the end of the group
+     */
+    static groupRows(rowIndexFrom: number, rowIndexTo: number): void;
+    /**
+     * Remove grouping columns
+     * @param firstColumnName - Name of the first column to be grouped.
+     * @param lastColumnName - Name of the last column to be grouped.
+     */
+    static removeGroupColumns(firstColumnName: number | string, lastColumnName: number | string): void;
+    /**
+     * Remove grouping columns
+     * @param rowIndexFrom - The row index which is the beginning of the group
+     * @param rowIndexTo - The row index which is the end of the group
+     */
+    static removeGroupRows(rowIndexFrom: number, rowIndexTo: number): void;
+    /**
+     * Toggle(expand/collapsed) grouping columns
+     * @param firstColumnName - Name of the first column to be grouped.
+     * @param lastColumnName - Name of the last column to be grouped.
+     */
+    static toggleGroupColumns(firstColumnName: number | string, lastColumnName: number | string): void;
+    /**
+     * Toggle(expand/collapsed) grouping rows
+     * @param rowIndexFrom - The row index which is the beginning of the group
+     * @param rowIndexTo - The row index which is the end of the group
+     */
+    static toggleGroupRows(rowIndexFrom: number, rowIndexTo: number): void;
     /**
      * Moves the current selection relative to the its current position.  Note: this method does not move the selected data, just the selection itself.
      * @param offsetX - The number of columns to offset the selection.
@@ -517,6 +591,16 @@ declare class canvasDatagrid {
      * @param y - The row index to start inserting the selection at.
      */
     static moveTo(sel: any[], x: number, y: number): void;
+    /**
+     * Get the column group info given column belongs to
+     * @param columnIndex - Column index.
+     */
+    static getGroupsColumnBelongsTo(columnIndex: number): { from: number; to: number; collapsed: boolean; }[];
+    /**
+     * Get the row group info given row belongs to
+     * @param rowIndex - Row index.
+     */
+    static getGroupsRowBelongsTo(rowIndex: number): { from: number; to: number; collapsed: boolean; }[];
     /**
      * Checks if a given column is visible.
      * @param columnIndex - Column index.
@@ -536,6 +620,18 @@ declare class canvasDatagrid {
      * @returns cell at the selected location.
      */
     static getVisibleCellByIndex(x: number, y: number): cell;
+    /**
+     * Get a column group at grid pixel coordinate x and y.
+     * @param x - Number of pixels from the left.
+     * @param y - Number of pixels from the top.
+     */
+    static getColumnGroupAt(x: number, y: number): void;
+    /**
+     * Get a row group at grid pixel coordinate x and y.
+     * @param x - Number of pixels from the left.
+     * @param y - Number of pixels from the top.
+     */
+    static getRowGroupAt(x: number, y: number): void;
     /**
      * Gets the cell at grid pixel coordinate x and y.  Author's note.  This function ties drawing and events together.  This is a very complex function and is core to the component.
      * @param x - Number of pixels from the left.
@@ -1108,6 +1204,7 @@ declare namespace canvasDatagrid {
      * @property [childContextMenuMarginTop = 0] - Style of childContextMenuMarginTop.
      * @property [childContextMenuArrowHTML = ►] - Style of childContextMenuArrowHTML.
      * @property [childContextMenuArrowColor = rgba(43, 48, 43, 1)] - Style of childContextMenuArrowColor.
+     * @property [columnGroupRowHeight = 25] - Style of columnGroupRowHeight.
      * @property [contextMenuChildArrowFontSize = 12px] - Style of contextMenuChildArrowFontSize.
      * @property [cellWidth = 250] - Style of cellWidth.
      * @property [contextMenuBackground = rgba(240, 240, 240, 1)] - Style of contextMenuBackground.
@@ -1162,6 +1259,8 @@ declare namespace canvasDatagrid {
      * @property [gridBackgroundColor = rgba(240, 240, 240, 1)] - Style of gridBackgroundColor.
      * @property [gridBorderColor = rgba(202, 202, 202, 1)] - Style of gridBorderColor.
      * @property [gridBorderWidth = 1] - Style of gridBorderWidth.
+     * @property [groupIndicatorColor = rgba(155, 155, 155, 1)'] - Foreground color of the group indicator(icon).
+     * @property [groupIndicatorBackgroundColor = rgba(255, 255, 255, 1)'] - Background color of the group indicator(icon).
      * @property [columnHeaderCellCapBackgroundColor = rgba(240, 240, 240, 1)] - Style of columnHeaderCellBackgroundColor.
      * @property [columnHeaderCellCapBorderColor = rgba(172, 172, 172, 1)] - Style of columnHeaderCellBackgroundColor.
      * @property [columnHeaderCellCapBorderWidth = 1] - Style of columnHeaderCellBackgroundColor.
@@ -1196,6 +1295,7 @@ declare namespace canvasDatagrid {
      * @property [reorderMarkerBorderWidth = 1.25] - Style of reorderMarkerBorderWidth.
      * @property [reorderMarkerIndexBorderColor = rgba(66, 133, 244, 1)] - Style of reorderMarkerIndexBorderColor.
      * @property [reorderMarkerIndexBorderWidth = 2.75] - Style of reorderMarkerIndexBorderWidth.
+     * @property [rowGroupColumnWidth = 25] - Style of rowGroupColumnWidth.
      * @property [rowHeaderCellBackgroundColor = rgba(240, 240, 240, 1)] - Style of rowHeaderCellBackgroundColor.
      * @property [rowHeaderCellBorderColor = rgba(152, 152, 152, 1)] - Style of rowHeaderCellBorderColor.
      * @property [rowHeaderCellBorderWidth = 0.25] - Style of rowHeaderCellBorderWidth.
@@ -1466,6 +1566,10 @@ declare namespace canvasDatagrid {
          * Style of childContextMenuArrowColor.
         */
         childContextMenuArrowColor?: string;
+        /**
+         * Style of columnGroupRowHeight.
+        */
+        columnGroupRowHeight?: number;
         /**
          * Style of contextMenuChildArrowFontSize.
         */
@@ -1682,6 +1786,14 @@ declare namespace canvasDatagrid {
          * Style of gridBorderWidth.
         */
         gridBorderWidth?: number;
+        /**
+         * Foreground color of the group indicator(icon).
+        */
+        groupIndicatorColor?: string;
+        /**
+         * Background color of the group indicator(icon).
+        */
+        groupIndicatorBackgroundColor?: string;
         /**
          * Style of columnHeaderCellBackgroundColor.
         */
@@ -1818,6 +1930,10 @@ declare namespace canvasDatagrid {
          * Style of reorderMarkerIndexBorderWidth.
         */
         reorderMarkerIndexBorderWidth?: number;
+        /**
+         * Style of rowGroupColumnWidth.
+        */
+        rowGroupColumnWidth?: number;
         /**
          * Style of rowHeaderCellBackgroundColor.
         */

package/lib/contextMenu.js

@@ -609,13 +609,18 @@ 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];
+
         e.items.push({
           title: self.attributes.hideColumnText.replace(
             /%s/gi,
             e.cell.header.title || e.cell.header.name,
           ),
           click: function (ev) {
-            self.getSchema()[e.cell.columnIndex].hidden = true;
+            self.getSchema()[columnIndex].hidden = true;
             ev.preventDefault();
             self.stopPropagation(ev);
             self.disposeContextMenu();
@@ -684,6 +689,241 @@ export default function (self) {
         },
       });
     }
+    //#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 =
+      self.attributes.allowGroupingRows && e.cell.isRowHeader && e.cell.header;
+    const canUngroupRows =
+      self.attributes.allowGroupingRows && e.cell.isRowHeader;
+
+    /**
+     * The value for storing the return value from `self.getSchema()`
+     * @type {any[]}
+     */
+    let schema;
+    /**
+     * A map between columnIndex and column data
+     * @type {Map<string,any>}
+     */
+    let columns;
+    const getColumnsMap = () => {
+      if (!columns) {
+        if (!schema) schema = self.getSchema();
+        columns = new Map(schema.map((_col) => [_col.columnIndex, _col]));
+      }
+      return columns;
+    };
+
+    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) {
+      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;
+      });
+      const rangeTitle = range
+        .map((rowIndex) => {
+          const index = self.getBoundRowIndexFromViewRowIndex(rowIndex);
+          if (typeof index === 'number') return index + 1;
+          return rowIndex + 1;
+        })
+        .join('-');
+      if (
+        ok &&
+        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 +949,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 +1008,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],
@@ -55,6 +57,7 @@ export default function (self) {
       ['reorderDeadZone', 3],
       ['resizeScrollZone', 20],
       ['rowGrabZoneSize', 5],
+      ['columnGrabZoneSize', 30],
       ['saveAppearance', true],
       ['scrollAnimationPPSThreshold', 0.75],
       ['scrollPointerLock', false],
@@ -74,6 +77,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 +112,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 +171,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 +190,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 +299,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 +328,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],

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.