@refinitiv-ui/efx-grid 6.0.35 → 6.0.37

package/lib/tr-grid-column-stack/es6/ColumnStack.js

@@ -3,6 +3,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { Conflator } from "../../tr-grid-util/es6/Conflator.js";
 import { Icon } from "../../tr-grid-util/es6/Icon.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { GroupDefinitions } from "../../tr-grid-util/es6/GroupDefinitions.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
@@ -43,7 +44,7 @@ import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 * @description Available options describing grouped column displaying
 * @property {boolean=} spreading=false If specified true, this group will be running in collapsing mode
 * @property {boolean=} collapsed=true If disabled, this group will be expanded at the first time
-* @property {string=} activeColumn="" Column index or field for set as active column
+* @property {string=} activeColumn="" Column index, column id, or field for set as active column
 */
 
 /** @event ColumnStackPlugin#clicked
@@ -58,6 +59,52 @@ import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 * @property {Event} event Native event argument from click event
 */
 
+/** @private
+* @function
+* @param {Array} refA
+* @param {Array} refB
+* @return {number}
+*/
+var compareRef = function(refA, refB) {
+	var valA = refA[0];
+	var valB = refB[0];
+	var invalidA = (valA == null || valA < 0);
+	var invalidB = (valB == null || valB < 0);
+
+	if(invalidA) {
+		return invalidB ? 0 : 1;
+	} else if(invalidB) {
+		return -1;
+	}
+	if(valA < valB) {
+		return -1;
+	}
+	if(valB < valA) {
+		return 1;
+	}
+
+	return 0;
+};
+/** @private
+* @description Resolve active column from the given stack object, if activeColumn is invalid
+* @param {Object} stackOpt
+* @return {boolean} Return true if there is any change
+*/
+var _resolveActiveColumn = function(stackOpt) {
+	if(stackOpt) {
+		var children = stackOpt.children;
+		if(children && children.length) {
+			var activeColumn = stackOpt.activeColumn;
+			// TODO: If columns are stored as column id and activeColumn is a field, active index could not be found
+			if(!activeColumn || children.indexOf(activeColumn) < 0) {
+				stackOpt.activeColumn = stackOpt.spreading ? children[children.length - 1] : children[0];
+				return true;
+			}
+		}
+	}
+	return false;
+};
+
 /** @constructor
 * @extends {GridPlugin}
 */
@@ -66,22 +113,27 @@ var ColumnStackPlugin = function () {
 	this._onColumnRemoved = this._onColumnRemoved.bind(this);
 	this._onColumnMoved = this._onColumnMoved.bind(this);
 	this._onColumnAdded = this._onColumnAdded.bind(this);
+	this._onBeforeBatchOperation = this._onBeforeBatchOperation.bind(this);
+	this._onAfterBatchOperation = this._onAfterBatchOperation.bind(this);
+
 	this._onStackButtonClicked = this._onStackButtonClicked.bind(this);
 	this._updateUI = this._updateUI.bind(this);
 	this._requestStackingByFields = this._requestStackingByFields.bind(this);
+	this._toIdOrField = this._toIdOrField.bind(this);
+
 	this._hosts = [];
-	this._stacks = {};
+	this._groupDefs = new GroupDefinitions();
 
-	this._conflator = new Conflator(100, this._updateUI);
+	this._conflator = new Conflator(50, this._updateUI);
 	this._stackConflator = new Conflator(100, this._requestStackingByFields);
 };
 
 Ext.inherits(ColumnStackPlugin, GridPlugin);
 
-/** @type {!Object.<string, Object>}
+/** @type {!GroupDefinitions}
 * @private
 */
-ColumnStackPlugin.prototype._stacks;
+ColumnStackPlugin.prototype._groupDefs;
 /** @type {Object.<string, string>}
 * @private
 */
@@ -102,7 +154,11 @@ ColumnStackPlugin.prototype._autoStacking = false;
 /** @type {boolean}
 * @private
 */
-ColumnStackPlugin.prototype._stacking = false;
+ColumnStackPlugin.prototype._inReordering = false;
+/** @type {boolean}
+* @private
+*/
+ColumnStackPlugin.prototype._inResetting = false;
 
 
 /** @type {number}
@@ -114,7 +170,7 @@ ColumnStackPlugin._runningId = 0;
  */
 ColumnStackPlugin.prototype._generateStackId = function() {
 	var sid = "Stack" + ColumnStackPlugin._runningId++;
-	while(this._stacks[sid]) {
+	while(this._groupDefs.getGroup(sid)) {
 		sid = "Stack" + ColumnStackPlugin._runningId++;
 	}
 	return sid;
@@ -156,6 +212,8 @@ ColumnStackPlugin.prototype.initialize = function (host, options) {
 		host.listen("columnRemoved", this._onColumnRemoved);
 		host.listen("columnMoved", this._onColumnMoved);
 		host.listen("columnAdded", this._onColumnAdded);
+		host.listen("beforeBatchOperation", this._onBeforeBatchOperation);
+		host.listen("afterBatchOperation", this._onAfterBatchOperation);
 	}
 	host.listen("preSectionRender", this._onPreSectionRender);
 
@@ -173,12 +231,14 @@ ColumnStackPlugin.prototype.unload = function (host) {
 	host.unlisten("columnRemoved", this._onColumnRemoved);
 	host.unlisten("columnMoved", this._onColumnMoved);
 	host.unlisten("columnAdded", this._onColumnAdded);
+	host.unlisten("beforeBatchOperation", this._onBeforeBatchOperation);
+	host.unlisten("afterBatchOperation", this._onAfterBatchOperation);
 	host.unlisten("preSectionRender", this._onPreSectionRender);
 
 	if(this._hosts.length <= 0) {
 		this._conflator.reset();
 		this._stackConflator.reset();
-		this._stacks = {};
+		this._groupDefs.removeAllGroups();
 	}
 	this._dispose();
 };
@@ -233,9 +293,6 @@ ColumnStackPlugin.prototype.config = function (options) {
 
 	var i;
 	var colCount = columns.length;
-	for(i = 0; i < colCount; ++i) {
-		this._setUniqueRef(i, {}); // used for further column index getting
-	}
 
 	var columnStack = options.columnStack;
 	var stackId = "";
@@ -257,9 +314,10 @@ ColumnStackPlugin.prototype.config = function (options) {
 			}
 			this._idToFields[stackId] = columnStack.fields;
 			stacks[stackId] = {
-				colRefs: columnStack.fields,
+				id: stackId,
 				spreading: columnStack.spreading === true,
-				collapsed: columnStack.collapsed !== false
+				collapsed: columnStack.collapsed !== false,
+				children: columnStack.fields
 			};
 		} else if (columnStack.stacks && columnStack.stacks.length) {
 			hasStack = true;
@@ -289,6 +347,7 @@ ColumnStackPlugin.prototype.config = function (options) {
 			stackId = "";
 			var spreading = false;
 			var collapsed = true;
+			var activeColumn = "";
 			if(typeof stackOpt === "string") {
 				stackId = stackOpt;
 			} else if(typeof stackOpt === "object") {
@@ -296,34 +355,31 @@ ColumnStackPlugin.prototype.config = function (options) {
 				stackId = stackConfig["id"] || "";
 				spreading = stackConfig["spreading"] === true; // WARNING: Only the first column in the stack has an effect
 				collapsed = stackConfig["collapsed"] !== false;
+				activeColumn = stackConfig["activeColumn"] || "";
 			}
 			if(stackId) {
-				if(!stacks[stackId]) {
-					stacks[stackId] = {
-						colRefs: [],
+				stackOpt = stacks[stackId];
+				if(!stackOpt ) {
+					stackOpt = stacks[stackId] = {
+						id: stackId,
 						spreading: spreading, // Default is false (stacking mode)
 						collapsed: collapsed // Default is true (columns are hidden)
 					};
+					if(activeColumn) {
+						stackOpt.activeColumn = activeColumn;
+					}
 					hasStack = true;
 				}
-				stacks[stackId].colRefs.push(i);
+				if(!stackOpt.children) {
+					stackOpt.children = [];
+				}
+				stackOpt.children.push(i);
 			}
 		}
 	}
 
 	if(this._initializedGrid) {
-		if(hasStack){
-			this.removeAllStacks(false); // No UI update
-			for(stackId in stacks) {
-				var config = stacks[stackId];
-				if(!config.colRefs){
-					this._transformStackConfig(config);
-				}
-				this.stackColumns(config.colRefs, stackId, config);
-			}
-		} else {
-			this.removeAllStacks();
-		}
+		this._applyUserConfigs(hasStack ? stacks : null);
 	} else {
 		this._pendingStacks = this._pendingStacks || stacks;
 	}
@@ -340,15 +396,15 @@ ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 
 	var columnOptions = obj["columns"];
 
-	var stacks = this._stacks;
+	var stacks = this._groupDefs.getGroupMap();
 	var stackOptions = [];
 
 	for (var stackKey in stacks) {
 		var stackOption = stacks[stackKey];
-		var activeColIndex = this._getColumnIndex(stackOption.activeColumn);
+		var activeColIndex = this.getColumnIndex(stackOption.activeColumn);
 
 		if(columnOptions && columnOptions.length){
-			var memberIndices = this.getStackMemberIndices(stackOption.stackId);
+			var memberIndices = this.getStackMemberIndices(stackOption.id);
 			for(var i = 0; i < memberIndices.length; i++){
 				var colIndex = memberIndices[i];
 				var colOption = columnOptions[colIndex];
@@ -359,7 +415,7 @@ ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 		}
 
 		var stackConfigObj = {
-			id: stackOption.stackId
+			id: stackOption.id
 		};
 		var name = stackOption.name;
 		var collapsed = stackOption.collapsed;
@@ -376,18 +432,17 @@ ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 		}
 
 		if (this._autoStacking) {
-			var fields = this._idToFields[stackOption.stackId];
+			var fields = this._idToFields[stackOption.id];
 			var activeColumnField = this._getField(activeColIndex);
 
 			stackConfigObj.fields = fields;
 			stackConfigObj.activeColumn = activeColumnField;
 
 		} else {
-			var children = this.getStackMemberIds(stackOption.stackId);
-			var activeColumn = this.getColumnId(activeColIndex);
-
-			stackConfigObj.children = children;
-			stackConfigObj.activeColumn = activeColumn;
+			stackConfigObj.children = this.getStackMemberIds(stackOption.id);
+			if(stackOption.activeColumn) {
+				stackConfigObj.activeColumn = stackOption.activeColumn; // WARNING: Column Id or field
+			}
 		}
 		stackOptions.push(stackConfigObj);
 	}
@@ -404,144 +459,87 @@ ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 */
 ColumnStackPlugin.prototype._afterInit = function () {
 	if(this._pendingStacks) {
-		this.removeAllStacks(false);
-		for(var sid in this._pendingStacks) {
-			var stackOpt = this._pendingStacks[sid];
-			if(!stackOpt.colRefs){
-				this._transformStackConfig(stackOpt);
-			}
-			this.stackColumns(stackOpt.colRefs, sid, stackOpt);
-		}
+		this._applyUserConfigs(this._pendingStacks);
 		this._pendingStacks = null;
 	}
 	// In case of lazy loading
 	// DO something
 };
-/** WARNING: This method is slow
-* @private
-*	@param {Object} stackRef
-* @param {number=} colCount
-* @return {number}
-*/
-ColumnStackPlugin.prototype._getColumnIndex = function(stackRef, colCount) {
-	if(stackRef) {
-		if(colCount == null) {
-			colCount = this.getColumnCount();
-		}
-		for(var i = 0; i < colCount; i++) {
-			if(stackRef === this._getUniqueRef(i)) {
-				return i;
-			}
-		}
-	}
-	return -1;
-};
-/** WARNING: This method is really slow
-* @private
-* @param {!Array.<Object>} stackRefs
-* @return {!Array.<number>}
-*/
-ColumnStackPlugin.prototype._getColumnIndices = function(stackRefs) {
-	var refCount = stackRefs ? stackRefs.length : 0;
-	var ary = new Array(refCount);
-	if(refCount) {
-		var colCount = this.getColumnCount();
-		for(var i = 0; i < refCount; i++) {
-			ary[i] = this._getColumnIndex(stackRefs[i], colCount);
-		}
-	}
-	return ary;
-};
-/** @private
-* @param {number} colIndex
-* @param {!Object} refObj
-*/
-ColumnStackPlugin.prototype._setUniqueRef = function(colIndex, refObj) {
-	this._newColumnData(colIndex)["stack"] = refObj;
-};
-/** @private
-* @param {number} colIndex
-* @return {Object}
-*/
-ColumnStackPlugin.prototype._getUniqueRef = function(colIndex) {
-	return this._getColumnOption(colIndex, "stack") || null;
-};
-/** @private
-* @return {!Array.<Object>}
-*/
-ColumnStackPlugin.prototype._getUniqueRefs = function() {
-	var colCount = this.getColumnCount();
-	var ary = new Array(colCount);
-	for(var c = 0; c < colCount; ++c) {
-		ary[c] = this._getUniqueRef(c);
-	}
-	return ary;
-};
 
 /** @private
-* @param {number} colIndex
-* @param {Object} stackOptions
-*/
-ColumnStackPlugin.prototype._setColumnStackOptions = function(colIndex, stackOptions) {
-	var ref = this._getUniqueRef(colIndex);
-	if(ref) {
-		ref["stackOpt"] = stackOptions;
+* @param {*} colRef
+* @return {string} column id or field
+*/
+ColumnStackPlugin.prototype._toIdOrField = function(colRef) {
+	if(typeof colRef !== "string") {
+		if(typeof colRef === "number") {
+			return this.getColumnId(colRef);
+			// return this._getField(colRef);
+		}
+		return "";
 	}
+	return colRef || "";
 };
 /** @private
 * @param {Object} stackConfig
-* @return {Object} stack config object
 */
 ColumnStackPlugin.prototype._transformStackConfig = function(stackConfig) {
-	stackConfig.colRefs = [];
 	var children = stackConfig.children;
-	var fields = stackConfig.fields;
-	var field;
-	if(children){
-		var childLen = stackConfig.children.length;
-		for(var j = 0; j < childLen; j++){
-			var colIndex = this.getColumnIndex(children[j]);
-			if(colIndex !== -1){
-				field = this._getField(colIndex);
-				if(field) {
-					stackConfig.colRefs.push(field);
-				}
+	var childCount = children ? children.length : 0;
+	if(childCount) { // Fields or ids
+		for(var i = 0; i < childCount; i++){
+			var childRef = this._toIdOrField(children[i]);
+			if(childRef) {
+				children[i] = childRef;
 			}
 		}
-	} else if(fields) {
-		stackConfig.colRefs = fields;
-	}
-	var activeColumn = stackConfig.activeColumn;
-	if(activeColumn != null && !this._autoStacking){
-		var activeColIndex = this.getColumnIndex(activeColumn);
-		if(activeColIndex !== -1){
-			field = this._getField(activeColIndex);
-			if(field){
-				stackConfig.activeColumn = field;
-			}
+	} else if(stackConfig.fields) {
+		stackConfig.children = stackConfig.fields;
+	} else if(!stackConfig.children) {
+		stackConfig.children = [];
+	}
+	if(!this._autoStacking) { // TODO: This may not be necessary
+		var activeColumn = this._toIdOrField(stackConfig.activeColumn);
+		if(activeColumn) {
+			stackConfig.activeColumn = activeColumn;
 		}
 	}
-	return stackConfig;
 };
 /** @private
-* @param {number} colIndex
-* @return {*}
-*/
-ColumnStackPlugin.prototype._getColumnStackOptions = function(colIndex) {
-	var refObj = this._getUniqueRef(colIndex);
-	if(refObj){
-		return refObj["stackOpt"] || null;
+* @param {Object=} stacks
+*/
+ColumnStackPlugin.prototype._applyUserConfigs = function(stacks) {
+	if(stacks) {
+		this.removeAllStacks(false); // No UI update
+		for(var stackId in stacks) {
+			var stack = stacks[stackId];
+			this._transformStackConfig(stack);
+			this.stackColumns(stack.children, stackId, stack);
+		}
+	} else {
+		this.removeAllStacks(); // with UI update
 	}
-	return null;
 };
+
 /** @private
 * @param {number} colIndex
+* @return {Object}
 */
-ColumnStackPlugin.prototype._removeColumnStackOptions = function(colIndex) {
-	var refObj = this._getUniqueRef(colIndex);
-	if(refObj) {
-		refObj["stackOpt"] = null;
+ColumnStackPlugin.prototype._getColumnStackOptions = function(colIndex) {
+	if(colIndex >= 0) {
+		var colId = this.getColumnId(colIndex);
+		var stack = this._groupDefs.getParentGroup(colId);
+		if(stack) {
+			return stack;
+		}
+
+		var field = this._getField(colIndex);
+		stack = this._groupDefs.getParentGroup(field);
+		if(stack) {
+			return stack;
+		}
 	}
+	return null;
 };
 /** @private
 * @return {!Array.<number>} Sorted column indices
@@ -550,6 +548,34 @@ ColumnStackPlugin.prototype._getSelectedColumns = function() {
 	var csp = this._getPlugin("ColumnSelectionPlugin");
 	return (csp && csp.isEnabled()) ? csp.getSelectedColumns() : [];
 };
+/** Hide the specified column to prevent it from flashing when it is added as a member of the stack
+* @private
+* @param {Object} stack
+* @param {(number|Array.<number>)=} colRefs
+* @param {number=} activeRef
+*/
+ColumnStackPlugin.prototype._hideStackedColumns = function(stack, colRefs, activeRef) {
+	if(stack.spreading && !stack.collapsed) {
+		return; // In spreading mode, columns in an expanded stack don't need to be hiden
+	}
+	// WARNING: activeIndex may not be valid
+	var activeIndex = (typeof activeRef === "number") ? activeRef : this.getColumnIndex(stack.activeColumn);
+	var colIndices = null;
+	if(typeof colRefs === "number") {
+		colIndices = [colRefs];
+	} else if(colIndices == null) {
+		colIndices = this.getColumnIndices(stack.children);
+	} else {
+		colIndices = colRefs;
+	}
+	var validCount = colIndices.length;
+	for(var i = 0; i < validCount; ++i) {
+		var colIndex = colIndices[i];
+		if(colIndex !== activeIndex) {
+			this._setColumnVisibility(colIndex, false); // Hide a column
+		}
+	}
+};
 /** @private
 * @param {number} colIndex
 * @param {boolean} shown
@@ -562,12 +588,12 @@ ColumnStackPlugin.prototype._setColumnVisibility = function(colIndex, shown) {
 	}
 };
 /** @private
-* @param {Array.<Object>} stackRefs
+* @param {Array} colRefs Array of column index, id, or field
 */
-ColumnStackPlugin.prototype._moveStackedColumns = function (stackRefs) {
-	var ary = this._getColumnIndices(stackRefs);
-	if(ary.length > 1) {
-		this.reorderColumns(ary, ary[0]);
+ColumnStackPlugin.prototype._moveStackedColumns = function (colRefs) {
+	var colIndices = this.getColumnIndices(colRefs);
+	if(colIndices.length > 1) {
+		this.reorderColumns(colIndices, colIndices[0]);
 	}
 };
 /** @private
@@ -587,12 +613,12 @@ ColumnStackPlugin.prototype._isIconAvailable = function() {
 };
 /** @private
 * @param {number} colIndex
-* @param {Object} colData
+* @param {Object} stackOpt
 */
-ColumnStackPlugin.prototype._updateIcon = function(colIndex, colData) {
-	var stackRefs = (colData) ? colData.stackRefs : null;
-	var spreading = (colData) ? colData.spreading : false;
+ColumnStackPlugin.prototype._updateIcon = function(colIndex, stackOpt) {
+	var spreading = (stackOpt) ? stackOpt.spreading : false;
 	var gridCount = this._hosts.length;
+
 	for(var g = 0; g < gridCount; ++g) {
 		var host = this._hosts[g];
 		var tSect = host.getSection("title");
@@ -601,18 +627,19 @@ ColumnStackPlugin.prototype._updateIcon = function(colIndex, colData) {
 		if(!cell) { continue; }
 
 		var stackIcon = cell._stackIcon;
-		if(stackRefs) {
-			if(!stackIcon && this.isActiveStackedColumn(colIndex)) {
+		if(stackOpt) {
+			var activeStackedColumn = this.isActiveStackedColumn(colIndex);
+			if(!stackIcon && activeStackedColumn) {
 				if(spreading) {
 					cell.addClass("grouping");
 					if(this._expandIconName) {
-						if(colData.collapsed) {
+						if(stackOpt.collapsed) {
 							stackIcon = Icon.create(this._expandIconName);
 						} else {
 							stackIcon = Icon.create(this._collapseIconName);
 						}
 					} else {
-						if(colData.collapsed) {
+						if(stackOpt.collapsed) {
 							stackIcon = Dom.text(">");
 						} else {
 							stackIcon = Dom.text("<");
@@ -637,7 +664,7 @@ ColumnStackPlugin.prototype._updateIcon = function(colIndex, colData) {
 				cell._stackIcon = stackIcon;
 
 				this._dispatch("iconCreated", {"icon": stackIcon, "colIndex": colIndex, "grid": host, "cell": cell});
-			} else if(stackIcon && this.isInactiveStackedColumn(colIndex)) {
+			} else if(stackIcon && !activeStackedColumn) {
 				cell.removeFloatingIcon(cell._stackIcon);
 				cell._stackIcon = null;
 			}
@@ -663,21 +690,22 @@ ColumnStackPlugin.prototype._updateUI = function() {
 	this._updating = true;
 	var colCount = this._getColumnCount();
 	var gridCount = this._hosts.length;
-	var colData, spreading;
+	var stackOpt, spreading;
 	for(var c = 0; c < colCount; ++c) {
-		colData = this._getColumnStackOptions(c);
-		spreading = (colData) ? colData.spreading : false;
+		stackOpt = this._getColumnStackOptions(c);
+		spreading = (stackOpt) ? stackOpt.spreading : false;
+		spreading = spreading === true;
 		for(var g = 0; g < gridCount; ++g) {
 			var host = this._hosts[g];
-			host.enableColumnClass(c, "grouped", spreading === true);
+			host.enableColumnClass(c, "grouped", spreading);
 		}
 
-		this._updateIcon(c, colData);
-		if(colData) {
-			if(colData.spreading) {
-				this._collapseMember(c, colData.collapsed);
+		this._updateIcon(c, stackOpt);
+		if(stackOpt) {
+			if(stackOpt.spreading) {
+				this._collapseMember(c, stackOpt.collapsed);
 			} else {
-				this._setColumnVisibility(c, this.isActiveStackedColumn(c)); // a little slow
+				this._setColumnVisibility(c, this._isActiveStackedColumn(c, stackOpt)); // a little slow
 			}
 		}
 	}
@@ -688,8 +716,8 @@ ColumnStackPlugin.prototype._updateUI = function() {
 * @param {boolean} collapsed
 */
 ColumnStackPlugin.prototype._collapseMember = function(colIndex, collapsed) {
-	var colData = this._getColumnStackOptions(colIndex);
-	if(!colData) {
+	var stackOpt = this._getColumnStackOptions(colIndex);
+	if(!stackOpt) {
 		return;
 	}
 
@@ -703,9 +731,9 @@ ColumnStackPlugin.prototype._collapseMember = function(colIndex, collapsed) {
 			var rowCount = tSect.getRowCount();
 			var cell = tSect.getCell(colIndex, rowCount - 1, true);
 			if(collapsed) {
-				if(colData.collapsed !== collapsed || !colData._origWidth) { // Prevent from getting width while column is collapsed
-					colData._origWidth = this._getColumnWidth(host, colIndex);
-					colData._scalable = host.getColumnScalability(colIndex);
+				if(stackOpt.collapsed !== collapsed || !stackOpt._origWidth) { // Prevent from getting width while column is collapsed
+					stackOpt._origWidth = this._getColumnWidth(host, colIndex);
+					stackOpt._scalable = host.getColumnScalability(colIndex);
 				}
 
 				host.setColumnWidth(colIndex, tSect.getRowHeight(0), false);
@@ -718,8 +746,8 @@ ColumnStackPlugin.prototype._collapseMember = function(colIndex, collapsed) {
 					}
 				}
 			} else {
-				if(colData._origWidth != null) {
-					host.setColumnWidth(colIndex, colData._origWidth, colData._scalable);
+				if(stackOpt._origWidth != null) {
+					host.setColumnWidth(colIndex, stackOpt._origWidth, stackOpt._scalable);
 				}
 
 				if(cell._stackIcon) {
@@ -734,8 +762,6 @@ ColumnStackPlugin.prototype._collapseMember = function(colIndex, collapsed) {
 			host.setColumnVisibility(colIndex, !collapsed, 2);
 		}
 	}
-
-	colData.collapsed = collapsed;
 };
 /** Get column width that is currently defined in the layout inside grid <br>
 * (not included the effect by this extension). <br>
@@ -758,12 +784,11 @@ ColumnStackPlugin.prototype._getColumnWidth = function(host, colIndex) {
 * @return {Array.<number>} Null if there is no column data
 */
 ColumnStackPlugin.prototype.getMemberIndices = function(colIndex) {
-	var colData = this._getColumnStackOptions(colIndex);
-	if(!colData) {
-		return null;
+	var stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt) {
+		return this.getColumnIndices(stackOpt.children);
 	}
-
-	return this._getColumnIndices(colData.stackRefs);
+	return null;
 };
 /** @public
 * @param {number} colIndex
@@ -771,31 +796,34 @@ ColumnStackPlugin.prototype.getMemberIndices = function(colIndex) {
 * @return {Array.<number>} Null if it is non-grouped column
 */
 ColumnStackPlugin.prototype.collapseGroup = function(colIndex, collapsed) {
-	var groupMembers = this.getMemberIndices(colIndex);
-	if(!groupMembers) {
+	var stackOpt = this._getColumnStackOptions(colIndex);
+	if(!stackOpt) {
+		return null;
+	}
+	if(!stackOpt.spreading) {
 		return null;
 	}
 
 	collapsed = collapsed !== false;
-	for(var j = groupMembers.length; --j >= 0;) {
-		this._collapseMember(groupMembers[j], collapsed);
+	if(stackOpt.collapsed !== collapsed) {
+		var groupMembers = this.getColumnIndices(stackOpt.children);
+		if(groupMembers) {
+			for(var j = groupMembers.length; --j >= 0;) {
+				this._collapseMember(groupMembers[j], collapsed);
+			}
+			stackOpt.collapsed = collapsed;
+
+			return groupMembers;
+		}
 	}
-	return groupMembers;
+	return null;
 };
 /** @public
 * @param {number} colIndex
 * @return {Array.<number>} Null if it is non-grouped column
 */
 ColumnStackPlugin.prototype.expandGroup = function(colIndex) {
-	var groupMembers = this.getMemberIndices(colIndex);
-	if(!groupMembers) {
-		return null;
-	}
-
-	for(var j = groupMembers.length; --j >= 0;) {
-		this._collapseMember(groupMembers[j], false);
-	}
-	return groupMembers;
+	return this.collapseGroup(colIndex, false);
 };
 /** Intended for determining if the selected columns can be stacked from the context menu
 * @public
@@ -806,11 +834,9 @@ ColumnStackPlugin.prototype.isColumnStackable = function(colIndices) {
 	if(!colIndices) {
 		return false;
 	}
-
 	var len = colIndices.length;
 	for(var i = 0; i < len; ++i) {
-		var colIndex = colIndices[i];
-		if(this.isColumnInCollection(colIndex)) {
+		if(this._getColumnStackOptions(colIndices[i])) {
 			return false;
 		}
 	}
@@ -827,36 +853,46 @@ ColumnStackPlugin.prototype.isColumnStacked = function(colIndices) {
 	}
 	var len = colIndices.length;
 	for(var i = 0; i < len; ++i) {
-		var colData = this._getColumnStackOptions(colIndices[i]);
-		if(colData && colData.stackRefs) {
+		if(this._getColumnStackOptions(colIndices[i])) {
 			return true;
 		}
 	}
 	return false;
 };
-/** This is used for removing some column state while the column is inactive
+/** This method is deprecated in favor of isColumnActive method. This method checks if the given column is inactive or doesn't have the icon.
 * @public
 * @param {number} colIndex
 * @return {boolean} Return true if the columns is grouped and inactive
+* @see {@link ColumnStackPlugin#isColumnActive}
 */
 ColumnStackPlugin.prototype.isInactiveStackedColumn = function(colIndex) {
 	var stackOpt = this._getColumnStackOptions(colIndex);
-	if(stackOpt && stackOpt.stackRefs) {
-		return colIndex !== this._getColumnIndex(stackOpt.activeColumn);
+	if(stackOpt) {
+		return !this._isActiveStackedColumn(colIndex, stackOpt);
 	}
 	return false;
 };
-/** Check if the given column is active (visible) in the stack
+/** This method is deprecated in favor of isColumnActive method. This method checks if the given column is active and has the icon.
 * @public
 * @param {number} colIndex
 * @return {boolean}
+* @see {@link ColumnStackPlugin#isColumnActive}
 */
 ColumnStackPlugin.prototype.isActiveStackedColumn = function(colIndex) {
-	var stackOpt = this._getColumnStackOptions(colIndex);
-	if(stackOpt && stackOpt.stackRefs) {
-		return colIndex === this._getColumnIndex(stackOpt.activeColumn);
+	return this._isActiveStackedColumn(colIndex, this._getColumnStackOptions(colIndex));
+};
+/** @private
+* @param {number} colIndex
+* @param {Object} stackOpt
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype._isActiveStackedColumn = function(colIndex, stackOpt) {
+	if(stackOpt) {
+		_resolveActiveColumn(stackOpt);
+
+		return colIndex === this.getColumnIndex(stackOpt.activeColumn);
 	}
-	return true;
+	return false;
 };
 
 /** @public
@@ -886,11 +922,7 @@ ColumnStackPlugin.prototype.isCollapsingMode = function(colIndex) {
 * @return {boolean}
 */
 ColumnStackPlugin.prototype.isColumnInCollection = function(colIndex) {
-	var stackOpt = this._getColumnStackOptions(colIndex);
-	if(stackOpt) {
-		return true;
-	}
-	return false;
+	return this._getColumnStackOptions(colIndex) ? true : false;
 };
 /** Alias of isColumnInCollection
 * @public
@@ -925,7 +957,7 @@ ColumnStackPlugin.prototype.isColumnActive = function(colIndex) {
 				return false;
 			}
 		} else {
-			return colIndex === this._getColumnIndex(stackOpt.activeColumn);
+			return colIndex === this.getColumnIndex(stackOpt.activeColumn);
 		}
 	}
 	return false;
@@ -936,8 +968,8 @@ ColumnStackPlugin.prototype.isColumnActive = function(colIndex) {
 * @return {string}
 */
 ColumnStackPlugin.prototype.getStackId = function(colIndex) {
-	var colData = this._getColumnStackOptions(colIndex);
-	return colData ? colData.stackId : "";
+	var stackOpt = this._getColumnStackOptions(colIndex);
+	return stackOpt ? stackOpt.id : "";
 };
 /** @public
 * @param {Array.<number|string>=} colRefs Names of fields or column indices. If not specified, selected columns will be used.
@@ -946,109 +978,98 @@ ColumnStackPlugin.prototype.getStackId = function(colIndex) {
 * @return {boolean} Return true if all of the given columns is stacked together
 */
 ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
-	var fields = [];
-	var i, colIndex, sid;
+	var i, sid;
 	options = options || {};
 
 	if(stackId) {
-		if(this._stacks[stackId]) {
+		if(this._groupDefs.getGroup(stackId)) {
 			return false; // Cannot store the same stack Id
 		}
 		sid = stackId;
 	} else {
-		sid = this._generateStackId();
-	}
-
-	// If grid is not initialize, add setting to pending stacks
-	if(!this._initializedGrid) {
-		var pendingStacks = this._pendingStacks || {};
-		pendingStacks[sid] = {
-			colRefs: colRefs,
-			spreading: false,
-			collapsed: false,
-			activeColumn: options.activeColumn || colRefs[0]
-		};
-		this._pendingStacks = pendingStacks;
-		return false;
+		sid = stackId = this._generateStackId();
 	}
 
 	if(!colRefs) {
 		colRefs = this._getSelectedColumns();
 	}
 
-	if(colRefs.length) {
-		if(typeof colRefs[0] === "string") {
-			fields = colRefs.slice();
-			colRefs = this.getColumnIndices(colRefs);
-		} else {
-			colRefs.sort(function(a, b) { return a - b; }); // Only sort in the case of column index stack
-			for(i = 0; i < colRefs.length; i++){
-				var field = this._getField(colRefs[i]);
-				fields.push(field);
-			}
+	var refCount = colRefs ? colRefs.length : 0;
+	if(refCount < 2) {
+		return false; // Only two or more columns can be stacked
+	}
+
+	// Clone user data
+	var isSpreading = options.spreading === true;
+	var isCollapsed = options.collapsed !== false;
+	var activeColumn = options.activeColumn || "";  // field or id
+	var stack = {};
+	stack.id = sid;
+	stack.name = options.name || "";
+	stack.spreading = isSpreading;
+	stack.collapsed = isCollapsed;
+	stack.activeColumn = activeColumn; // field or id
+
+	// If grid is not initialize, add setting to pending stacks
+	if(!this._initializedGrid) {
+		var pendingStacks = this._pendingStacks;
+		if(!pendingStacks) {
+			pendingStacks = this._pendingStacks = {};
 		}
+		stack.children = colRefs;
+		pendingStacks[sid] = stack;
+		return false;
 	}
 
-	// Save stack fields for
+	var children = colRefs.map(this._toIdOrField);
+	var colIndices = this.getColumnIndices(colRefs); // WARNING: Invalid columns are filtered out
+	var validCount = colIndices.length;
+
+	// Save stack fields for autoStacking
 	if(this._autoStacking){
 		if(!this._idToFields) {
 			this._idToFields = {};
 		}
-		this._idToFields[sid] = fields;
+		this._idToFields[sid] = children;
 	}
 
-	var len = colRefs.length;
-	if(len <= 1) {
-		return false; // Only two or more columns can be stacked
-	}
-	if(!this.isColumnStackable(colRefs)) {
+	// Prevent columns already in a stack from moving out to another stack
+	if(!this.isColumnStackable(colIndices)) {
 		return false;
 	}
 
-	var activeIndex = colRefs[0];
-	if(options.activeColumn != null) {
-		var idx = this.getColumnIndex(options.activeColumn);
-		if(idx > -1 && colRefs.indexOf(idx) > -1) {
-			activeIndex = idx;
+	// TODO: If columns are stored as column id and activeColumn is a field, active index could not be found
+	stack.children = children;
+	var activeIndex = -1;
+	if(activeColumn && typeof activeColumn === "string") {
+		activeIndex = this.getColumnIndex(activeColumn);
+		if(children.indexOf(activeColumn) < 0) { // children and activeColumn may have different type
+			var field = this._getField(activeIndex);
+			if(field === activeColumn) {
+				stack.activeColumn = activeColumn = this.getColumnId(activeIndex);
+			}
 		}
+	} else if(typeof activeColumn === "number"){
+		activeIndex = activeColumn;
 	}
 
-	// Collecting data
-	var stack = {};
-	stack.stackId = sid;
-	stack.name = options.name || "";
-	stack.spreading = options.spreading === true;
-	if(stack.spreading) {
-		activeIndex = colRefs[len - 1];
+	if(_resolveActiveColumn(stack)) {
+		activeColumn = stack.activeColumn;
+		activeIndex = this.getColumnIndex(activeColumn);
 	}
-	stack.collapsed = options.collapsed !== false;
-	stack.stackRefs = new Array(len);
-	for(i = 0; i < len; ++i) {
-		colIndex = colRefs[i];
-		this._setColumnStackOptions(colIndex, stack);
-		stack.stackRefs[i] = this._getUniqueRef(colIndex);
 
-		if(colIndex == activeIndex){
-			stack.activeColumn = stack.stackRefs[i];
-		}
-
-		// Prevent from flashing in stack mode
-		if(colIndex !== activeIndex && stack.collapsed !== false) {
-			this._setColumnVisibility(colIndex, false);
-		}
-	}
+	this._hideStackedColumns(stack, colIndices, activeIndex);
 
 	// Make sure that all columns stay packed together
-	this._moveStackedColumns(stack.stackRefs);
+	this.reorderColumns(colIndices, colIndices[0]);
 
-	if(stack.spreading) {
-		stack.activeColumn = stack.stackRefs[stack.stackRefs.length - 1]; // Right most column is the active column
-	} else {
+	// Update column selection
+	if(!isSpreading) {
 		var csp = this._getPlugin("ColumnSelectionPlugin");
 		if(csp && csp.isEnabled()){
 			var stackSelection = false;
-			for(i = 0; i < len; ++i){
-				colIndex = colRefs[i];
+			for(i = 0; i < validCount; ++i){
+				colIndex = colIndices[i];
 				if(colIndex === activeIndex){
 					continue;
 				}
@@ -1059,12 +1080,14 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 			}
 			if(stackSelection) {
 				csp.selectSingleColumn(activeIndex);
-				csp.dispatchSelectionChanged();
+				if(csp.dispatchSelectionChanged) {
+					csp.dispatchSelectionChanged();
+				}
 			}
 		}
 	}
 
-	this._stacks[sid] = stack;
+	this._groupDefs.setGroup(sid, stack);
 
 	var cfp = this._getPlugin("ColumnFilterPlugin");
 	if(cfp) {
@@ -1084,7 +1107,6 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 * @return {boolean} If the stack has been updated, return true.
 */
 ColumnStackPlugin.prototype.setStack = function(colRefs, activeColRef) {
-
 	var sid = "_uniqueStack"; // WARNING : This hardcode for assign uniqe stacking id
 
 	this.removeAllStacks();
@@ -1116,39 +1138,19 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 		colIndex = colIndices[i];
 		if(colIndex < colCount) {
 			var stackOpt = this._getColumnStackOptions(colIndex);
-			if(!stackOpt) {
-				continue; // Invalid index
-			}
-			if(stackOpt.collapsed === true && stackOpt.spreading === true) {
-				this.expandGroup(colIndex);
+			if(stackOpt) {
+				stacks[stackOpt.id] = 1; // Exclude duplicate stacks
 			}
-			stacks[stackOpt.stackId] = 1; // Exclude duplicate stacks
 		}
 	}
 
 	var dirty = false;
-
 	for(var sid in stacks) {
-		var stack = this._stacks[sid];
-		if(!stack) {
-			continue; // Invalid stackId
-		}
 		dirty = true;
-
-		var stackRefs = stack.stackRefs;
-		len = stackRefs.length;
-
-		for(i = 0; i < len; ++i) {
-			var stackRef = stackRefs[i];
-			colIndex = this._getColumnIndex(stackRef);
-			this._removeColumnStackOptions(colIndex);
-			this._setColumnVisibility(colIndex, true);
-		}
-
+		this._removeStack(sid);
 		if(this._idToFields) {
 			delete this._idToFields[sid]; // TODO: Clear the map whenever it no longer has a member
 		}
-		delete this._stacks[sid]; // Remove all reference to the stack
 	}
 	if(dirty) {
 		var cfp = this._getPlugin("ColumnFilterPlugin");
@@ -1165,23 +1167,22 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 * @return {boolean} Returns true if there is any change
 */
 ColumnStackPlugin.prototype._removeStack = function(stackId) {
-	var stack = this._stacks[stackId];
+	var stack = this._groupDefs.getGroup(stackId);
 	if(!stack) {
 		return false;
 	}
 
-	var colIndices = this._getColumnIndices(stack.stackRefs);
+	var colIndices = this.getColumnIndices(stack.children);
 	var len = colIndices.length;
 	for(var i = 0; i < len; ++i) {
-		var colIndex = colIndices[i];
-		if(colIndex >= 0) {
-			if(stack.collapsed && stack.spreading) {
-				this.collapseGroup(colIndex, false);
-			}
-			this._removeColumnStackOptions(colIndex);
-			this._setColumnVisibility(colIndex, true);
+		var colIndex = colIndices[i]; // colIndex is guaranteed to be positive (verified)
+		if(stack.spreading && stack.collapsed) {
+			this._collapseMember(colIndex, false);
 		}
+
+		this._setColumnVisibility(colIndex, true);
 	}
+	this._groupDefs.removeGroup(stackId);
 	return true;
 };
 /** @public
@@ -1205,19 +1206,20 @@ ColumnStackPlugin.prototype.removeStack = function(stackId) {
 * @return {boolean} true if at least one stacking removed
 */
 ColumnStackPlugin.prototype.removeAllStacks = function(enableUpdateUI) {
-	var dirty = false;
-	for(var stackId in this._stacks) {
-		dirty = true;
-		this._removeStack(stackId);
+	var groupIds = this._groupDefs.getGroupIds();
+	var groupCount = groupIds.length;
+	for(var i = 0; i < groupCount; ++i) {
+		this._removeStack(groupIds[i]);
 	}
-	if(dirty) {
+	if(groupCount) {
 		this._idToFields = null;
-		this._stacks = {};
+		this._groupDefs.removeAllGroups(); // TODO: May not necessary
+
 		if(enableUpdateUI !== false) {
 			this._updateUI(); // asyncronous
 		}
 	}
-	return dirty;
+	return groupCount ? true : false;
 };
 /** @public
 * @param {number|Event} colRef
@@ -1236,26 +1238,26 @@ ColumnStackPlugin.prototype.swapColumn = function(colRef, swappingIndex) {
 		}
 	}
 
-	var colData = this._getColumnStackOptions(colIndex);
-	if(!colData) {
+	var stackOpt = this._getColumnStackOptions(colIndex);
+	if(!stackOpt) {
 		return false; // Invalid column index
 	}
-	var stackRefs = colData.stackRefs;
-	if(!stackRefs) {
+	var children = stackOpt.children;
+	if(!children) {
 		return false; // Invalid column type
 	}
-	var newActiveColumn = stackRefs[swappingIndex];
+	var newActiveColumn = children[swappingIndex];
 	if(!newActiveColumn) {
 		return false; // Invalid selected index
 	}
 
-	if(newActiveColumn === colData.activeColumn) {
+	if(newActiveColumn === stackOpt.activeColumn) {
 		return false; // The given index is already active stacked column
 	}
 
-	var prevActiveColumnIndex = this._getColumnIndex(colData.activeColumn);
-	var newActiveColumnIndex = this._getColumnIndex(newActiveColumn);
-	colData.activeColumn = newActiveColumn; // Change active column
+	var prevActiveColumnIndex = this.getColumnIndex(stackOpt.activeColumn);
+	var newActiveColumnIndex = this.getColumnIndex(newActiveColumn);
+	stackOpt.activeColumn = newActiveColumn; // Change active column
 
 	this._setColumnVisibility(newActiveColumnIndex, true);
 	this._setColumnVisibility(prevActiveColumnIndex, false); // Hide current active column
@@ -1263,16 +1265,18 @@ ColumnStackPlugin.prototype.swapColumn = function(colRef, swappingIndex) {
 	var csp = this._getPlugin("ColumnSelectionPlugin");
 	if(csp && csp.isEnabled()) {
 		csp.selectSingleColumn(newActiveColumnIndex);
-		csp.dispatchSelectionChanged();
+		if(csp.dispatchSelectionChanged) {
+			csp.dispatchSelectionChanged();
+		}
 	}
 	var cfp = this._getPlugin("ColumnFilterPlugin");
 	if(cfp) {
 		cfp["refresh"]();
 	}
 
-	colData = this._getColumnStackOptions(prevActiveColumnIndex);
-	this._updateIcon(prevActiveColumnIndex, colData);
-	this._updateIcon(newActiveColumnIndex, colData);
+	stackOpt = this._getColumnStackOptions(prevActiveColumnIndex);
+	this._updateIcon(prevActiveColumnIndex, stackOpt);
+	this._updateIcon(newActiveColumnIndex, stackOpt);
 
 	return true;
 };
@@ -1290,151 +1294,83 @@ ColumnStackPlugin.prototype._onPreSectionRender = function (e) {
 * @param {Object} e
 */
 ColumnStackPlugin.prototype._onColumnRemoved = function (e) {
-	var colData = /** @type{Object} */(e.columnData);
-	if(!colData) { return; }
-
-	var stackRef = colData["stack"];
-	if(!stackRef) { return; }
+	if(this._inResetting) {
+		return;
+	}
 
-	var stackOpt = stackRef["stackOpt"];
-	if(!stackOpt) { return; }
+	var colRef = "";
+	var colId = e.colId;
+	var stackOpt = this._groupDefs.getParentGroup(colId);
 
-	// update members
-	if(stackOpt.stackRefs) {
-		var index = stackOpt.stackRefs.indexOf(stackRef);
-		if(index > -1) {
-			stackOpt.stackRefs.splice(index, 1);
-			if(stackOpt.stackRefs.length < 2) {
-				// delete group
-				var colIndex = this._getColumnIndex(stackOpt.stackRefs[0]);
-				if(colIndex > -1) {
-					this.unstackColumns([colIndex]);
-				} else {
-					// All stacked columns are removed
-					delete this._stacks[stackOpt.stackId];
-				}
-			} else {
-				this._updateActiveColumn(stackOpt);
-			}
+	if(stackOpt) {
+		colRef = colId;
+	} else {
+		var colData = /** @type{Object} */(e.columnData);
+		var field = colData ? colData.field : "";
+		stackOpt = this._groupDefs.getParentGroup(fields);
+		if(stackOpt) {
+			colRef = field;
+		} else {
+			return;
 		}
 	}
-
-	colData["stack"] = null;
+	// update members
+	var children = stackOpt.children;
+	if(children.length <= 2) {
+		this._removeStack(stackOpt.id);
+		this._updateUI();
+	} else {
+		this._groupDefs.removeGroupChild(stackOpt.id, colRef);
+		this._updateActiveColumn(stackOpt); // This may trigger _updateUI
+	}
 };
-
 /** @private
 * @param {Object} e
 */
 ColumnStackPlugin.prototype._onColumnMoved = function (e) {
-	if(this._stacking) { // during the stacking, there is no need to recalculate stacks
-		return;
+	if(this._inReordering || this._inResetting) {
+		return; // during the reordering or resetting, there is no need to recalculate stacks
 	}
 
 	var toIndex = e.toColIndex;
-	var stackOpt = this._getColumnStackOptions(toIndex);
-
-	// column swaping
-	if(stackOpt && !stackOpt.spreading) {
-		return;
+	var colRef = "";
+	var colId = this.getColumnId(toIndex);
+	var stackOpt = this._groupDefs.getParentGroup(colId);
+	if(stackOpt) {
+		colRef = colId;
+	} else {
+		var field = this._getField(toIndex);
+		stackOpt = this._groupDefs.getParentGroup(field);
+		if(stackOpt) {
+			colRef = field;
+		}
 	}
 
-	var stackRef = this._getUniqueRef(toIndex);
-
 	var leftStackOpt = this._getColumnStackOptions(toIndex - 1);
 	var rightStackOpt = this._getColumnStackOptions(toIndex + 1);
-	var index, leftColStackRef;
-	// move inside
-	if(stackOpt) {
-		if(stackOpt === leftStackOpt) {
-			leftStackOpt.stackRefs.splice(leftStackOpt.stackRefs.indexOf(stackRef), 1);
-			leftColStackRef = this._getUniqueRef(toIndex - 1);
-			index = leftStackOpt.stackRefs.indexOf(leftColStackRef);
-			if(index > -1) {
-				leftStackOpt.stackRefs.splice(index + 1, 0, stackRef);
-				if(leftStackOpt.spreading) {
-					leftStackOpt.activeColumn = leftStackOpt.stackRefs[leftStackOpt.stackRefs.length - 1];
-				} else {
-					leftStackOpt.activeColumn = leftStackOpt.stackRefs[0];
-				}
-			}
-			this._updateUI();
-			return;
-		} else if(stackOpt === rightStackOpt) {
-			rightStackOpt.stackRefs.splice(rightStackOpt.stackRefs.indexOf(stackRef), 1);
-			var rightColStackRef = this._getUniqueRef(toIndex + 1);
-			index = rightStackOpt.stackRefs.indexOf(rightColStackRef);
-			if(index > -1) {
-				rightStackOpt.stackRefs.splice(index, 0, stackRef);
-				if(rightStackOpt.spreading) {
-					rightStackOpt.activeColumn = rightStackOpt.stackRefs[rightStackOpt.stackRefs.length - 1];
-				} else {
-					rightStackOpt.activeColumn = rightStackOpt.stackRefs[0];
-				}
-			}
-			this._updateUI();
-			return;
-		}
-	}
 
+	var stackChange = true;
 	var dirty = false;
-
-	var fromIndex = e.fromColIndex;
-	var rIndex = fromIndex + 1;
-	if(toIndex > fromIndex) {
-		// move right
-		rIndex = fromIndex;
-	}
-	var lIndex = rIndex - 1;
-
-	// move out checking
-	leftStackOpt = this._getColumnStackOptions(lIndex);
-	if(leftStackOpt && leftStackOpt.spreading) {
-		index = leftStackOpt.stackRefs.indexOf(stackRef);
-		if(index > -1) {
-			leftStackOpt.stackRefs.splice(index, 1);
-			if(leftStackOpt.spreading) {
-				leftStackOpt.activeColumn = leftStackOpt.stackRefs[leftStackOpt.stackRefs.length - 1];
-			} else {
-				leftStackOpt.activeColumn = leftStackOpt.stackRefs[0];
-			}
-			this._setColumnStackOptions(toIndex, null);
-			dirty = true;
-		}
-	}
-
-	rightStackOpt = this._getColumnStackOptions(rIndex);
-	if(rightStackOpt && rightStackOpt.spreading) {
-		index = rightStackOpt.stackRefs.indexOf(stackRef);
-		if(index > -1) {
-			rightStackOpt.stackRefs.splice(index, 1);
-			if(rightStackOpt.spreading) {
-				rightStackOpt.activeColumn = rightStackOpt.stackRefs[rightStackOpt.stackRefs.length - 1];
+	if(stackOpt) {
+		// The move was within the same stack
+		if(stackOpt === leftStackOpt || stackOpt === rightStackOpt) {
+			this._repositionMembers(stackOpt);
+			stackChange = false;
+		} else { // The move was out from its own stack
+			if(stackOpt.children.length <= 2) {
+				this._removeStack(stackOpt.id);
 			} else {
-				rightStackOpt.activeColumn = rightStackOpt.stackRefs[0];
+				this._removeRefFromStack(stackOpt, colRef, toIndex);
 			}
-			this._setColumnStackOptions(toIndex, null);
-			dirty = true;
 		}
+		dirty = true;
 	}
 
-	// move in checking
-	rIndex = toIndex + 1;
-	lIndex = rIndex - 2;
-	leftStackOpt = this._getColumnStackOptions(lIndex);
-	rightStackOpt = this._getColumnStackOptions(rIndex);
-	if(leftStackOpt && leftStackOpt.spreading &&
-		(leftStackOpt === rightStackOpt)) {
-		leftColStackRef = this._getUniqueRef(toIndex - 1);
-		index = leftStackOpt.stackRefs.indexOf(leftColStackRef);
-		if(index > -1) {
-			leftStackOpt.stackRefs.splice(index + 1, 0, stackRef);
-			if(leftStackOpt.spreading) {
-				leftStackOpt.activeColumn = leftStackOpt.stackRefs[leftStackOpt.stackRefs.length - 1];
-			} else {
-				leftStackOpt.activeColumn = leftStackOpt.stackRefs[0];
+	if(stackChange) {
+		if(this._isWithinStack(toIndex)) {
+			if(this._addRefToStack(leftStackOpt, toIndex)) {
+				dirty = true;
 			}
-			this._setColumnStackOptions(toIndex, leftStackOpt);
-			dirty = true;
 		}
 	}
 
@@ -1442,30 +1378,20 @@ ColumnStackPlugin.prototype._onColumnMoved = function (e) {
 		this._updateUI();
 	}
 };
-
 /** @private
 * @param {Object} e
 */
 ColumnStackPlugin.prototype._onColumnAdded = function (e) {
 	var colIndex = e.colIndex;
-	this._setUniqueRef(colIndex, {});
 
 	if (this._autoStacking) {
 		if(this._idToFields) {
 			this._requestStackingByFields();
 		}
-	} else { // TODO: This logic is too complicated
-		// add to group
-		var leftStackOpt = this._getColumnStackOptions(colIndex - 1);
-		var rightStackOpt = this._getColumnStackOptions(colIndex + 1);
-		if(leftStackOpt && (leftStackOpt === rightStackOpt)) {
-			var leftColStackRef = this._getUniqueRef(colIndex - 1);
-			var stackRef = this._getUniqueRef(colIndex);
-			var index = leftStackOpt.stackRefs.indexOf(leftColStackRef);
-			if(index > -1) { // TODO: Reuse existing logic instead of modifying states like this
-				leftStackOpt.stackRefs.splice(index + 1, 0, stackRef);
-				leftStackOpt.activeColumn = leftStackOpt.stackRefs[leftStackOpt.stackRefs.length - 1];
-				this._setColumnStackOptions(colIndex, leftStackOpt);
+	} else if(!this._inResetting) {
+		var stackOpt = this._isWithinStack(colIndex);
+		if(stackOpt) {
+			if(this._addRefToStack(stackOpt, colIndex)) {
 				this._updateUI();
 			}
 		}
@@ -1474,6 +1400,110 @@ ColumnStackPlugin.prototype._onColumnAdded = function (e) {
 /** @private
 * @param {Object} e
 */
+ColumnStackPlugin.prototype._onBeforeBatchOperation = function (e) {
+	if(e.batchType === "reset") {
+		this._inResetting = true;
+	} else if(e.batchType === "move") {
+		this._inReordering = true;
+	}
+};
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onAfterBatchOperation = function (e) {
+	if(e.batchType === "reset") {
+		this._inResetting = false;
+		// TODO: Revalidate members in stacks
+		// TODO: Reposition members and stacks
+		var groups = this._groupDefs.getGroups();
+		var groupCount = groups.length;
+		for(var i = 0; i < groupCount; ++i) {
+			var group = groups[i];
+			this._updateActiveColumn(group);
+			this._hideStackedColumns(group);
+		}
+	} else if(e.batchType === "move") {
+		this._inReordering = false;
+	}
+};
+
+/** @private
+* @param {number} colIndex
+* @return {Object} stackOption
+*/
+ColumnStackPlugin.prototype._isWithinStack = function (colIndex) {
+	var leftStackOpt = this._getColumnStackOptions(colIndex - 1);
+	if(leftStackOpt) {
+		var rightStackOpt = this._getColumnStackOptions(colIndex + 1);
+		if(leftStackOpt === rightStackOpt) {
+			return leftStackOpt;
+		}
+	}
+	return null;
+};
+/** Add unique ref of the specified index to the proper position within the stack
+* @private
+* @param {Object} stackOption
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype._addRefToStack = function (stackOption, colIndex) {
+	var colId = this._toIdOrField(colIndex);
+
+	this._hideStackedColumns(stackOption, colIndex);
+
+	// Find a position to be placed in the stack
+	var rightColRef = this._toIdOrField(colIndex + 1);
+	var children = stackOption.children;
+	var pos = children.indexOf(rightColRef); // WARNING This does not work for field
+	return this._groupDefs.addGroupChild(stackOption.id, colId, pos);
+};
+/** Remove unique ref of the specified index from the stack
+* @private
+* @param {Object} stackOption
+* @param {string} colRef For removing state
+* @param {number} colIndex For updating UI
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype._removeRefFromStack = function (stackOption, colRef, colIndex) {
+	if(!this._groupDefs.removeGroupChild(stackOption.id, colRef)) {
+		return false;
+	}
+
+	var isCollapsed = stackOption.spreading && stackOption.collapsed;
+	if(isCollapsed) {
+		this._collapseMember(colIndex, false);
+	} else {
+		this._setColumnVisibility(colIndex, true);
+	}
+	this._updateActiveColumn(stackOption); // This may trigger _updateUI
+	return true;
+};
+
+/** @private
+* @param {Object} stackOption
+*/
+ColumnStackPlugin.prototype._repositionMembers = function (stackOption) {
+	var children = stackOption.children;
+	var refCount = children ? children.length : 0;
+	if(!refCount) {
+		return;
+	}
+
+	var i;
+	var indexToIds = new Array(refCount);
+	for(i = 0; i < refCount; i++) {
+		var colRef = children[i];
+		indexToIds[i] = [this.getColumnIndex(colRef), colRef];
+	}
+	indexToIds.sort(compareRef);
+	for(i = 0; i < refCount; i++) {
+		children[i] = indexToIds[i][1];
+	}
+};
+/** @private
+* @param {Object} e
+*/
 ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
 	var elem = e.currentTarget;
 	if(e.button) { // right click or middle click
@@ -1493,11 +1523,11 @@ ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
 		return;
 	}
 
-	var stackRefs = colData.stackRefs;
-	var activeIndex = stackRefs.indexOf(colData.activeColumn);
+	var children = colData.children;
+	var activeIndex = children.indexOf(colData.activeColumn);
 
-	var len = stackRefs.length;
-	var colIndices = this._getColumnIndices(stackRefs);
+	var len = children.length;
+	var colIndices = this.getColumnIndices(children);
 	var menuData = new Array(len);
 	for(var i = len; --i >= 0;) {
 		menuData[i] = {
@@ -1510,9 +1540,9 @@ ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
 	pos["menuData"] = menuData;
 	pos["activeIndex"] = activeIndex;
 	pos["columnIndices"] = colIndices;
-	pos["activeColIndex"] = this._getColumnIndex(colData.activeColumn);
+	pos["activeColIndex"] = this.getColumnIndex(colData.activeColumn);
 	pos["event"] = e;
-	pos["stackId"] = colData.stackId;
+	pos["stackId"] = colData.id;
 
 	elem.focus();
 	this._dispatch("clicked", pos);
@@ -1546,9 +1576,9 @@ ColumnStackPlugin.prototype._requestStackingByFields = function() {
 */
 ColumnStackPlugin.prototype.getStackMemberIndices = function(stackId) {
 	if(stackId) {
-		var stack = this._stacks[stackId];
+		var stack = this._groupDefs.getGroup(stackId);
 		if(stack){
-			return this._getColumnIndices(stack.stackRefs);
+			return this.getColumnIndices(stack.children);
 		}
 	}
 	return [];
@@ -1560,8 +1590,12 @@ ColumnStackPlugin.prototype.getStackMemberIndices = function(stackId) {
 * @return {!Array.<string>} Member column ids
 */
 ColumnStackPlugin.prototype.getStackMemberIds = function(stackId) {
-	var memberIndices = this.getStackMemberIndices(stackId);
-	return this.getColumnIdsByIndex(memberIndices);
+	var colIndices = this.getStackMemberIndices(stackId);
+	if(colIndices.length) {
+		return colIndices.map(this._toIdOrField);
+	}
+
+	return colIndices;
 };
 
 /** @public
@@ -1621,44 +1655,23 @@ ColumnStackPlugin.prototype.getColumnIdsByFields = function(fields) {
 * @param {string} stackId
 */
 ColumnStackPlugin.prototype.addColumnToStack = function(colRef, stackId) {
-	if(typeof colRef === "string") {
-		colRef = this.getColumnIndex(colRef);
-		if(colRef < 0) {
-			return;
-		}
-	}
+	var colId = this._toIdOrField(colRef);
 
-	var stack = this._stacks[stackId];
-	var isColumnStackable = this.isColumnStackable([colRef]);
+	var stack = this._groupDefs.getGroup(stackId);
+	var isColumnStackable = !this._groupDefs.getParentGroup(colId);
 
 	// if column not stackable or destination stack not exist, do nothing
 	if(!isColumnStackable || !stack){
 		return;
 	}
 
-	var isCollapsed = stack.spreading && stack.collapsed;
-	if(isCollapsed){
-		this.expandGroup(this._getColumnIndex(stack.activeColumn));
-	}
-
-	// Prevent from flashing in stack mode
-	if(stack.collapsed !== false) {
-		this._setColumnVisibility(colRef, false);
-	}
+	this._hideStackedColumns(stack, this.getColumnIndex(colId));
 
 	// apply stacking
-	this._setColumnStackOptions(colRef, stack);
-	stack.stackRefs.push(this._getUniqueRef(colRef));
-
-	if(stack.spreading) {
-		stack.activeColumn = stack.stackRefs[stack.stackRefs.length - 1];
-		stack.collapsed = isCollapsed;
-	} else {
-		stack.activeColumn  = stack.stackRefs[0];
-	}
+	this._groupDefs.addGroupChild(stackId, colId);
 
 	// Pack stacked columns together
-	this._moveStackedColumns(stack.stackRefs);
+	this._moveStackedColumns(stack.children);
 
 	this._updateUI();
 };
@@ -1673,46 +1686,37 @@ ColumnStackPlugin.prototype.removeColumnFromStack = function(colRef) {
 		return;
 	}
 
-	var stackId = this.getStackId(colIndex);
-	var stack = this._stacks[stackId];
+	var colId = this.getColumnId(colIndex);
+	var stack = this._groupDefs.getParentGroup(colId);
+	if(stack) {
+		colRef = colId;
+	} else {
+		var field = this._getField(colIndex);
+		stack = this._groupDefs.getParentGroup(field);
+		if(stack) {
+			colRef = field;
+		}
+	}
+
 	if(!stack) {
 		return;
 	}
 
-	var stackRefs = stack.stackRefs;
-	var memberCount = stackRefs.length;
+	var children = stack.children;
+	var memberCount = children.length;
 	if(memberCount <= 2) {
 		if(memberCount === 2) {
-			var uniqueObj = this._getUniqueRef(colIndex);
-			if(uniqueObj === stackRefs[0]) { // If the first column is removed from the stack, move it to the end of stack
+			if(colRef === children[0]) { // If the first column is removed from the stack, move it to the end of stack
 				// This assumes that the column order is already in correct position
-				this.moveColumnById(colIndex, this._getColumnIndex(stackRefs[1]) + 1);
+				this.moveColumnById(colIndex, this.getColumnIndex(children[1]) + 1);
 			}
 		}
-		this.removeStack(stackId); // updateUI will be called
+		this.removeStack(stack.id); // updateUI will be called
 		return;
 	}
 
-	var colIndices = this.getStackMemberIndices(stackId);
-	var memberIdx = colIndices.indexOf(colIndex);
-	var isCollapsed = stack.spreading && stack.collapsed;
-	if(memberIdx >= 0) {
-		if(isCollapsed) {
-			this._collapseMember(colIndices[memberIdx], false); // TODO: This may change the column index
-		}
-		stackRefs.splice(memberIdx, 1); // WARNING: colIndices is out of sync with stackRefs after this line
-	}
-
-	this._removeColumnStackOptions(colIndex);
-	this._setColumnVisibility(colIndex, true);
-
-	if(stack.spreading) {
-		stack.activeColumn = stackRefs[stackRefs.length - 1];
-		stack.collapsed = isCollapsed;
-	} else {
-		stack.activeColumn  = stackRefs[0];
-	}
-	this._stacks[stackId] = stack; // TODO: This is unnecessary
+	var colIndices = this.getColumnIndices(children);
+	this._removeRefFromStack(stack, colRef, colIndex);
 
 	this.moveColumnById(colIndex, colIndices[memberCount - 1] + 1); // This assumes that the column order is already in correct position
 	this._updateUI();
@@ -1724,7 +1728,7 @@ ColumnStackPlugin.prototype.removeColumnFromStack = function(colRef) {
 * @param {string} stackId
 */
 ColumnStackPlugin.prototype.reorderStackColumns = function(colRefs, stackId) {
-	var stack = this._stacks[stackId];
+	var stack = this._groupDefs.getGroup(stackId);
 	if(!stack) {
 		return;
 	}
@@ -1742,14 +1746,14 @@ ColumnStackPlugin.prototype.reorderStackColumns = function(colRefs, stackId) {
 	var i, colIndex;
 	for(i = 0; i < len; i++ ){
 		colIndex = colRefs[i];
-		if(stackMemberIndices.indexOf(colIndex) !== -1){
+		if(stackMemberIndices.indexOf(colIndex) >= 0){
 			newStackMembers.push(colIndex);
 		}
 	}
 	if(newStackMembers.length !== stackMemberCount){
 		for(i = 0; i < stackMemberCount; i++ ){
 			colIndex = stackMemberIndices[i];
-			if(newStackMembers.indexOf(colIndex) === -1){
+			if(newStackMembers.indexOf(colIndex) < 0){
 				newStackMembers.push(colIndex);
 				if(newStackMembers.length === stackMemberCount){
 					break;
@@ -1767,9 +1771,8 @@ ColumnStackPlugin.prototype.reorderStackColumns = function(colRefs, stackId) {
 		newStackMembers[i] = this._getField(newStackMembers[i]);
 	}
 
-	this.unstackColumns(stackMemberIndices);
+	this.removeStack(stackId);
 	this.stackColumns(newStackMembers, stackId, options);
-
 };
 
 /** @public
@@ -1778,12 +1781,7 @@ ColumnStackPlugin.prototype.reorderStackColumns = function(colRefs, stackId) {
 * @param {string} name
 */
 ColumnStackPlugin.prototype.setStackName = function(stackId, name) {
-	if(stackId !== null) {
-		var stack = this._stacks[stackId];
-		if(stack){
-			stack.name = name;
-		}
-	}
+	this._groupDefs.setGroupName(stackId, name);
 };
 
 /** @public
@@ -1792,14 +1790,7 @@ ColumnStackPlugin.prototype.setStackName = function(stackId, name) {
 * @return {string} Stack name
 */
 ColumnStackPlugin.prototype.getStackName = function(stackId) {
-	var stackName  = "";
-	if(stackId !== null) {
-		var stack = this._stacks[stackId];
-		if(stack){
-			stackName = stack.name;
-		}
-	}
-	return stackName;
+	return this._groupDefs.getGroupName(stackId);
 };
 
 /** @public
@@ -1808,12 +1799,7 @@ ColumnStackPlugin.prototype.getStackName = function(stackId) {
 * @return {string} active column field
 */
 ColumnStackPlugin.prototype.getActiveColumnField = function(stackId) {
-	var field  = "";
-	var activeColIndex = this.getActiveColumnIndex(stackId);
-	if(activeColIndex !== -1){
-		field = this._getField(activeColIndex);
-	}
-	return field;
+	return this._getField(this.getActiveColumnIndex(stackId));
 };
 
 /** @public
@@ -1822,14 +1808,11 @@ ColumnStackPlugin.prototype.getActiveColumnField = function(stackId) {
 * @return {number} active column index
 */
 ColumnStackPlugin.prototype.getActiveColumnIndex = function(stackId) {
-	var activeColIndex  = -1;
-	if(stackId !== null) {
-		var stack = this._stacks[stackId];
-		if(stack){
-			activeColIndex = this._getColumnIndex(stack.activeColumn);
-		}
+	var stack = this._groupDefs.getGroup(stackId);
+	if(stack){
+		return this.getColumnIndex(stack.activeColumn);
 	}
-	return activeColIndex;
+	return -1;
 };
 //getActiveColumnIndex
 
@@ -1867,11 +1850,11 @@ ColumnStackPlugin.prototype.unsetParent = ColumnStackPlugin.prototype.removeColu
 */
 ColumnStackPlugin.prototype.reorderColumns = function(colList, destCol) {
 	var dirty = false;
-	this._stacking = true;
+	this._inReordering = true;
 
 	dirty = this._reorderColumns(colList, destCol);
 
-	this._stacking = false;
+	this._inReordering = false;
 	return dirty;
 };
 /** Move the specified column to position before the destination
@@ -1881,13 +1864,7 @@ ColumnStackPlugin.prototype.reorderColumns = function(colList, destCol) {
 * @return {boolean}
 */
 ColumnStackPlugin.prototype.moveColumnById = function(srcCol, destCol) {
-	var dirty = false;
-	this._stacking = false;
-
-	this._moveColumnById(srcCol, destCol);
-
-	this._stacking = true;
-	return dirty;
+	return this._moveColumnById(srcCol, destCol);
 };
 
 /** @private
@@ -1896,40 +1873,35 @@ ColumnStackPlugin.prototype.moveColumnById = function(srcCol, destCol) {
 * @param {boolean} visible
 */
 ColumnStackPlugin.prototype._setStackVisibility = function(stackId, visible) {
-	var stackOption = this._stacks[stackId];
+	var stackOption = this._groupDefs.getGroup(stackId);
 	if(!stackOption){
 		return;
 	}
 
-	if(stackOption["spreading"] && !stackOption["collapsed"]){
-		var stackRefs = stackOption["stackRefs"];
-		for(var i = 0; i < stackRefs.length; i++){
-			var colIndex = this._getColumnIndex(stackRefs[i]);
-			this._setColumnVisibility(colIndex, visible);
+	if(stackOption.spreading && !stackOption.collapsed){
+		var children = stackOption.children;
+		for(var i = 0; i < children.length; i++){
+			this._setColumnVisibility(this.getColumnIndex(children[i]), visible);
 		}
 	} else {
-		var activeColIndex = this._getColumnIndex(stackOption.activeColumn);
+		var activeColIndex = this.getColumnIndex(stackOption.activeColumn);
 		this._setColumnVisibility(activeColIndex, visible);
 	}
 };
 
+
 /** @private
 * @description Check for active column in a stack if it needs an update.
 * @param {Object} stackOpt
 */
 ColumnStackPlugin.prototype._updateActiveColumn = function(stackOpt) {
-	if(!stackOpt) { return; }
-
-	var stackRefs = stackOpt["stackRefs"];
-	if(!stackRefs || !stackRefs.length) { return; }
-
-	if(stackRefs.indexOf(stackOpt.activeColumn) === -1) {
-		stackOpt.activeColumn = stackOpt["spreading"] ? stackRefs[stackRefs.length - 1] : stackRefs[0];
-
+	if(_resolveActiveColumn(stackOpt)) {
 		// TODO: Add a proper way to set visibility to activeColumn when activeColumn is changed
-		var activeColIndex = this._getColumnIndex(stackOpt.activeColumn);
-		this._setColumnVisibility(activeColIndex, true);
-		this._updateUI();
+		var activeColIndex = this.getColumnIndex(stackOpt.activeColumn);
+		if(activeColIndex >= 0) {
+			this._setColumnVisibility(activeColIndex, true);
+			this._updateUI();
+		}
 	}
 };
 
@@ -1961,14 +1933,14 @@ ColumnStackPlugin.prototype.showStack = function(stackId) {
 * @return {boolean|null}
 */
 ColumnStackPlugin.prototype.isStackHidden = function(stackId) {
-	var stackOption = this._stacks[stackId];
+	var stackOption = this._groupDefs.getGroup(stackId);
 	var host = this._host || this._hosts[0];
 
 	if(!stackOption || !host){
 		return null;
 	}
 
-	var activeColIndex = this._getColumnIndex(stackOption.activeColumn);
+	var activeColIndex = this.getColumnIndex(stackOption.activeColumn);
 	var isVisible = host.isColumnVisible(activeColIndex);
 
 	return !isVisible;
@@ -1983,7 +1955,7 @@ ColumnStackPlugin.prototype.moveStack = function(stackId, destCol) {
 	if(!stackId){
 		return false;
 	}
-	var colList = this.getStackMemberIds(stackId);
+	var colList = this.getStackMemberIds(stackId); // WARNING: column ids or fields
 	var dirty = this.reorderColumns(colList, destCol);
 	return dirty;
 };