@refinitiv-ui/efx-grid 6.0.24 → 6.0.26

package/lib/tr-grid-column-grouping/es6/ColumnGrouping.js

@@ -1,6 +1,7 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { cloneObject } from "../../tr-grid-util/es6/Util.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { GroupDefinitions } from "../../tr-grid-util/es6/GroupDefinitions.js";
 import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 /** @typedef {Array<ColumnGroupingPlugin~GroupDefinition>} ColumnGroupingPlugin~Options
@@ -16,7 +17,7 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @property {string} id Group id
 * @property {string} name Display group name
 * @property {(boolean|string)=} tooltip=true Show tooltip in column's header
-* @property {Array<string>} children Child member in this group
+* @property {Array.<string>} children Child member in this group
 * @property {string=} alignment eg. left, center, right
 * @property {Function=} render render function handler
 */
@@ -35,9 +36,7 @@ var ColumnGroupingPlugin = function ColumnGroupingPlugin(options) {
   t._requestApplyAddChildGroup = t._requestApplyAddChildGroup.bind(this);
   t._onPostSectionRender = t._onPostSectionRender.bind(t);
   t._onBeforeColumnBoundUpdate = t._onBeforeColumnBoundUpdate.bind(t);
-  t._groupDefs = [];
-  t._groupMap = {};
-  t._childToParent = {};
+  t._groupDefs = new GroupDefinitions();
   if (options) {
     t.config({
       "columnGrouping": options
@@ -46,21 +45,11 @@ var ColumnGroupingPlugin = function ColumnGroupingPlugin(options) {
 };
 Ext.inherits(ColumnGroupingPlugin, GridPlugin);
 
-/** @type {!ColumnGroupingPlugin~GroupDefinitions}
-* @description An array of group definition objects
-* @private
-*/
-ColumnGroupingPlugin.prototype._groupDefs;
-/** @type {!Object.<string, ColumnGroupingPlugin~GroupDefinition>}
+/** @type {!GroupDefinitions}
 * @description A map of group id to group defintion
 * @private
 */
-ColumnGroupingPlugin.prototype._groupMap;
-/** @type {!Object.<string, string>}
-* @description A map of child id to parent id
-* @private
-*/
-ColumnGroupingPlugin.prototype._childToParent;
+ColumnGroupingPlugin.prototype._groupDefs;
 /** @type {!Object.<string, ColumnGroupingPlugin~GroupDefinition>}
 * @description A map of visible group id to group defintion
 * @private
@@ -86,10 +75,14 @@ ColumnGroupingPlugin.prototype._rerenderTimerId = 0;
 * @private
 */
 ColumnGroupingPlugin.prototype._addingTimerId = 0;
-/** @type {Array<Object>}
+/** @type {Array}
 * @private
 */
 ColumnGroupingPlugin.prototype._addingEvents = null;
+/** @type {Object}
+* @private
+*/
+ColumnGroupingPlugin.prototype._legacyColumnGroups = null;
 
 /** @private
 * @param {number} a
@@ -122,7 +115,7 @@ ColumnGroupingPlugin._getTooltip = function (groupingOptions) {
 * @param {Object} groupDef
 * @return {boolean}
 */
-ColumnGroupingPlugin._isValidGroup = function (groupDef) {
+ColumnGroupingPlugin._hasGroupId = function (groupDef) {
   if (groupDef) {
     if (groupDef.id) {
       return true;
@@ -130,6 +123,7 @@ ColumnGroupingPlugin._isValidGroup = function (groupDef) {
   }
   return false;
 };
+
 /** @private
 * @function
 * @param {Array|Object} obj
@@ -169,6 +163,43 @@ ColumnGroupingPlugin._cloneObject = function (obj) {
   }
   return newObj;
 };
+/** Flatten tree structure to simple dictionary
+* @private
+* @function
+* @param {ColumnGroupingPlugin~GroupDefinitions} groupDefs
+*/
+ColumnGroupingPlugin._flattenGroupDefs = function (groupDefs) {
+  var grpCount = groupDefs ? groupDefs.length : 0;
+  for (var i = 0; i < grpCount; i++) {
+    ColumnGroupingPlugin._recursivelyFlatten(groupDefs[i], groupDefs);
+  }
+};
+/** Flatten group definition structure by using group ID instead of nested group definitions.
+* @private
+* @function
+* @param {Object} groupDef
+* @param {Array} groupDefs
+*/
+ColumnGroupingPlugin._recursivelyFlatten = function (groupDef, groupDefs) {
+  if (groupDef && groupDef.children) {
+    var children = groupDef.children;
+    var member, groupId;
+    for (var i = 0; i < children.length; i++) {
+      member = children[i];
+      if (typeof member !== "string") {
+        // member is nested group definition
+        groupId = member.id;
+        if (groupId) {
+          children[i] = groupId; // Use group ID instead of nested group definition
+          if (groupDefs.indexOf(member) < 0) {
+            groupDefs.push(member);
+          }
+          ColumnGroupingPlugin._recursivelyFlatten(member, groupDefs);
+        }
+      } // TODO: Invalid group is not flatten
+    }
+  }
+};
 
 /** @public
 * @return {string}
@@ -193,6 +224,9 @@ ColumnGroupingPlugin.prototype.initialize = function (host, options) {
     return;
   }
   this._hosts.push(host);
+  if (typeof host.setColumnGrouping === "function") {
+    host.setColumnGrouping(this._groupDefs);
+  }
   if (!this._addingEvents) {
     this._addingEvents = [];
   }
@@ -217,7 +251,6 @@ ColumnGroupingPlugin.prototype.initialize = function (host, options) {
     host._columnGroupingStyles = true;
     injectCss(ColumnGroupingPlugin._styles, host.getElement());
   }
-  // TODO: wrong render group in hide/show column
 };
 /** Prevent built-in config
 * @public
@@ -249,6 +282,9 @@ ColumnGroupingPlugin.prototype.unload = function (host) {
     return;
   }
   this._hosts.splice(at, 1);
+  if (typeof host.setColumnGrouping === "function") {
+    host.setColumnGrouping(null);
+  }
   host.unlisten("columnAdded", this._onColumnChanged);
   host.unlisten("columnMoved", this._onColumnMoved);
   host.unlisten("columnRemoved", this._onColumnRemoved);
@@ -275,22 +311,28 @@ ColumnGroupingPlugin.prototype.config = function (options) {
     return;
   }
   var extOptions = options["columnGrouping"];
+  var groupDefs = null;
   if (Array.isArray(extOptions)) {
-    var groupDefs = extOptions.filter(ColumnGroupingPlugin._isValidGroup);
-    this._groupDefs = groupDefs.map(ColumnGroupingPlugin._cloneObject);
+    groupDefs = extOptions.filter(ColumnGroupingPlugin._hasGroupId);
+    groupDefs = groupDefs.map(ColumnGroupingPlugin._cloneObject);
   }
   var columns = options["columns"];
-  if (!columns) {
-    return;
+  if (columns) {
+    var len = columns.length;
+    for (var i = 0; i < len; ++i) {
+      var colData = this._newColumnData(i);
+      colData["columnGrouping"] = {
+        // used for columnRemoved event
+        id: columns[i].id // TODO: This does not work with runtime change
+      };
+    }
+
+    groupDefs = this._migrateLegacyStructure(groupDefs, options["columns"]);
   }
-  var len = columns.length;
-  for (var i = 0; i < len; ++i) {
-    this._setColumnGrouping(i, {
-      id: columns[i].id
-    }); // used for columnRemoved event
+  if (groupDefs) {
+    ColumnGroupingPlugin._flattenGroupDefs(groupDefs);
+    this._groupDefs.setGroups(groupDefs);
   }
-
-  this._migrateLegacyStructure(options["columns"]);
 };
 /** @public
 * @param {Object=} gridOptions
@@ -308,15 +350,6 @@ ColumnGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 };
 
 /** @private
-* @param {number} colIndex
-* @param {Object} data
-*/
-ColumnGroupingPlugin.prototype._setColumnGrouping = function (colIndex, data) {
-  var colData = this._newColumnData(colIndex);
-  colData["columnGrouping"] = data;
-};
-/** Legacy group structure from composite grid will be converted to the new structure
-* @private
 * @param {Object.<string, Array>} objMap
 * @param {string} parentId
 * @param {string} childId
@@ -335,13 +368,19 @@ ColumnGroupingPlugin._mapParentToChildren = function (objMap, parentId, childId)
 };
 /** Legacy group structure from composite grid will be converted to the new structure
 * @private
-* @param {Array.<Object>} colModels
+* @param {ColumnGroupingPlugin~GroupDefinitions} groupDefs
+* @param {Array} colModels
+* @return {ColumnGroupingPlugin~GroupDefinitions}
 */
-ColumnGroupingPlugin.prototype._migrateLegacyStructure = function (colModels) {
+ColumnGroupingPlugin.prototype._migrateLegacyStructure = function (groupDefs, colModels) {
   var legacyColumnGroups = this._legacyColumnGroups;
   if (!legacyColumnGroups || !this._compositeGrid) {
-    return;
+    return groupDefs;
   }
+  if (!groupDefs) {
+    groupDefs = [];
+  }
+
   // Collecting parent groups from col models (leaf node)
   var colCount = colModels.length;
   var groupMap = {}; // Parent-children pair map
@@ -373,10 +412,10 @@ ColumnGroupingPlugin.prototype._migrateLegacyStructure = function (colModels) {
         groupDef["legacyRender"] = groupDef["formatter"]["render"];
         delete groupDef["formatter"];
       }
-      this._groupDefs.push(groupDef);
+      groupDefs.push(groupDef);
     }
   }
-  this._groupDefs = this._groupDefs.filter(ColumnGroupingPlugin._isValidGroup);
+  return groupDefs.filter(ColumnGroupingPlugin._hasGroupId);
 };
 
 /** Consolidate and process configuration. Force rerendering on column adding, removing, moving, initializaing, and run-time API execution.
@@ -425,83 +464,27 @@ ColumnGroupingPlugin.prototype._applyGrouping = function () {
     }
   }
 };
+
 /** @private
 */
 ColumnGroupingPlugin.prototype._evaluateGroupStructure = function () {
-  // Clear existing group structure
-  var groupMap = this._groupMap = {}; // TODO: This is bad
-  var childToParent = this._childToParent = {}; // TODO: This is bad
-  var visibleGroupMap = this._visibleGroupMap = {};
-  this._maxDepth = -1;
-
-  // Flatten tree structure to simple dictionary
-  var groupDefs = this._groupDefs;
-  var len = groupDefs.length;
-  var i;
-  for (i = 0; i < len; i++) {
-    this._flattenGroupDefs(groupDefs[i], groupDefs);
-  }
-
-  // Create group map
-  var groupDef;
-  len = groupDefs.length; // length can be changed after flattening
-  for (i = 0; i < len; i++) {
-    groupDef = groupDefs[i];
-    groupMap[groupDef.id] = groupDef;
-
-    // Clone group definitions for rendering
-    visibleGroupMap[groupDef.id] = ColumnGroupingPlugin._cloneObject(groupDef);
-    visibleGroupMap[groupDef.id].children = groupDef.children.slice();
-  }
-
-  // Create child to parent map
-  var gid, children, member;
-  for (gid in groupMap) {
-    children = this._getAvaliableChildren(gid);
-    if (children.length > 1) {
-      for (i = 0; i < children.length; i++) {
-        member = children[i];
-        childToParent[member] = gid;
-      }
-    }
-  }
-
-  // Apply a parent id to group definition to make it easier to find depth
-  var parentId;
-  for (gid in visibleGroupMap) {
-    parentId = childToParent[gid];
+  // Clone group definitions for rendering
+  var visibleGroupMap = this._visibleGroupMap = this._groupDefs.cloneGroupMap();
+  this._verifySingleChild(visibleGroupMap);
+
+  // Update depth (onRow) and parentId
+  var maxDepth = this._maxDepth = -1;
+  for (var groupId in visibleGroupMap) {
+    var groupDef = visibleGroupMap[groupId];
+    var parentId = groupDef.parentId;
     if (parentId) {
-      visibleGroupMap[gid].parent = parentId;
-      groupMap[gid].parent = parentId;
-    }
-  }
-
-  // Filter out groups that are invisible
-  var rootGroup = [];
-  for (gid in visibleGroupMap) {
-    groupDef = visibleGroupMap[gid];
-    if (this._findGroupTreeDepth(groupDef, 1) === 1) {
-      rootGroup.push(groupDef);
+      if (!visibleGroupMap[parentId]) {
+        groupDef.parentId = ""; // Parent has been removed from visible view
+      }
     }
-  }
-  len = rootGroup.length;
-  for (i = 0; i < len; i++) {
-    this._verifySingleChild(rootGroup[i]);
-  }
 
-  // Determine the depth of each group
-  var depth;
-  for (gid in visibleGroupMap) {
-    groupDef = visibleGroupMap[gid];
-    depth = this._findGroupTreeDepth(groupDef, 1);
-    groupDef["onRow"] = depth - 1;
-  }
-
-  // Calculate the maximum depth
-  var maxDepth = -1;
-  for (gid in visibleGroupMap) {
-    groupDef = visibleGroupMap[gid];
-    depth = groupDef["onRow"];
+    var depth = GroupDefinitions.calcTreeDepth(visibleGroupMap, groupDef);
+    groupDef["onRow"] = depth;
     if (depth > maxDepth) {
       maxDepth = depth;
     }
@@ -509,88 +492,59 @@ ColumnGroupingPlugin.prototype._evaluateGroupStructure = function () {
   this._maxDepth = maxDepth + 1; // Column header depth = maximum group depth + 1
 };
 
-/** Flatten group definition structure by using group ID instead of nested group definitions.
-*  @private
-* @param {Object} groupDef
-* @param {Array} groupDefs
+/** @private
+* @param {Object} groupMap
 */
-ColumnGroupingPlugin.prototype._flattenGroupDefs = function (groupDef, groupDefs) {
-  if (groupDef && groupDef.children) {
-    var children = groupDef.children;
-    var member, groupId;
-    for (var i = 0; i < children.length; i++) {
-      member = children[i];
-      if (typeof member !== "string") {
-        // member is nested group definition
-        groupId = member.id;
-        if (groupId) {
-          children[i] = groupId; // Use group ID instead of nested group definition
-          if (groupDefs.indexOf(member) < 0) {
-            groupDefs.push(member);
-          }
-          this._flattenGroupDefs(member, groupDefs);
-        }
-      } // TODO: Invalid group is not flatten
+ColumnGroupingPlugin.prototype._verifySingleChild = function (groupMap) {
+  var api = this.getGridApi();
+  if (!api) {
+    return;
+  }
+  var core = this._hosts[0];
+  var colCount = this.getColumnCount();
+  var validIds = {};
+  var i, j;
+  // initialize a map for all valid and hidden ids of groups and columns
+  for (i = 0; i < colCount; i++) {
+    var colId = this.getColumnId(i);
+    if (colId) {
+      if (core.isColumnVisible(i)) {
+        validIds[colId] = 1;
+      }
     }
   }
-};
-
-/** @private
-* @param {Object} groupDef
-* @param {number} currentDepth
-* @return {number}
-*/
-ColumnGroupingPlugin.prototype._findGroupTreeDepth = function (groupDef, currentDepth) {
-  var parentId = groupDef["parent"];
-  var parentNode = this._visibleGroupMap[parentId];
-  if (parentNode) {
-    return this._findGroupTreeDepth(parentNode, currentDepth + 1);
-  } else {
-    return currentDepth;
+  var groupIds = Object.keys(groupMap);
+  var groupCount = groupIds.length;
+  for (i = 0; i < groupCount; i++) {
+    validIds[groupIds[i]] = 1;
   }
-};
-
-/** @private
-* @param {Object} groupDef
-* @return {boolean}
-*/
-ColumnGroupingPlugin.prototype._verifySingleChild = function (groupDef) {
-  var children = groupDef.children;
-  var visibleChildCount = 0;
-  var visibleChildGroupCount = 0;
-  var invisibleMembers = [];
-  var i, member;
-  for (i = 0; i < children.length; i++) {
-    member = children[i];
-    if (this._visibleGroupMap[member]) {
-      if (this._verifySingleChild(this._visibleGroupMap[member])) {
-        ++visibleChildCount;
-        ++visibleChildGroupCount;
-      } else {
-        invisibleMembers.push(member);
+  var removable = true;
+  while (removable) {
+    removable = false;
+    for (i = 0; i < groupCount; i++) {
+      var groupId = groupIds[i];
+      var group = groupMap[groupId];
+      if (!group) {
+        continue;
       }
-    } else {
-      if (this._getColumnIndexById(member) > -1) {
-        ++visibleChildCount;
+      var children = group["children"];
+      var childCount = children.length;
+      var validChildren = [];
+      for (j = 0; j < childCount; j++) {
+        var child = children[j];
+        if (validIds[child]) {
+          validChildren.push(child);
+        }
+      }
+      if (validChildren.length < 2) {
+        delete groupMap[groupId];
+        validIds[groupId] = 0;
+        removable = true;
       } else {
-        invisibleMembers.push(member);
+        group.children = validChildren;
       }
     }
   }
-
-  // Remove invisible members, keep only visible members
-  if (invisibleMembers.length) {
-    for (i = 0; i < invisibleMembers.length; i++) {
-      member = invisibleMembers[i];
-      groupDef.children.splice(children.indexOf(member), 1);
-    }
-  }
-  if (visibleChildCount > 1 || visibleChildGroupCount > 1) {
-    return true;
-  } else {
-    delete this._visibleGroupMap[groupDef.id];
-    return false;
-  }
 };
 
 /** Set a timer to call applyGrouping only once to avoid performance issue
@@ -609,35 +563,52 @@ ColumnGroupingPlugin.prototype._applyNearestGrouping = function (colIndex) {
   if (colIndex == null || colIndex < 0) {
     return;
   }
+  var colId = this.getColumnId(colIndex);
   var colIndexLeft = colIndex - 1;
   var colIndexRight = colIndex + 1;
   var groupLeftIds = this.getGroupIds(colIndexLeft);
   var groupRightIds = this.getGroupIds(colIndexRight);
-  if (groupLeftIds && groupRightIds) {
-    var colId = this.getColumnId(colIndex);
-    var groupId = this._childToParent[colId];
-    if (groupId) {
-      if (groupLeftIds.indexOf(groupId) > -1 || groupRightIds.indexOf(groupId) > -1) {
+  var groupLeftCount = groupLeftIds ? groupLeftIds.length : 0;
+  var groupRightCount = groupRightIds ? groupRightIds.length : 0;
+  var parentId = this._groupDefs.getParentId(colId);
+  if (parentId) {
+    var chdr = this._groupDefs.getGroupChildren(parentId);
+    var childCount = chdr ? chdr.length : 0;
+    if (childCount <= 1) {
+      // If current column is only child in the group
+      return; // there is no need to put column into another group because its parent group will be moved along
+    }
+
+    // If current column has a group and stays close to its siblings, it stay in the same group
+    if (groupLeftCount) {
+      if (groupLeftIds[0] === parentId) {
         return;
       }
     }
-    var i, j, groupLeftId, groupRightId;
-    var found = false;
-    for (i = 0; i < groupLeftIds.length; i++) {
-      groupLeftId = groupLeftIds[i];
-      for (j = 0; j < groupRightIds.length; j++) {
-        groupRightId = groupRightIds[j];
-        if (groupLeftId === groupRightId) {
-          // found same Id between group
-
-          // This method modifies the group definition and outdates the group structure.
-          // It is necessary to recalculate group structure manually.
-          this._addGroupChild(colId, groupRightId);
-          found = true;
+    if (groupRightCount) {
+      if (groupRightIds[0] === parentId) {
+        return;
+      }
+    }
+    // The current column is no longer close to its parent
+    if (this._groupDefs.removeGroupChild(colId)) {
+      chdr = this._groupDefs.getGroupChildren(parentId);
+      childCount = chdr ? chdr.length : 0;
+      if (childCount === 1) {
+        // If there is only one child left, move the remaning child to its parent
+        var grandParentId = this._groupDefs.getParentId(parentId);
+        if (grandParentId) {
+          this._groupDefs.addGroupChild(grandParentId, chdr[0]);
         }
       }
-      if (found) {
-        this._evaluateGroupStructure();
+    }
+  }
+  if (groupLeftCount && groupRightCount) {
+    for (var i = 0; i < groupLeftCount; i++) {
+      var groupLeftId = groupLeftIds[i];
+      var sharedParentIdx = groupRightIds.indexOf(groupLeftId);
+      if (sharedParentIdx >= 0) {
+        this._groupDefs.addGroupChild(groupRightIds[sharedParentIdx], colId);
         break;
       }
     }
@@ -657,7 +628,7 @@ ColumnGroupingPlugin.prototype._spanGroupVertically = function (titleSection) {
   var colCount = api.getColumnCount();
   for (var col = 0; col < colCount; col++) {
     var toSpan = rowCount;
-    var parentNode = this._getParentGroup(this.getColumnId(col));
+    var parentNode = this._getVisibleParentGroup(this.getColumnId(col));
     if (parentNode) {
       var depth = parentNode["onRow"] + 1;
       toSpan = rowCount - depth;
@@ -681,7 +652,7 @@ ColumnGroupingPlugin.prototype._spanGroupHorizontally = function (titleSection)
   for (var id in visibleGroupMap) {
     spanIndices = [];
     groupDef = visibleGroupMap[id];
-    colIds = this._getGroupMembers(visibleGroupMap, groupDef);
+    colIds = GroupDefinitions.getLeafDescendants(visibleGroupMap, id);
     for (i = 0; i < colIds.length; i++) {
       index = this._getColumnIndexById(colIds[i]);
       if (index > -1) {
@@ -755,9 +726,13 @@ ColumnGroupingPlugin.prototype._onPostSectionRender = function (e) {
   * @param {Object} e dispatching of columnAdded event object
   */
 ColumnGroupingPlugin.prototype._requestApplyAddChildGroup = function (e) {
-  this._addingEvents.push(e);
-  if (!this._addingTimerId) {
-    this._addingTimerId = setTimeout(this._applyTimeSeries.bind(this, e), 10);
+  var ctx = e.context;
+  var tsParentDef = ctx ? ctx.parent : null;
+  if (tsParentDef) {
+    this._addingEvents.push(e);
+    if (!this._addingTimerId) {
+      this._addingTimerId = setTimeout(this._applyTimeSeries.bind(this, e), 10);
+    }
   }
 };
 
@@ -766,61 +741,40 @@ ColumnGroupingPlugin.prototype._requestApplyAddChildGroup = function (e) {
   */
 ColumnGroupingPlugin.prototype._applyTimeSeries = function (e) {
   this._addingTimerId = 0; // clear timer
-  var addingEvents = this._addingEvents.map(function (eventObj) {
-    return eventObj;
-  });
-  this._addingEvents.length = 0; // clear conflation value
-
-  var colIndex = e.colIndex;
-  var i;
+  var addingEvents = this._addingEvents;
+  this._addingEvents = [];
   if (addingEvents.length > 0) {
-    var addingEvent;
     var children = [];
-    var firstChildColumn;
-    for (i = 0; i < addingEvents.length; i++) {
-      addingEvent = addingEvents[i];
-      if (addingEvent.context.parent) {
-        if (!firstChildColumn) {
-          firstChildColumn = addingEvent.context;
-        }
+    var tsParentDef;
+    for (var i = 0; i < addingEvents.length; i++) {
+      var addingEvent = addingEvents[i];
+      tsParentDef = addingEvent.context.parent;
+      if (tsParentDef) {
         var childIndex = addingEvent.colIndex; // Assume time series column ordered
         var childId = this.getColumnId(childIndex);
         children.push(childId);
       }
     }
-    if (firstChildColumn && firstChildColumn.parent) {
-      var tsParentDef = firstChildColumn.parent;
-      if (tsParentDef) {
-        var parentName = tsParentDef.getName();
-        var parentId = tsParentDef.getId();
-        var groupId = "timeSerieGroup_" + parentId;
-        var groupDef = this._groupMap[groupId];
-        if (groupDef) {
-          // add children time series field to parent
-          var dirty = false;
-          var child;
-          for (i = 0; i < children.length; i++) {
-            child = children[i];
-
-            // This method modifies the group definition and outdates the group structure.
-            // It is necessary to recalculate group structure manually.
-            dirty |= this._addGroupChild(child, groupId);
-          }
-          if (dirty) {
-            this._evaluateGroupStructure();
-          }
-        } else {
-          // create new group
-          this.addGroup({
-            id: groupId,
-            title: parentName,
-            children: children
-          });
+    if (tsParentDef) {
+      var parentName = tsParentDef.getName();
+      var parentId = tsParentDef.getId();
+      var groupId = "timeSerieGroup_" + parentId;
+      var groupDef = this._groupDefs.getGroup(groupId);
+      if (groupDef) {
+        // add children time series field to parent
+        for (i = 0; i < children.length; i++) {
+          this._groupDefs.addGroupChild(groupId, children[i]);
         }
+      } else {
+        // create new group
+        this.addGroup({
+          id: groupId,
+          title: parentName,
+          children: children
+        });
       }
     }
   }
-  this._applyNearestGrouping(colIndex);
   this._requestApplyGrouping();
 };
 
@@ -843,25 +797,7 @@ ColumnGroupingPlugin.prototype._onColumnChanged = function () {
 */
 ColumnGroupingPlugin.prototype._onColumnMoved = function (e) {
   if (this._autoGrouping) {
-    var toColIndex = e.toColIndex;
-    var colId = this.getColumnId(toColIndex);
-    var groupId = this._childToParent[colId];
-    if (groupId) {
-      var colIdLeft = this.getColumnId(toColIndex - 1);
-      var colIdRight = this.getColumnId(toColIndex + 1);
-      var groupIdLeft = this._childToParent[colIdLeft];
-      var groupIdRight = this._childToParent[colIdRight];
-      if (groupId != groupIdLeft && groupId != groupIdRight) {
-        // Remove column from previous group
-        var children = this.getGroupChildren(groupId);
-        var removeIndex = children.indexOf(colId);
-        if (removeIndex > -1) {
-          children.splice(removeIndex, 1);
-        }
-        this.setGroupChildren(groupId, children);
-      }
-    }
-    this._applyNearestGrouping(toColIndex);
+    this._applyNearestGrouping(e.toColIndex);
   }
   this._requestApplyGrouping();
 };
@@ -872,8 +808,7 @@ ColumnGroupingPlugin.prototype._onColumnRemoved = function (e) {
   var colData = e.columnData;
   if (colData && colData.columnGrouping) {
     var colId = colData.columnGrouping.id;
-    var groupId = this._childToParent[colId];
-    if (groupId) {
+    if (this._groupDefs.removeGroupChild(colId)) {
       this._requestApplyGrouping();
     }
   }
@@ -883,7 +818,6 @@ ColumnGroupingPlugin.prototype._onColumnRemoved = function (e) {
 */
 ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
   var selectedColumns = e.selectedColumns; // Hidden columns are included
-  var parentMap = this._childToParent;
 
   // Find non-grouped column
   var i, colId, nonGroupedColId, groupId;
@@ -892,12 +826,12 @@ ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
   for (i = 0; i < selectedColumns.length; i++) {
     colId = this.getColumnId(selectedColumns[i]);
     if (colId) {
-      groupId = parentMap[colId];
+      groupId = this._groupDefs.getParentId(colId);
       if (!groupId) {
         nonGroupedColId = colId;
         break;
       } else {
-        groupMap[groupId] = this._groupMap[groupId]; // Cache group node for further calculation
+        groupMap[groupId] = this._groupDefs.getGroup(groupId); // Cache group node for further calculation
       }
 
       colIds.push(colId); // Cache column id for further calculation
@@ -914,7 +848,7 @@ ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
   var rootGroupMap = {};
   var headerRowIndex, group;
   for (groupId in groupMap) {
-    group = this._getRootGroup(groupId);
+    group = this._groupDefs.getRootGroup(groupId);
     rootGroupMap[group.id] = group;
     headerRowIndex = groupMap[groupId].onRow + 1;
     if (headerRowIndex < topBoundRowIndex) {
@@ -931,7 +865,7 @@ ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
     for (groupId in findingGroup) {
       group = findingGroup[groupId];
       allSelected = true;
-      members = this._getGroupMembers(this._groupMap, group);
+      members = this._groupDefs.getLeafDescendants(groupId);
       if (members.length <= colIds.length) {
         for (n = 0; n < members.length; n++) {
           if (colIds.indexOf(members[n]) < 0) {
@@ -949,7 +883,7 @@ ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
       children = group.children;
       for (n = 0; n < children.length; n++) {
         var id = children[n];
-        group = this._groupMap[id];
+        group = this._groupDefs.getGroup(id);
         if (group) {
           nextLevelGroups[id] = group;
         }
@@ -966,82 +900,40 @@ ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
 * @param {number} colIndex Column index
 */
 ColumnGroupingPlugin.prototype.addColumnToGroup = function (column, groupId, colIndex) {
-  if (!column || !groupId) return;
-  var columnIndex = colIndex || this.getColumnCount();
+  if (!column) return;
+  var columnIndex = -1;
+  if (colIndex == null) {
+    var groupDef = this._groupDefs.getGroup(groupId);
+    if (groupDef) {
+      var childIndices = this.getChildColumnIndices(groupId);
+      if (childIndices && childIndices.length) {
+        // Child indices need to be sorted here
+        columnIndex = childIndices[childIndices.length - 1] + 1; // Put new column next to the last child in the group
+      }
 
-  // This method modifies the group definition and outdates the group structure.
-  // It is necessary to recalculate group structure manually.
-  if (this._addGroupChild(column.id, groupId)) {
-    this._evaluateGroupStructure(); // To prevent event handler from using outdated group structure
+      this._groupDefs.addGroupChild(groupId, column.id);
+    }
+  } else {
+    columnIndex = colIndex;
+  }
+  if (columnIndex < 0) {
+    columnIndex = this.getColumnCount();
   }
-
   if (this._realTimeGrid) {
+    // TODO: Support multi-table feature
     this._realTimeGrid.insertColumn(column, columnIndex);
   } else if (this._compositeGrid) {
     this._compositeGrid.insertColumn(columnIndex, column);
   }
 };
 
-/** Remove each child from another group
- * @private
- * @param {Array.<string>} children
- */
-ColumnGroupingPlugin.prototype._ungroupChildren = function (children) {
-  if (Array.isArray(children)) {
-    var len = children.length;
-    for (var i = 0; i < len; ++i) {
-      this._unsetParent(children[i]);
-    }
-  }
-};
-/** Unset parent of the specified id
- * @private
- * @param {string} childId
- */
-ColumnGroupingPlugin.prototype._unsetParent = function (childId) {
-  var parentId = this._childToParent[childId];
-  if (parentId) {
-    this._childToParent[childId] = "";
-    var grpDef = this._groupMap[parentId];
-    if (grpDef) {
-      var chdr = grpDef.children;
-      if (chdr.length) {
-        var at = chdr.indexOf(childId);
-        if (at >= 0) {
-          chdr.splice(at, 1); // splice is slow
-        }
-      }
-    }
-  }
-};
-/** Remove all children from the specified group
- * @private
- * @param {string} grpId
- */
-ColumnGroupingPlugin.prototype._removeAllChildren = function (grpId) {
-  var grpDef = this._groupMap[grpId];
-  if (grpDef) {
-    var chdr = grpDef.children;
-    var len = chdr.length;
-    if (len) {
-      grpDef.children = [];
-      for (var i = 0; i < len; ++i) {
-        var childId = chdr[i];
-        if (this._childToParent[childId]) {
-          this._childToParent[childId] = "";
-        }
-      }
-    }
-  }
-};
-
 /** Add new group definition to existing group structure. Existing group with the same id will be replaced.
 * @public
 * @param {ColumnGroupingPlugin~GroupDefinition} groupDef Group definition object
 * @return {string} Return group ID
 */
 ColumnGroupingPlugin.prototype.addGroup = function (groupDef) {
-  if (ColumnGroupingPlugin._isValidGroup(groupDef)) {
+  if (ColumnGroupingPlugin._hasGroupId(groupDef)) {
     return this.setGroupDefinition(groupDef.id, groupDef);
   }
   return "";
@@ -1056,16 +948,14 @@ ColumnGroupingPlugin.prototype.addGroup = function (groupDef) {
 ColumnGroupingPlugin.prototype.addColumnGrouping = ColumnGroupingPlugin.prototype.addGroup;
 /** @public
 * @param {string} groupId
-* @return {ColumnGroupingPlugin~GroupDefinition} Return removed group definition object.
+* @return {boolean}
 */
 ColumnGroupingPlugin.prototype.removeGroup = function (groupId) {
-  var curDef = this._groupMap[groupId];
-  if (curDef) {
-    var at = this._groupDefs.indexOf(curDef);
-    this._groupDefs.splice(at, 1);
+  if (this._groupDefs.removeGroup(groupId)) {
     this._applyGrouping();
+    return true;
   }
-  return curDef;
+  return false;
 };
 
 /** @public
@@ -1073,15 +963,11 @@ ColumnGroupingPlugin.prototype.removeGroup = function (groupId) {
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
 ColumnGroupingPlugin.prototype.getGroupDefinition = function (groupId) {
-  if (groupId) {
-    // Check for group validility
-    var groupDef = this._groupMap[groupId];
-    if (!groupDef) {
-      return null;
-    }
+  var chdr = this._getAvaliableChildren(groupId);
+  if (chdr.length > 1) {
+    var groupDef = this._groupDefs.getGroup(groupId);
     groupDef = ColumnGroupingPlugin._cloneObject(groupDef); // TODO: this is slow
-    var children = this._getAvaliableChildren(groupId);
-    groupDef.children = children;
+    groupDef.children = chdr;
     return groupDef;
   }
   return null;
@@ -1092,11 +978,11 @@ ColumnGroupingPlugin.prototype.getGroupDefinition = function (groupId) {
 */
 ColumnGroupingPlugin.prototype.getGroupDefinitions = function () {
   var validGroupDefs = [];
-  var len = this._groupDefs.length;
-  var groupDef;
-  for (var i = 0; i < len; i++) {
-    groupDef = this.getGroupDefinition(this._groupDefs[i].id);
-    if (groupDef && groupDef.children.length > 1) {
+  var groupMap = this._groupDefs.getGroupMap();
+  for (var grpId in groupMap) {
+    var groupDef = this.getGroupDefinition(grpId); // Clone
+    if (groupDef) {
+      delete groupDef.parentId;
       validGroupDefs.push(groupDef);
     }
   }
@@ -1106,40 +992,28 @@ ColumnGroupingPlugin.prototype.getGroupDefinitions = function () {
 * @public
 * @param {string} groupId
 * @param {ColumnGroupingPlugin~GroupDefinition=} groupDef
-* @return {string} Group Id
+* @return {string} Return group Id. Return empty string if nothing has been changed.
 */
 ColumnGroupingPlugin.prototype.setGroupDefinition = function (groupId, groupDef) {
-  if (!groupId) {
-    return "";
-  }
-  if (groupDef) {
-    var newDef = ColumnGroupingPlugin._toGroupDefinition(groupDef, groupId);
-    this._ungroupChildren(newDef.children);
-    var curDef = this._groupMap[groupId];
-    if (curDef) {
-      // Replace
-      var at = this._groupDefs.indexOf(curDef);
-      this._groupDefs[at] = newDef;
-    } else {
-      // Add
-      this._groupDefs.push(newDef);
-    }
-    var chdr = newDef.children;
-    var len = chdr.length;
-    // TODO: Filter out group id
-    if (len > 1) {
-      var gridApi = this.getGridApi();
-      if (gridApi && gridApi.reorderColumns) {
-        gridApi.reorderColumns(chdr, chdr[0]); // WARNING: group id doesn't work
+  if (this._groupDefs.setGroup(groupId, groupDef)) {
+    var newDef = this._groupDefs.getGroup(groupId);
+    if (newDef) {
+      var chdr = newDef.children;
+      var len = chdr.length;
+      // TODO: Filter out group id
+      if (len > 1) {
+        var gridApi = this.getGridApi();
+        if (gridApi && gridApi.reorderColumns) {
+          // TODO: Support multi-table feature
+          gridApi.reorderColumns(chdr, chdr[0]); // WARNING: group id doesn't work
+        }
       }
     }
 
     this._applyGrouping();
-  } else {
-    // Remove
-    this.removeGroup(groupId);
+    return groupId;
   }
-  return groupId;
+  return "";
 };
 /** Remove all existing group definitions and replace with the given definitions.
 * @public
@@ -1147,55 +1021,41 @@ ColumnGroupingPlugin.prototype.setGroupDefinition = function (groupId, groupDef)
 */
 ColumnGroupingPlugin.prototype.setGroupDefinitions = function (groupDefs) {
   if (Array.isArray(groupDefs)) {
-    groupDefs = groupDefs.filter(ColumnGroupingPlugin._isValidGroup);
+    groupDefs = groupDefs.filter(ColumnGroupingPlugin._hasGroupId);
     groupDefs = groupDefs.map(ColumnGroupingPlugin._cloneObject);
-    if (!groupDefs.length) {
-      groupDefs = null;
-    }
   } else {
     groupDefs = null;
   }
-  if (groupDefs) {
-    this._groupDefs = groupDefs;
-    this._applyGrouping();
-  } else {
-    this._groupDefs = [];
-    this._applyGrouping();
-  }
+  ColumnGroupingPlugin._flattenGroupDefs(groupDefs);
+  this._groupDefs.setGroups(groupDefs);
+  this._applyGrouping();
 };
 /** Replace and update existing group definition.
 * @public
 * @param {string} groupId
 * @param {Array.<string>} newChildList If null is given, all existing children in the group will be removed
+* @return {boolean}
 */
 ColumnGroupingPlugin.prototype.setGroupChildren = function (groupId, newChildList) {
-  var groupDef = this._groupMap[groupId];
-  if (groupDef) {
-    if (Array.isArray(newChildList)) {
-      groupDef.aaa = 0; // TODO: for testing, need to be removed
-      this._ungroupChildren(newChildList);
-      groupDef.children = newChildList.slice();
-      this._applyGrouping();
-    } else if (!newChildList && groupDef.children.length) {
-      groupDef.children = [];
-      this._applyGrouping();
-    }
+  if (this._groupDefs.setGroupChildren(groupId, newChildList)) {
+    this._applyGrouping();
+    return true;
   }
+  return false;
 };
 /** @private
 * @param {string} groupId
-* @return {!Array.<string>}
+* @return {!Array.<string>} The list of immediate valid child, including invisible child groups
 */
 ColumnGroupingPlugin.prototype._getAvaliableChildren = function (groupId) {
-  var groupDef = this._groupMap[groupId];
+  var chdr = this._groupDefs.getGroupChildren(groupId);
+  var childCount = chdr ? chdr.length : 0;
   var validChildren = [];
-  if (groupDef) {
+  if (childCount) {
+    var groupMap = this._groupDefs.getGroupMap();
     // Filter out columns that do not exist
-    var groupMap = this._groupMap;
-    var children = groupDef.children;
-    var childId;
-    for (var i = 0; i < children.length; i++) {
-      childId = children[i];
+    for (var i = 0; i < childCount; i++) {
+      var childId = chdr[i];
       if (groupMap[childId] || this.getColumnIndex(childId) > -1) {
         validChildren.push(childId); // TODO: This is slow
       }
@@ -1223,9 +1083,8 @@ ColumnGroupingPlugin.prototype.getGroupChildren = function (groupId) {
 * @return {Array.<number>}
 */
 ColumnGroupingPlugin.prototype.getChildColumnIndices = function (groupId) {
-  var group = this._groupMap[groupId];
-  if (group) {
-    var colIds = this._getGroupMembers(this._groupMap, group);
+  var colIds = this._groupDefs.getLeafDescendants(groupId);
+  if (colIds) {
     var colIndices = [];
     var index;
     for (var i = 0; i < colIds.length; i++) {
@@ -1234,8 +1093,9 @@ ColumnGroupingPlugin.prototype.getChildColumnIndices = function (groupId) {
         colIndices.push(index);
       }
     }
-    return colIndices.sort(ColumnGroupingPlugin._ascSortLogic);
+    return colIndices.sort(ColumnGroupingPlugin._ascSortLogic); // TODO: This could be unnecessary
   }
+
   return null;
 };
 
@@ -1244,27 +1104,11 @@ ColumnGroupingPlugin.prototype.getChildColumnIndices = function (groupId) {
 * @return {Array.<string>}
 */
 ColumnGroupingPlugin.prototype.getGroupIds = function (colRef) {
-  if (colRef != null) {
-    var colId = colRef;
-    if (typeof colRef === "number") {
-      colId = this.getColumnId(colRef);
-    }
-    if (colId) {
-      var groupId = this._childToParent[colId];
-      if (groupId) {
-        var groupIds = [groupId];
-        var group = this._groupMap[groupId];
-        while (group && group.parent) {
-          group = this._groupMap[group.parent];
-          if (group) {
-            groupIds.push(group.id);
-          }
-        }
-        return groupIds;
-      }
-    }
+  if (colRef == null) {
+    return null;
   }
-  return null;
+  var colId = typeof colRef === "number" ? this.getColumnId(colRef) : colRef;
+  return this._groupDefs.getParentIds(colId);
 };
 
 /** Return deepest row index of column headers
@@ -1288,52 +1132,6 @@ ColumnGroupingPlugin.prototype.getGroupLevel = function (groupId) {
   return -1;
 };
 
-/** @private
-* @param {Object.<string, ColumnGroupingPlugin~GroupDefinition>} groupMap
-* @param {ColumnGroupingPlugin~GroupDefinition} group Group definition
-* @param {Array.<string>=} members
-* @return {Array.<string>}
-*/
-ColumnGroupingPlugin.prototype._getGroupMembers = function (groupMap, group, members) {
-  if (!members) {
-    members = [];
-  }
-  var children = this._getAvaliableChildren(group.id);
-  if (children.length < 2) {
-    return members;
-  }
-  var g, id;
-  for (var i = 0; i < children.length; i++) {
-    id = children[i];
-    if (id === group.id) {
-      // prevent from infinite loop
-      continue;
-    }
-    g = groupMap[id];
-    if (g) {
-      this._getGroupMembers(groupMap, g, members);
-    } else {
-      members.push(id);
-    }
-  }
-  return members;
-};
-
-/** @private
-* @param {String} groupId
-* @return {ColumnGroupingPlugin~GroupDefinition}
-*/
-ColumnGroupingPlugin.prototype._getRootGroup = function (groupId) {
-  if (!groupId) {
-    return null;
-  }
-  var group = this._groupMap[groupId];
-  while (group.parent) {
-    group = this._groupMap[group.parent];
-  }
-  return group;
-};
-
 /** This version exclude invisible column unlike the one in GridPlugin
 * @private
 * @param {string} id
@@ -1352,49 +1150,12 @@ ColumnGroupingPlugin.prototype._getColumnIndexById = function (id) {
   }
   return -1;
 };
-/** This method modifies the group definition and outdates the group structure. It is necessary to recalculate group structure manually.
-* @private
-* @param {string} childId
-* @param {string} groupId
-* @return {boolean}
-*/
-ColumnGroupingPlugin.prototype._addGroupChild = function (childId, groupId) {
-  var groupDef = this._groupMap[groupId];
-  if (childId && groupDef) {
-    var chdr = groupDef.children;
-    if (chdr && chdr.indexOf(childId) < 0) {
-      chdr.push(childId);
-      return true;
-    }
-  }
-  return false;
-};
 /** @private
 * @param {string} childId
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
-ColumnGroupingPlugin.prototype._getParentGroup = function (childId) {
-  return this._visibleGroupMap[this._childToParent[childId]];
-};
-/** @private
-* @param {string} colId
-* @param {number} groupLevel
-* @return {string}
-*/
-ColumnGroupingPlugin.prototype._getGroupId = function (colId, groupLevel) {
-  var groupId = this._childToParent[colId];
-  if (!groupId) {
-    return "";
-  }
-  if (groupLevel == null) {
-    return groupId;
-  }
-  var currentLevel = this.getGroupLevel(groupId);
-  while (currentLevel > groupLevel && groupId) {
-    groupId = this._childToParent[groupId];
-    currentLevel--;
-  }
-  return groupId || "";
+ColumnGroupingPlugin.prototype._getVisibleParentGroup = function (childId) {
+  return this._visibleGroupMap[this._groupDefs.getParentId(childId)] || null;
 };
 /** @public
 * @param {Element|Event|MouseEvent} e
@@ -1407,27 +1168,30 @@ ColumnGroupingPlugin.prototype.getCellInfo = function (e) {
     return null;
   }
   var cellInfo = grid.getCellInfo(e);
-  if (!cellInfo.cell) {
+  if (!cellInfo) {
+    return e;
+  }
+  if (!cellInfo["cell"]) {
     var cell = cellInfo.section.getCell(cellInfo.colIndex, cellInfo.rowIndex);
     cellInfo["cell"] = cell;
   }
   var colId = this.getColumnId(cellInfo.colIndex);
-  var groupId = this._getGroupId(colId, cellInfo.sectionType == "title" ? cellInfo.rowIndex : null);
+  var groupId = this._groupDefs.getParentId(colId, cellInfo.sectionType == "title" ? cellInfo.rowIndex : null);
   if (!groupId) {
     cellInfo["columnId"] = colId;
     return cellInfo;
   }
-  var groupInfo = this.getGroupDefinition(groupId);
+  var groupInfo = this._groupDefs.getGroup(groupId); // TODO: Check if we need visible group
   if (groupInfo) {
     var isGroupHeader = cellInfo.sectionType == "title" && cellInfo.rowIndex == this.getGroupLevel(groupId);
     if (isGroupHeader) {
       cellInfo["groupId"] = groupInfo.id;
-      cellInfo["groupName"] = groupInfo.name;
+      cellInfo["groupName"] = groupInfo.name || "";
       cellInfo["children"] = groupInfo.children;
     } else {
       cellInfo["columnId"] = colId;
     }
-    cellInfo["parent"] = isGroupHeader ? groupInfo.parent || null : groupInfo.id;
+    cellInfo["parent"] = isGroupHeader ? groupInfo.parentId || null : groupInfo.id;
   }
   return cellInfo;
 };
@@ -1441,7 +1205,7 @@ ColumnGroupingPlugin.prototype.moveColumnIntoGroup = function (colRef, to, group
   if (fromIndex == -1) {
     return;
   }
-  var groupDef = this._groupMap[groupId];
+  var groupDef = this._groupDefs.getGroup(groupId);
   if (!groupDef) {
     for (var j = this._hosts.length; --j >= 0;) {
       var grid = this._hosts[j];
@@ -1499,23 +1263,8 @@ ColumnGroupingPlugin.prototype.moveColumnIntoGroup = function (colRef, to, group
     host.moveColumn(fromIndex, to);
   }
   if (colId) {
-    // TODO:
-    // Remove from current group
-    var previousGroup = this._childToParent[colId];
-    if (previousGroup) {
-      var previousGroupChild = this.getGroupChildren(previousGroup);
-      var removeIndex = previousGroupChild.indexOf(colId);
-      if (removeIndex !== -1) {
-        previousGroupChild.splice(previousGroupChild.indexOf(colId), 1);
-      }
-      this.setGroupChildren(previousGroup, previousGroupChild);
-    }
-
-    // Add to new group
-    var children = this.getGroupChildren(groupId);
-    if (children.indexOf(colId) < 0) {
-      children.push(colId);
-      this.setGroupChildren(groupId, children);
+    if (this._groupDefs.addGroupChild(groupId, colId)) {
+      this._applyGrouping();
     }
   }
 };
@@ -1549,12 +1298,11 @@ ColumnGroupingPlugin.prototype.setColumnParent = function (colRef, groupId) {
 * @returns {number} destination index
 */
 ColumnGroupingPlugin.prototype.getValidDestinationIndex = function (id, destCol) {
-  var groupDef, parentGroupDef;
-  groupDef = this._groupMap[id];
-  if (groupDef) {
-    parentGroupDef = this.getGroupDefinition(groupDef["parent"]);
+  var parentGroupDef = null;
+  if (this._groupDefs.getGroup(id)) {
+    parentGroupDef = this._getVisibleParentGroup(id);
   } else if (this.getColumnIndex(id) > -1) {
-    parentGroupDef = this._getParentGroup(id);
+    parentGroupDef = this._getVisibleParentGroup(id);
   }
   var startIndex = -1;
   var endIndex = -1;
@@ -1590,10 +1338,10 @@ ColumnGroupingPlugin.prototype.getValidDestinationIndex = function (id, destCol)
     // handle group/column should not insert between group when group/column is not a child of any group
     var destMemberIndices = [];
     var destColId = this.getColumnId(destColIndex);
-    var destParent = this._getParentGroup(destColId);
+    var destParent = this._getVisibleParentGroup(destColId);
     if (destParent) {
-      if (destParent["parent"]) {
-        destParent = this._getRootGroup(destParent["id"]);
+      if (destParent.parentId) {
+        destParent = this._groupDefs.getRootGroup(destParent["id"]);
       }
       destMemberIndices = this.getChildColumnIndices(destParent["id"]);
     }
@@ -1618,7 +1366,7 @@ ColumnGroupingPlugin.prototype.getValidDestinationIndex = function (id, destCol)
 ColumnGroupingPlugin.prototype.moveGroup = function (id, destCol) {
   var groupDef;
   var members = [];
-  groupDef = this._groupMap[id];
+  groupDef = this._groupDefs.getGroup(id);
   if (groupDef) {
     var indices = this.getChildColumnIndices(groupDef["id"]);
     for (var i = 0; i < indices.length; i++) {
@@ -1636,11 +1384,11 @@ ColumnGroupingPlugin.prototype.moveGroup = function (id, destCol) {
 
   // TODO: create method for toggling autoGrouping flag
   this._autoGrouping = false;
-  if (this._realTimeGrid) {
-    this._realTimeGrid.reorderColumns(members, destColId);
-  } else if (this._compositeGrid) {
-    this._compositeGrid.reorderColumns(members, destColId);
+  var gridApi = this.getGridApi();
+  if (gridApi && gridApi.reorderColumns) {
+    gridApi.reorderColumns(members, destColId); // TODO: Support multi-table feature
   }
+
   this._autoGrouping = true;
 };
 export default ColumnGroupingPlugin;