@refinitiv-ui/efx-grid 6.0.107 → 6.0.108

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

@@ -25,22 +25,23 @@ import { cloneObject, injectCss, prettifyCss, deepEqual } from "../../tr-grid-ut
 * @extends {GridPlugin}
 * @param {ColumnGroupingPlugin~Options=} options
 */
-var ColumnGroupingPlugin = function ColumnGroupingPlugin(options) {
-  var t = this;
-  t._hosts = [];
-  t._onColumnChanged = t._onColumnChanged.bind(t);
-  t._onColumnAdded = t._onColumnAdded.bind(t);
-  t._onColumnMoved = t._onColumnMoved.bind(t);
-  t._onColumnRemoved = t._onColumnRemoved.bind(t);
-  t._requestApplyAddChildGroup = t._requestApplyAddChildGroup.bind(this);
-  t._onPostSectionRender = t._onPostSectionRender.bind(t);
-  t._onBeforeColumnBoundUpdate = t._onBeforeColumnBoundUpdate.bind(t);
-  t._groupDefs = new GroupDefinitions();
-  if (options) {
-    t.config({
-      "columnGrouping": options
-    });
-  }
+let ColumnGroupingPlugin = function (options) {
+	let t = this;
+	t._hosts = [];
+
+	t._onColumnChanged = t._onColumnChanged.bind(t);
+	t._onColumnAdded = t._onColumnAdded.bind(t);
+	t._onColumnMoved = t._onColumnMoved.bind(t);
+	t._onColumnRemoved = t._onColumnRemoved.bind(t);
+	t._requestApplyAddChildGroup = t._requestApplyAddChildGroup.bind(this);
+	t._onPostSectionRender = t._onPostSectionRender.bind(t);
+	t._onBeforeColumnBoundUpdate = t._onBeforeColumnBoundUpdate.bind(t);
+
+	t._groupDefs = new GroupDefinitions();
+
+	if(options) {
+		t.config({ "columnGrouping": options });
+	}
 };
 Ext.inherits(ColumnGroupingPlugin, GridPlugin);
 
@@ -93,39 +94,39 @@ ColumnGroupingPlugin.prototype._selectedColMap;
 * @param {number} b
 * @return {number}
 */
-ColumnGroupingPlugin._ascSortLogic = function (a, b) {
-  return a - b;
+ColumnGroupingPlugin._ascSortLogic = function(a, b) {
+	return a - b;
 };
 /** @private
 * @param {ColumnGroupingPlugin~GroupDefinition} groupingOptions
 * @return {string}
 */
-ColumnGroupingPlugin._getTooltip = function (groupingOptions) {
-  var tooltip = groupingOptions["tooltip"];
-  var title = groupingOptions["title"] || groupingOptions["name"];
-  if (tooltip != null) {
-    if (typeof tooltip === "string") {
-      return tooltip; // There is a custom tooltip
-    } else if (tooltip === true) {
-      return title;
-    } else if (tooltip === false) {
-      return "";
-    }
-  }
-  return title;
+ColumnGroupingPlugin._getTooltip = function(groupingOptions) {
+	let tooltip = groupingOptions["tooltip"];
+	let title = groupingOptions["title"] || groupingOptions["name"];
+	if(tooltip != null) {
+		if(typeof tooltip === "string") {
+			return tooltip; // There is a custom tooltip
+		} else if(tooltip === true) {
+			return title;
+		} else if(tooltip === false) {
+			return "";
+		}
+	}
+	return title;
 };
 /** @private
 * @function
 * @param {Object} groupDef
 * @return {boolean}
 */
-ColumnGroupingPlugin._hasGroupId = function (groupDef) {
-  if (groupDef) {
-    if (groupDef.id) {
-      return true;
-    }
-  }
-  return false;
+ColumnGroupingPlugin._hasGroupId = function(groupDef) {
+	if(groupDef) {
+		if(groupDef.id) {
+			return true;
+		}
+	}
+	return false;
 };
 
 /** @private
@@ -134,47 +135,47 @@ ColumnGroupingPlugin._hasGroupId = function (groupDef) {
 * @param {string=} groupId
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
-ColumnGroupingPlugin._toGroupDefinition = function (obj, groupId) {
-  var groupDef = null;
-  if (obj) {
-    if (Array.isArray(obj)) {
-      groupDef = {
-        children: obj
-      };
-    } else {
-      groupDef = ColumnGroupingPlugin._cloneObject(obj);
-    }
-    if (groupId) {
-      if (!groupDef.id) {
-        groupDef.name = groupId;
-      }
-      groupDef.id = groupId;
-    }
-  }
-  return groupDef;
+ColumnGroupingPlugin._toGroupDefinition = function(obj, groupId) {
+	let groupDef = null;
+	if(obj) {
+		if(Array.isArray(obj)) {
+			groupDef = {
+				children: obj
+			};
+		} else {
+			groupDef = ColumnGroupingPlugin._cloneObject(obj);
+		}
+		if(groupId) {
+			if(!groupDef.id) {
+				groupDef.name = groupId;
+			}
+			groupDef.id = groupId;
+		}
+	}
+	return groupDef;
 };
 /** @private
 * @function
 * @param {Object} obj
 * @return {Object}
 */
-ColumnGroupingPlugin._cloneObject = function (obj) {
-  var newObj = cloneObject(obj);
-  if (!Array.isArray(newObj.children)) {
-    newObj.children = [];
-  }
-  return newObj;
+ColumnGroupingPlugin._cloneObject = function(obj) {
+	let newObj = cloneObject(obj);
+	if(!Array.isArray(newObj.children)) {
+		newObj.children = [];
+	}
+	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);
-  }
+ColumnGroupingPlugin._flattenGroupDefs = function(groupDefs) {
+	let grpCount = groupDefs ? groupDefs.length : 0;
+	for(let i = 0; i < grpCount; i++) {
+		ColumnGroupingPlugin._recursivelyFlatten(groupDefs[i], groupDefs);
+	}
 };
 /** Flatten group definition structure by using group ID instead of nested group definitions.
 * @private
@@ -183,24 +184,23 @@ ColumnGroupingPlugin._flattenGroupDefs = function (groupDefs) {
 * @param {Array} groupDefs
 */
 ColumnGroupingPlugin._recursivelyFlatten = function (groupDef, groupDefs) {
-  if (groupDef && groupDef.children) {
-    var children = groupDef.children;
-    var member, groupId;
-    for (var _i2 = 0; _i2 < children.length; _i2++) {
-      member = children[_i2];
-      if (typeof member !== "string") {
-        // member is nested group definition
-        groupId = member.id;
-        if (groupId) {
-          children[_i2] = 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
-    }
-  }
+	if(groupDef && groupDef.children) {
+		let children = groupDef.children;
+		let member, groupId;
+		for(let 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
+		}
+	}
 };
 
 /** Filter time series group out
@@ -209,21 +209,21 @@ ColumnGroupingPlugin._recursivelyFlatten = function (groupDef, groupDefs) {
 * @return {boolean}
 */
 ColumnGroupingPlugin._isNotTimeSeriesGroup = function (groupDef) {
-  return groupDef.timeSeriesGroup ? false : true;
+	return groupDef.timeSeriesGroup ? false : true;
 };
 
 /** @public
 * @return {string}
 */
 ColumnGroupingPlugin.prototype.getName = function () {
-  return "ColumnGroupingPlugin"; // Read Only
+	return "ColumnGroupingPlugin"; // Read Only
 };
 /**
 * @override
 * @return {boolean}
 */
-ColumnGroupingPlugin.prototype.hasMultiTableSupport = function () {
-  return true;
+ColumnGroupingPlugin.prototype.hasMultiTableSupport = function() {
+	return true;
 };
 
 /** @public
@@ -231,37 +231,43 @@ ColumnGroupingPlugin.prototype.hasMultiTableSupport = function () {
 * @param {Object=} options
 */
 ColumnGroupingPlugin.prototype.initialize = function (host, options) {
-  if (this._hosts.indexOf(host) >= 0) {
-    return;
-  }
-  this._hosts.push(host);
-  if (typeof host.setColumnGrouping === "function") {
-    host.setColumnGrouping(this._groupDefs);
-  }
-  if (!this._addingEvents) {
-    this._addingEvents = [];
-  }
-  if (this._hosts.length === 1) {
-    host.listen("columnAdded", this._onColumnAdded);
-    host.listen("columnMoved", this._onColumnMoved);
-    host.listen("columnRemoved", this._onColumnRemoved);
-    host.listen("columnVisibilityChanged", this._onColumnChanged);
-    host.listen("postSectionRender", this._onPostSectionRender);
-    host.listen("beforeColumnBoundUpdate", this._onBeforeColumnBoundUpdate);
-  }
-  this.config(options);
-  this._legacyColumnGroups = null;
-  if (this._initializedGrid && host.getSection("title")) {
-    // For run-time loading
-    this._applyGrouping();
-  }
-  if (!ColumnGroupingPlugin._styles) {
-    ColumnGroupingPlugin._styles = prettifyCss([".tr-grid .title .column .cell:not(:last-child)", ["box-shadow: none;"]]);
-  }
-  if (!host._columnGroupingStyles) {
-    host._columnGroupingStyles = true;
-    injectCss(ColumnGroupingPlugin._styles, host.getElement());
-  }
+	if(this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+	if(typeof host.setColumnGrouping === "function") {
+		host.setColumnGrouping(this._groupDefs);
+	}
+
+	if(!this._addingEvents) {
+		this._addingEvents = [];
+	}
+
+	if(this._hosts.length === 1) {
+		host.listen("columnAdded", this._onColumnAdded);
+		host.listen("columnMoved", this._onColumnMoved);
+		host.listen("columnRemoved", this._onColumnRemoved);
+		host.listen("columnVisibilityChanged", this._onColumnChanged);
+		host.listen("postSectionRender", this._onPostSectionRender);
+		host.listen("beforeColumnBoundUpdate", this._onBeforeColumnBoundUpdate);
+	}
+	this.config(options);
+	this._legacyColumnGroups = null;
+
+	if(this._initializedGrid && host.getSection("title")) { // For run-time loading
+		this._applyGrouping();
+	}
+
+	if(!ColumnGroupingPlugin._styles) {
+		ColumnGroupingPlugin._styles = prettifyCss([
+			".tr-grid .title .column .cell:not(:last-child)", [
+				"box-shadow: none;"
+			]
+		]);
+	}
+
+	if(!host._columnGroupingStyles){
+		host._columnGroupingStyles = true;
+		injectCss(ColumnGroupingPlugin._styles, host.getElement());
+	}
 };
 /** Prevent built-in config
 * @public
@@ -270,90 +276,92 @@ ColumnGroupingPlugin.prototype.initialize = function (host, options) {
 * @return {*}
 */
 ColumnGroupingPlugin.prototype.beforeProcessOption = function (optionName, optionValue) {
-  if (optionName === "columnGroups") {
-    this._legacyColumnGroups = optionValue;
-    return false; // eslint-disable-line
-  }
-
-  return; // eslint-disable-line
+	if(optionName === "columnGroups") {
+		this._legacyColumnGroups = optionValue;
+		return false; // eslint-disable-line
+	}
+	return; // eslint-disable-line
 };
 /**
 * @protected
 * @ignore
 */
-ColumnGroupingPlugin.prototype._afterInit = function () {
-  this._applyGrouping();
+ColumnGroupingPlugin.prototype._afterInit = function() {
+	this._applyGrouping();
 };
 /** @public
 * @param {Object} host core grid object
 */
 ColumnGroupingPlugin.prototype.unload = function (host) {
-  var at = this._hosts.indexOf(host);
-  if (at < 0) {
-    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);
-  host.unlisten("postSectionRender", this._onPostSectionRender);
-  host.unlisten("beforeColumnBoundUpdate", this._onBeforeColumnBoundUpdate);
-  if (!this._hosts.length) {
-    if (this._rerenderTimerId) {
-      clearTimeout(this._rerenderTimerId);
-      this._rerenderTimerId = 0;
-    }
-    if (this._groupHeaderTimerId) {
-      clearTimeout(this._groupHeaderTimerId);
-      this._groupHeaderTimerId = 0;
-    }
-    if (this._addingTimerId) {
-      clearTimeout(this._addingTimerId);
-      this._addingTimerId = 0;
-      this._addingEvents.length = 0;
-    }
-  }
-  this._dispose();
+	let at = this._hosts.indexOf(host);
+	if(at < 0) { 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);
+	host.unlisten("postSectionRender", this._onPostSectionRender);
+	host.unlisten("beforeColumnBoundUpdate", this._onBeforeColumnBoundUpdate);
+
+	if(!this._hosts.length) {
+		if(this._rerenderTimerId){
+			clearTimeout(this._rerenderTimerId);
+			this._rerenderTimerId = 0;
+		}
+		if(this._groupHeaderTimerId){
+			clearTimeout(this._groupHeaderTimerId);
+			this._groupHeaderTimerId = 0;
+		}
+		if(this._addingTimerId) {
+			clearTimeout(this._addingTimerId);
+			this._addingTimerId = 0;
+			this._addingEvents.length = 0;
+		  }
+	}
+
+	this._dispose();
 };
 /** @public
 * @param {Object} options
 */
 ColumnGroupingPlugin.prototype.config = function (options) {
-  if (!options) {
-    return;
-  }
-  var extOptions = options["columnGrouping"];
-  var groupDefs = null;
-  if (Array.isArray(extOptions)) {
-    groupDefs = extOptions.filter(ColumnGroupingPlugin._hasGroupId);
-    groupDefs = groupDefs.map(ColumnGroupingPlugin._cloneObject);
-  }
-  var columns = options["columns"];
-  if (columns) {
-    groupDefs = this._migrateLegacyStructure(groupDefs, columns);
-  }
-  if (groupDefs) {
-    ColumnGroupingPlugin._flattenGroupDefs(groupDefs);
-    this._groupDefs.setGroups(groupDefs);
-  }
+	if(!options) { return; }
+
+	let extOptions = options["columnGrouping"];
+	let groupDefs = null;
+	if(Array.isArray(extOptions)) {
+		groupDefs = extOptions.filter(ColumnGroupingPlugin._hasGroupId);
+		groupDefs = groupDefs.map(ColumnGroupingPlugin._cloneObject);
+	}
+
+	let columns = options["columns"];
+	if(columns) {
+		groupDefs = this._migrateLegacyStructure(groupDefs, columns);
+	}
+
+	if(groupDefs) {
+		ColumnGroupingPlugin._flattenGroupDefs(groupDefs);
+		this._groupDefs.setGroups(groupDefs);
+	}
 };
 /** @public
 * @param {Object=} gridOptions
 * @return {!Object}
 */
 ColumnGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
-  var obj = gridOptions || {};
+	let obj = gridOptions || {};
 
-  // TODO: Handle legacyRender method that has been migrated
-  var groupDefs = this.getGroupDefinitions();
-  groupDefs = groupDefs.filter(ColumnGroupingPlugin._isNotTimeSeriesGroup);
-  if (groupDefs.length) {
-    obj.columnGrouping = groupDefs;
-  }
-  return obj;
+	// TODO: Handle legacyRender method that has been migrated
+	let groupDefs = this.getGroupDefinitions();
+	groupDefs = groupDefs.filter(ColumnGroupingPlugin._isNotTimeSeriesGroup);
+	if(groupDefs.length) {
+		obj.columnGrouping = groupDefs;
+	}
+
+	return obj;
 };
 
 /** @private
@@ -363,15 +371,15 @@ ColumnGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 * @return {boolean} Returns true if there is any change
 */
 ColumnGroupingPlugin._mapParentToChildren = function (objMap, parentId, childId) {
-  if (parentId && childId) {
-    var ary = objMap[parentId];
-    if (!ary) {
-      ary = objMap[parentId] = [];
-    }
-    ary.push(childId);
-    return true;
-  }
-  return false;
+	if(parentId && childId) {
+		let ary = objMap[parentId];
+		if(!ary) {
+			ary = objMap[parentId] = [];
+		}
+		ary.push(childId);
+		return true;
+	}
+	return false;
 };
 /** Legacy group structure from composite grid will be converted to the new structure
 * @private
@@ -380,169 +388,184 @@ ColumnGroupingPlugin._mapParentToChildren = function (objMap, parentId, childId)
 * @return {ColumnGroupingPlugin~GroupDefinitions}
 */
 ColumnGroupingPlugin.prototype._migrateLegacyStructure = function (groupDefs, colModels) {
-  var legacyColumnGroups = this._legacyColumnGroups;
-  if (!legacyColumnGroups || !this._compositeGrid) {
-    return groupDefs;
-  }
-  if (!groupDefs) {
-    groupDefs = [];
-  }
-
-  // Collecting parent groups from col models (leaf node)
-  var colCount = colModels.length;
-  var groupMap = {}; // Parent-children pair map
-  for (var c = 0; c < colCount; ++c) {
-    var colModel = colModels[c];
-    if (colModel) {
-      ColumnGroupingPlugin._mapParentToChildren(groupMap, colModel.columnGroup, colModel.id);
-    }
-  }
-  // Collecting parent groups from the group list (groups can have parent as well)
-  var groupCount = legacyColumnGroups.length;
-  var i, groupDef;
-  for (i = 0; i < groupCount; ++i) {
-    groupDef = legacyColumnGroups[i];
-    if (groupDef) {
-      ColumnGroupingPlugin._mapParentToChildren(groupMap, groupDef.parent, groupDef.id);
-    }
-  }
-  // TODO: Merge child relationship to existing group structure
-
-  // Add new definitions and structure to the given legacy objects
-  for (i = 0; i < groupCount; ++i) {
-    groupDef = ColumnGroupingPlugin._cloneObject(legacyColumnGroups[i]);
-    if (groupDef && groupDef.id) {
-      // WARNING: Modify user's object
-      var childAry = groupMap[groupDef.id];
-      groupDef.children = childAry ? childAry : [];
-      if (groupDef["formatter"] && groupDef["formatter"]["render"]) {
-        groupDef["legacyRender"] = groupDef["formatter"]["render"];
-        delete groupDef["formatter"];
-      }
-      groupDefs.push(groupDef);
-    }
-  }
-  return groupDefs.filter(ColumnGroupingPlugin._hasGroupId);
+	let legacyColumnGroups = this._legacyColumnGroups;
+	if(!legacyColumnGroups || !this._compositeGrid) {
+		return groupDefs;
+	}
+	if(!groupDefs) {
+		groupDefs = [];
+	}
+
+	// Collecting parent groups from col models (leaf node)
+	let colCount = colModels.length;
+	let groupMap = {}; // Parent-children pair map
+	for(let c = 0; c < colCount; ++c) {
+		let colModel = colModels[c];
+		if(colModel) {
+			ColumnGroupingPlugin._mapParentToChildren(
+				groupMap, colModel.columnGroup, colModel.id
+			);
+		}
+	}
+	// Collecting parent groups from the group list (groups can have parent as well)
+	let groupCount = legacyColumnGroups.length;
+	let i, groupDef;
+	for(i = 0; i < groupCount; ++i) {
+		groupDef = legacyColumnGroups[i];
+		if(groupDef) {
+			ColumnGroupingPlugin._mapParentToChildren(
+				groupMap, groupDef.parent, groupDef.id
+			);
+		}
+	}
+	// TODO: Merge child relationship to existing group structure
+
+	// Add new definitions and structure to the given legacy objects
+	for(i = 0; i < groupCount; ++i) {
+		groupDef = ColumnGroupingPlugin._cloneObject(legacyColumnGroups[i]);
+		if(groupDef && groupDef.id) {
+			// WARNING: Modify user's object
+			let childAry = groupMap[groupDef.id];
+			groupDef.children = childAry ? childAry : [];
+
+			if(groupDef["formatter"] && groupDef["formatter"]["render"]) {
+				groupDef["legacyRender"] = groupDef["formatter"]["render"];
+				delete groupDef["formatter"];
+			}
+
+			groupDefs.push(groupDef);
+		}
+	}
+
+	return groupDefs.filter(ColumnGroupingPlugin._hasGroupId);
 };
 /** @private
 * @param {number} frozenColIndex
 * @param {number=} numRightColumn
 */
-ColumnGroupingPlugin.prototype._freezeColumn = function (frozenColIndex, numRightColumn) {
-  var hosts = this._hosts;
-  for (var _i3 = 0; _i3 < hosts.length; _i3++) {
-    hosts[_i3].freezeColumn(frozenColIndex, numRightColumn);
-  }
+ColumnGroupingPlugin.prototype._freezeColumn = function(frozenColIndex, numRightColumn) {
+	let hosts = this._hosts;
+	for(let i = 0; i < hosts.length; i++) {
+		hosts[i].freezeColumn(frozenColIndex, numRightColumn);
+	}
 };
 /** @private
 */
-ColumnGroupingPlugin.prototype._applyPinning = function () {
-  var colCount = this.getColumnCount();
-  var columnIds = this.getColumnIds();
-  var leftPinnedIndex = this._hosts[0].getFrozenColumnCount() - 1;
-  var rightPinnedIndex = this._hosts[0].getFirstPinnedRightIndex();
-  var i, groupId, groupDef;
-  var dirty = false;
-  for (i = colCount; i > leftPinnedIndex; i--) {
-    groupId = this._groupDefs.getParentId(columnIds[i]);
-    groupDef = this._visibleGroupMap[groupId];
-    if (groupDef && groupDef.leftPinned) {
-      leftPinnedIndex = i;
-      dirty = true;
-      break;
-    }
-  }
-  for (i = leftPinnedIndex; i < rightPinnedIndex; i++) {
-    groupId = this._groupDefs.getParentId(columnIds[i]);
-    groupDef = this._visibleGroupMap[groupId];
-    if (groupDef && groupDef.rightPinned) {
-      rightPinnedIndex = i;
-      dirty = true;
-      break;
-    }
-  }
-  if (dirty) {
-    var rightPinnedCount = colCount - rightPinnedIndex;
-    this._freezeColumn(leftPinnedIndex, rightPinnedCount);
-  }
+ColumnGroupingPlugin.prototype._applyPinning = function() {
+	let colCount = this.getColumnCount();
+	let columnIds = this.getColumnIds();
+	let leftPinnedIndex = this._hosts[0].getFrozenColumnCount() - 1;
+	let rightPinnedIndex = this._hosts[0].getFirstPinnedRightIndex();
+	let i, groupId, groupDef;
+	let dirty = false;
+	for(i = colCount; i > leftPinnedIndex; i--) {
+		groupId = this._groupDefs.getParentId(columnIds[i]);
+		groupDef = this._visibleGroupMap[groupId];
+		if(groupDef && groupDef.leftPinned) {
+			leftPinnedIndex = i;
+			dirty = true;
+			break;
+		}
+	}
+
+	for(i = leftPinnedIndex; i < rightPinnedIndex; i++) {
+		groupId = this._groupDefs.getParentId(columnIds[i]);
+		groupDef = this._visibleGroupMap[groupId];
+		if(groupDef && groupDef.rightPinned) {
+			rightPinnedIndex = i;
+			dirty = true;
+			break;
+		}
+	}
+	if(dirty) {
+		let rightPinnedCount = colCount - rightPinnedIndex;
+		this._freezeColumn(leftPinnedIndex, rightPinnedCount);
+	}
 };
 /** Consolidate and process configuration. Force rerendering on column adding, removing, moving, initializaing, and run-time API execution.
 * @private
 */
 ColumnGroupingPlugin.prototype._applyGrouping = function () {
-  this._rerenderTimerId = 0;
-  if (this._restructuring) {
-    return;
-  }
-  this._restructuring = true;
-  this._evaluateGroupStructure();
-
-  // Apply column pinning
-  this._applyPinning();
-  var i, c, r, cell, section, colCount;
-  var rowCount = this._maxDepth + 1;
-  var hostCount = this._hosts.length;
-  for (i = hostCount; --i >= 0;) {
-    section = this._hosts[i].getSection("title");
-    if (section) {
-      section.setRowCount(rowCount); // This will cause postSectionRender event to be fired
-      section.clearCellSpans();
-
-      // Remove additional cell settings from _renderGroups() method
-      colCount = section.getColumnCount();
-      for (c = 0; c < colCount; c++) {
-        for (r = 0; r < rowCount; r++) {
-          cell = section.getCell(c, r, false);
-          if (cell) {
-            // TODO: The style and class from the user will not be reset, for example, the color or background
-            cell.removeClass("no-sort");
-            cell.removeClass("selected-group");
-            cell.removeAttribute("group-id");
-          }
-        }
-      }
-      this._spanGroupVertically(section);
-      // TODO: Some calculation in here should not be done in this loop
-      this._spanGroupHorizontally(section);
-    }
-  }
-  this._restructuring = false;
-
-  // Request re-rendering
-  for (i = hostCount; --i >= 0;) {
-    var settings = this._hosts[i].getSectionSettings("title");
-    if (settings) {
-      settings.rerender();
-    }
-  }
+	this._rerenderTimerId = 0;
+	if(this._restructuring) {
+		return;
+	}
+	this._restructuring = true;
+
+	this._evaluateGroupStructure();
+
+	// Apply column pinning
+	this._applyPinning();
+
+	let i, c, r, cell, section, colCount;
+	let rowCount = this._maxDepth + 1;
+	let hostCount = this._hosts.length;
+	for(i = hostCount; --i >= 0;) {
+		section = this._hosts[i].getSection("title");
+		if(section) {
+			section.setRowCount(rowCount); // This will cause postSectionRender event to be fired
+			section.clearCellSpans();
+
+			// Remove additional cell settings from _renderGroups() method
+			colCount = section.getColumnCount();
+			for(c = 0; c < colCount; c++) {
+				for(r = 0; r < rowCount; r++) {
+					cell = section.getCell(c, r, false);
+					if(cell) {
+						// TODO: The style and class from the user will not be reset, for example, the color or background
+						cell.removeClass("no-sort");
+						cell.removeClass("selected-group");
+						cell.removeAttribute("group-id");
+					}
+				}
+			}
+
+			this._spanGroupVertically(section);
+			// TODO: Some calculation in here should not be done in this loop
+			this._spanGroupHorizontally(section);
+		}
+	}
+
+	this._restructuring = false;
+
+	// Request re-rendering
+	for(i = hostCount; --i >= 0;) {
+		let settings = this._hosts[i].getSectionSettings("title");
+		if(settings) {
+			settings.rerender();
+		}
+	}
 };
 
 /** @private
 */
 ColumnGroupingPlugin.prototype._evaluateGroupStructure = function () {
-  // Clone group definitions for rendering
-  var visibleGroupMap = this._visibleGroupMap = this._groupDefs.cloneGroupMap();
-  this._verifySingleChild(visibleGroupMap);
-  this._verifyColumnPinning(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) {
-      if (!visibleGroupMap[parentId]) {
-        groupDef.parentId = ""; // Parent has been removed from visible view
-      }
-    }
-
-    var depth = GroupDefinitions.calcTreeDepth(visibleGroupMap, groupDef);
-    groupDef["onRow"] = depth;
-    if (depth > maxDepth) {
-      maxDepth = depth;
-    }
-  }
-  this._maxDepth = maxDepth + 1; // Column header depth = maximum group depth + 1
+	// Clone group definitions for rendering
+	let visibleGroupMap = this._visibleGroupMap = this._groupDefs.cloneGroupMap();
+
+	this._verifySingleChild(visibleGroupMap);
+	this._verifyColumnPinning(visibleGroupMap);
+
+	// Update depth (onRow) and parentId
+	let maxDepth = this._maxDepth = -1;
+	for(let groupId in visibleGroupMap) {
+		let groupDef = visibleGroupMap[groupId];
+
+		let parentId = groupDef.parentId;
+		if(parentId) {
+			if(!visibleGroupMap[parentId]) {
+				groupDef.parentId = ""; // Parent has been removed from visible view
+			}
+		}
+
+		let depth = GroupDefinitions.calcTreeDepth(visibleGroupMap, groupDef);
+		groupDef["onRow"] = depth;
+		if(depth > maxDepth) {
+			maxDepth = depth;
+		}
+	}
+
+	this._maxDepth = maxDepth + 1; // Column header depth = maximum group depth + 1
 };
 
 /** Add pinning state to group definition for further verification.
@@ -550,561 +573,606 @@ ColumnGroupingPlugin.prototype._evaluateGroupStructure = function () {
 * @param {Object} groupDef
 * @param {string} side
 */
-ColumnGroupingPlugin.prototype._setGroupPinning = function (groupDef, side) {
-  if (!groupDef || groupDef.leftPinned || groupDef.rightPinned) {
-    return;
-  }
-  if (side === "left") {
-    groupDef.leftPinned = true;
-  } else {
-    groupDef.rightPinned = true;
-  }
-  var children = groupDef["children"];
-  for (var _i4 = 0; _i4 < children.length; _i4++) {
-    var child = children[_i4];
-    var group = this._visibleGroupMap[child];
-    if (group) {
-      this._setGroupPinning(group, side);
-    }
-  }
+ColumnGroupingPlugin.prototype._setGroupPinning = function(groupDef, side) {
+	if(!groupDef || groupDef.leftPinned || groupDef.rightPinned) {
+		return;
+	}
+
+	if(side === "left") {
+		groupDef.leftPinned = true;
+	} else {
+		groupDef.rightPinned = true;
+	}
+
+	let children = groupDef["children"];
+	for(let i = 0; i < children.length; i++){
+		let child = children[i];
+		let group = this._visibleGroupMap[child];
+		if(group) {
+			this._setGroupPinning(group, side);
+		}
+	}
 };
 
 /** @private
 * @param {Object} groupMap
 */
-ColumnGroupingPlugin.prototype._verifyColumnPinning = function (groupMap) {
-  var host = this._hosts[0];
-  var leftPinnedIndex = host.getFrozenColumnCount() - 1;
-  var rightPinnedIndex = host.getFirstPinnedRightIndex();
-  var colCount = this.getColumnCount();
-  var i, groupId, rootGroup, colId;
-  var groupDefs = this._groupDefs;
-  var visibleGroupMap = this._visibleGroupMap;
-  if (leftPinnedIndex >= 0) {
-    for (i = leftPinnedIndex; i >= 0; i--) {
-      colId = this.getColumnId(i);
-      groupId = groupDefs.getParentId(colId);
-      if (groupId && visibleGroupMap[groupId]) {
-        rootGroup = groupDefs.getRootGroup(groupId);
-        if (rootGroup) {
-          this._setGroupPinning(visibleGroupMap[rootGroup["id"]], "left");
-        }
-      }
-    }
-  }
-  if (rightPinnedIndex < colCount) {
-    for (i = rightPinnedIndex; i < colCount; i++) {
-      colId = this.getColumnId(i);
-      groupId = groupDefs.getParentId(colId);
-      if (groupId && visibleGroupMap[groupId]) {
-        rootGroup = groupDefs.getRootGroup(groupId);
-        if (rootGroup) {
-          this._setGroupPinning(visibleGroupMap[rootGroup["id"]], "right");
-        }
-      }
-    }
-  }
+ColumnGroupingPlugin.prototype._verifyColumnPinning = function(groupMap) {
+	let host = this._hosts[0];
+	let leftPinnedIndex = host.getFrozenColumnCount() - 1;
+	let rightPinnedIndex = host.getFirstPinnedRightIndex();
+	let colCount = this.getColumnCount();
+
+	let i, groupId, rootGroup, colId;
+	let groupDefs = this._groupDefs;
+	let visibleGroupMap = this._visibleGroupMap;
+	if(leftPinnedIndex >= 0) {
+		for(i = leftPinnedIndex; i >= 0; i--) {
+			colId = this.getColumnId(i);
+			groupId = groupDefs.getParentId(colId);
+			if(groupId && visibleGroupMap[groupId]) {
+				rootGroup = groupDefs.getRootGroup(groupId);
+				if(rootGroup) {
+					this._setGroupPinning(visibleGroupMap[rootGroup["id"]], "left");
+				}
+			}
+		}
+	}
+
+	if(rightPinnedIndex < colCount) {
+		for(i = rightPinnedIndex; i < colCount; i++) {
+			colId = this.getColumnId(i);
+			groupId = groupDefs.getParentId(colId);
+			if(groupId && visibleGroupMap[groupId]) {
+				rootGroup = groupDefs.getRootGroup(groupId);
+				if(rootGroup) {
+					this._setGroupPinning(visibleGroupMap[rootGroup["id"]], "right");
+				}
+			}
+		}
+	}
 };
 /** @private
 * @param {Object} groupMap
 */
-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;
-      }
-    }
-  }
-  var groupIds = Object.keys(groupMap);
-  var groupCount = groupIds.length;
-  for (i = 0; i < groupCount; i++) {
-    validIds[groupIds[i]] = 1;
-  }
-  var removable = true;
-  while (removable) {
-    removable = false;
-    for (i = 0; i < groupCount; i++) {
-      var groupId = groupIds[i];
-      var group = groupMap[groupId];
-      if (!group) {
-        continue;
-      }
-      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 {
-        group.children = validChildren;
-      }
-    }
-  }
+ColumnGroupingPlugin.prototype._verifySingleChild = function(groupMap) {
+	let api = this.getGridApi();
+	if(!api) {
+		return;
+	}
+	let core = this._hosts[0];
+	let colCount = this.getColumnCount();
+	let validIds = {};
+
+	let i, j;
+	// initialize a map for all valid and hidden ids of groups and columns
+	for(i = 0; i < colCount; i++){
+		let colId = this.getColumnId(i);
+		if(colId){
+			if(core.isColumnVisible(i)){
+				validIds[colId] = 1;
+			}
+		}
+	}
+
+	let groupIds = Object.keys(groupMap);
+	let groupCount = groupIds.length;
+	for(i = 0; i < groupCount; i++){
+		validIds[groupIds[i]] = 1;
+	}
+
+	let removable = true;
+	while(removable){
+		removable = false;
+		for(i = 0; i < groupCount; i++){
+			let groupId = groupIds[i];
+			let group = groupMap[groupId];
+			if(!group){
+				continue;
+			}
+
+			let children = group["children"];
+			let childCount = children.length;
+			let validChildren = [];
+			for(j = 0; j < childCount; j++){
+				let child = children[j];
+				if(validIds[child]){
+					validChildren.push(child);
+				}
+			}
+
+			if(validChildren.length < 2) {
+				delete groupMap[groupId];
+				validIds[groupId] = 0;
+				removable = true;
+			} else {
+				group.children = validChildren;
+			}
+		}
+	}
 };
 
 /** Set a timer to call applyGrouping only once to avoid performance issue
 * @private
 */
-ColumnGroupingPlugin.prototype._requestApplyGrouping = function () {
-  if (!this._rerenderTimerId) {
-    this._rerenderTimerId = setTimeout(this._applyGrouping.bind(this), 10);
-  }
+ColumnGroupingPlugin.prototype._requestApplyGrouping = function() {
+	if(!this._rerenderTimerId) {
+		this._rerenderTimerId = setTimeout(this._applyGrouping.bind(this), 10);
+	}
 };
 /** Set a timer to call renderGroups only once to avoid performance issue
 * @private
 */
-ColumnGroupingPlugin.prototype._requestGroupRendering = function () {
-  if (!this._groupHeaderTimerId) {
-    this._groupHeaderTimerId = setTimeout(this.renderGroups.bind(this), 10);
-  }
+ColumnGroupingPlugin.prototype._requestGroupRendering = function() {
+	if(!this._groupHeaderTimerId) {
+		this._groupHeaderTimerId = setTimeout(this.renderGroups.bind(this), 10);
+	}
 };
 /** Apply nearest grouping to column.
 * @private
 * @param {number} colIndex
 */
 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);
-  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;
-      }
-    }
-    if (groupRightCount) {
-      if (groupRightIds[0] === parentId) {
-        return;
-      }
-    }
-    // The current column is no longer close to its parent
-    if (this._groupDefs.unsetParent(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 (groupLeftCount && groupRightCount) {
-    for (var _i5 = 0; _i5 < groupLeftCount; _i5++) {
-      var groupLeftId = groupLeftIds[_i5];
-      var sharedParentIdx = groupRightIds.indexOf(groupLeftId);
-      if (sharedParentIdx >= 0) {
-        this._groupDefs.addGroupChild(groupRightIds[sharedParentIdx], colId);
-        break;
-      }
-    }
-  }
+	if(colIndex == null || colIndex < 0 ){
+		return;
+	}
+
+	let colId = this.getColumnId(colIndex);
+	let colIndexLeft = colIndex - 1;
+	let colIndexRight = colIndex + 1;
+
+	let groupLeftIds = this.getGroupIds(colIndexLeft);
+	let groupRightIds = this.getGroupIds(colIndexRight);
+	let groupLeftCount = groupLeftIds ? groupLeftIds.length : 0;
+	let groupRightCount = groupRightIds ? groupRightIds.length : 0;
+
+	let parentId = this._groupDefs.getParentId(colId);
+	if(parentId) {
+		let chdr = this._groupDefs.getGroupChildren(parentId);
+		let 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;
+			}
+		}
+		if(groupRightCount) {
+			if(groupRightIds[0] === parentId) {
+				return;
+			}
+		}
+		// The current column is no longer close to its parent
+		if(this._groupDefs.unsetParent(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
+				let grandParentId = this._groupDefs.getParentId(parentId);
+				if(grandParentId) {
+					this._groupDefs.addGroupChild(grandParentId, chdr[0]);
+				}
+			}
+		}
+	}
+
+	if(groupLeftCount && groupRightCount) {
+		for(let i = 0; i < groupLeftCount; i++) {
+			let groupLeftId = groupLeftIds[i];
+			let sharedParentIdx = groupRightIds.indexOf(groupLeftId);
+			if(sharedParentIdx >= 0) {
+				this._groupDefs.addGroupChild(groupRightIds[sharedParentIdx], colId);
+				break;
+			}
+		}
+	}
 };
 /** @private
 * @param {Object=} titleSection
 */
 ColumnGroupingPlugin.prototype._spanGroupVertically = function (titleSection) {
-  var api = this.getGridApi();
-  if (!api) {
-    return;
-  }
-  var core = this._hosts[0];
-  var maxDepth = this._maxDepth;
-  var rowCount = maxDepth + 1;
-  var colCount = api.getColumnCount();
-  for (var col = 0; col < colCount; col++) {
-    var toSpan = rowCount;
-    var parentNode = this._getVisibleParentGroup(this.getColumnId(col));
-    if (parentNode) {
-      var depth = parentNode["onRow"] + 1;
-      toSpan = rowCount - depth;
-    }
-
-    // Note that invisible column cannot have row span
-    if (core.isColumnVisible(col) && toSpan > 1) {
-      titleSection.setCellRowSpan(col, rowCount - toSpan, toSpan);
-    }
-  }
+	let api = this.getGridApi();
+	if(!api) {
+		return;
+	}
+	let core = this._hosts[0];
+
+	let maxDepth = this._maxDepth;
+	let rowCount = maxDepth + 1;
+	let colCount = api.getColumnCount();
+
+	for(let col = 0; col < colCount; col++) {
+		let toSpan = rowCount;
+		let parentNode = this._getVisibleParentGroup(this.getColumnId(col));
+
+		if(parentNode) {
+			let depth = parentNode["onRow"] + 1;
+			toSpan = rowCount - depth;
+		}
+
+		// Note that invisible column cannot have row span
+		if(core.isColumnVisible(col) && toSpan > 1) {
+			titleSection.setCellRowSpan(col, rowCount - toSpan, toSpan);
+		}
+	}
 };
 /** @private
 * @param {Object} titleSection
 */
 ColumnGroupingPlugin.prototype._spanGroupHorizontally = function (titleSection) {
-  var section = titleSection;
-  var visibleGroupMap = this._visibleGroupMap;
-
-  // Span column of column group
-  var groupDef, spanIndices, len, colIds, index, i;
-  for (var id in visibleGroupMap) {
-    spanIndices = [];
-    groupDef = visibleGroupMap[id];
-    colIds = GroupDefinitions.getLeafDescendants(visibleGroupMap, id);
-    var isAllSelected = this._selectedColMap ? true : false;
-    for (i = 0; i < colIds.length; i++) {
-      var colId = colIds[i];
-      index = this._getColumnIndexById(colId);
-      if (index > -1) {
-        spanIndices.push(index);
-      }
-      if (isAllSelected && this._selectedColMap) {
-        isAllSelected &= this._selectedColMap[colId];
-      }
-    }
-    spanIndices.sort(ColumnGroupingPlugin._ascSortLogic);
-    len = spanIndices.length;
-    if (len > 0) {
-      // This could be unnecessary
-      var start = spanIndices[0];
-      var end = spanIndices[len - 1];
-      section.setCellColSpan(start, groupDef["onRow"], end - start + 1);
-      groupDef["colIndex"] = start;
-      if (isAllSelected) {
-        var cell = section.getCell(start, groupDef["onRow"]);
-        cell.addClass("selected-group");
-      }
-    }
-  }
+	let section = titleSection;
+	let visibleGroupMap = this._visibleGroupMap;
+
+	// Span column of column group
+	let groupDef, spanIndices, len, colIds, index, i;
+	for(let id in visibleGroupMap) {
+		spanIndices = [];
+		groupDef = visibleGroupMap[id];
+		colIds = GroupDefinitions.getLeafDescendants(visibleGroupMap, id);
+		let isAllSelected = this._selectedColMap ? true : false;
+		for(i = 0; i < colIds.length; i++) {
+			let colId = colIds[i];
+			index = this._getColumnIndexById(colId);
+			if(index > -1) {
+				spanIndices.push(index);
+			}
+			if(isAllSelected && this._selectedColMap){
+				isAllSelected &= this._selectedColMap[colId];
+			}
+		}
+		spanIndices.sort(ColumnGroupingPlugin._ascSortLogic);
+		len = spanIndices.length;
+		if(len > 0) { // This could be unnecessary
+			let start = spanIndices[0];
+			let end = spanIndices[len - 1];
+			section.setCellColSpan(start, groupDef["onRow"], end - start + 1);
+			groupDef["colIndex"] = start;
+
+			if(isAllSelected){
+				let cell = section.getCell(start, groupDef["onRow"]);
+				cell.addClass("selected-group");
+			}
+		}
+	}
 };
 /** Render all column group headers without affecting cell spans.
 * @public
 */
 ColumnGroupingPlugin.prototype.renderGroups = function () {
-  this._groupHeaderTimerId = 0;
-  var hostCount = this._hosts.length;
-  var groupMap = this._visibleGroupMap;
-  for (var _i6 = 0; _i6 < hostCount; ++_i6) {
-    var section = this._hosts[_i6].getSection("title");
-    if (!section) {
-      continue;
-    }
-    for (var id in groupMap) {
-      this._renderGroup(groupMap[id], section);
-    }
-  }
+	this._groupHeaderTimerId = 0;
+	let hostCount = this._hosts.length;
+	let groupMap = this._visibleGroupMap;
+	for(let i = 0; i < hostCount; ++i) {
+		let section = this._hosts[i].getSection("title");
+		if(!section) {
+			continue;
+		}
+
+		for(let id in groupMap) {
+			this._renderGroup(groupMap[id], section);
+		}
+	}
 };
 
 /** @public
 * @param {Array<string|number>} colRefs
 * @return {string} groupId if all the given columns are children of that groupId, otherwise empty string
 */
-ColumnGroupingPlugin.prototype.getMutualGroupId = function (colRefs) {
-  var colCount = colRefs.length;
-  for (var _i7 = 0; _i7 < colCount; _i7++) {
-    if (typeof colRefs[_i7] === "string") {
-      colRefs[_i7] = this.getColumnIndex(colRefs[_i7]);
-    }
-    var colIndex = colRefs[_i7];
-    var groupIds = this.getGroupIds(colIndex);
-    if (!groupIds) {
-      // If at least 1 column is not part of a group, there is no need to find the groupId.
-      return "";
-    }
-    var groupCount = groupIds.length;
-    for (var j = 0; j < groupCount; j++) {
-      var groupId = groupIds[j];
-      var childrenIndices = this.getChildColumnIndices(groupId);
-      if (deepEqual(childrenIndices, colRefs)) {
-        return groupId;
-      }
-    }
-  }
-  return "";
+ColumnGroupingPlugin.prototype.getMutualGroupId = function(colRefs) {
+	let colCount = colRefs.length;
+	for(let i = 0; i < colCount; i++) {
+		if(typeof colRefs[i] === "string") {
+			colRefs[i] = this.getColumnIndex(colRefs[i]);
+		}
+		let colIndex = colRefs[i];
+		let groupIds = this.getGroupIds(colIndex);
+		if(!groupIds) { // If at least 1 column is not part of a group, there is no need to find the groupId.
+			return "";
+		}
+		let groupCount = groupIds.length;
+		for(let j = 0; j < groupCount; j++) {
+			let groupId = groupIds[j];
+			let childrenIndices = this.getChildColumnIndices(groupId);
+			if(deepEqual(childrenIndices, colRefs)) {
+				return groupId;
+			}
+		}
+	}
+	return "";
 };
 /** Render single column group header without affecting cell span.
 * @private
 * @param {Object} groupDef
 * @param {Object} section
 */
-ColumnGroupingPlugin.prototype._renderGroup = function (groupDef, section) {
-  var colIndex = groupDef["colIndex"];
-  if (colIndex == null) {
-    return;
-  }
-  var rowIndex = groupDef["onRow"];
-  var cell = section.getCell(colIndex, rowIndex);
-  var colIds = GroupDefinitions.getLeafDescendants(this._visibleGroupMap, groupDef["id"]);
-  var isAllSelected = false;
-  if (this._selectedColMap) {
-    isAllSelected = true;
-    for (var _i8 = 0; _i8 < colIds.length; _i8++) {
-      if (!this._selectedColMap[colIds[_i8]]) {
-        isAllSelected = false;
-        break;
-      }
-    }
-  }
-  if (cell) {
-    // Overide the defaults
-    cell.setStyle("text-align", groupDef["alignment"] || "");
-    cell.setTooltip(ColumnGroupingPlugin._getTooltip(groupDef));
-    cell.setContent(groupDef["name"] || groupDef["title"]);
-
-    // Additional cell settings must be removed in the _applyGrouping() method
-    cell.addClass("no-sort");
-    cell.setAttribute("group-id", groupDef["id"]);
-    if (isAllSelected) {
-      cell.addClass("selected-group");
-    } else {
-      cell.removeClass("selected-group");
-    }
-    if (groupDef["legacyRender"]) {
-      // Built-in version if render receive colIndex, cell, groupDefinition as arguments
-      groupDef["legacyRender"](colIndex, cell, groupDef);
-    }
-    if (groupDef["render"]) {
-      var arg = {};
-      arg["cell"] = cell;
-      arg["colIndex"] = colIndex;
-      arg["groupNode"] = groupDef;
-      groupDef["render"](arg);
-    }
-  }
+ColumnGroupingPlugin.prototype._renderGroup = function(groupDef, section) {
+	let colIndex = groupDef["colIndex"];
+	if(colIndex == null) {
+		return;
+	}
+	let rowIndex = groupDef["onRow"];
+	let cell = section.getCell(colIndex, rowIndex);
+	let colIds = GroupDefinitions.getLeafDescendants(this._visibleGroupMap, groupDef["id"]);
+	let isAllSelected = false;
+	if(this._selectedColMap){
+		isAllSelected = true;
+		for(let i = 0; i < colIds.length; i++) {
+			if(!this._selectedColMap[colIds[i]]){
+				isAllSelected = false;
+				break;
+			}
+		}
+	}
+
+	if(cell) {
+		// Overide the defaults
+		cell.setStyle("text-align", groupDef["alignment"] || "");
+		cell.setTooltip(ColumnGroupingPlugin._getTooltip(groupDef));
+		cell.setContent(groupDef["name"] || groupDef["title"]);
+
+		// Additional cell settings must be removed in the _applyGrouping() method
+		cell.addClass("no-sort");
+		cell.setAttribute("group-id", groupDef["id"]);
+
+		if(isAllSelected){
+			cell.addClass("selected-group");
+		} else {
+			cell.removeClass("selected-group");
+		}
+
+		if(groupDef["legacyRender"]) {
+			// Built-in version if render receive colIndex, cell, groupDefinition as arguments
+			groupDef["legacyRender"](colIndex, cell, groupDef);
+		}
+
+		if(groupDef["render"]) {
+			let arg = {};
+			arg["cell"] = cell;
+			arg["colIndex"] = colIndex;
+			arg["groupNode"] = groupDef;
+			groupDef["render"](arg);
+		}
+	}
 };
 
 /** @private
 * @param {Object} e
 */
 ColumnGroupingPlugin.prototype._onPostSectionRender = function (e) {
-  if (e.sectionType === "title" && !this._restructuring) {
-    this.renderGroups();
-  }
+	if(e.sectionType === "title" && !this._restructuring) {
+		this.renderGroups();
+	}
 };
 
 /** @private
   * @param {Object} e dispatching of columnAdded event object
   */
 ColumnGroupingPlugin.prototype._requestApplyAddChildGroup = function (e) {
-  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);
-    }
-  }
+	let ctx = e.context;
+	let tsParentDef = ctx ? ctx.parent : null;
+
+	if(tsParentDef) {
+		this._addingEvents.push(e);
+		if(!this._addingTimerId) {
+			this._addingTimerId = setTimeout(this._applyTimeSeries.bind(this, e), 10);
+		}
+	}
 };
 
+
 /** @private
 * @param {Object} e dispatching of columnAdded event object
 */
 ColumnGroupingPlugin.prototype._applyTimeSeries = function (e) {
-  this._addingTimerId = 0; // clear timer
-  var addingEvents = this._addingEvents;
-  this._addingEvents = [];
-  if (addingEvents.length > 0) {
-    var children = [];
-    var timeSeriesId, timeSeriesName;
-    var tsgChild = {};
-    for (var _i9 = 0; _i9 < addingEvents.length; _i9++) {
-      // WARNING: addingEvents column can be difference group
-      var addingEvent = addingEvents[_i9];
-      timeSeriesName = addingEvent.context.timeSeriesName;
-      timeSeriesId = addingEvent.context.timeSeriesId;
-      var childIndex = void 0,
-        childId = void 0;
-      if (!tsgChild[timeSeriesId]) {
-        tsgChild[timeSeriesId] = {
-          name: timeSeriesName,
-          children: []
-        };
-        childIndex = addingEvent.colIndex;
-        childId = this.getColumnId(childIndex);
-        tsgChild[timeSeriesId].children.push(childId);
-      } else {
-        childIndex = addingEvent.colIndex;
-        childId = this.getColumnId(childIndex);
-        tsgChild[timeSeriesId].children.push(childId);
-      }
-    }
-    for (timeSeriesId in tsgChild) {
-      var groupId = "timeSerieGroup_" + timeSeriesId;
-      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: tsgChild[timeSeriesId].name,
-          children: tsgChild[timeSeriesId].children,
-          timeSeriesGroup: true // For remove it when getConfigObject
-        });
-      }
-    }
-  }
-
-  this._requestApplyGrouping();
+	this._addingTimerId = 0; // clear timer
+	let addingEvents = this._addingEvents;
+	this._addingEvents = [];
+	if(addingEvents.length > 0) {
+		let children = [];
+		let timeSeriesId, timeSeriesName;
+		let tsgChild = {};
+		for(let i = 0; i < addingEvents.length; i++) { // WARNING: addingEvents column can be difference group
+			let addingEvent = addingEvents[i];
+			timeSeriesName = addingEvent.context.timeSeriesName;
+			timeSeriesId = addingEvent.context.timeSeriesId;
+			let childIndex, childId;
+			if(!tsgChild[timeSeriesId]) {
+				tsgChild[timeSeriesId] = {
+					name: timeSeriesName,
+					children: []
+				};
+				childIndex = addingEvent.colIndex;
+				childId = this.getColumnId(childIndex);
+				tsgChild[timeSeriesId].children.push(childId);
+			} else {
+				childIndex = addingEvent.colIndex;
+				childId = this.getColumnId(childIndex);
+				tsgChild[timeSeriesId].children.push(childId);
+			}
+		}
+		for(timeSeriesId in tsgChild) {
+			let groupId = "timeSerieGroup_" + timeSeriesId;
+			let 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: tsgChild[timeSeriesId].name,
+					children: tsgChild[timeSeriesId].children,
+					timeSeriesGroup: true // For remove it when getConfigObject
+				});
+			}
+		}
+	}
+	this._requestApplyGrouping();
 };
 
 /** @private
 * @param {Object} e dispatching of columnAdded event object
 */
 ColumnGroupingPlugin.prototype._onColumnAdded = function (e) {
-  var batches = e["batches"];
-  if (!(batches && batches["reset"])) {
-    this._requestApplyAddChildGroup(e);
-    this._applyNearestGrouping(e.colIndex);
-  }
-  this._requestApplyGrouping();
+	let batches = e["batches"];
+	if(!(batches && batches["reset"])) {
+		this._requestApplyAddChildGroup(e);
+		this._applyNearestGrouping(e.colIndex);
+	}
+
+	this._requestApplyGrouping();
 };
 /** @private
 */
 ColumnGroupingPlugin.prototype._onColumnChanged = function () {
-  this._requestApplyGrouping();
+	this._requestApplyGrouping();
 };
 /** @private
 * @param {Object} e dispatching of columnMoved event object
 */
 ColumnGroupingPlugin.prototype._onColumnMoved = function (e) {
-  var batches = e["batches"];
-  if (!(batches && batches["move"])) {
-    this._applyNearestGrouping(e.toColIndex);
-  }
-  this._requestApplyGrouping();
+	let batches = e["batches"];
+	if(!(batches && batches["move"])) {
+		this._applyNearestGrouping(e.toColIndex);
+	}
+	this._requestApplyGrouping();
 };
 /** @private
 * @param {Object} e
 */
-ColumnGroupingPlugin.prototype._onColumnRemoved = function (e) {
-  var batches = e["batches"];
-  if (!(batches && batches["reset"])) {
-    var colId = e.colId;
-    if (colId) {
-      if (this._groupDefs.unsetParent(colId)) {
-        this._requestApplyGrouping();
-      }
-    }
-  } else {
-    this._requestApplyGrouping();
-  }
+ColumnGroupingPlugin.prototype._onColumnRemoved = function(e) {
+	let batches = e["batches"];
+	if(!(batches && batches["reset"])) {
+		let colId = e.colId;
+		if(colId) {
+			if(this._groupDefs.unsetParent(colId)) {
+				this._requestApplyGrouping();
+			}
+		}
+	} else {
+		this._requestApplyGrouping();
+	}
 };
 /** @private
 * @param {Object} e
 */
-ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
-  var selectedColumns = e.selectedColumns; // Hidden columns are included
-
-  // Find non-grouped column
-  var i, colId, nonGroupedColId, groupId;
-  var colIds = [];
-  var groupMap = {};
-  for (i = 0; i < selectedColumns.length; i++) {
-    colId = this.getColumnId(selectedColumns[i]);
-    if (colId) {
-      groupId = this._groupDefs.getParentId(colId);
-      if (!groupId) {
-        nonGroupedColId = colId;
-        break;
-      } else {
-        groupMap[groupId] = this._groupDefs.getGroup(groupId); // Cache group node for further calculation
-      }
-
-      colIds.push(colId); // Cache column id for further calculation
-    }
-  }
-
-  if (nonGroupedColId) {
-    e.topBoundRowIndex = 0;
-    return;
-  }
-  var topBoundRowIndex = this._maxDepth; // Column title row
-
-  // Find minimum row index of group
-  var rootGroupMap = {};
-  var headerRowIndex, group;
-  for (groupId in groupMap) {
-    group = this._groupDefs.getRootGroup(groupId);
-    rootGroupMap[group.id] = group;
-    headerRowIndex = groupMap[groupId].onRow + 1;
-    if (headerRowIndex < topBoundRowIndex) {
-      topBoundRowIndex = headerRowIndex;
-    }
-  }
-
-  // Traverse down from the root group to find group that its all members are selected
-  var n, members, allSelected, findingGroup, children;
-  var nextLevelGroups = rootGroupMap;
-  for (i = 0; i < topBoundRowIndex; i++) {
-    findingGroup = nextLevelGroups;
-    nextLevelGroups = {};
-    for (groupId in findingGroup) {
-      group = findingGroup[groupId];
-      allSelected = true;
-      members = this._groupDefs.getLeafDescendants(groupId);
-      if (members.length <= colIds.length) {
-        for (n = 0; n < members.length; n++) {
-          if (colIds.indexOf(members[n]) < 0) {
-            allSelected = false;
-            break;
-          }
-        }
-        if (allSelected) {
-          e.topBoundRowIndex = i;
-          return;
-        }
-      }
-
-      // Cache the next level group
-      children = group.children;
-      for (n = 0; n < children.length; n++) {
-        var id = children[n];
-        group = this._groupDefs.getGroup(id);
-        if (group) {
-          nextLevelGroups[id] = group;
-        }
-      }
-    }
-  }
-
-  // Find maximum spanned row count
-  var section = this._hosts[0].getSection("title");
-  var minRowSpanCount = 0;
-  var bottomRowIndex = this._maxDepth;
-  for (i = 0; i < selectedColumns.length; i++) {
-    var rowSpanCount = section.getCellRowSpan(selectedColumns[i], bottomRowIndex);
-    if (rowSpanCount < minRowSpanCount) {
-      minRowSpanCount = rowSpanCount;
-    }
-  }
-  e.topBoundRowIndex = bottomRowIndex + minRowSpanCount;
+ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function(e) {
+	let selectedColumns = e.selectedColumns; // Hidden columns are included
+
+	// Find non-grouped column
+	let i, colId, nonGroupedColId, groupId;
+	let colIds = [];
+	let groupMap = {};
+	for(i = 0; i < selectedColumns.length; i++) {
+		colId = this.getColumnId(selectedColumns[i]);
+		if(colId) {
+			groupId = this._groupDefs.getParentId(colId);
+			if(!groupId) {
+				nonGroupedColId = colId;
+				break;
+			} else {
+				groupMap[groupId] = this._groupDefs.getGroup(groupId); // Cache group node for further calculation
+			}
+			colIds.push(colId); // Cache column id for further calculation
+		}
+	}
+	if(nonGroupedColId) {
+		e.topBoundRowIndex = 0;
+		return;
+	}
+
+	let topBoundRowIndex = this._maxDepth; // Column title row
+
+	// Find minimum row index of group
+	let rootGroupMap = {};
+	let headerRowIndex, group;
+	for(groupId in groupMap) {
+		group = this._groupDefs.getRootGroup(groupId);
+		rootGroupMap[group.id] = group;
+		headerRowIndex = groupMap[groupId].onRow + 1;
+		if(headerRowIndex < topBoundRowIndex) {
+			topBoundRowIndex = headerRowIndex;
+		}
+	}
+
+	// Traverse down from the root group to find group that its all members are selected
+	let n, members, allSelected, findingGroup, children;
+	let nextLevelGroups = rootGroupMap;
+	for(i = 0; i < topBoundRowIndex; i++) {
+		findingGroup = nextLevelGroups;
+		nextLevelGroups = {};
+		for(groupId in findingGroup) {
+			group = findingGroup[groupId];
+			allSelected = true;
+			members = this._groupDefs.getLeafDescendants(groupId);
+			if(members.length <= colIds.length) {
+				for(n = 0; n < members.length; n++) {
+					if(colIds.indexOf(members[n]) < 0) {
+						allSelected = false;
+						break;
+					}
+				}
+				if(allSelected) {
+					e.topBoundRowIndex = i;
+					return;
+				}
+			}
+
+			// Cache the next level group
+			children = group.children;
+			for(n = 0; n < children.length; n++) {
+				let id = children[n];
+				group = this._groupDefs.getGroup(id);
+				if(group) {
+					nextLevelGroups[id] = group;
+				}
+			}
+		}
+	}
+
+	// Find maximum spanned row count
+	let section = this._hosts[0].getSection("title");
+	let minRowSpanCount = 0;
+	let bottomRowIndex = this._maxDepth;
+	for (i = 0; i < selectedColumns.length; i++) {
+		let rowSpanCount = section.getCellRowSpan(selectedColumns[i], bottomRowIndex);
+		if(rowSpanCount < minRowSpanCount) {
+			minRowSpanCount = rowSpanCount;
+		}
+	}
+
+	e.topBoundRowIndex = bottomRowIndex + minRowSpanCount;
+};
+/** @private
+* @param {String} groupId
+* @return {boolean}
+*/
+ColumnGroupingPlugin.prototype._isChildSelected = function(groupId) {
+	let childIndices = this.getChildColumnIndices(groupId);
+	if(childIndices && childIndices.length) {
+		let host = this._hosts[0];
+		for(let i = 0; i < childIndices.length; i++) {
+			if(host.isSelectedColumn(childIndices[i])) {
+				return true;
+			}
+		}
+	}
+	return false;
+};
+/** @private
+*/
+ColumnGroupingPlugin.prototype._updateColumnBounds = function() {
+	let hosts = this._hosts;
+	for(let i = 0; i < hosts.length; i++) {
+		let host = hosts[i];
+		if(host.updateColumnBounds) { // Keep backward compatibility
+			host.updateColumnBounds();
+		}
+	}
 };
 /** Deprecated. Column should be directly added through grid APIs.
 * @deprecated
@@ -1114,24 +1182,26 @@ ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
 * @param {number} colIndex Column index
 */
 ColumnGroupingPlugin.prototype.addColumnToGroup = function (column, groupId, colIndex) {
-  if (!column) return;
-  var destIndex = this.getColumnCount();
-  if (colIndex != null) {
-    var groupDef = this._groupDefs.getGroup(groupId);
-    if (groupDef) {
-      this._groupDefs.addGroupChild(groupId, column.id);
-    }
-    destIndex = colIndex;
-  }
-  if (this._realTimeGrid) {
-    // TODO: Support multi-table feature
-    this._realTimeGrid.insertColumn(column, destIndex);
-  } else if (this._compositeGrid) {
-    this._compositeGrid.insertColumn(destIndex, column);
-  }
-  if (colIndex == null) {
-    this.setColumnParent(column.id || destColIndex, groupId);
-  }
+	if(!column) return;
+
+	let destIndex = this.getColumnCount();
+	if(colIndex != null) {
+		let groupDef = this._groupDefs.getGroup(groupId);
+		if(groupDef) {
+			this._groupDefs.addGroupChild(groupId, column.id);
+		}
+		destIndex = colIndex;
+	}
+
+	if(this._realTimeGrid) { // TODO: Support multi-table feature
+		this._realTimeGrid.insertColumn(column, destIndex);
+	} else if(this._compositeGrid) {
+		this._compositeGrid.insertColumn(destIndex, column);
+	}
+
+	if(colIndex == null) {
+		this.setColumnParent(column.id || destColIndex, groupId);
+	}
 };
 
 /** Add new group definition to existing group structure. Existing group with the same id will be replaced.
@@ -1140,10 +1210,10 @@ ColumnGroupingPlugin.prototype.addColumnToGroup = function (column, groupId, col
 * @return {string} Return group ID
 */
 ColumnGroupingPlugin.prototype.addGroup = function (groupDef) {
-  if (ColumnGroupingPlugin._hasGroupId(groupDef)) {
-    return this.setGroupDefinition(groupDef.id, groupDef);
-  }
-  return "";
+	if(ColumnGroupingPlugin._hasGroupId(groupDef)) {
+		return this.setGroupDefinition(groupDef.id, groupDef);
+	}
+	return "";
 };
 /** Deprecated. Use addGroup() method instead
 * @deprecated
@@ -1158,11 +1228,15 @@ ColumnGroupingPlugin.prototype.addColumnGrouping = ColumnGroupingPlugin.prototyp
 * @return {boolean}
 */
 ColumnGroupingPlugin.prototype.removeGroup = function (groupId) {
-  if (this._groupDefs.removeGroup(groupId)) {
-    this._applyGrouping();
-    return true;
-  }
-  return false;
+	let isChildSelected = this._isChildSelected(groupId);
+	if(this._groupDefs.removeGroup(groupId)) {
+		this._applyGrouping();
+		if(isChildSelected) {
+			this._updateColumnBounds();
+		}
+		return true;
+	}
+	return false;
 };
 
 /** @public
@@ -1170,30 +1244,31 @@ ColumnGroupingPlugin.prototype.removeGroup = function (groupId) {
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
 ColumnGroupingPlugin.prototype.getGroupDefinition = function (groupId) {
-  var chdr = this._getAvaliableChildren(groupId);
-  if (chdr.length > 1) {
-    var groupDef = this._groupDefs.getGroup(groupId);
-    groupDef = ColumnGroupingPlugin._cloneObject(groupDef); // TODO: this is slow
-    groupDef.children = chdr;
-    return groupDef;
-  }
-  return null;
+	let chdr = this._getAvaliableChildren(groupId);
+	if(chdr.length > 1) {
+		let groupDef = this._groupDefs.getGroup(groupId);
+		groupDef = ColumnGroupingPlugin._cloneObject(groupDef); // TODO: this is slow
+		groupDef.children = chdr;
+		return groupDef;
+	}
+	return null;
 };
 /** Get a shallow copy of all existing group definitions
 * @public
 * @return {!ColumnGroupingPlugin~GroupDefinitions}
 */
 ColumnGroupingPlugin.prototype.getGroupDefinitions = function () {
-  var validGroupDefs = [];
-  var groupMap = this._groupDefs.getGroupMap();
-  for (var grpId in groupMap) {
-    var groupDef = this.getGroupDefinition(grpId); // Clone
-    if (groupDef) {
-      delete groupDef.parentId;
-      validGroupDefs.push(groupDef);
-    }
-  }
-  return validGroupDefs;
+	let validGroupDefs = [];
+	let groupMap = this._groupDefs.getGroupMap();
+	for(let grpId in groupMap) {
+		let groupDef = this.getGroupDefinition(grpId); // Clone
+		if(groupDef) {
+			delete groupDef.parentId;
+			validGroupDefs.push(groupDef);
+		}
+	}
+
+	return validGroupDefs;
 };
 /** Replace and update existing group definition. New group is added if the given id has no match. Existing group will be removed of no new definition is given.
 * @public
@@ -1202,35 +1277,47 @@ ColumnGroupingPlugin.prototype.getGroupDefinitions = function () {
 * @return {string} Return group Id. Return empty string if nothing has been changed.
 */
 ColumnGroupingPlugin.prototype.setGroupDefinition = function (groupId, groupDef) {
-  if (this._groupDefs.setGroup(groupId, groupDef)) {
-    var newDef = this._groupDefs.getGroup(groupId);
-    if (newDef) {
-      var host = this._hosts[0];
-      var chdr = host.getValidColumnList(newDef.children).map(ColumnGroupingPlugin.getObjectId); //this return only valid columns without group
-      var len = chdr.length;
-      if (len > 1) {
-        this.reorderColumns(chdr, chdr[0]);
-      }
-    }
-    this._applyGrouping();
-    return groupId;
-  }
-  return "";
+	if(this._groupDefs.setGroup(groupId, groupDef)) {
+		let newDef = this._groupDefs.getGroup(groupId);
+		if(newDef) {
+			let host = this._hosts[0];
+			let chdr = host.getValidColumnList(newDef.children).map(ColumnGroupingPlugin.getObjectId); //this return only valid columns without group
+			let len = chdr.length;
+			if(len > 1) {
+				this.reorderColumns(chdr, chdr[0]);
+			}
+		}
+		this._applyGrouping();
+		if(this._isChildSelected(groupId)) {
+			this._updateColumnBounds();
+		}
+		return groupId;
+	}
+	return "";
 };
 /** Remove all existing group definitions and replace with the given definitions.
 * @public
 * @param {ColumnGroupingPlugin~GroupDefinitions} groupDefs Use null or empty array to remove all existing groups
 */
 ColumnGroupingPlugin.prototype.setGroupDefinitions = function (groupDefs) {
-  if (Array.isArray(groupDefs)) {
-    groupDefs = groupDefs.filter(ColumnGroupingPlugin._hasGroupId);
-    groupDefs = groupDefs.map(ColumnGroupingPlugin._cloneObject);
-  } else {
-    groupDefs = null;
-  }
-  ColumnGroupingPlugin._flattenGroupDefs(groupDefs);
-  this._groupDefs.setGroups(groupDefs);
-  this._applyGrouping();
+	if(Array.isArray(groupDefs)) {
+		groupDefs = groupDefs.filter(ColumnGroupingPlugin._hasGroupId);
+		groupDefs = groupDefs.map(ColumnGroupingPlugin._cloneObject);
+	} else {
+		groupDefs = null;
+	}
+	ColumnGroupingPlugin._flattenGroupDefs(groupDefs);
+	this._groupDefs.setGroups(groupDefs);
+	this._applyGrouping();
+
+	let groupIds = this._groupDefs.getGroupIds();
+	for(let i = 0; i < groupIds.length; i++) {
+		if(this._isChildSelected(groupIds[i])) {
+			this._updateColumnBounds();
+			break;
+		}
+	}
+	this._updateColumnBounds();
 };
 /** Replace and update existing group definition.
 * @public
@@ -1239,53 +1326,58 @@ ColumnGroupingPlugin.prototype.setGroupDefinitions = function (groupDefs) {
 * @return {boolean}
 */
 ColumnGroupingPlugin.prototype.setGroupChildren = function (groupId, newChildList) {
-  if (this._groupDefs.setGroupChildren(groupId, newChildList)) {
-    this._applyGrouping();
-    return true;
-  }
-  return false;
+	if(this._groupDefs.setGroupChildren(groupId, newChildList)) {
+		this._applyGrouping();
+		if(this._isChildSelected(groupId)) {
+			this._updateColumnBounds();
+		}
+		return true;
+	}
+	return false;
 };
 /** @public
 * @param {string} groupId
 * @param {string} groupName
 */
 ColumnGroupingPlugin.prototype.setGroupName = function (groupId, groupName) {
-  if (this._groupDefs.setGroupName(groupId, groupName)) {
-    var groupDef = this._visibleGroupMap[groupId];
-    if (groupDef) {
-      groupDef.name = groupName;
-      var hostCount = this._hosts.length;
-      for (var _i10 = 0; _i10 < hostCount; ++_i10) {
-        var section = this._hosts[_i10].getSection("title");
-        if (!section) {
-          continue;
-        }
-        this._renderGroup(groupDef, section);
-      }
-    }
-  }
+	if(this._groupDefs.setGroupName(groupId, groupName)) {
+		let groupDef = this._visibleGroupMap[groupId];
+		if(groupDef) {
+			groupDef.name = groupName;
+
+			let hostCount = this._hosts.length;
+			for(let i = 0; i < hostCount; ++i) {
+				let section = this._hosts[i].getSection("title");
+				if(!section) {
+					continue;
+				}
+
+				this._renderGroup(groupDef, section);
+			}
+		}
+	}
 };
 /** @private
 * @param {string} groupId
 * @return {!Array.<string>} The list of immediate valid child, including invisible child groups
 */
 ColumnGroupingPlugin.prototype._getAvaliableChildren = function (groupId) {
-  var chdr = this._groupDefs.getGroupChildren(groupId);
-  var childCount = chdr ? chdr.length : 0;
-  var validChildren = [];
-  if (childCount) {
-    var host = this._hosts[0];
-    var validCols = host.getValidColumnList(chdr);
-    validChildren = validCols.map(ColumnGroupingPlugin.getObjectId);
-    var groupMap = this._groupDefs.getGroupMap();
-    for (var _i11 = 0; _i11 < childCount; _i11++) {
-      var childId = chdr[_i11];
-      if (groupMap[childId]) {
-        validChildren.push(childId);
-      }
-    }
-  }
-  return validChildren;
+	let chdr = this._groupDefs.getGroupChildren(groupId);
+	let childCount = chdr ? chdr.length : 0;
+	let validChildren = [];
+	if(childCount) {
+		let host = this._hosts[0];
+		let validCols = host.getValidColumnList(chdr);
+		validChildren = validCols.map(ColumnGroupingPlugin.getObjectId);
+		let groupMap = this._groupDefs.getGroupMap();
+		for(let i = 0; i < childCount; i++) {
+			let childId = chdr[i];
+			if(groupMap[childId]) {
+				validChildren.push(childId);
+			}
+		}
+	}
+	return validChildren;
 };
 
 /** @public
@@ -1293,11 +1385,11 @@ ColumnGroupingPlugin.prototype._getAvaliableChildren = function (groupId) {
 * @return {Array.<string>}
 */
 ColumnGroupingPlugin.prototype.getGroupChildren = function (groupId) {
-  var children = this._getAvaliableChildren(groupId);
-  if (children.length > 1) {
-    return children;
-  }
-  return null;
+	let children = this._getAvaliableChildren(groupId);
+	if(children.length > 1) {
+		return children;
+	}
+	return null;
 };
 
 /** Return all column indices under the given group id
@@ -1305,36 +1397,36 @@ ColumnGroupingPlugin.prototype.getGroupChildren = function (groupId) {
 * @param {string} groupId
 * @return {Array.<number>}
 */
-ColumnGroupingPlugin.prototype.getChildColumnIndices = function (groupId) {
-  var colIndices = [];
-  var host = this._hosts[0];
-  var colIds = this._groupDefs.getLeafDescendants(groupId);
-  if (colIds) {
-    var validColList = host.getValidColumnList(colIds);
-    colIndices = validColList.map(ColumnGroupingPlugin.getObjectIndex);
-    return colIndices;
-  }
-  return null;
+ColumnGroupingPlugin.prototype.getChildColumnIndices = function(groupId) {
+	let colIndices = [];
+	let host = this._hosts[0];
+	let colIds = this._groupDefs.getLeafDescendants(groupId);
+	if(colIds) {
+		let validColList = host.getValidColumnList(colIds);
+		colIndices = validColList.map(ColumnGroupingPlugin.getObjectIndex);
+		return colIndices;
+	}
+	return null;
 };
 
 /** @public
 * @param {string|number} colRef
 * @return {Array.<string>}
 */
-ColumnGroupingPlugin.prototype.getGroupIds = function (colRef) {
-  if (colRef == null) {
-    return null;
-  }
-  var colId = typeof colRef === "number" ? this.getColumnId(colRef) : colRef;
-  return this._groupDefs.getParentIds(colId);
+ColumnGroupingPlugin.prototype.getGroupIds = function(colRef) {
+	if(colRef == null) {
+		return null;
+	}
+	let colId = (typeof colRef === "number") ?  this.getColumnId(colRef) : colRef;
+	return this._groupDefs.getParentIds(colId);
 };
 
 /** Return deepest row index of column headers
 * @public
 * @return {number}
 */
-ColumnGroupingPlugin.prototype.getMaxGroupLevel = function () {
-  return this._maxDepth;
+ColumnGroupingPlugin.prototype.getMaxGroupLevel = function() {
+	return this._maxDepth;
 };
 
 /** Return row index of the given group id
@@ -1342,12 +1434,12 @@ ColumnGroupingPlugin.prototype.getMaxGroupLevel = function () {
 * @param {string} groupId
 * @return {number}
 */
-ColumnGroupingPlugin.prototype.getGroupLevel = function (groupId) {
-  var group = this._visibleGroupMap[groupId];
-  if (group) {
-    return group.onRow;
-  }
-  return -1;
+ColumnGroupingPlugin.prototype.getGroupLevel = function(groupId) {
+	let group = this._visibleGroupMap[groupId];
+	if(group) {
+		return group.onRow;
+	}
+	return -1;
 };
 
 /** This version exclude invisible column unlike the one in GridPlugin
@@ -1356,135 +1448,150 @@ ColumnGroupingPlugin.prototype.getGroupLevel = function (groupId) {
 * @return {number} index of the column
 */
 ColumnGroupingPlugin.prototype._getColumnIndexById = function (id) {
-  var api = this.getGridApi();
-  if (api && id) {
-    var core = this._hosts[0];
-    var colCount = core.getColumnCount();
-    for (var c = 0; c < colCount; c++) {
-      if (this.getColumnId(c) === id && core.isColumnVisible(c)) {
-        return c;
-      }
-    }
-  }
-  return -1;
+	let api = this.getGridApi();
+	if(api && id) {
+		let core = this._hosts[0];
+		let colCount = core.getColumnCount();
+		for(let c = 0; c < colCount; c++) {
+			if(this.getColumnId(c) === id && core.isColumnVisible(c)) {
+				return c;
+			}
+		}
+	}
+	return -1;
 };
 /** @private
 * @param {string} childId
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
 ColumnGroupingPlugin.prototype._getVisibleParentGroup = function (childId) {
-  return this._visibleGroupMap[this._groupDefs.getParentId(childId)] || null;
+	return this._visibleGroupMap[this._groupDefs.getParentId(childId)] || null;
 };
 /** @public
 * @param {Element|Event|MouseEvent} e
 * @return {Object}
 */
-ColumnGroupingPlugin.prototype.getCellInfo = function (e) {
-  var api = this.getGridApi();
-  var grid = e["grid"] || this.getRelativeGrid(e);
-  if (!api || !grid) {
-    return null;
-  }
-  var cellInfo = grid.getCellInfo(e);
-  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._groupDefs.getParentId(colId, cellInfo.sectionType == "title" ? cellInfo.rowIndex : null);
-  if (!groupId) {
-    cellInfo["columnId"] = colId;
-    return cellInfo;
-  }
-  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["children"] = groupInfo.children;
-    } else {
-      cellInfo["columnId"] = colId;
-    }
-    cellInfo["parent"] = isGroupHeader ? groupInfo.parentId || null : groupInfo.id;
-  }
-  return cellInfo;
+ColumnGroupingPlugin.prototype.getCellInfo = function(e) {
+	let api = this.getGridApi();
+	let grid = e["grid"] || this.getRelativeGrid(e);
+	if(!api || !grid) {
+		return null;
+	}
+
+	let cellInfo = grid.getCellInfo(e);
+	if(!cellInfo){
+		return e;
+	}
+
+	if(!cellInfo["cell"]){
+		let cell = cellInfo.section.getCell(cellInfo.colIndex, cellInfo.rowIndex);
+		cellInfo["cell"] = cell;
+	}
+
+	let colId = this.getColumnId(cellInfo.colIndex);
+	let groupId = this._groupDefs.getParentId(colId, cellInfo.sectionType == "title" ? cellInfo.rowIndex : null);
+	if(!groupId){
+		cellInfo["columnId"] = colId;
+		return cellInfo;
+	}
+
+	let groupInfo = this._groupDefs.getGroup(groupId); // TODO: Check if we need visible group
+	if(groupInfo) {
+		let isGroupHeader = cellInfo.sectionType == "title" && cellInfo.rowIndex == this.getGroupLevel(groupId);
+		if(isGroupHeader){
+			cellInfo["groupId"] = groupInfo.id;
+			cellInfo["groupName"] = groupInfo.name || "";
+			cellInfo["children"] = groupInfo.children;
+		} else {
+			cellInfo["columnId"] = colId;
+		}
+		cellInfo["parent"] = isGroupHeader ? groupInfo.parentId || null : groupInfo.id;
+	}
+
+	return cellInfo;
 };
 /** @public
 * @param {number|string} colRef Column index or id that should be moved
 * @param {number} to
 * @param {string} groupId
 */
-ColumnGroupingPlugin.prototype.moveColumnIntoGroup = function (colRef, to, groupId) {
-  var fromIndex = this.getColumnIndex(colRef);
-  if (fromIndex == -1) {
-    return;
-  }
-  var groupDef = this._groupDefs.getGroup(groupId);
-  if (!groupDef) {
-    for (var j = this._hosts.length; --j >= 0;) {
-      var grid = this._hosts[j];
-      grid.moveColumn(fromIndex, to);
-    }
-    return;
-  }
-  var childIndices = this.getChildColumnIndices(groupId);
-  var startIndex = -1;
-  var endIndex = -1;
-  if (childIndices && childIndices.length) {
-    startIndex = childIndices[0];
-    endIndex = childIndices[childIndices.length - 1];
-  } else {
-    startIndex = 0;
-    endIndex = this.getColumnCount();
-  }
-  if (to < startIndex) {
-    to = startIndex;
-    // handle move column to right
-    if (to > fromIndex) {
-      to -= 1;
-    }
-  } else if (to > endIndex) {
-    to = endIndex;
-    // handle move column to left
-    if (to < fromIndex) {
-      to += 1;
-    }
-  }
-
-  // Calculate left and right bound of the group, which column can be moved to.
-  // destination should be between the bound, and it should not be placed between columns in child group
-  for (var _i12 = 0; _i12 < groupDef.children.length; _i12++) {
-    var notAllowIndices = this.getChildColumnIndices(groupDef.children[_i12]);
-    if (notAllowIndices && notAllowIndices.length) {
-      var leftLimit = notAllowIndices[0];
-      var rightLimit = notAllowIndices[notAllowIndices.length - 1];
-      if (to > fromIndex) {
-        leftLimit -= 1;
-      }
-      if (to < fromIndex) {
-        rightLimit += 1;
-      }
-      if (to > leftLimit && to < rightLimit) {
-        to = rightLimit;
-      }
-    }
-  }
-
-  // Get column id before start moving
-  var colId = this.getColumnId(fromIndex);
-  for (var gridIndex = this._hosts.length; --gridIndex >= 0;) {
-    var host = this._hosts[gridIndex];
-    host.moveColumn(fromIndex, to);
-  }
-  if (colId) {
-    if (this._groupDefs.addGroupChild(groupId, colId)) {
-      this._applyGrouping();
-    }
-  }
+ColumnGroupingPlugin.prototype.moveColumnIntoGroup = function(colRef, to, groupId) {
+	let fromIndex = this.getColumnIndex(colRef);
+	if(fromIndex == -1){
+		return;
+	}
+
+	let groupDef = this._groupDefs.getGroup(groupId);
+	if(!groupDef){
+		for(let j = this._hosts.length; --j >= 0;) {
+			let grid = this._hosts[j];
+			grid.moveColumn(fromIndex, to);
+		}
+		return;
+	}
+
+	let childIndices = this.getChildColumnIndices(groupId);
+	let startIndex = -1;
+	let endIndex = -1;
+
+	if(childIndices && childIndices.length){
+		startIndex = childIndices[0];
+		endIndex = childIndices[childIndices.length - 1];
+	} else {
+		startIndex = 0;
+		endIndex = this.getColumnCount();
+	}
+
+	if(to < startIndex){
+		to = startIndex;
+		// handle move column to right
+		if(to > fromIndex){
+			to -= 1;
+		}
+	} else
+	if(to > endIndex) {
+		to = endIndex;
+		// handle move column to left
+		if(to < fromIndex){
+			to += 1;
+		}
+	}
+
+	// Calculate left and right bound of the group, which column can be moved to.
+	// destination should be between the bound, and it should not be placed between columns in child group
+	for(let i = 0; i < groupDef.children.length; i++){
+		let notAllowIndices = this.getChildColumnIndices(groupDef.children[i]);
+		if(notAllowIndices && notAllowIndices.length){
+			let leftLimit = notAllowIndices[0];
+			let rightLimit = notAllowIndices[notAllowIndices.length - 1];
+
+			if(to > fromIndex){
+				leftLimit -= 1;
+			}
+
+			if(to < fromIndex){
+				rightLimit += 1;
+			}
+
+			if(to > leftLimit && to < rightLimit){
+				to = rightLimit;
+			}
+		}
+	}
+
+	// Get column id before start moving
+	let colId = this.getColumnId(fromIndex);
+
+	for(let gridIndex = this._hosts.length; --gridIndex >= 0;) {
+		let host = this._hosts[gridIndex];
+		host.moveColumn(fromIndex, to);
+	}
+
+	if(colId) {
+		if(this._groupDefs.addGroupChild(groupId, colId)) {
+			this._applyGrouping();
+		}
+	}
 };
 /**
 * @public
@@ -1492,11 +1599,11 @@ ColumnGroupingPlugin.prototype.moveColumnIntoGroup = function (colRef, to, group
 * @param {string} groupId
 * @return {boolean}
 */
-ColumnGroupingPlugin.prototype.setColumnParent = function (colRef, groupId) {
-  if (groupId) {
-    return this.addGroupChild(groupId, colRef);
-  }
-  return this.unsetParent(colRef);
+ColumnGroupingPlugin.prototype.setColumnParent = function(colRef, groupId) {
+	if(groupId) {
+		return this.addGroupChild(groupId, colRef);
+	}
+	return this.unsetParent(colRef);
 };
 /** If a column is added as a new child in a group, the column will be moved to the last position in the group. If the column is already a child of the group, nothing happens.
 * @public
@@ -1504,97 +1611,116 @@ ColumnGroupingPlugin.prototype.setColumnParent = function (colRef, groupId) {
 * @param {number|string} childRef Column index, column id, group id to be added
 * @return {boolean}
 */
-ColumnGroupingPlugin.prototype.addGroupChild = function (parentId, childRef) {
-  var parentDef = this._groupDefs.getGroup(parentId);
-  if (!parentDef) {
-    return false;
-  }
-  var colId = "";
-  if (typeof childRef === "string") {
-    var groupDef = this._groupDefs.getGroup(childRef);
-    if (groupDef) {
-      if (this._groupDefs.addGroupChild(parentId, childRef)) {
-        this._applyGrouping();
-        return true;
-      }
-    } else {
-      colId = childRef;
-    }
-  } else {
-    colId = this.getColumnId(childRef);
-  }
-  if (!colId) {
-    return false;
-  }
-  var leafIndices = this.getChildColumnIndices(parentId);
-  if (this._groupDefs.addGroupChild(parentId, colId)) {
-    if (leafIndices && leafIndices.length) {
-      if (this.moveColumnById(colId, leafIndices[leafIndices.length - 1] + 1)) {
-        return true;
-      }
-    }
-    this._applyGrouping();
-    return true;
-  }
-  return false;
+ColumnGroupingPlugin.prototype.addGroupChild = function(parentId, childRef) {
+	let parentDef = this._groupDefs.getGroup(parentId);
+	if(!parentDef) {
+		return false;
+	}
+	let colId = "";
+	if(typeof childRef === "string") {
+		let groupDef = this._groupDefs.getGroup(childRef);
+		if(groupDef) {
+			if(this._groupDefs.addGroupChild(parentId, childRef)) {
+				this._applyGrouping();
+				if(this._isChildSelected(parentId)) {
+					this._updateColumnBounds();
+				}
+				return true;
+			}
+		} else {
+			colId = childRef;
+		}
+	} else {
+		colId = this.getColumnId(childRef);
+	}
+	if(!colId) {
+		return false;
+	}
+
+	let leafIndices = this.getChildColumnIndices(parentId);
+	if(this._groupDefs.addGroupChild(parentId, colId)) {
+		if(leafIndices && leafIndices.length) {
+			if(this.moveColumnById(colId, leafIndices[leafIndices.length - 1] + 1)) {
+				return true;
+			}
+		}
+
+		this._applyGrouping();
+		if(this._isChildSelected(parentId)) {
+			this._updateColumnBounds();
+		}
+		return true;
+	}
+
+	return false;
 };
 /**
 * @public
 * @param {string} parentId
-* @param {number|string} childRef Column index, column id, group id to be added
+* @param {number|string} childRef Column index, column id, group id to be removed
 * @return {boolean}
 */
-ColumnGroupingPlugin.prototype.removeGroupChild = function (parentId, childRef) {
-  var parentDef = this._groupDefs.getGroup(parentId);
-  if (!parentDef) {
-    return false;
-  }
-  var colId = "";
-  if (typeof childRef === "string") {
-    var groupDef = this._groupDefs.getGroup(childRef);
-    if (groupDef) {
-      if (this._groupDefs.unsetParent(childRef)) {
-        this._applyGrouping();
-        return true;
-      }
-    } else {
-      colId = childRef;
-    }
-  } else {
-    colId = this.getColumnId(childRef);
-  }
-  if (!colId) {
-    return false;
-  }
-  var rootId = parentId;
-  var group = this._visibleGroupMap[parentId];
-  if (group.onRow !== 0) {
-    rootId = this._groupDefs.getParentId(parentId, 0);
-  }
-  var leafIndices = this.getChildColumnIndices(rootId);
-  if (this._groupDefs.removeGroupChild(parentId, colId)) {
-    if (leafIndices && leafIndices.length > 1) {
-      if (this.moveColumnById(colId, leafIndices[leafIndices.length - 1] + 1)) {
-        return true;
-      }
-    }
-    this._applyGrouping();
-    return true;
-  }
-  return false;
+ColumnGroupingPlugin.prototype.removeGroupChild = function(parentId, childRef) {
+	let parentDef = this._groupDefs.getGroup(parentId);
+	if(!parentDef) {
+		return false;
+	}
+	let colId = "";
+	if(typeof childRef === "string") {
+		let groupDef = this._groupDefs.getGroup(childRef);
+		if(groupDef) {
+			if(this._groupDefs.unsetParent(childRef)) {
+				this._applyGrouping();
+				if(this._isChildSelected(parentId)) {
+					this._updateColumnBounds();
+				}
+				return true;
+			}
+		} else {
+			colId = childRef;
+		}
+	} else {
+		colId = this.getColumnId(childRef);
+	}
+	if(!colId) {
+		return false;
+	}
+
+	let rootId = parentId;
+	let group = this._visibleGroupMap[parentId];
+	if(group.onRow !== 0) {
+		rootId = this._groupDefs.getParentId(parentId, 0);
+	}
+
+	let leafIndices = this.getChildColumnIndices(rootId);
+	if(this._groupDefs.removeGroupChild(parentId, colId)) {
+		if(leafIndices && leafIndices.length > 1) {
+			if(this.moveColumnById(colId, leafIndices[leafIndices.length - 1] + 1)) {
+				return true;
+			}
+		}
+
+		this._applyGrouping();
+		if(this._isChildSelected(parentId)) {
+			this._updateColumnBounds();
+		}
+		return true;
+	}
+
+	return false;
 };
 /**
 * @public
 * @param {number|string} childRef Column index, column id, group id to be removed from its own parent
 * @return {boolean}
 */
-ColumnGroupingPlugin.prototype.unsetParent = function (childRef) {
-  var refId = typeof childRef === "string" ? childRef : this.getColumnId(childRef);
-  var parentId = this._groupDefs.getParentId(refId);
-  if (parentId) {
-    return this.removeGroupChild(parentId, refId);
-  }
-  return false;
+ColumnGroupingPlugin.prototype.unsetParent = function(childRef) {
+	let refId = (typeof childRef === "string") ? childRef : this.getColumnId(childRef);
+	let parentId = this._groupDefs.getParentId(refId);
+	if(parentId) {
+		return this.removeGroupChild(parentId, refId);
+	}
+	return false;
 };
 
 /** @public
@@ -1603,63 +1729,70 @@ ColumnGroupingPlugin.prototype.unsetParent = function (childRef) {
 * @param {number|string} destCol destination column index / id
 * @returns {number} destination index
 */
-ColumnGroupingPlugin.prototype.getValidDestinationIndex = function (id, destCol) {
-  var parentGroupDef = null;
-  if (this._groupDefs.getGroup(id)) {
-    parentGroupDef = this._getVisibleParentGroup(id);
-  } else if (this.getColumnIndex(id) > -1) {
-    parentGroupDef = this._getVisibleParentGroup(id);
-  }
-  var startIndex = -1;
-  var endIndex = -1;
-  var destColIndex = typeof destCol === "string" ? this.getColumnIndex(destCol) : destCol;
-  if (parentGroupDef) {
-    // If group/column is a child of a group, it should be move within the parent group
-    var childIndices = this.getChildColumnIndices(parentGroupDef["id"]);
-    if (childIndices && childIndices.length) {
-      startIndex = childIndices[0];
-      endIndex = childIndices[childIndices.length - 1];
-    }
-    if (destColIndex < startIndex && destColIndex != -1) {
-      destColIndex = this.getColumnId(startIndex);
-    } else if (destColIndex > endIndex || destColIndex == -1) {
-      destColIndex = this.getColumnId(endIndex + 1);
-    }
-
-    // handle group/column should not insert between group
-    var groupChildren = this.getGroupChildren(parentGroupDef["id"]);
-    for (var _i13 = 0; _i13 < groupChildren.length; _i13++) {
-      var childId = groupChildren[_i13];
-      var childGroupIndices = this.getChildColumnIndices(childId);
-      if (childGroupIndices && childGroupIndices.length) {
-        startIndex = childGroupIndices[0];
-        endIndex = childGroupIndices[childGroupIndices.length - 1];
-        if (destColIndex > startIndex && destColIndex <= endIndex) {
-          destColIndex = endIndex + 1;
-          break;
-        }
-      }
-    }
-  } else {
-    // 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._getVisibleParentGroup(destColId);
-    if (destParent) {
-      if (destParent.parentId) {
-        destParent = this._groupDefs.getRootGroup(destParent["id"]);
-      }
-      destMemberIndices = this.getChildColumnIndices(destParent["id"]);
-    }
-    if (destMemberIndices && destMemberIndices.length) {
-      startIndex = destMemberIndices[0];
-      endIndex = destMemberIndices[destMemberIndices.length - 1];
-      if (destColIndex > startIndex && destColIndex <= endIndex) {
-        destColIndex = endIndex + 1;
-      }
-    }
-  }
-  return destColIndex;
+ColumnGroupingPlugin.prototype.getValidDestinationIndex = function(id, destCol) {
+	let parentGroupDef = null;
+	if(this._groupDefs.getGroup(id)){
+		parentGroupDef = this._getVisibleParentGroup(id);
+	} else if(this.getColumnIndex(id) > -1) {
+		parentGroupDef = this._getVisibleParentGroup(id);
+	}
+
+	let startIndex = -1;
+	let endIndex = -1;
+	let destColIndex = typeof destCol === "string" ? this.getColumnIndex(destCol) : destCol;
+
+	if(parentGroupDef){
+
+		// If group/column is a child of a group, it should be move within the parent group
+		let childIndices = this.getChildColumnIndices(parentGroupDef["id"]);
+		if(childIndices && childIndices.length){
+			startIndex = childIndices[0];
+			endIndex = childIndices[childIndices.length - 1];
+		}
+		if(destColIndex < startIndex && destColIndex != -1){
+			destColIndex = this.getColumnId(startIndex);
+		} else
+		if(destColIndex > endIndex || destColIndex == -1) {
+			destColIndex = this.getColumnId(endIndex + 1);
+		}
+
+		// handle group/column should not insert between group
+		let groupChildren = this.getGroupChildren(parentGroupDef["id"]);
+		for(let i = 0; i < groupChildren.length; i++){
+			let childId = groupChildren[i];
+			let childGroupIndices = this.getChildColumnIndices(childId);
+			if(childGroupIndices && childGroupIndices.length){
+				startIndex = childGroupIndices[0];
+				endIndex = childGroupIndices[childGroupIndices.length - 1];
+				if(destColIndex > startIndex && destColIndex <= endIndex){
+					destColIndex = endIndex + 1;
+					break;
+				}
+			}
+		}
+
+	} else {
+		// handle group/column should not insert between group when group/column is not a child of any group
+		let destMemberIndices = [];
+		let destColId = this.getColumnId(destColIndex);
+		let destParent = this._getVisibleParentGroup(destColId);
+		if(destParent){
+			if(destParent.parentId){
+				destParent = this._groupDefs.getRootGroup(destParent["id"]);
+			}
+			destMemberIndices = this.getChildColumnIndices(destParent["id"]);
+		}
+
+		if(destMemberIndices && destMemberIndices.length){
+			startIndex = destMemberIndices[0];
+			endIndex = destMemberIndices[destMemberIndices.length - 1];
+			if(destColIndex > startIndex && destColIndex <= endIndex){
+				destColIndex = endIndex + 1;
+			}
+		}
+	}
+
+	return destColIndex;
 };
 
 /** @public
@@ -1669,26 +1802,28 @@ ColumnGroupingPlugin.prototype.getValidDestinationIndex = function (id, destCol)
 * @param {string} id group id or column id
 * @param {(number|string)=} destCol destination column index / id
 */
-ColumnGroupingPlugin.prototype.moveGroup = function (id, destCol) {
-  var groupDef;
-  var members = [];
-  groupDef = this._groupDefs.getGroup(id);
-  if (groupDef) {
-    var indices = this.getChildColumnIndices(groupDef["id"]);
-    for (var _i14 = 0; _i14 < indices.length; _i14++) {
-      var index = indices[_i14];
-      var colId = this.getColumnId(index);
-      members.push(colId);
-    }
-  } else if (this.getColumnIndex(id) > -1) {
-    members.push(id);
-  } else {
-    return;
-  }
-  var destColIndex = this.getValidDestinationIndex(id, destCol);
-  var destColId = this.getColumnId(destColIndex); // TODO: This may not necessary
-
-  this.reorderColumns(members, destColId);
+ColumnGroupingPlugin.prototype.moveGroup = function(id, destCol) {
+	let groupDef;
+	let members = [];
+
+	groupDef = this._groupDefs.getGroup(id);
+	if(groupDef){
+		let indices = this.getChildColumnIndices(groupDef["id"]);
+		for(let i = 0; i < indices.length; i++){
+			let index = indices[i];
+			let colId = this.getColumnId(index);
+			members.push(colId);
+		}
+	} else if(this.getColumnIndex(id) > -1) {
+		members.push(id);
+	} else {
+		return;
+	}
+
+	let destColIndex = this.getValidDestinationIndex(id, destCol);
+	let destColId = this.getColumnId(destColIndex); // TODO: This may not necessary
+
+	this.reorderColumns(members, destColId);
 };
 /** Move and reorder the specified columns to position before the destination
 * @public
@@ -1696,8 +1831,8 @@ ColumnGroupingPlugin.prototype.moveGroup = function (id, destCol) {
 * @param {(number|string)=} destCol Destination column id or index
 * @return {boolean}
 */
-ColumnGroupingPlugin.prototype.reorderColumns = function (colList, destCol) {
-  return this._reorderColumns(colList, destCol);
+ColumnGroupingPlugin.prototype.reorderColumns = function(colList, destCol) {
+	return this._reorderColumns(colList, destCol);
 };
 /** Move the specified column to position before the destination
 * @public
@@ -1705,113 +1840,123 @@ ColumnGroupingPlugin.prototype.reorderColumns = function (colList, destCol) {
 * @param {(number|string)=} destCol Destination column id or index
 * @return {boolean}
 */
-ColumnGroupingPlugin.prototype.moveColumnById = function (srcCol, destCol) {
-  return this._moveColumnById(srcCol, destCol);
+ColumnGroupingPlugin.prototype.moveColumnById = function(srcCol, destCol) {
+	return this._moveColumnById(srcCol, destCol);
 };
 /** @public
 * @param {string} groupId
 * @param {string=} side Available values are: left|right. If no value is supplied, all columns will be pinned to the left.
 */
-ColumnGroupingPlugin.prototype.pinGroup = function (groupId, side) {
-  if (!groupId) {
-    return;
-  }
-  var groupDef = this._visibleGroupMap[groupId];
-  if (!groupDef) {
-    return;
-  }
-  var host = this._hosts[0];
-  var leftPinnedIndex = host.getFrozenColumnCount() - 1;
-  var rightPinnedCount = host.getPinnedRightColumnCount();
-  var colCount = this.getColumnCount();
-  var colList = this.getChildColumnIndices(groupId);
-  var len = colList.length;
-  var dest;
-  if (side === "right") {
-    if (groupDef.rightPinned) {
-      return;
-    }
-    if (groupDef.leftPinned) {
-      this.unpinGroup(groupId);
-      leftPinnedIndex = host.getFrozenColumnCount() - 1;
-    }
-    groupDef.rightPinned = true;
-    dest = colCount - rightPinnedCount;
-    rightPinnedCount = rightPinnedCount + len;
-  } else {
-    if (groupDef.leftPinned) {
-      return;
-    }
-    if (groupDef.rightPinned) {
-      this.unpinGroup(groupId);
-      rightPinnedCount = host.getPinnedRightColumnCount();
-    }
-    groupDef.leftPinned = true;
-    dest = leftPinnedIndex === -1 ? 0 : leftPinnedIndex + 1;
-    leftPinnedIndex = leftPinnedIndex + len;
-  }
-  this.moveGroup(groupId, dest);
-  this._freezeColumn(leftPinnedIndex, rightPinnedCount);
+ColumnGroupingPlugin.prototype.pinGroup = function(groupId, side) {
+	if(!groupId) {
+		return;
+	}
+
+	let groupDef = this._visibleGroupMap[groupId];
+	if(!groupDef) {
+		return;
+	}
+
+	let host = this._hosts[0];
+	let leftPinnedIndex = host.getFrozenColumnCount() - 1;
+	let rightPinnedCount = host.getPinnedRightColumnCount();
+	let colCount = this.getColumnCount();
+	let colList = this.getChildColumnIndices(groupId);
+	let len = colList.length;
+
+	let dest;
+	if(side === "right") {
+		if(groupDef.rightPinned) {
+			return;
+		}
+		if(groupDef.leftPinned) {
+			this.unpinGroup(groupId);
+			leftPinnedIndex = host.getFrozenColumnCount() - 1;
+		}
+		groupDef.rightPinned = true;
+		dest = colCount - rightPinnedCount;
+		rightPinnedCount = rightPinnedCount + len;
+	} else {
+		if(groupDef.leftPinned) {
+			return;
+		}
+		if(groupDef.rightPinned) {
+			this.unpinGroup(groupId);
+			rightPinnedCount = host.getPinnedRightColumnCount();
+		}
+		groupDef.leftPinned = true;
+		dest = leftPinnedIndex === -1 ? 0 : leftPinnedIndex + 1;
+		leftPinnedIndex = leftPinnedIndex + len;
+	}
+
+	this.moveGroup(groupId, dest);
+	this._freezeColumn(leftPinnedIndex, rightPinnedCount);
 };
 /** @public
 * @param {string} groupId
 * @param {(number|string)=} dest The unpinned group will be placed before the destination position after the operation
 */
-ColumnGroupingPlugin.prototype.unpinGroup = function (groupId, dest) {
-  if (!groupId) {
-    return;
-  }
-  var groupDef = this._visibleGroupMap[groupId];
-  if (!groupDef) {
-    return;
-  }
-  if (!groupDef.leftPinned && !groupDef.rightPinned) {
-    return;
-  }
-  var host = this._hosts[0];
-  var leftPinnedCount = host.getFrozenColumnCount();
-  var rightPinnedCount = host.getPinnedRightColumnCount();
-  var colCount = this.getColumnCount();
-  var firstRightPinnedIndex = colCount - rightPinnedCount;
-  var colList = this.getChildColumnIndices(groupId);
-  var len = colList.length;
-  var destId = null;
-  if (dest != null) {
-    var destIdx = this.getColumnIndex(dest);
-    destId = this.getColumnId(destIdx);
-  }
-  if (groupDef.leftPinned) {
-    groupDef.leftPinned = false;
-    this.moveGroup(groupId, leftPinnedCount);
-    this._freezeColumn(leftPinnedCount - (1 + len));
-  } else if (groupDef.rightPinned) {
-    groupDef.rightPinned = false;
-    this.moveGroup(groupId, firstRightPinnedIndex);
-    this._freezeColumn(leftPinnedCount - 1, rightPinnedCount - len);
-  }
-  if (destId != null) {
-    this.moveGroup(groupId, destId);
-  }
+ColumnGroupingPlugin.prototype.unpinGroup = function(groupId, dest) {
+	if(!groupId) {
+		return;
+	}
+
+	let groupDef = this._visibleGroupMap[groupId];
+	if(!groupDef) {
+		return;
+	}
+
+	if(!groupDef.leftPinned && !groupDef.rightPinned) {
+		return;
+	}
+
+	let host = this._hosts[0];
+	let leftPinnedCount = host.getFrozenColumnCount();
+	let rightPinnedCount = host.getPinnedRightColumnCount();
+	let colCount = this.getColumnCount();
+	let firstRightPinnedIndex = colCount - rightPinnedCount;
+	let colList = this.getChildColumnIndices(groupId);
+	let len = colList.length;
+
+	let destId = null;
+	if(dest != null) {
+		let destIdx = this.getColumnIndex(dest);
+		destId = this.getColumnId(destIdx);
+	}
+
+	if(groupDef.leftPinned) {
+		groupDef.leftPinned = false;
+		this.moveGroup(groupId, leftPinnedCount);
+		this._freezeColumn(leftPinnedCount - (1 + len));
+	} else if(groupDef.rightPinned) {
+		groupDef.rightPinned = false;
+		this.moveGroup(groupId, firstRightPinnedIndex);
+		this._freezeColumn(leftPinnedCount - 1, rightPinnedCount - len);
+	}
+
+	if(destId != null) {
+		this.moveGroup(groupId, destId);
+	}
 };
 /** @public
 * @param {Array<number>} colIndices
 */
-ColumnGroupingPlugin.prototype.selectGroupHeaders = function (colIndices) {
-  var host = this._hosts[0];
-  var count = colIndices.length;
-  if (host && count) {
-    var colIds = [];
-    for (var _i15 = 0; _i15 < count; _i15++) {
-      colIds.push(host.getColumnId(colIndices[_i15]));
-    }
-    var colMap = host.createColumnMap(colIds);
-    if (colMap) {
-      this._selectedColMap = colMap;
-    }
-  } else {
-    this._selectedColMap = null;
-  }
-  this._requestGroupRendering();
+ColumnGroupingPlugin.prototype.selectGroupHeaders = function(colIndices) {
+	let host = this._hosts[0];
+	let count = colIndices.length;
+	if(host && count){
+		let colIds = [];
+		for(let i = 0; i < count; i++){
+			colIds.push(host.getColumnId(colIndices[i]));
+		}
+		let colMap = host.createColumnMap(colIds);
+		if(colMap){
+			this._selectedColMap = colMap;
+		}
+	} else {
+		this._selectedColMap = null;
+	}
+	this._requestGroupRendering();
 };
 
 /** Get column index from column object
@@ -1820,8 +1965,8 @@ ColumnGroupingPlugin.prototype.selectGroupHeaders = function (colIndices) {
 * @param {Object} column
 * @return {number}
 */
-ColumnGroupingPlugin.getObjectIndex = function (column) {
-  return column["index"];
+ColumnGroupingPlugin.getObjectIndex = function(column) {
+	return column["index"];
 };
 
 /** Get column id from column object
@@ -1830,8 +1975,11 @@ ColumnGroupingPlugin.getObjectIndex = function (column) {
 * @param {Object} column
 * @return {string}
 */
-ColumnGroupingPlugin.getObjectId = function (column) {
-  return column["id"];
+ColumnGroupingPlugin.getObjectId = function(column) {
+	return column["id"];
 };
+
+
+
 export default ColumnGroupingPlugin;
-export { ColumnGroupingPlugin, ColumnGroupingPlugin as ColumnGrouping, ColumnGroupingPlugin as ColumnGroupingExtension };
+export { ColumnGroupingPlugin, ColumnGroupingPlugin as ColumnGrouping, ColumnGroupingPlugin as ColumnGroupingExtension };