@refinitiv-ui/efx-grid 6.0.26 → 6.0.27

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

@@ -12,6 +12,7 @@ import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 * @property {Array.<string>} fields Fields for stacking. The minimum is 2 fields.
 * @property {Array.<ColumnStackPlugin~StackDefinition>} stacks List of stacking configuration
 * @property {boolean=} autoStacking=false If enabled, columns will be auto stacked when new inserted column field match in stack
+* @property {Function=} clicked=null Event handler when user clicks on stack/expanding icon
 */
 
 /** @typedef {Object} ColumnStackPlugin~ColumnOptions
@@ -45,6 +46,18 @@ import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 * @property {string=} activeColumn="" Column index or field for set as active column
 */
 
+/** @event ColumnStackPlugin#clicked
+* @description Fired when user clicks on stack/expanding icon
+* @type {Object}
+* @property {number} colIndex
+* @property {number} rowIndex
+* @property {Array.<Object>} menuData Data for populating context menu
+* @property {number} activeIndex
+* @property {Array.<number>} columnIndices
+* @property {number} activeColIndex
+* @property {Event} event Native event argument from click event
+*/
+
 /** @constructor
 * @extends {GridPlugin}
 */
@@ -55,12 +68,12 @@ var ColumnStackPlugin = function () {
 	this._onColumnAdded = this._onColumnAdded.bind(this);
 	this._onStackButtonClicked = this._onStackButtonClicked.bind(this);
 	this._updateUI = this._updateUI.bind(this);
-	this._setStack = this._setStack.bind(this);
+	this._requestStackingByFields = this._requestStackingByFields.bind(this);
 	this._hosts = [];
 	this._stacks = {};
 
 	this._conflator = new Conflator(100, this._updateUI);
-	this._stackConflator = new Conflator(100, this._setStack);
+	this._stackConflator = new Conflator(100, this._requestStackingByFields);
 };
 
 Ext.inherits(ColumnStackPlugin, GridPlugin);
@@ -73,10 +86,11 @@ ColumnStackPlugin.prototype._stacks;
 * @private
 */
 ColumnStackPlugin.prototype._pendingStacks;
-/** @type {Object}
+/** A map from stack id to array of fields
+* @type {Object}
 * @private
 */
-ColumnStackPlugin.prototype._columnStack = null;
+ColumnStackPlugin.prototype._idToFields = null; // For auto-stacking
 /** @type {boolean}
 * @private
 */
@@ -85,6 +99,10 @@ ColumnStackPlugin.prototype._updating = false;
 * @private
 */
 ColumnStackPlugin.prototype._autoStacking = false;
+/** @type {boolean}
+* @private
+*/
+ColumnStackPlugin.prototype._stacking = false;
 
 
 /** @type {number}
@@ -213,79 +231,99 @@ ColumnStackPlugin.prototype.config = function (options) {
 		columns = [];
 	}
 
-	var i, len = columns.length;
-	for(i = 0; i < len; ++i) {
-		this._setColumnStacking(i, {}); // used for further column index getting
+	var i;
+	var colCount = columns.length;
+	for(i = 0; i < colCount; ++i) {
+		this._setUniqueRef(i, {}); // used for further column index getting
 	}
 
-	var sid, stacks = {};
 	var columnStack = options.columnStack;
-	if(columnStack != null) {
+	var stackId = "";
+	var stacks = {};
+	var hasStack = false;
+	var stackConfig = null;
+	if(columnStack) {
+		this.addListener(columnStack, "clicked");
+
 		if(columnStack.autoStacking != null) {
 			this._autoStacking = columnStack.autoStacking;
 		}
 
 		if(columnStack.fields && columnStack.fields.length > 1) {
-			this._columnStack = columnStack.fields;
-			sid = this._generateStackId();
-			stacks[sid] = {
+			hasStack = true;
+			stackId = this._generateStackId(); // TODO: Stack id may need to be hardcoded
+			if(!this._idToFields) {
+				this._idToFields = {};
+			}
+			this._idToFields[stackId] = columnStack.fields;
+			stacks[stackId] = {
 				colRefs: columnStack.fields,
 				spreading: columnStack.spreading === true,
 				collapsed: columnStack.collapsed !== false
 			};
 		} else if (columnStack.stacks && columnStack.stacks.length) {
+			hasStack = true;
 			var stackLen = columnStack.stacks.length;
 			for(i = 0; i < stackLen; i++){
-				var stackConfig = columnStack.stacks[i];
-				sid = stackConfig.id || this._generateStackId();
+				stackConfig = columnStack.stacks[i];
+				stackId = stackConfig.id || this._generateStackId();
 				if(stackConfig.collapsed == null){
 					stackConfig.collapsed = true;
 				}
 				if(stackConfig.spreading == null){
 					stackConfig.spreading = false;
 				}
-				stacks[sid] = stackConfig;
+				stacks[stackId] = stackConfig;
 			}
 		}
-	} else {
-		var column, stackOpt;
-		for(i = 0; i < len; ++i) {
-			column = columns[i];
-			stackOpt = column["stackId"] || column["stack"];
+	}
+
+	if(!hasStack) {
+		for(i = 0; i < colCount; ++i) {
+			var column = columns[i];
+			var stackOpt = column["stackId"] || column["stack"];
+			if(!stackOpt) {
+				continue;
+			}
+
+			stackId = "";
+			var spreading = false;
+			var collapsed = true;
 			if(typeof stackOpt === "string") {
-				if(!stacks[stackOpt]) {
-					stacks[stackOpt] = {
-						colRefs: [],
-						spreading: false
-					};
-				}
-				stacks[stackOpt].colRefs.push(i);
+				stackId = stackOpt;
 			} else if(typeof stackOpt === "object") {
-				if(!stacks[stackOpt["id"]]) {
-					stacks[stackOpt["id"]] = {
+				stackConfig = stackOpt;
+				stackId = stackConfig["id"] || "";
+				spreading = stackConfig["spreading"] === true; // WARNING: Only the first column in the stack has an effect
+				collapsed = stackConfig["collapsed"] !== false;
+			}
+			if(stackId) {
+				if(!stacks[stackId]) {
+					stacks[stackId] = {
 						colRefs: [],
-						spreading: stackOpt["spreading"] === true,
-						collapsed: stackOpt["collapsed"] !== false
+						spreading: spreading, // Default is false (stacking mode)
+						collapsed: collapsed // Default is true (columns are hidden)
 					};
+					hasStack = true;
 				}
-				stacks[stackOpt["id"]].colRefs.push(i);
+				stacks[stackId].colRefs.push(i);
 			}
 		}
 	}
 
 	if(this._initializedGrid) {
-		if(Object.keys(stacks).length){
-			this.removeAllStacks(false);
+		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();
 		}
-		for(sid in stacks) {
-			var config = stacks[sid];
-			if(!config.colRefs){
-				this._transformStackConfig(config);
-			}
-			this.stackColumns(config.colRefs, sid, config);
-		}
 	} else {
 		this._pendingStacks = this._pendingStacks || stacks;
 	}
@@ -337,7 +375,7 @@ ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 		}
 
 		if (this._autoStacking) {
-			var fields = this._columnStack[stackOption.stackId];
+			var fields = this._idToFields[stackOption.stackId];
 			var activeColumnField = this._getField(activeColIndex);
 
 			stackConfigObj.fields = fields;
@@ -361,6 +399,7 @@ ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 };
 
 /** @override
+* @ignore
 */
 ColumnStackPlugin.prototype._afterInit = function () {
 	if(this._pendingStacks) {
@@ -377,50 +416,80 @@ ColumnStackPlugin.prototype._afterInit = function () {
 	// In case of lazy loading
 	// DO something
 };
-/** @private
-*	@param {object} stackRef
+/** WARNING: This method is slow
+* @private
+*	@param {Object} stackRef
+* @param {number=} colCount
 * @return {number}
 */
-ColumnStackPlugin.prototype._getColumnIndex = function(stackRef) {
-	var colCount = this.getColumnCount();
-	var stacking, index = -1;
-	for(var i = 0; i < colCount; i++) {
-		stacking = this._getColumnStacking(i);
-		if(stackRef === stacking) {
-			index = i;
-			break;
+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 index;
+	return ary;
 };
 /** @private
 * @param {number} colIndex
-* @param {object} stacking
+* @param {!Object} refObj
 */
-ColumnStackPlugin.prototype._setColumnStacking = function(colIndex, stacking) {
-	var colData = this._newColumnData(colIndex);
-	colData["stack"] = stacking;
+ColumnStackPlugin.prototype._setUniqueRef = function(colIndex, refObj) {
+	this._newColumnData(colIndex)["stack"] = refObj;
 };
 /** @private
 * @param {number} colIndex
-* @return {*}
+* @return {Object}
+*/
+ColumnStackPlugin.prototype._getUniqueRef = function(colIndex) {
+	return this._getColumnOption(colIndex, "stack") || null;
+};
+/** @private
+* @return {!Array.<Object>}
 */
-ColumnStackPlugin.prototype._getColumnStacking = function(colIndex) {
-	return this._getColumnOption(colIndex, "stack");
+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
+* @param {Object} stackOptions
 */
 ColumnStackPlugin.prototype._setColumnStackOptions = function(colIndex, stackOptions) {
-	var stacking = this._getColumnStacking(colIndex);
-	if(stacking) {
-		stacking["stackOpt"] = stackOptions;
+	var ref = this._getUniqueRef(colIndex);
+	if(ref) {
+		ref["stackOpt"] = stackOptions;
 	}
 };
 /** @private
-* @param {object} stackConfig
-* @return {object} stack config object
+* @param {Object} stackConfig
+* @return {Object} stack config object
 */
 ColumnStackPlugin.prototype._transformStackConfig = function(stackConfig) {
 	stackConfig.colRefs = [];
@@ -458,9 +527,9 @@ ColumnStackPlugin.prototype._transformStackConfig = function(stackConfig) {
 * @return {*}
 */
 ColumnStackPlugin.prototype._getColumnStackOptions = function(colIndex) {
-	var stacking = this._getColumnStacking(colIndex);
-	if(stacking){
-		return stacking["stackOpt"] || null;
+	var refObj = this._getUniqueRef(colIndex);
+	if(refObj){
+		return refObj["stackOpt"] || null;
 	}
 	return null;
 };
@@ -468,9 +537,9 @@ ColumnStackPlugin.prototype._getColumnStackOptions = function(colIndex) {
 * @param {number} colIndex
 */
 ColumnStackPlugin.prototype._removeColumnStackOptions = function(colIndex) {
-	var stacking = this._getColumnStacking(colIndex);
-	if(stacking) {
-		stacking["stackOpt"] = null;
+	var refObj = this._getUniqueRef(colIndex);
+	if(refObj) {
+		refObj["stackOpt"] = null;
 	}
 };
 /** @private
@@ -492,28 +561,12 @@ ColumnStackPlugin.prototype._setColumnVisibility = function(colIndex, shown) {
 	}
 };
 /** @private
-* @param {number} colIndex
-* @param {number} destIndex
-*/
-ColumnStackPlugin.prototype._moveColumn = function(colIndex, destIndex) {
-	if(colIndex >= 0 && destIndex >= 0 && colIndex !== destIndex) {
-		for(var i = this._hosts.length; --i >= 0;) {
-			this._hosts[i].moveColumn(colIndex, destIndex);
-		}
-	}
-};
-/** @private
-* @param {Array.<object>} stackRefs
+* @param {Array.<Object>} stackRefs
 */
 ColumnStackPlugin.prototype._moveStackedColumns = function (stackRefs) {
-	var len = stackRefs.length;
-	for(var i = 1; i < len; ++i) {
-		var fromIndex = this._getColumnIndex(stackRefs[i]);
-		var destIndex = this._getColumnIndex(stackRefs[0]); // Active Column may be shifted due to the move
-		if(fromIndex < destIndex){
-			destIndex -= 1;
-		}
-		this._moveColumn(fromIndex, destIndex + i);
+	var ary = this._getColumnIndices(stackRefs);
+	if(ary.length > 1) {
+		this.reorderColumns(ary, ary[0]);
 	}
 };
 /** @private
@@ -709,13 +762,7 @@ ColumnStackPlugin.prototype.getMemberIndices = function(colIndex) {
 		return null;
 	}
 
-	var stackRefs = colData.stackRefs;
-	var len = stackRefs.length;
-	var indices = [];
-	for(var i = 0; i < len; ++i) {
-		indices.push(this._getColumnIndex(stackRefs[i]));
-	}
-	return indices;
+	return this._getColumnIndices(colData.stackRefs);
 };
 /** @public
 * @param {number} colIndex
@@ -943,9 +990,10 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 
 	// Save stack fields for
 	if(this._autoStacking){
-		var columnStack = this._columnStack || {};
-		columnStack[sid] = fields;
-		this._columnStack = columnStack;
+		if(!this._idToFields) {
+			this._idToFields = {};
+		}
+		this._idToFields[sid] = fields;
 	}
 
 	var len = colRefs.length;
@@ -977,7 +1025,7 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 	for(i = 0; i < len; ++i) {
 		colIndex = colRefs[i];
 		this._setColumnStackOptions(colIndex, stack);
-		stack.stackRefs[i] = this._getColumnStacking(colIndex);
+		stack.stackRefs[i] = this._getUniqueRef(colIndex);
 
 		if(colIndex == activeIndex){
 			stack.activeColumn = stack.stackRefs[i];
@@ -1085,8 +1133,8 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 			this._setColumnVisibility(colIndex, true);
 		}
 
-		if(this._autoStacking) {
-			delete this._columnStack[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
 	}
@@ -1104,23 +1152,21 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 
 	return dirty;
 };
-/** @public
-* @param {boolean=} enableUpdateUI set false if you want to remove without update UI
-* @return {boolean} true if at least one stacking removed
+/** @private
+* @param {string} stackId
+* @return {boolean} Returns true if there is any change
 */
-ColumnStackPlugin.prototype.removeAllStacks = function(enableUpdateUI) {
-	var disableUpdateUI = enableUpdateUI === false;
-	var dirty = false;
-	for(var sid in this._stacks) {
-		var stack = this._stacks[sid];
-		dirty = true;
-
-		var stackRefs = stack.stackRefs;
+ColumnStackPlugin.prototype._removeStack = function(stackId) {
+	var stack = this._stacks[stackId];
+	if(!stack) {
+		return false;
+	}
 
-		var len = stackRefs.length;
-		for(var i = 0; i < len; ++i) {
-			var stackRef = stackRefs[i];
-			var colIndex = this._getColumnIndex(stackRef);
+	var colIndices = this._getColumnIndices(stack.stackRefs);
+	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);
 			}
@@ -1128,10 +1174,38 @@ ColumnStackPlugin.prototype.removeAllStacks = function(enableUpdateUI) {
 			this._setColumnVisibility(colIndex, true);
 		}
 	}
+	return true;
+};
+/** @public
+* @param {string} stackId
+* @return {boolean} Returns true if there is any change
+*/
+ColumnStackPlugin.prototype.removeStack = function(stackId) {
+	if(this._idToFields) {
+		if(this._idToFields[stackId]) {
+			delete this._idToFields[stackId];
+		}
+	}
+	if(this._removeStack(stackId)) {
+		this._updateUI();
+		return true;
+	}
+	return false;
+};
+/** @public
+* @param {boolean=} enableUpdateUI=true Set false if you want to remove without update UI
+* @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);
+	}
 	if(dirty) {
-		this._columnStack = {};
+		this._idToFields = null;
 		this._stacks = {};
-		if(!disableUpdateUI) {
+		if(enableUpdateUI !== false) {
 			this._updateUI(); // asyncronous
 		}
 	}
@@ -1210,15 +1284,15 @@ ColumnStackPlugin.prototype._onColumnRemoved = function (e) {
 	var colData = /** @type{Object} */(e.columnData);
 	if(!colData) { return; }
 
-	var stacking = colData["stack"];
-	if(!stacking) { return; }
+	var stackRef = colData["stack"];
+	if(!stackRef) { return; }
 
-	var stackOpt = stacking["stackOpt"];
+	var stackOpt = stackRef["stackOpt"];
 	if(!stackOpt) { return; }
 
 	// update members
 	if(stackOpt.stackRefs) {
-		var index = stackOpt.stackRefs.indexOf(stacking);
+		var index = stackOpt.stackRefs.indexOf(stackRef);
 		if(index > -1) {
 			stackOpt.stackRefs.splice(index, 1);
 			if(stackOpt.stackRefs.length < 2) {
@@ -1248,6 +1322,10 @@ ColumnStackPlugin.prototype._onColumnRemoved = function (e) {
 * @param {Object} e
 */
 ColumnStackPlugin.prototype._onColumnMoved = function (e) {
+	if(this._stacking) { // during the stacking, there is no need to recalculate stacks
+		return;
+	}
+
 	var toIndex = e.toColIndex;
 	var stackOpt = this._getColumnStackOptions(toIndex);
 
@@ -1256,7 +1334,7 @@ ColumnStackPlugin.prototype._onColumnMoved = function (e) {
 		return;
 	}
 
-	var stackRef = this._getColumnStacking(toIndex);
+	var stackRef = this._getUniqueRef(toIndex);
 
 	var leftStackOpt = this._getColumnStackOptions(toIndex - 1);
 	var rightStackOpt = this._getColumnStackOptions(toIndex + 1);
@@ -1265,7 +1343,7 @@ ColumnStackPlugin.prototype._onColumnMoved = function (e) {
 	if(stackOpt) {
 		if(stackOpt === leftStackOpt) {
 			leftStackOpt.stackRefs.splice(leftStackOpt.stackRefs.indexOf(stackRef), 1);
-			leftColStackRef = this._getColumnStacking(toIndex - 1);
+			leftColStackRef = this._getUniqueRef(toIndex - 1);
 			index = leftStackOpt.stackRefs.indexOf(leftColStackRef);
 			if(index > -1) {
 				leftStackOpt.stackRefs.splice(index + 1, 0, stackRef);
@@ -1279,7 +1357,7 @@ ColumnStackPlugin.prototype._onColumnMoved = function (e) {
 			return;
 		} else if(stackOpt === rightStackOpt) {
 			rightStackOpt.stackRefs.splice(rightStackOpt.stackRefs.indexOf(stackRef), 1);
-			var rightColStackRef = this._getColumnStacking(toIndex + 1);
+			var rightColStackRef = this._getUniqueRef(toIndex + 1);
 			index = rightStackOpt.stackRefs.indexOf(rightColStackRef);
 			if(index > -1) {
 				rightStackOpt.stackRefs.splice(index, 0, stackRef);
@@ -1342,7 +1420,7 @@ ColumnStackPlugin.prototype._onColumnMoved = function (e) {
 	rightStackOpt = this._getColumnStackOptions(rIndex);
 	if(leftStackOpt && leftStackOpt.spreading &&
 		(leftStackOpt === rightStackOpt)) {
-		leftColStackRef = this._getColumnStacking(toIndex - 1);
+		leftColStackRef = this._getUniqueRef(toIndex - 1);
 		index = leftStackOpt.stackRefs.indexOf(leftColStackRef);
 		if(index > -1) {
 			leftStackOpt.stackRefs.splice(index + 1, 0, stackRef);
@@ -1366,20 +1444,21 @@ ColumnStackPlugin.prototype._onColumnMoved = function (e) {
 */
 ColumnStackPlugin.prototype._onColumnAdded = function (e) {
 	var colIndex = e.colIndex;
-	this._setColumnStacking(colIndex, {});
+	this._setUniqueRef(colIndex, {});
 
-	var columnStack = this._columnStack;
-	if (columnStack) {
-		this._setStack();  //asynchronous
-	} else {
+	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._getColumnStacking(colIndex - 1);
-			var stackRef = this._getColumnStacking(colIndex);
+			var leftColStackRef = this._getUniqueRef(colIndex - 1);
+			var stackRef = this._getUniqueRef(colIndex);
 			var index = leftStackOpt.stackRefs.indexOf(leftColStackRef);
-			if(index > -1) {
+			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);
@@ -1414,10 +1493,9 @@ ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
 	var activeIndex = stackRefs.indexOf(colData.activeColumn);
 
 	var len = stackRefs.length;
-	var colIndices = new Array(len);
+	var colIndices = this._getColumnIndices(stackRefs);
 	var menuData = new Array(len);
 	for(var i = len; --i >= 0;) {
-		colIndices[i] = this._getColumnIndex(stackRefs[i]);
 		menuData[i] = {
 			value: i,
 			selected: i === activeIndex,
@@ -1438,12 +1516,12 @@ ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
 /** Remove existing stacks and apply persist stack
 * @private
 */
-ColumnStackPlugin.prototype._setStack = function() {
+ColumnStackPlugin.prototype._requestStackingByFields = function() {
 	if(this._stackConflator.conflate()) {
 		return;
 	}
 
-	var columnStack = this._columnStack;
+	var columnStack = this._idToFields;
 	if(columnStack){
 		this.removeAllStacks(false);
 		for(var sid in columnStack){
@@ -1462,19 +1540,13 @@ ColumnStackPlugin.prototype._setStack = function() {
 * @return {!Array.<number>} Member column indices
 */
 ColumnStackPlugin.prototype.getStackMemberIndices = function(stackId) {
-	var memberIndices = [];
-	if(stackId !== null) {
+	if(stackId) {
 		var stack = this._stacks[stackId];
 		if(stack){
-			var stackRefs = stack.stackRefs;
-			for(var i = 0; i < stackRefs.length; ++i) {
-				var stackRef = stackRefs[i];
-				var colIndex = this._getColumnIndex(stackRef);
-				memberIndices.push(colIndex);
-			}
+			return this._getColumnIndices(stack.stackRefs);
 		}
 	}
-	return memberIndices;
+	return [];
 };
 
 /** @public
@@ -1571,7 +1643,7 @@ ColumnStackPlugin.prototype.addColumnToStack = function(colRef, stackId) {
 
 	// apply stacking
 	this._setColumnStackOptions(colRef, stack);
-	stack.stackRefs.push(this._getColumnStacking(colRef));
+	stack.stackRefs.push(this._getUniqueRef(colRef));
 
 	if(stack.spreading) {
 		stack.activeColumn = stack.stackRefs[stack.stackRefs.length - 1];
@@ -1587,58 +1659,58 @@ ColumnStackPlugin.prototype.addColumnToStack = function(colRef, stackId) {
 };
 
 /** @public
-* @description Remove specific column from a stack
+* @description Remove specific column from its own stack
 * @param {number|string} colRef column field or column index
 */
 ColumnStackPlugin.prototype.removeColumnFromStack = function(colRef) {
-	if(typeof colRef === "string") {
-		colRef = this.getColumnIndex(colRef);
-		if(colRef < 0) {
-			return;
-		}
+	var colIndex = (typeof colRef === "string") ? this.getColumnIndex(colRef) : colRef;
+	if(colIndex < 0) {
+		return;
 	}
 
-	var stackId = this.getStackId(colRef);
+	var stackId = this.getStackId(colIndex);
 	var stack = this._stacks[stackId];
 	if(!stack) {
 		return;
 	}
 
-	var stackMembers = this.getStackMemberIndices(stackId);
 	var stackRefs = stack.stackRefs;
-
-	if(stackMembers.length  < 3){
-		this.unstackColumns(stackMembers);
-	} else {
-		var isCollapsed = stack.spreading && stack.collapsed;
-
-		for(var i = 0; i < stackRefs.length; ++i) {
-			var stackRef = stackRefs[i];
-			var colIndex = this._getColumnIndex(stackRef);
-
-			if(colIndex === colRef){
-				if(isCollapsed) {
-					this._collapseMember(stackMembers[i], false);
-				}
-				stackRefs.splice(i, 1);
-				break;
+	var memberCount = stackRefs.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
+				// This assumes that the column order is already in correct position
+				this.moveColumnById(colIndex, this._getColumnIndex(stackRefs[1]) + 1);
 			}
 		}
+		this.removeStack(stackId); // updateUI will be called
+		return;
+	}
 
-		this._removeColumnStackOptions(colRef);
-		this._setColumnVisibility(colRef, true);
-
-		if(stack.spreading) {
-			stack.activeColumn = stackRefs[stackRefs.length - 1];
-			stack.collapsed = isCollapsed;
-		} else {
-			stack.activeColumn  = stackRefs[0];
+	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
 		}
-		this._stacks[stackId] = stack;
+		stackRefs.splice(memberIdx, 1); // WARNING: colIndices is out of sync with stackRefs after this line
+	}
 
-		this._moveStackedColumns(stack.stackRefs);
-		this._updateUI();
+	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
+
+	this.moveColumnById(colIndex, colIndices[memberCount - 1] + 1); // This assumes that the column order is already in correct position
+	this._updateUI();
 };
 
 /** @public
@@ -1742,6 +1814,70 @@ ColumnStackPlugin.prototype.getActiveColumnField = function(stackId) {
 	return field;
 };
 
+/** @public
+* @param {string} stackId
+* @param {number|string} colRef Column field or column index
+*/
+ColumnStackPlugin.prototype.addStackChild = function(stackId, colRef) {
+	this.addColumnToStack(colRef, stackId);
+};
+/**
+* @public
+* @param {string} stackId
+* @param {number|string} colRef Column field or column index
+*/
+ColumnStackPlugin.prototype.removeStackChild = function(stackId, colRef) {
+	var colIndex = (typeof colRef === "string") ? this.getColumnIndex(colRef) : colRef;
+	if(colIndex >= 0) {
+		if(stackId === this.getStackId(colIndex)) {
+			this.removeColumnFromStack(colIndex);
+		}
+	}
+};
+/** @public
+* @function
+* @param {number|string} colRef Column field or column index
+*/
+ColumnStackPlugin.prototype.unsetParent = ColumnStackPlugin.prototype.removeColumnFromStack;
+
+/** Move and reorder the specified columns to position before the destination
+* @public
+* @param {Array.<number|string>} colList Column list to be reordered
+* @param {(number|string)=} destCol Destination column id or index
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.reorderColumns = function(colList, destCol) {
+	var dirty = false;
+	this._stacking = false;
+
+	var gridApi = this.getGridApi();
+	if(gridApi && gridApi.reorderColumns) {
+		dirty = gridApi.reorderColumns(colList, destCol); // TODO: Support multi-table feature
+	}
+
+	this._stacking = true;
+	return dirty;
+};
+/** Move the specified column to position before the destination
+* @public
+* @param {number|string} srcCol Source column id or index
+* @param {(number|string)=} destCol Destination column id or index
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.moveColumnById = function(srcCol, destCol) {
+	var dirty = false;
+	this._stacking = false;
+
+	var gridApi = this.getGridApi();
+	if(gridApi && gridApi.moveColumnById) {
+		dirty = gridApi.moveColumnById(srcCol, destCol); // TODO: Support multi-table feature
+	}
+
+	this._stacking = true;
+	return dirty;
+};
+
+
 
 export default ColumnStackPlugin;
 export { ColumnStackPlugin, ColumnStackPlugin as ColumnStack, ColumnStackPlugin as ColumnStackExtension };