@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

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

@@ -0,0 +1,2155 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+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";
+
+/** @typedef {Object} ColumnStackPlugin~Options
+* @description Available options describing `columnStack` object specified in grid's option
+* @property {Array.<string>} fields Fields for stacking. The minimum is 2 fields
+* @property {Array.<ColumnStackPlugin~StackDefinition>} stacks List of stacking configuration
+* @property {boolean=} autoStacking Deprecated. Stacks are automatically maintained as long as its members exist
+* @property {Function=} clicked=null Event handler when user clicks on stack/expanding icon
+* @property {Element=} menuElement Element used to display a column selection list
+* @property {Function=} menuItemClicked When the menuElement is specified and menu item is clicked, an event handler is called
+*/
+
+/** @typedef {Object} ColumnStackPlugin~ColumnOptions
+* @description Extension column options that can be specified on each individual grid's column option.
+* @property {string=} stackId Group ID
+* @property {(string|ColumnStackPlugin~StackOptions)=} stack Group ID or StackOptions object
+*/
+
+/** @typedef {Object} ColumnStackPlugin~StackOptions
+* @description Available options describing grouped column displaying
+* @property {string} id Group ID
+* @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
+*/
+
+/** @typedef {Object} ColumnStackPlugin~StackDefinition
+* @description Available options for setting stack
+* @property {string} id Group Id
+* @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 {Array.<string>=} children=null List of column Ids for the stack members. String in this array is assumed to be column ids
+* @property {Array.<string>=} fields=null List of column fields for the stack members. This will override children property
+* @property {string=} name="" Name defined for specific stack
+* @property {string=} activeColumn="" Column Id or field of the active column.
+*/
+
+/** @typedef {Object} ColumnStackPlugin~StackConfiguration
+* @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, column id, or field for set as active column
+*/
+
+/** @event ColumnStackPlugin#clicked
+* @description Fired when user clicks on stack/expanding icon
+* @type {Object}
+* @property {number} colIndex The column index that was clicked
+* @property {number} rowIndex The row index that was clicked
+* @property {Array.<Object>} menuData Data for populating context menu
+* @property {number} activeIndex The index of the item in the menuData that corresponds to the active column
+* @property {Array.<number>} columnIndices Members column index
+* @property {number} activeColIndex The column index that is currently active
+* @property {Event} event Native event argument from click event
+* @property {boolean} spreading True if the column being clicked is a member of the collapsing group
+* @property {boolean} collapsed True If the clicked group is collapsed
+*/
+
+/** @private
+* @function
+* @param {Object} indexMap
+* @param {*} refA
+* @param {*} refB
+* @return {number}
+*/
+let _indexSorter = function(indexMap, refA, refB) {
+	let numA = indexMap[refA];
+	let numB = indexMap[refB];
+	if(numA === numB) {
+		return 0;
+	}
+	if(numA < 0) {
+		return 1;
+	}
+	if(numB < 0) {
+		return -1;
+	}
+	return numA - numB;
+};
+/** @private
+* @function
+* @param {Object} indexMap
+* @param {*} refA
+* @return {boolean}
+*/
+let _byValidIndex = function(indexMap, refA) {
+	return indexMap[refA] >= 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
+*/
+let _resolveActiveColumn = function(stackOpt) {
+	if(stackOpt) {
+		let children = stackOpt.children;
+		if(children && children.length) {
+			let activeColumn = stackOpt.activeColumn;
+			if(!activeColumn || children.indexOf(activeColumn) < 0) {
+				stackOpt.activeColumn = stackOpt.spreading ? children[children.length - 1] : children[0];
+				return true;
+			}
+		}
+	}
+	return false;
+};
+
+/** @constructor
+* @extends {GridPlugin}
+*/
+let ColumnStackPlugin = function () {
+	this._onPreSectionRender = this._onPreSectionRender.bind(this);
+	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._onMenuItemClicked = this._onMenuItemClicked.bind(this);
+
+	this._onStackButtonClicked = this._onStackButtonClicked.bind(this);
+	this._updateUI = this._updateUI.bind(this);
+	this._toColumnId = this._toColumnId.bind(this);
+	this._requestFilterRefresh = this._requestFilterRefresh.bind(this);
+
+	this._hosts = [];
+	this._groupDefs = new GroupDefinitions();
+
+	this._filterConflator = new Conflator(50, this._requestFilterRefresh);
+	this._conflator = new Conflator(50, this._updateUI);
+};
+
+Ext.inherits(ColumnStackPlugin, GridPlugin);
+
+/** @type {!GroupDefinitions}
+* @private
+*/
+ColumnStackPlugin.prototype._groupDefs;
+/** @type {Object.<string, string>}
+* @private
+*/
+ColumnStackPlugin.prototype._pendingStacks;
+/** @type {Object.<string, string>}
+* @private
+*/
+ColumnStackPlugin.prototype._usingField = false;
+
+/** @type {boolean}
+* @private
+*/
+ColumnStackPlugin.prototype._updating = false;
+
+/** @type {number}
+* @private
+*/
+ColumnStackPlugin.prototype._inReordering = 0;
+/** @type {boolean}
+* @private
+*/
+ColumnStackPlugin.prototype._inResetting = false;
+/** @type {Element}
+* @private
+*/
+ColumnStackPlugin.prototype._menuElement = null;
+/** @type {Function}
+* @private
+*/
+ColumnStackPlugin.prototype._menuItemClicked = null;
+
+/** @type {number}
+* @private
+*/
+ColumnStackPlugin._runningId = 0;
+/** @private
+ * @return {string}
+ */
+ColumnStackPlugin.prototype._generateStackId = function() {
+	let sid = "Stack" + ColumnStackPlugin._runningId++;
+	while(this._groupDefs.getGroup(sid)) {
+		sid = "Stack" + ColumnStackPlugin._runningId++;
+	}
+	return sid;
+};
+
+/** @override
+* @return {string}
+*/
+ColumnStackPlugin.prototype.getName = function () {
+	return "ColumnStackPlugin"; // Readonly
+};
+/** @override
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.hasMultiTableSupport = function() {
+	return true;
+};
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+ColumnStackPlugin.prototype.initialize = function (host, options) {
+	if(this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	if(options) {
+		if(options["icons"]) {
+			let icons = options["icons"]["columnStack"];
+			if(icons) {
+				this._stackIconName = icons["stack"];
+				this._expandIconName = icons["expand"];
+				this._collapseIconName = icons["collapse"];
+			}
+		}
+
+		let opt = options["columnStack"];
+		if(opt && this._hosts.length === 1) {
+			let menuElement = opt["menuElement"];
+			if(menuElement && typeof menuElement === "object" && menuElement.nodeType === 1) {
+				menuElement.addEventListener("item-trigger", this._onMenuItemClicked);
+				this._menuElement = menuElement;
+			}
+
+			let menuItemClicked = opt["menuItemClicked"];
+			if(typeof menuItemClicked === "function") {
+				this._menuItemClicked = menuItemClicked;
+			}
+		}
+	}
+
+	ColumnStackPlugin._applyThemeColor(host);
+
+	if(this._hosts.length === 1) {
+		this.config(options); // WARNING: Configure only for the first host
+		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);
+
+	// In case of lazy loading
+	// DO something
+};
+/** @public
+* @param {Object} host core grid object
+*/
+ColumnStackPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+	this._hosts.splice(at, 1);
+
+	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._menuElement) {
+		this._menuElement.removeEventListener("item-trigger", this._onMenuItemClicked);
+	}
+
+	if(this._hosts.length <= 0) {
+		this._conflator.reset();
+		this._filterConflator.reset();
+		this._groupDefs.removeAllGroups();
+	}
+	this._dispose();
+};
+
+/** @private
+* @type {string}
+*/
+ColumnStackPlugin._styles = prettifyCss([
+	".tr-grid .collapsed .cell.grouping .valigner", [
+		"width: 0;"
+	],
+	".tr-grid .collapsed .cell.grouping .floating-panel", [
+		"width: 100%;",
+		"margin: 0;",
+		"justify-content: center;"
+	],
+	".tr-grid .collapsed .cell.grouping .front-panel," +
+	".tr-grid .collapsed .cell.grouping .floating-panel *:not(.stack-icon)," +
+	".tr-grid .collapsed .cell.grouping .sort-symbol", [ // V3 Hide arrow sorting in collapse state in speading mode
+		"display: none;"
+	],
+	".floating-panel .stack-icon", [
+		"cursor: pointer;" // change the mouse cursor on the collapsed stack icon to allow for expansion but disallow sorting
+	],
+	".tr-grid .collapsed .cell.grouping .floating-panel .stack-icon", [
+		"margin-left: 0;",
+		"margin-right: 0;"
+	],
+	".stack-icon", [
+		"color: var(--grid-title-filter-icon-color);"
+	],
+	".stack-icon:hover", [
+		"color: var(--grid-title-filter-icon-hover-color);"
+	]
+]);
+
+/** @private
+* @param {Object} grid core grid object
+*/
+ColumnStackPlugin._applyThemeColor = function(grid) {
+	if(!grid._columnStackingStyles) {
+		grid._columnStackingStyles = true;
+		injectCss(ColumnStackPlugin._styles, grid.getElement());
+	}
+};
+
+/** @public
+* @param {Object=} options
+*/
+ColumnStackPlugin.prototype.config = function (options) {
+	if(!options) { return; }
+
+	let columns = options["columns"];
+	if(!columns) {
+		columns = [];
+	}
+
+	let i;
+	let colCount = columns.length;
+
+	let columnStack = options.columnStack;
+	let stackId = "";
+	let stacks = {};
+	let hasStack = false;
+	let stackConfig = null;
+	if(columnStack) {
+		this.addListener(columnStack, "clicked");
+		this._usingField = false;
+
+		if(columnStack.fields && columnStack.fields.length > 1) {
+			this._usingField = true;
+
+			hasStack = true;
+			stackId = this._generateStackId(); // TODO: Stack id may need to be hardcoded
+			stacks[stackId] = {
+				id: stackId,
+				spreading: columnStack.spreading === true,
+				collapsed: columnStack.collapsed !== false,
+				fields: columnStack.fields
+			};
+		} else if(columnStack.stacks && columnStack.stacks.length) {
+			hasStack = true;
+			let stackLen = columnStack.stacks.length;
+			for(i = 0; i < stackLen; i++){
+				stackConfig = columnStack.stacks[i];
+				stackId = stackConfig.id || this._generateStackId();
+				if(stackConfig.collapsed == null){ // TODO: consolidate with the above
+					stackConfig.collapsed = true;
+				}
+				if(stackConfig.spreading == null){
+					stackConfig.spreading = false;
+				}
+				stacks[stackId] = stackConfig;
+			}
+		}
+	}
+
+	if(!hasStack) {
+		for(i = 0; i < colCount; ++i) {
+			let column = columns[i];
+			let stackOpt = column["stackId"] || column["stack"];
+			if(!stackOpt) {
+				continue;
+			}
+
+			stackId = "";
+			let spreading = false;
+			let collapsed = true;
+			let activeColumn = "";
+			if(typeof stackOpt === "string") {
+				stackId = stackOpt;
+			} else if(typeof stackOpt === "object") {
+				stackConfig = stackOpt;
+				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) {
+				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;
+				}
+				if(!stackOpt.children) {
+					stackOpt.children = [];
+				}
+				stackOpt.children.push(i);
+			}
+		}
+	}
+
+	if(this._initializedGrid) {
+		this._applyUserConfigs(hasStack ? stacks : null);
+	} else {
+		this._pendingStacks = this._pendingStacks || stacks;
+	}
+};
+
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	// TODO: Handle the case where pendingStacks has not been applied
+	let stackOptions = this.getStacks();
+
+	if(stackOptions.length) {
+		obj.columnStack = {};
+		obj.columnStack.stacks = stackOptions;
+	}
+	return obj;
+};
+
+/** @override
+* @ignore
+*/
+ColumnStackPlugin.prototype._afterInit = function () {
+	if(this._pendingStacks) {
+		this._applyUserConfigs(this._pendingStacks);
+		this._pendingStacks = null;
+	}
+	// In case of lazy loading
+	// DO something
+};
+
+/** @private
+* @param {*} colRef
+* @return {string} column id
+*/
+ColumnStackPlugin.prototype._toColumnId = function(colRef) {
+	if(typeof colRef !== "string") {
+		if(typeof colRef === "number") {
+			return this.getColumnId(colRef);
+		}
+		return "";
+	}
+	return colRef || "";
+};
+/** @private
+* @param {Object=} stacks
+*/
+ColumnStackPlugin.prototype._applyUserConfigs = function(stacks) {
+	if(stacks) {
+		this.removeAllStacks(false); // No UI update
+		for(let stackId in stacks) {
+			let stack = stacks[stackId];
+			let children = stack.children;
+			let fields = stack.fields;
+			if(fields) { // Convert all fields and indices to column Ids
+				this._usingField = true;
+				children = fields; // override children with fields
+			}
+			this.stackColumns(children, stackId, stack);
+		}
+	} else {
+		this.removeAllStacks(); // with UI update
+	}
+};
+
+/** @private
+* @param {number} colIndex
+* @return {Object}
+*/
+ColumnStackPlugin.prototype._getColumnStackOptions = function(colIndex) {
+	if(colIndex >= 0 && colIndex < this.getColumnCount()) {
+		let colId = this.getColumnId(colIndex);
+		return this._groupDefs.getParentGroup(colId) || null;
+	}
+	return null;
+};
+/** @private
+* @return {!Array.<number>} Sorted column indices
+*/
+ColumnStackPlugin.prototype._getSelectedColumns = function() {
+	let 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 hidden
+	}
+	// WARNING: activeIndex may not be valid
+	let activeIndex = (typeof activeRef === "number") ? activeRef : this.getColumnIndex(stack.activeColumn);
+	let colIndices = null;
+	if(typeof colRefs === "number") {
+		colIndices = [colRefs];
+	} else if(colIndices == null) {
+		colIndices = this.getColumnIndices(stack.children);
+	} else {
+		colIndices = colRefs;
+	}
+	let validCount = colIndices.length;
+	for(let i = 0; i < validCount; ++i) {
+		let colIndex = colIndices[i];
+		if(colIndex !== activeIndex) {
+			this._setColumnVisibility(colIndex, false); // Hide a column
+		}
+	}
+};
+/** @private
+* @param {number} colIndex
+* @param {boolean} shown
+*/
+ColumnStackPlugin.prototype._setColumnVisibility = function(colIndex, shown) {
+	if(colIndex >= 0) {
+		let dirty = false;
+		for(let g = this._hosts.length; --g >= 0;) {
+			dirty |= this._hosts[g].setColumnVisibility(colIndex, shown, 2);
+		}
+
+		if(dirty){
+			this._requestFilterRefresh();
+		}
+	}
+};
+/** @private */
+ColumnStackPlugin.prototype._requestFilterRefresh = function() {
+	if(this._filterConflator.conflate()) {
+		return;
+	}
+	let rfp = this._getPlugin("RowFilteringPlugin");
+	if(rfp && rfp["refresh"]) {
+		rfp["refresh"]();
+	}
+};
+/** @private
+* @param {Array} colRefs Array of column index, id, or field
+*/
+ColumnStackPlugin.prototype._moveStackedColumns = function (colRefs) {
+	let colIndices = this.getColumnIndices(colRefs);
+	if(colIndices.length > 1) {
+		this.reorderColumns(colIndices, colIndices[0]);
+	}
+};
+/** @private
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype._isIconAvailable = function() {
+	return ElfUtil.hasComponent("ef-icon") &&
+		(ElfUtil.hasTheme("elf-theme-solar") ||
+		ElfUtil.hasTheme("elf-theme-luna"));
+};
+/** @private
+* @param {number} colIndex
+* @param {Object} stackOpt
+*/
+ColumnStackPlugin.prototype._updateIcon = function(colIndex, stackOpt) {
+	let spreading = (stackOpt) ? stackOpt.spreading : false;
+	let gridCount = this._hosts.length;
+
+	for(let g = 0; g < gridCount; ++g) {
+		let host = this._hosts[g];
+		let tSect = host.getSection("title");
+		let rowCount = tSect.getRowCount();
+		let cell = tSect.getCell(colIndex, rowCount - 1, true);
+		if(!cell) { continue; }
+
+		let stackIcon = cell._stackIcon;
+		if(stackOpt) {
+			let activeStackedColumn = this.isActiveStackedColumn(colIndex);
+			if(!stackIcon && activeStackedColumn) {
+				if(spreading) {
+					cell.addClass("grouping");
+					if(this._expandIconName) {
+						if(stackOpt.collapsed) {
+							stackIcon = Icon.create(this._expandIconName);
+						} else {
+							stackIcon = Icon.create(this._collapseIconName);
+						}
+					} else {
+						if(stackOpt.collapsed) {
+							stackIcon = Dom.text(">");
+						} else {
+							stackIcon = Dom.text("<");
+						}
+					}
+				} else {
+					cell.addClass("stacking");
+					if(this._stackIconName) {
+						stackIcon = Icon.create(this._stackIconName);
+					} else {
+						stackIcon = Dom.text("\u2261");
+						stackIcon.style.fontSize = "1.3em";
+					}
+				}
+				stackIcon.className = "stack-icon";
+				stackIcon.addEventListener("click", this._onStackButtonClicked, false);
+				stackIcon.addEventListener("dblclick", preventDefault, false);
+				stackIcon.addEventListener("mousedown", preventDefault, false);
+				stackIcon.addEventListener("keydown", preventDefault, false);
+
+				cell.insertFloatingIcon(stackIcon, 20);
+				cell._stackIcon = stackIcon;
+
+				this._dispatch("iconCreated", {"icon": stackIcon, "colIndex": colIndex, "grid": host, "cell": cell});
+			} else if(stackIcon && !activeStackedColumn) {
+				cell.removeFloatingIcon(cell._stackIcon);
+				cell._stackIcon = null;
+			}
+		} else if(stackIcon) {
+			cell.removeFloatingIcon(cell._stackIcon);
+			cell._stackIcon = null;
+
+			// Do not know the previous stacking mode so it needs to remove all the classes here.
+			cell.removeClass("grouping");
+			cell.removeClass("stacking");
+		}
+	}
+};
+/** @private */
+ColumnStackPlugin.prototype._updateUI = function() {
+	if(this._updating) { // Avoid infinite loop
+		return;
+	}
+	if(this._conflator.conflate()) {
+		return;
+	}
+
+	this._updating = true;
+	let colCount = this.getColumnCount();
+	let gridCount = this._hosts.length;
+	let stackOpt, spreading;
+	for(let c = 0; c < colCount; ++c) {
+		stackOpt = this._getColumnStackOptions(c);
+		spreading = (stackOpt) ? stackOpt.spreading : false;
+		spreading = spreading === true;
+		for(let g = 0; g < gridCount; ++g) {
+			let host = this._hosts[g];
+			host.enableColumnClass(c, "grouped", spreading);
+		}
+
+		this._updateIcon(c, stackOpt);
+		if(stackOpt) {
+			if(stackOpt.spreading) {
+				this._collapseMember(c, stackOpt.collapsed);
+			} else {
+				this._setColumnVisibility(c, this._isActiveStackedColumn(c, stackOpt)); // a little slow
+			}
+		}
+	}
+	this._updating = false;
+};
+/** @private */
+ColumnStackPlugin.prototype._forceUpdateUI = function() {
+	this._conflator.disable();
+	this._updateUI();
+	this._conflator.enable();
+};
+/** @private
+* @param {number} colIndex
+* @param {boolean} collapsed
+*/
+ColumnStackPlugin.prototype._collapseMember = function(colIndex, collapsed) {
+	let stackOpt = this._getColumnStackOptions(colIndex);
+	if(!stackOpt) {
+		return;
+	}
+
+	for(let i = this._hosts.length; --i >= 0;) {
+		let host = this._hosts[i];
+		host.enableColumnClass(colIndex, "collapsed", collapsed);
+
+		if(this.isActiveStackedColumn(colIndex)) {
+			host.setColumnVisibility(colIndex, true, 2);
+			let tSect = host.getSection("title");
+			let rowCount = tSect.getRowCount();
+			let cell = tSect.getCell(colIndex, rowCount - 1, true);
+			if(collapsed) {
+				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);
+
+				if(cell._stackIcon) {
+					if(this._expandIconName) {
+						cell._stackIcon.setAttribute("icon", "right");
+					} else {
+						cell._stackIcon.textContent = ">";
+					}
+				}
+			} else {
+				if(stackOpt._origWidth != null) {
+					host.setColumnWidth(colIndex, stackOpt._origWidth, stackOpt._scalable);
+				}
+
+				if(cell._stackIcon) {
+					if(this._collapseIconName) {
+						cell._stackIcon.setAttribute("icon", "left");
+					} else {
+						cell._stackIcon.textContent = "<";
+					}
+				}
+			}
+		} else {
+			host.setColumnVisibility(colIndex, !collapsed, 2);
+		}
+	}
+};
+/** Get column width that is currently defined in the layout inside grid <br>
+* (not included the effect by this extension). <br>
+* Hidden column still gives positive size as oppose to visibly 0 size
+* @private
+* @param {Object} host core grid object
+* @param {number} colIndex
+* @return {number}
+*/
+ColumnStackPlugin.prototype._getColumnWidth = function(host, colIndex) {
+	if(host) {
+		let min = host.getMinimumColumnWidth(colIndex);
+		let size = host.getColumnCustomLaneSize(colIndex);
+		return (size < min) ? min : size; // Column width cannot be smaller than min
+	}
+	return NaN;
+};
+/** @public
+* @param {number} colIndex
+* @return {Array.<number>} Null if there is no column data
+*/
+ColumnStackPlugin.prototype.getMemberIndices = function(colIndex) {
+	let stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt) {
+		return this.getColumnIndices(stackOpt.children);
+	}
+	return null;
+};
+/** @public
+* @param {number} colIndex
+* @param {boolean=} collapsed
+* @return {Array.<number>} Null if it is non-grouped column
+*/
+ColumnStackPlugin.prototype.collapseGroup = function(colIndex, collapsed) {
+	let stackOpt = this._getColumnStackOptions(colIndex);
+	if(!stackOpt) {
+		return null;
+	}
+	if(!stackOpt.spreading) {
+		return null;
+	}
+
+	collapsed = collapsed !== false;
+	if(stackOpt.collapsed !== collapsed) {
+		let groupMembers = this.getColumnIndices(stackOpt.children);
+		if(groupMembers) {
+			for(let j = groupMembers.length; --j >= 0;) {
+				this._collapseMember(groupMembers[j], collapsed);
+			}
+			stackOpt.collapsed = collapsed;
+
+			return groupMembers;
+		}
+	}
+	return null;
+};
+/** @public
+* @param {number} colIndex
+* @return {Array.<number>} Null if it is non-grouped column
+*/
+ColumnStackPlugin.prototype.expandGroup = function(colIndex) {
+	return this.collapseGroup(colIndex, false);
+};
+/** Intended for determining if the selected columns can be stacked from the context menu
+* @public
+* @param {Array.<number>} colIndices
+* @return {boolean} Return true if all of the given columns can be stacked together
+*/
+ColumnStackPlugin.prototype.isColumnStackable = function(colIndices) {
+	if(!colIndices) {
+		return false;
+	}
+	let len = colIndices.length;
+	for(let i = 0; i < len; ++i) {
+		if(this._getColumnStackOptions(colIndices[i])) {
+			return false;
+		}
+	}
+	return true;
+};
+/** Deprecated. Use isColumnInCollection instead.
+* @public
+* @param {Array.<number>=} colIndices
+* @return {boolean} Return true if one of the columns is being stacked
+*/
+ColumnStackPlugin.prototype.isColumnStacked = function(colIndices) {
+	if(!colIndices) {
+		colIndices = this._getSelectedColumns();
+	}
+	let len = colIndices.length;
+	for(let i = 0; i < len; ++i) {
+		if(this._getColumnStackOptions(colIndices[i])) {
+			return true;
+		}
+	}
+	return false;
+};
+/** 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) {
+	let stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt) {
+		return !this._isActiveStackedColumn(colIndex, stackOpt);
+	}
+	return false;
+};
+/** 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) {
+	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 false;
+};
+
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.isStackingMode = function(colIndex) {
+	let stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt) {
+		return stackOpt.spreading !== true;
+	}
+	return false;
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.isCollapsingMode = function(colIndex) {
+	let stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt) {
+		return stackOpt.spreading === true;
+	}
+	return false;
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.isColumnInCollection = function(colIndex) {
+	return this._getColumnStackOptions(colIndex) ? true : false;
+};
+/** Alias of isColumnInCollection
+* @public
+* @function
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.isInCollection = ColumnStackPlugin.prototype.isColumnInCollection;
+/** Return collapsing state in collapsing mode. Always return false for stacking mode
+* @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.isColumnCollapsed = function(colIndex) {
+	let stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt) {
+		return (stackOpt.spreading === true) && (stackOpt.collapsed === true);
+	}
+	return false;
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.isColumnActive = function(colIndex) {
+	let stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt) {
+		if(stackOpt.spreading) {
+			if(!stackOpt.collapsed) {
+				return true;
+			} else {
+				return false;
+			}
+		} else {
+			return colIndex === this.getColumnIndex(stackOpt.activeColumn);
+		}
+	}
+	return false;
+};
+
+/** @public
+* @param {number|string} colRef Column Id, index or field
+* @return {string}
+*/
+ColumnStackPlugin.prototype.getStackId = function(colRef) {
+	let colIndex = (typeof colRef === "number") ? colRef : this.getColumnIndex(colRef);
+	if(colIndex >= 0) {
+		let stackOpt = this._getColumnStackOptions(colIndex);
+		if(stackOpt) {
+			return stackOpt.id || "";
+		}
+	}
+	return "";
+};
+/** @public
+* @param {Array.<number|string>=} colRefs Column Ids, indices, or fields. If not specified, selected columns will be used.
+* @param {string=} stackId Must be unique
+* @param {ColumnStackPlugin~StackConfiguration=} options
+* @return {boolean} Return true if there is any change.
+*/
+ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
+	let updateRequired = false;
+	let sid = stackId;
+	if(sid) {
+		if(this._removeStack(sid)) {
+			// TODO: pinning state are removed and may need to be kept
+			updateRequired = true;
+		}
+	} else {
+		sid = this._generateStackId();
+	}
+
+	if(!colRefs) {
+		colRefs = this._getSelectedColumns();
+	}
+
+	let refCount = colRefs ? colRefs.length : 0;
+	if(refCount < 2) {
+		if(updateRequired) {
+			this._updateUI();
+		}
+		return updateRequired; // Only two or more columns can be stacked
+	}
+
+	if(!options) {
+		options = {};
+	}
+	// Clone user data
+	let isSpreading = options.spreading === true;
+	let isCollapsed = options.collapsed !== false;
+	let activeColumn = options.activeColumn || "";  // field or id
+	// WARNING: fields property in user option is ignored
+	let stack = {};
+	stack.id = sid;
+	stack.name = options.name || "";
+	stack.spreading = isSpreading;
+	stack.collapsed = isCollapsed;
+	stack.activeColumn = activeColumn; // field or id
+
+	// If grid is not initialized, add setting to pending stacks
+	if(!this._initializedGrid) {
+		let pendingStacks = this._pendingStacks;
+		if(!pendingStacks) {
+			pendingStacks = this._pendingStacks = {};
+		}
+		stack.children = colRefs;
+		pendingStacks[sid] = stack;
+		return false;
+	}
+
+	let colIndices = this.getColumnIndices(colRefs); // WARNING: Invalid columns are filtered out
+
+	// Prevent columns already in a stack from moving out to another stack
+	if(!this.isColumnStackable(colIndices)) {
+		if(updateRequired) {
+			this._updateUI();
+		}
+		return updateRequired;
+	}
+
+	// WARNING: Invalid columns are filtered out
+	let children = colIndices.map(this._toColumnId); // All fields and indices from colRefs will be converted to column Ids
+	stack.children = children; // Note: children property now contains only valid column ids
+
+	let activeIndex = -1;
+	if(activeColumn && typeof activeColumn === "string") {
+		activeIndex = this.getColumnIndex(activeColumn);
+		stack.activeColumn = activeColumn = this.getColumnId(activeIndex); // Convert field or invalid column id to a valid id
+	} else if(typeof activeColumn === "number"){
+		activeIndex = activeColumn;
+	}
+
+	if(_resolveActiveColumn(stack)) {
+		activeColumn = stack.activeColumn;
+		activeIndex = this.getColumnIndex(activeColumn);
+	}
+
+	this._hideStackedColumns(stack, colIndices, activeIndex);
+
+	// Make sure that all columns stay packed together
+	this.reorderColumns(colIndices, colIndices[0]);
+
+	// Update column selection
+	let validCount = colIndices.length;
+	if(!isSpreading) {
+		let csp = this._getPlugin("ColumnSelectionPlugin");
+		if(csp && csp.isEnabled()){
+			let stackSelection = false;
+			for(let i = 0; i < validCount; ++i){
+				let colIndex = colIndices[i];
+				if(colIndex === activeIndex){
+					continue;
+				}
+				if(csp.isSelectedColumn(colIndex)){
+					stackSelection = true;
+					break;
+				}
+			}
+			if(stackSelection) {
+				csp.selectSingleColumn(activeIndex);
+				if(csp.dispatchSelectionChanged) {
+					csp.dispatchSelectionChanged();
+				}
+			}
+		}
+	}
+
+	this._verifyColumnPinning(stack);
+
+	this._groupDefs.setGroup(sid, stack);
+
+	this._updateUI(); // asyncronuos
+	return true;
+};
+
+/** @private
+* @param {Object} stack
+*/
+ColumnStackPlugin.prototype._verifyColumnPinning = function(stack) {
+	stack.leftPinned = false;
+	stack.rightPinned = false;
+
+	let host = this._hosts[0];
+	let leftPinnedIndex = host.getFrozenColumnCount() - 1;
+	let rightPinnedIndex = host.getFirstPinnedRightIndex();
+	let colCount = this.getColumnCount();
+
+	if(leftPinnedIndex < 0 && rightPinnedIndex === colCount) {
+		return;
+	}
+
+	let colIndices = this.getColumnIndices(stack.children);
+	let min = colIndices[0];
+	let max = colIndices[0];
+	for(let i = 1; i < colIndices.length; i++) {
+		let colIndex = colIndices[i];
+		if(colIndex > max) { max = colIndex; }
+		if(colIndex < min) { min = colIndex; }
+	}
+
+	if(min <= leftPinnedIndex) {
+		stack.leftPinned = true;
+		if(max > leftPinnedIndex) {
+			this._freezeColumn(max, colCount - rightPinnedIndex);
+		}
+	} else if(max >= rightPinnedIndex) {
+		stack.rightPinned = true;
+		if(min < rightPinnedIndex) {
+			this._freezeColumn(leftPinnedIndex, colCount - min);
+		}
+	}
+};
+
+/** @private
+* @param {number} frozenColIndex
+* @param {number=} numRightColumn
+*/
+ColumnStackPlugin.prototype._freezeColumn = function(frozenColIndex, numRightColumn) {
+	let hosts = this._hosts;
+	for(let i = 0; i < hosts.length; i++) {
+		hosts[i].freezeColumn(frozenColIndex, numRightColumn);
+	}
+};
+
+/** @public
+* @description Replace all of the stacking in the Grid with a new one.
+* @param {Array.<number|string>=} colRefs Column Ids, indices, or fields.
+* @param {(number|string)=} activeColRef Column Id, index, or field.
+* @return {boolean} If the stack has been updated, return true.
+*/
+ColumnStackPlugin.prototype.setStack = function(colRefs, activeColRef) {
+	this.removeAllStacks();
+
+	let stackOptions = {};
+	if(activeColRef) {
+		stackOptions.activeColumn = activeColRef;
+	}
+	// WARNING: Id is hardcoded for assign uniqe stacking id
+	this.stackColumns(colRefs, "_uniqueStack", stackOptions);
+
+	return true;
+};
+/** @public
+* @description Remove all existing stacks and apply the given stack definitions to the Grid
+* @param {Array.<ColumnStackPlugin~StackDefinition>} stacks Array of stack definition objects
+*/
+ColumnStackPlugin.prototype.setStacks = function(stacks) {
+	this.removeAllStacks();
+
+	let stackCount = stacks ? stacks.length : 0;
+	for(let i = 0; i < stackCount; ++i) {
+		let stack = stacks[i];
+		if(stack) {
+			if(stack.children) {
+				this.stackColumns(stack.children, stack.id, stack);
+			}
+		}
+	}
+};
+/** @public
+* @description Get stack defintion objects like those returned from getConfigObject
+* @return {!Array.<ColumnStackPlugin~StackDefinition>} Array of stack definition objects
+*/
+ColumnStackPlugin.prototype.getStacks = function() {
+	let stacks = this._groupDefs.getGroupMap();
+	let stackOptions = [];
+
+	for(let stackKey in stacks) {
+		let stackOption = stacks[stackKey];
+		let stackId = stackOption.id;
+
+		let stackConfigObj = {
+			id: stackId
+		};
+		let name = stackOption.name;
+		let collapsed = stackOption.collapsed;
+		let spreading = stackOption.spreading;
+
+		if(name) {
+			stackConfigObj.name = name;
+		}
+		if(collapsed !== true) {
+			stackConfigObj.collapsed = collapsed;
+		}
+		if(spreading !== false) {
+			stackConfigObj.spreading = spreading;
+		}
+
+		if(this._usingField) {
+			let colIndices = this.getStackMemberIndices(stackId);
+			let memberCount = colIndices.length;
+			let fields = new Array(memberCount);
+			for(let i = 0; i < memberCount; ++i) {
+				fields[i] = this.getColumnField(colIndices[i]);
+			}
+			stackConfigObj.fields = fields;
+			stackConfigObj.activeColumn = this.getActiveColumnField(stackId);
+		} else {
+			stackConfigObj.children = this.getStackMemberIds(stackId).slice();
+			if(stackOption.activeColumn) {
+				stackConfigObj.activeColumn = stackOption.activeColumn;
+			}
+		}
+		stackOptions.push(stackConfigObj);
+	}
+	return stackOptions;
+};
+
+/** @public
+* @param {Array.<number>=} colIndices Selected columns will be used, if it is not given
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
+	if(!colIndices) {
+		colIndices = this._getSelectedColumns();
+	}
+
+	let dirty = false;
+	let len = colIndices.length;
+	for(let i = 0; i < len; ++i) {
+		let colIndex = colIndices[i];
+		let stackOpt = this._getColumnStackOptions(colIndex);
+		if(stackOpt) {
+			dirty = true;
+			this._removeStack(stackOpt.id);
+		}
+	}
+	if(dirty) {
+		this._updateUI(); // asyncronuos
+	}
+
+	return dirty;
+};
+/** @private
+* @param {string} stackId
+* @return {boolean} Returns true if there is any change
+*/
+ColumnStackPlugin.prototype._removeStack = function(stackId) {
+	let stack = this._groupDefs.getGroup(stackId);
+	if(!stack) {
+		return false;
+	}
+
+	let colIndices = this.getColumnIndices(stack.children);
+	let len = colIndices.length;
+	for(let i = 0; i < len; ++i) {
+		let 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
+* @param {string} stackId
+* @return {boolean} Returns true if there is any change
+*/
+ColumnStackPlugin.prototype.removeStack = function(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) {
+	let groupIds = this._groupDefs.getGroupIds();
+	let groupCount = groupIds.length;
+	if(groupCount) {
+		for(let i = 0; i < groupCount; ++i) {
+			this._removeStack(groupIds[i]);
+		}
+		this._groupDefs.removeAllGroups(); // TODO: May not necessary
+
+		if(enableUpdateUI !== false) {
+			this._updateUI(); // asyncronous
+		}
+	}
+	return groupCount ? true : false;
+};
+/** If the column is in a stack, the column become an activeColumn of the stack.
+* @public
+* @param {number|string} activeColumn Column index, id, or field
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.setActiveColumn = function(activeColumn) {
+	let colIndex = this.getColumnIndex(activeColumn);
+	if(colIndex < 0) {
+		return false;
+	}
+	let colCount = this.getColumnCount();
+	if(colIndex >= colCount) {
+		return false;
+	}
+
+	let colId = this.getColumnId(colIndex);
+	let stack = this._groupDefs.getParentGroup(colId);
+	if(!stack) {
+		return false;
+	}
+	let chdr = stack.children;
+	let memberIndex = chdr.indexOf(colId);
+	if(memberIndex < 0) {
+		return false;
+	}
+	return this._setActiveColumn(stack, chdr[memberIndex]);
+};
+/** This method is deprecated in favor of setActiveColumn. Make the specified column switch place with the item in the stack.
+* @public
+* @param {number|Event} colRef
+* @param {number} swappingIndex
+* @return {boolean}
+* @see {@link ColumnStackPlugin#setActiveColumn}
+*/
+ColumnStackPlugin.prototype.swapColumn = function(colRef, swappingIndex) {
+	let colIndex = (typeof colRef === "number") ? colRef : this.getColumnIndex(colRef);
+
+	let stackOpt = this._getColumnStackOptions(colIndex);
+	if(!stackOpt) {
+		return false; // Invalid column index
+	}
+	let children = stackOpt.children;
+	if(!children) {
+		return false; // Invalid column type
+	}
+
+	return this._setActiveColumn(stackOpt, children[swappingIndex]);
+};
+/** @private
+* @param {Object} stack Stack object
+* @param {string} newActiveColumn Column id or field
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype._setActiveColumn = function(stack, newActiveColumn) {
+	if(!newActiveColumn) {
+		return false; // Invalid active column
+	}
+	if(newActiveColumn === stack.activeColumn) {
+		return false; // The given index is already active stacked column
+	}
+
+	let prevActiveColumnIndex = this.getColumnIndex(stack.activeColumn);
+	let newActiveColumnIndex = this.getColumnIndex(newActiveColumn);
+	stack.activeColumn = newActiveColumn; // Change active column
+
+	this._setColumnVisibility(newActiveColumnIndex, true);
+	this._setColumnVisibility(prevActiveColumnIndex, false); // Hide current active column
+
+	this._updateIcon(prevActiveColumnIndex, stack);
+	this._updateIcon(newActiveColumnIndex, stack);
+
+	let csp = this._getPlugin("ColumnSelectionPlugin");
+	if(csp && csp.isEnabled()) {
+		csp.selectSingleColumn(newActiveColumnIndex);
+		if(csp.dispatchSelectionChanged) {
+			csp.dispatchSelectionChanged();
+		}
+	}
+	return true;
+};
+
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onPreSectionRender = function (e) {
+	if(e["sectionType"] !== "title") {
+		return;
+	}
+	this._forceUpdateUI();
+};
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onColumnRemoved = function (e) {
+	if(this._inResetting) {
+		return;
+	}
+
+	let colId = e.colId;
+	let stackOpt = this._groupDefs.getParentGroup(colId);
+
+	if(!stackOpt) {
+		return;
+	}
+	// update members
+	let children = stackOpt.children;
+	if(children.length <= 2) {
+		this._removeStack(stackOpt.id);
+		this._updateUI();
+	} else {
+		this._groupDefs.removeGroupChild(stackOpt.id, colId);
+		this._updateActiveColumn(stackOpt); // This may trigger _updateUI
+	}
+};
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onColumnMoved = function (e) {
+	if(this._inReordering || this._inResetting) {
+		if(this._inReordering) {
+			this._inReordering = 2; // Mark dirty
+		}
+		return; // during the reordering or resetting, there is no need to recalculate stacks
+	}
+
+	let toIndex = e.toColIndex;
+	let colId = this.getColumnId(toIndex);
+	let stackOpt = this._groupDefs.getParentGroup(colId);
+	if(!stackOpt) {
+		return;
+	}
+
+	let leftStackOpt = this._getColumnStackOptions(toIndex - 1);
+	let rightStackOpt = this._getColumnStackOptions(toIndex + 1);
+
+	let stackChange = true;
+	let dirty = false;
+	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 {
+				this._removeRefFromStack(stackOpt, colId, toIndex);
+			}
+		}
+		dirty = true;
+	}
+
+	if(stackChange) {
+		if(this._isWithinStack(toIndex)) {
+			if(this._addRefToStack(leftStackOpt, toIndex)) {
+				dirty = true;
+			}
+		}
+	}
+
+	if(dirty) {
+		this._updateUI();
+	}
+};
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onColumnAdded = function (e) {
+	if(this._inResetting) {
+		return;
+	}
+
+	let colIndex = e.colIndex;
+	let stackOpt = this._isWithinStack(colIndex);
+	if(stackOpt) {
+		if(this._addRefToStack(stackOpt, colIndex)) {
+			this._updateUI();
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onBeforeBatchOperation = function (e) {
+	if(e.batchType === "reset") {
+		this._inResetting = true;
+	} else if(e.batchType === "move") {
+		this._inReordering = 1;
+	}
+};
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onAfterBatchOperation = function (e) {
+	let groups, groupCount, i, group;
+	if(e.batchType === "reset") {
+		this._inResetting = false;
+
+		groups = this._groupDefs.getGroups();
+		groupCount = groups.length;
+		for(i = 0; i < groupCount; ++i) {
+			this._repositionMembers(groups[i], true); // validate the group
+		}
+		groups = this._groupDefs.getGroups();
+		groupCount = groups.length;
+		for(i = 0; i < groupCount; ++i) {
+			group = groups[i];
+			this._updateActiveColumn(group);
+			this._hideStackedColumns(group);
+		}
+	} else if(e.batchType === "move") {
+		if(this._inReordering === 2) {
+			groups = this._groupDefs.getGroups();
+			groupCount = groups.length;
+			for(i = 0; i < groupCount; ++i) {
+				this._repositionMembers(groups[i]);
+			}
+		}
+		this._inReordering = 0;
+	}
+};
+/** @private
+* @param {number} colIndex
+* @return {Object} stackOption
+*/
+ColumnStackPlugin.prototype._isWithinStack = function (colIndex) {
+	let leftStackOpt = this._getColumnStackOptions(colIndex - 1);
+	if(leftStackOpt) {
+		let 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) {
+	let colId = this._toColumnId(colIndex);
+
+	this._hideStackedColumns(stackOption, colIndex);
+
+	// Find a position to be placed in the stack
+	let rightColRef = this._toColumnId(colIndex + 1);
+	let children = stackOption.children;
+	let 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} colId For removing state
+* @param {number} colIndex For updating UI
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype._removeRefFromStack = function (stackOption, colId, colIndex) {
+	if(!this._groupDefs.removeGroupChild(stackOption.id, colId)) {
+		return false;
+	}
+
+	let 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
+* @param {boolean=} validate Remove invalid members and stack
+*/
+ColumnStackPlugin.prototype._repositionMembers = function (stackOption, validate) {
+	let children = stackOption.children;
+	let refCount = children ? children.length : 0;
+
+	let indexMap = {};
+	let prevIndex = -1;
+	let dirty = false;
+	let hasInvalid = false;
+	for(let i = 0; i < refCount; i++) {
+		let colRef = children[i];
+		let colIndex = this.getColumnIndex(colRef);
+		indexMap[colRef] = colIndex;
+		if(colIndex >= 0) {
+			if(colIndex < prevIndex) {
+				dirty = true;
+			}
+		} else { // Found invalid member
+			hasInvalid = true;
+		}
+		prevIndex = colIndex;
+	}
+	if(validate && hasInvalid) {
+		children = children.filter(_byValidIndex.bind(null, indexMap));
+		// WARNING: this._groupDefs._childToParent may be out of sync after children are filtered
+		// TODO: Create a new API to rebuild childToParent map
+		this._groupDefs.removeAllChildren(stackOption.id);
+		stackOption.children = children;
+		this._groupDefs.setGroup(stackOption.id, stackOption);
+
+		refCount = children.length;
+	}
+
+	if(refCount < 2) {
+		if(validate) {
+			this._removeStack(stackOption.id);
+			this._updateUI();
+		}
+		return;
+	}
+
+	if(dirty || hasInvalid) {
+		children.sort(_indexSorter.bind(null, indexMap));
+	}
+};
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
+	let elem = e.currentTarget;
+	if(e.button) { // right click or middle click
+		return;
+	}
+
+	let grid = this.getRelativeGrid(e);
+	let pos = grid.getRelativePosition(e);
+	let colIndex = pos["colIndex"];
+	let colData = this._getColumnStackOptions(colIndex);
+	if(!colData) { return; }
+
+	e.stopPropagation();
+
+	let children = colData.children;
+	let colIndices = this.getColumnIndices(children);
+	if(colData.spreading) {
+		let collapsed = !colData.collapsed;
+		this.collapseGroup(colIndex, collapsed);
+		pos["menuData"] = null;
+		pos["activeIndex"] = -1;
+		pos["collapsed"] = collapsed;
+	} else {
+		let activeIndex = children.indexOf(colData.activeColumn);
+		let len = children.length;
+		let menuData = new Array(len);
+		for(let i = len; --i >= 0;) {
+			menuData[i] = {
+				value: i,
+				selected: i === activeIndex,
+				label: this.getColumnName(colIndices[i]),
+				field: this.getColumnField(colIndices[i]),
+				colId: children[i]
+			};
+		}
+		pos["menuData"] = menuData;
+		pos["activeIndex"] = activeIndex;
+		pos["collapsed"] = false;
+	}
+	pos["spreading"] = colData.spreading;
+	pos["columnIndices"] = colIndices;
+	pos["activeColIndex"] = this.getColumnIndex(colData.activeColumn);
+	pos["event"] = e;
+	pos["stackId"] = colData.id;
+
+	elem.focus();
+
+	if(this._menuElement && !colData.spreading) {
+		// Populate stack member
+		let button = pos.event.srcElement;
+		let el = this._menuElement;
+		el.data = pos["menuData"];
+		el.positionTarget = button;
+		el.opened = true;
+	}
+	this._dispatch("clicked", pos);
+};
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onMenuItemClicked = function(e) {
+	if(e.detail) {
+		let selectedIndex = parseInt(e.detail.value, 0);
+		let menuData = this._menuElement.data[selectedIndex];
+		let colId = menuData.colId;
+		this.setActiveColumn(colId);
+	}
+	this._menuElement.opened = false;
+
+	if(this._menuItemClicked) {
+		this._menuItemClicked(e);
+	}
+};
+/** @public
+* @description Get member column indices in a stack
+* @param {string} stackId
+* @return {!Array.<number>} Member column indices
+*/
+ColumnStackPlugin.prototype.getStackMemberIndices = function(stackId) {
+	return this.getColumnIndices(this.getStackMemberIds(stackId));
+};
+
+/** @public
+* @description Get list member column id in a stack
+* @param {string} stackId
+* @return {!Array.<string>} Member column ids
+*/
+ColumnStackPlugin.prototype.getStackMemberIds = function(stackId) { // WARNING: This does not filter out invalid members
+	if(stackId) {
+		let stack = this._groupDefs.getGroup(stackId);
+		if(stack){
+			return stack.children;
+		}
+	}
+	return [];
+};
+
+/** @public
+* @description Get column id by column index or indices
+* @param {number|Array<number>} colIndices
+* @return {!Array.<string>} Column ids
+*/
+ColumnStackPlugin.prototype.getColumnIdsByIndex = function(colIndices) {
+	if(!Array.isArray(colIndices)){
+		colIndices = [colIndices];
+	}
+	let colIds = [];
+	let colId;
+	for(let i = 0; i < colIndices.length; ++i) {
+		colId = this.getColumnId(colIndices[i]);
+		colIds.push(colId);
+	}
+	return colIds;
+};
+
+/** @public
+* @description Get column indices by column ids
+* @param {string|Array<string>} colIds
+* @return {!Array.<string>} Column indices
+*/
+ColumnStackPlugin.prototype.getColumnIndicesByColumnIds = function(colIds) {
+	if(!Array.isArray(colIds)){
+		colIds = [colIds];
+	}
+	let colIndices = [];
+	let colIndex;
+	for(let i = 0; i < colIds.length; ++i) {
+		colIndex = this.getColumnIndex(colIds[i]);
+		colIndices.push(colIndex);
+	}
+	return colIndices;
+};
+
+/** @public
+* @description Get column ids by fields
+* @param {string|Array<string>} fields
+* @return {!Array.<string>} Column indices
+*/
+ColumnStackPlugin.prototype.getColumnIdsByFields = function(fields) {
+	if(!fields) {
+		return [];
+	}
+	let ary = Array.isArray(fields) ? fields : [fields];
+	let count = fields.length;
+	let outAry = new Array(count);
+	for(let i = 0; i < count; ++i) {
+		let ref = ary[i];
+		let colIndex = -1;
+		if(typeof ref === "number") {
+			colIndex = ref;
+		} else if(ref) {
+			if(typeof ref === "string") {
+				colIndex = this.getColumnIndex(ref);
+			}
+		}
+		outAry[i] = (colIndex >= 0) ? this.getColumnId(colIndex) : "";
+	}
+	return outAry;
+};
+
+/** @public
+* @description Add specific column to a stack
+* @param {number|string} colRef column field or column index
+* @param {string} stackId
+*/
+ColumnStackPlugin.prototype.addColumnToStack = function(colRef, stackId) {
+	let colId = this._toColumnId(colRef);
+
+	let stack = this._groupDefs.getGroup(stackId);
+	let isColumnStackable = !this._groupDefs.getParentGroup(colId);
+
+	// if column not stackable or destination stack not exist, do nothing
+	if(!isColumnStackable || !stack){
+		return;
+	}
+
+	this._hideStackedColumns(stack, this.getColumnIndex(colId));
+
+	// apply stacking
+	this._groupDefs.addGroupChild(stackId, colId);
+
+	// To avoid state interference from Core Grid, keep the pin state before moving the columns
+	let host = this._hosts[0];
+	let leftPinnedIndex = host.getFrozenColumnCount() - 1;
+	let rightPinnedCount = host.getPinnedRightColumnCount();
+	let colIndex = this.getColumnIndex(colId);
+
+	// Pack stacked columns together
+	this._moveStackedColumns(stack.children);
+
+	// If an unpinned column is added to a pinned stack, the pinning position should be updated
+	if(stack.leftPinned || stack.rightPinned) {
+		let colCount = this.getColumnCount();
+		if(stack.leftPinned && colIndex > leftPinnedIndex) {
+			leftPinnedIndex++;
+			this._freezeColumn(leftPinnedIndex, rightPinnedCount);
+		} else if(stack.rightPinned && colIndex < (colCount - rightPinnedCount)) {
+			rightPinnedCount++;
+			this._freezeColumn(leftPinnedIndex, rightPinnedCount);
+		}
+	}
+
+	this._updateUI();
+};
+
+/** @public
+* @description Remove specific column from its own stack
+* @param {number|string} colRef column field or column index
+*/
+ColumnStackPlugin.prototype.removeColumnFromStack = function(colRef) {
+	let colIndex = (typeof colRef === "string") ? this.getColumnIndex(colRef) : colRef;
+	if(colIndex < 0) {
+		return;
+	}
+
+	let colId = this.getColumnId(colIndex);
+	let stack = this._groupDefs.getParentGroup(colId);
+
+	if(!stack) {
+		return;
+	}
+
+	let children = stack.children;
+	let memberCount = children.length;
+	if(memberCount <= 2) {
+		if(memberCount === 2) {
+			if(colId === 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(children[1]) + 1);
+			}
+		}
+		this.removeStack(stack.id); // updateUI will be called
+		return;
+	}
+
+	let colIndices = this.getColumnIndices(children);
+	this._removeRefFromStack(stack, colId, colIndex);
+
+	this.moveColumnById(colIndex, colIndices[memberCount - 1] + 1); // This assumes that the column order is already in correct position
+
+	this._updateUI();
+};
+
+/** @public
+* @description Reorder columns in a stack
+* @param {Array.<number|string>} colRefs Column Ids, indices, or fields
+* @param {string} stackId
+*/
+ColumnStackPlugin.prototype.reorderStackColumns = function(colRefs, stackId) {
+	let stack = this._groupDefs.getGroup(stackId);
+	if(!stack) {
+		return;
+	}
+	if(!colRefs || !colRefs.length) {
+		return; // Nothing to be reordered
+	}
+	let colIndices = this.getColumnIndices(colRefs); // Slow
+	if(!colIndices.length) {
+		return; // Given input has no valid column
+	}
+
+	let curMemberIndices = this.getStackMemberIndices(stackId); // Slow
+	let memberCount =  curMemberIndices.length;
+	let indexMap = {};
+	for(let i = 0; i < memberCount; ++i) {
+		let colIndex = curMemberIndices[i];
+		indexMap[colIndex] = colIndices.indexOf(colIndex);
+	}
+
+	curMemberIndices.sort(_indexSorter.bind(null, indexMap));
+	this.reorderColumns(curMemberIndices, curMemberIndices[0]);
+};
+
+/** @public
+* @description Set stack name to a stack
+* @param {string} stackId
+* @param {string} name
+*/
+ColumnStackPlugin.prototype.setStackName = function(stackId, name) {
+	this._groupDefs.setGroupName(stackId, name);
+};
+
+/** @public
+* @description Get stack name from specific stack
+* @param {string} stackId
+* @return {string} Stack name
+*/
+ColumnStackPlugin.prototype.getStackName = function(stackId) {
+	return this._groupDefs.getGroupName(stackId);
+};
+
+/** @public
+* @description Get active column id of specific stack
+* @param {string} stackId
+* @return {string} active column id
+*/
+ColumnStackPlugin.prototype.getActiveColumnId = function(stackId) {
+	let stack = this._groupDefs.getGroup(stackId);
+	if(stack){
+		return stack.activeColumn || "";
+	}
+	return "";
+};
+/** @public
+* @description Get active column field of specific stack
+* @param {string} stackId
+* @return {string} active column field
+*/
+ColumnStackPlugin.prototype.getActiveColumnField = function(stackId) {
+	return this.getColumnField(this.getActiveColumnIndex(stackId));
+};
+
+/** @public
+* @description Get active column index of specific stack
+* @param {string} stackId
+* @return {number} active column index
+*/
+ColumnStackPlugin.prototype.getActiveColumnIndex = function(stackId) {
+	let stack = this._groupDefs.getGroup(stackId);
+	if(stack){
+		return this.getColumnIndex(stack.activeColumn);
+	}
+	return -1;
+};
+
+/** @public
+* @param {string} stackId
+* @param {number|string} colRef Column Id, index or field
+*/
+ColumnStackPlugin.prototype.addStackChild = function(stackId, colRef) {
+	this.addColumnToStack(colRef, stackId);
+};
+/**
+* @public
+* @param {string} stackId
+* @param {number|string} colRef Column Id, index or field
+*/
+ColumnStackPlugin.prototype.removeStackChild = function(stackId, colRef) {
+	if(stackId === this.getStackId(colRef)) {
+		this.removeColumnFromStack(colRef);
+	}
+};
+/** @public
+* @function
+* @param {number|string} colRef Column Id, index or field
+*/
+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) {
+	return this._reorderColumns(colList, destCol);
+};
+/** 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) {
+	return this._moveColumnById(srcCol, destCol);
+};
+
+/** @private
+* @description Check for active column in a stack if it needs an update.
+* @param {Object} stackOpt
+*/
+ColumnStackPlugin.prototype._updateActiveColumn = function(stackOpt) {
+	if(_resolveActiveColumn(stackOpt)) {
+		// TODO: Add a proper way to set visibility to activeColumn when activeColumn is changed
+		let activeColIndex = this.getColumnIndex(stackOpt.activeColumn);
+		if(activeColIndex >= 0) {
+			this._setColumnVisibility(activeColIndex, true);
+			this._updateUI();
+		}
+	}
+};
+
+/** @public
+* @description Hide specific stack from grid
+* @param {string} stackId
+* @param {boolean=} hidden
+*/
+ColumnStackPlugin.prototype.hideStack = function(stackId, hidden) {
+	if(!stackId){
+		return;
+	}
+	let stackOption = this._groupDefs.getGroup(stackId);
+	if(!stackOption){
+		return;
+	}
+
+	if(hidden == null){
+		hidden = true;
+	}
+	let children = stackOption.children;
+	for(let i = 0; i < children.length; i++){
+		for(let g = this._hosts.length; --g >= 0;) {
+			this._hosts[g].hideColumn(this.getColumnIndex(children[i]), hidden);
+		}
+	}
+};
+
+/** @public
+* @description Show specific stack from grid
+* @param {string} stackId
+*/
+ColumnStackPlugin.prototype.showStack = function(stackId) {
+	if(!stackId){
+		return;
+	}
+	this.hideStack(stackId, false);
+};
+
+/** @public
+* @description Get hidden status of specific stack
+* @param {string} stackId
+* @return {boolean|null}
+*/
+ColumnStackPlugin.prototype.isStackHidden = function(stackId) {
+	let stackOption = this._groupDefs.getGroup(stackId);
+	let host = this._host || this._hosts[0];
+
+	if(!stackOption || !host){
+		return null;
+	}
+
+	let activeColIndex = this.getColumnIndex(stackOption.activeColumn);
+	let isVisible = host.isColumnVisible(activeColIndex);
+
+	return !isVisible;
+};
+/** Move an entire stack to position before the destination
+* @public
+* @param {string} stackId Stack id to be moved
+* @param {(number|string)=} destCol Destination column id or index
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.moveStack = function(stackId, destCol) {
+	if(!stackId){
+		return false;
+	}
+	let colList = this.getStackMemberIds(stackId);
+	let dirty = this.reorderColumns(colList, destCol);
+	return dirty;
+};
+
+/** @public
+* @param {string} stackId
+* @param {string=} side Available values are: left|right. If no value is supplied, all columns will be pinned to the left.
+*/
+ColumnStackPlugin.prototype.pinStack = function(stackId, side) {
+	if(!stackId) {
+		return;
+	}
+
+	let stack = this._groupDefs.getGroup(stackId);
+	if(!stack) {
+		return;
+	}
+
+	let host = this._hosts[0];
+	let leftPinnedIndex = host.getFrozenColumnCount() - 1;
+	let rightPinnedCount = host.getPinnedRightColumnCount();
+	let colCount = this.getColumnCount();
+	let colList = this.getStackMemberIds(stackId);
+	let len = colList.length;
+
+	let dest;
+	if(side === "right") {
+		if(stack.rightPinned) {
+			return;
+		}
+		if(stack.leftPinned) {
+			this.unpinStack(stackId);
+			leftPinnedIndex = host.getFrozenColumnCount() - 1;
+		}
+		stack.rightPinned = true;
+		dest = colCount - rightPinnedCount;
+		rightPinnedCount = rightPinnedCount + len;
+	} else {
+		if(stack.leftPinned) {
+			return;
+		}
+		if(stack.rightPinned) {
+			this.unpinStack(stackId);
+			rightPinnedCount = host.getPinnedRightColumnCount();
+		}
+		stack.leftPinned = true;
+		dest = leftPinnedIndex === -1 ? 0 : leftPinnedIndex + 1;
+		leftPinnedIndex = leftPinnedIndex + len;
+	}
+
+	this.reorderColumns(colList, dest);
+	this._freezeColumn(leftPinnedIndex, rightPinnedCount);
+};
+
+/** @public
+* @param {string} stackId
+* @param {(number|string)=} dest The unpinned stack will be placed before the destination position after the operation
+*/
+ColumnStackPlugin.prototype.unpinStack = function(stackId, dest) {
+	if(!stackId) {
+		return;
+	}
+
+	let stack = this._groupDefs.getGroup(stackId);
+	if(!stack) {
+		return;
+	}
+
+	if(!stack.leftPinned && !stack.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.getStackMemberIds(stackId);
+	let len = colList.length;
+
+	let destId = null;
+	if(dest != null) {
+		let destIdx = this.getColumnIndex(dest);
+		destId = this.getColumnId(destIdx);
+	}
+
+	if(stack.leftPinned) {
+		stack.leftPinned = false;
+		this.reorderColumns(colList, leftPinnedCount);
+		this._freezeColumn(leftPinnedCount - (1 + len));
+	} else if(stack.rightPinned) {
+		stack.rightPinned = false;
+		this.reorderColumns(colList, firstRightPinnedIndex);
+		this._freezeColumn(leftPinnedCount - 1, rightPinnedCount - len);
+	}
+
+	if(destId != null) {
+		this.reorderColumns(colList, destId);
+	}
+};
+
+
+
+export default ColumnStackPlugin;
+export { ColumnStackPlugin, ColumnStackPlugin as ColumnStack, ColumnStackPlugin as ColumnStackExtension };