@refinitiv-ui/efx-grid 6.0.0-next.0

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

@@ -0,0 +1,1227 @@
+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 { 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~ColumnOptions
+* @description Extension column options that can be specified on each individual grid's column option.
+* @property {string=} stackId Group ID
+* @property {(string|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
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+*/
+var 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._onStackButtonClicked = this._onStackButtonClicked.bind(this);
+	this._updateUI = this._updateUI.bind(this);
+	this._hosts = [];
+	this._stacks = {};
+
+	this._conflator = new Conflator(100, this._updateUI);
+};
+
+Ext.inherits(ColumnStackPlugin, GridPlugin);
+
+/** @type {number}
+* @private
+*/
+ColumnStackPlugin._runningId = 0;
+/** @type {!Object.<string, Object>}
+* @private
+*/
+ColumnStackPlugin.prototype._stacks;
+/** @type {Object.<string, string>}
+* @private
+*/
+ColumnStackPlugin.prototype._pendingStacks;
+
+/** @override
+* @return {string}
+*/
+ColumnStackPlugin.prototype.getName = function () {
+	return "ColumnStackPlugin"; // Readonly
+};
+/** @override
+* @return {boolean}
+*/
+GridPlugin.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 && options["icons"]) {
+		var icons = options["icons"]["columnStack"];
+		if(icons) {
+			this._stackIconName = icons["stack"];
+			this._expandIconName = icons["expand"];
+			this._collapseIconName = icons["collapse"];
+		}
+	}
+
+	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("preSectionRender", this._onPreSectionRender);
+
+	// In case of lazy loading
+	// DO something
+};
+/** @public
+* @param {Object} host core grid object
+*/
+ColumnStackPlugin.prototype.unload = function (host) {
+	var 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("preSectionRender", this._onPreSectionRender);
+
+	if(this._hosts.length <= 0) {
+		this._conflator.reset();
+	}
+	this._dispose();
+};
+
+/** @private
+* @param {Object} grid core grid object
+*/
+ColumnStackPlugin._applyThemeColor = function(grid) {
+	if (!ColumnStackPlugin._styles) {
+		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)", [
+				"display: none;"
+			],
+			".tr-grid .collapsed .cell.grouping .floating-panel .stack-icon", [
+				"margin-left: 0;"
+			]
+		]);
+		injectCss(ColumnStackPlugin._styles, grid.getElement());
+	}
+};
+
+/** @public
+* @param {Object=} options
+*/
+ColumnStackPlugin.prototype.config = function (options) {
+	if(!options) { return; }
+
+	var columns = options["columns"];
+	if(!columns) { return; }
+
+	var stacks = {};
+	var len = columns.length;
+	for(var i = 0; i < len; ++i) {
+		this._setColumnStacking(i, {}); // used for further column index getting
+		var column = columns[i];
+		var stackOpt = column["stackId"] || column["stack"];
+		if(typeof stackOpt === "string") {
+			if(!stacks[stackOpt]) {
+				stacks[stackOpt] = {
+					spreading: false,
+					colIndices: []
+				};
+			}
+
+			stacks[stackOpt].colIndices.push(i);
+		} else if(typeof stackOpt === "object") {
+			if(!stacks[stackOpt["id"]]) {
+				stacks[stackOpt["id"]] = {
+					spreading: stackOpt["spreading"] === true,
+					collapsed: stackOpt["collapsed"] !== false,
+					colIndices: []
+				};
+			}
+			stacks[stackOpt["id"]].colIndices.push(i);
+		} else {
+			continue;
+		}
+	}
+
+	if(this._initializedGrid) {
+		for(var sid in stacks) {
+			this.stackColumns(stacks[sid].colIndices, sid, stacks[sid]);
+		}
+	} else {
+		this._pendingStacks = stacks;
+	}
+};
+
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
+	var obj = gridOptions || {};
+
+	var columns = obj.columns;
+	if (!columns) {
+		columns = obj.columns = [];
+	}
+
+	var len = this.getColumnCount();
+	for (var i = 0; i < len; ++i) {
+		var column = columns[i];
+		if (!column) {
+			column = columns[i] = {};
+		}
+
+		var stackOpt = this._getColumnStackOptions(i);
+		if (!stackOpt) continue;
+
+		column.stack = {
+			id: stackOpt.stackId,
+			spreading: stackOpt.spreading,
+			collapsed: stackOpt.collapsed
+		};
+	}
+
+	return obj;
+};
+
+/** @override
+*/
+ColumnStackPlugin.prototype._afterInit = function () {
+	if(this._pendingStacks) {
+		for(var sid in this._pendingStacks) {
+			this.stackColumns(this._pendingStacks[sid].colIndices, sid, this._pendingStacks[sid]);
+		}
+		this._pendingStacks = null;
+	}
+	// In case of lazy loading
+	// DO something
+};
+/** @private
+*	@param {object} stackRef
+* @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;
+		}
+	}
+	return index;
+};
+/** @private
+* @param {number} colIndex
+* @param {object} stacking
+*/
+ColumnStackPlugin.prototype._setColumnStacking = function(colIndex, stacking) {
+	var colData = this._newColumnData(colIndex);
+	colData["stack"] = stacking;
+};
+/** @private
+* @param {number} colIndex
+* @return {*}
+*/
+ColumnStackPlugin.prototype._getColumnStacking = function(colIndex) {
+	return this._getColumnOption(colIndex, "stack");
+};
+/** @private
+* @param {number} colIndex
+* @param {object} stackOptions
+*/
+ColumnStackPlugin.prototype._setColumnStackOptions = function(colIndex, stackOptions) {
+	var stacking = this._getColumnStacking(colIndex);
+	if(stacking) {
+		stacking["stackOpt"] = stackOptions;
+	}
+};
+/** @private
+* @param {number} colIndex
+* @return {*}
+*/
+ColumnStackPlugin.prototype._getColumnStackOptions = function(colIndex) {
+	var stacking = this._getColumnStacking(colIndex);
+	if(stacking){
+		return stacking["stackOpt"] || null;
+	}
+	return null;
+};
+/** @private
+* @param {number} colIndex
+*/
+ColumnStackPlugin.prototype._removeColumnStacking = function(colIndex) {
+	var colData = this._getColumnData(colIndex);
+	colData["stack"] = {};
+};
+/** @private
+* @return {!Array.<number>} Sorted column indices
+*/
+ColumnStackPlugin.prototype._getSelectedColumns = function() {
+	var csp = this._getPlugin("ColumnSelectionPlugin");
+	return (csp && csp.isEnabled()) ? csp.getSelectedColumns() : [];
+};
+/** @private
+* @param {number} colIndex
+* @param {boolean} shown
+*/
+ColumnStackPlugin.prototype._setColumnVisibility = function(colIndex, shown) {
+	if(colIndex >= 0) {
+		for(var g = this._hosts.length; --g >= 0;) {
+			this._hosts[g].setColumnVisibility(colIndex, shown, 2);
+		}
+	}
+};
+/** @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
+*/
+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
+		this._moveColumn(fromIndex, destIndex + i);
+	}
+};
+/** @private
+* @return {number}
+*/
+ColumnStackPlugin.prototype._getColumnCount = function() {
+	var host = this._host || this._hosts[0];
+	return host ? host.getColumnCount() : 0;
+};
+/** @private
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype._isIconAvailable = function() {
+	return ElfUtil.hasComponent("ef-icon") &&
+		(ElfUtil.hasTheme("elf-theme-solar") ||
+		ElfUtil.hasTheme("elf-theme-luna"));
+};
+/** @private */
+ColumnStackPlugin.prototype._updateUI = function() {
+	if(this._conflator.conflate()) {
+		return;
+	}
+
+	var colCount = this._getColumnCount();
+	var gridCount = this._hosts.length;
+	for(var c = 0; c < colCount; ++c) {
+		var colData = this._getColumnStackOptions(c);
+		var stackRefs = (colData) ? colData.stackRefs : null;
+		var spreading = (colData) ? colData.spreading : false;
+		for(var g = 0; g < gridCount; ++g) {
+			var host = this._hosts[g];
+			host.enableColumnClass(c, "grouped", spreading === true);
+			var tSect = host.getSection("title");
+			var rowCount = tSect.getRowCount();
+			var cell = tSect.getCell(c, rowCount - 1, true);
+			if(!cell) { continue; }
+
+			var stackIcon = cell._stackIcon;
+			if(stackRefs) {
+				if(!stackIcon && this.isActiveStackedColumn(c)) {
+					if(spreading) {
+						cell.addClass("grouping");
+						if(this._expandIconName) {
+							if(colData.collapsed) {
+								stackIcon = Icon.create(this._expandIconName);
+							} else {
+								stackIcon = Icon.create(this._collapseIconName);
+							}
+						} else {
+							if(colData.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": c, "grid": host, "cell": cell});
+				} else if(stackIcon && this.isInactiveStackedColumn(c)) {
+					cell.removeFloatingIcon(cell._stackIcon);
+					cell._stackIcon = null;
+				}
+			} else if(stackIcon) {
+				cell.removeFloatingIcon(cell._stackIcon);
+				cell._stackIcon = null;
+				if(spreading) {
+					cell.removeClass("grouping");
+				} else {
+					cell.removeClass("stacking");
+				}
+			}
+		}
+		if(colData) {
+			if(spreading) {
+				this._collapseMember(c, colData.collapsed);
+			} else {
+				this._setColumnVisibility(c, this.isActiveStackedColumn(c)); // a little slow
+			}
+		}
+	}
+};
+/** @private
+* @param {number} colIndex
+* @param {boolean} collapsed
+*/
+ColumnStackPlugin.prototype._collapseMember = function(colIndex, collapsed) {
+	var colData = this._getColumnStackOptions(colIndex);
+	if(!colData) {
+		return;
+	}
+
+	for (var i = this._hosts.length; --i >= 0;) {
+		var host = this._hosts[i];
+		host.enableColumnClass(colIndex, "collapsed", collapsed);
+
+		if(this.isActiveStackedColumn(colIndex)) {
+			host.setColumnVisibility(colIndex, true, 2);
+			var tSect = host.getSection("title");
+			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);
+				}
+
+				host.setColumnWidth(colIndex, tSect.getRowHeight(0), false);
+
+				if(cell._stackIcon) {
+					if(this._expandIconName) {
+						cell._stackIcon.setAttribute("icon", "right");
+					} else {
+						cell._stackIcon.textContent = ">";
+					}
+				}
+			} else {
+				if(colData._origWidth != null) {
+					host.setColumnWidth(colIndex, colData._origWidth, colData._scalable);
+				}
+
+				if(cell._stackIcon) {
+					if(this._collapseIconName) {
+						cell._stackIcon.setAttribute("icon", "left");
+					} else {
+						cell._stackIcon.textContent = "<";
+					}
+				}
+			}
+		} else {
+			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>
+* 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) {
+		var min = host.getMinimumColumnWidth(colIndex);
+		var 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) {
+	var colData = this._getColumnStackOptions(colIndex);
+	if(!colData) {
+		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;
+};
+/** @public
+* @param {number} colIndex
+* @param {boolean=} collapsed
+* @return {Array.<number>} Null if it is non-grouped column
+*/
+ColumnStackPlugin.prototype.collapseGroup = function(colIndex, collapsed) {
+	var groupMembers = this.getMemberIndices(colIndex);
+	if(!groupMembers) {
+		return null;
+	}
+
+	collapsed = collapsed !== false;
+	for(var j = groupMembers.length; --j >= 0;) {
+		this._collapseMember(groupMembers[j], collapsed);
+	}
+	return groupMembers;
+};
+/** @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;
+};
+/** 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;
+	}
+
+	var len = colIndices.length;
+	for(var i = 0; i < len; ++i) {
+		var colIndex = colIndices[i];
+		if(this.isColumnInCollection(colIndex)) {
+			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();
+	}
+	var len = colIndices.length;
+	for(var i = 0; i < len; ++i) {
+		var colData = this._getColumnStackOptions(colIndices[i]);
+		if(colData && colData.stackRefs) {
+			return true;
+		}
+	}
+	return false;
+};
+/** This is used for removing some column state while the column is inactive
+* @public
+* @param {number} colIndex
+* @return {boolean} Return true if the columns is grouped and inactive
+*/
+ColumnStackPlugin.prototype.isInactiveStackedColumn = function(colIndex) {
+	var stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt && stackOpt.stackRefs) {
+		return colIndex !== this._getColumnIndex(stackOpt.activeColumn);
+	}
+	return false;
+};
+/** Check if the given column is active (visible) in the stack
+* @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.isActiveStackedColumn = function(colIndex) {
+	var stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt && stackOpt.stackRefs) {
+		return colIndex === this._getColumnIndex(stackOpt.activeColumn);
+	}
+	return true;
+};
+
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.isStackingMode = function(colIndex) {
+	var stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt) {
+		return stackOpt.spreading !== true;
+	}
+	return false;
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.isCollapsingMode = function(colIndex) {
+	var stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt) {
+		return stackOpt.spreading === true;
+	}
+	return false;
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.isColumnInCollection = function(colIndex) {
+	var stackOpt = this._getColumnStackOptions(colIndex);
+	if(stackOpt) {
+		return true;
+	}
+	return false;
+};
+/** Alias of isColumnInCollection
+* @public
+* @type {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) {
+	var 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) {
+	var 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} colIndex
+* @return {string}
+*/
+ColumnStackPlugin.prototype.getStackId = function(colIndex) {
+	var colData = this._getColumnStackOptions(colIndex);
+	return colData ? colData.stackId : "";
+};
+/** @public
+* @param {Array.<number>=} colIndices Selected columns will be used, if it is not given
+* @param {string=} stackId Must be unique
+* @param {Object=} options
+* @return {boolean} Return true if all of the given columns is stacked together
+*/
+ColumnStackPlugin.prototype.stackColumns = function(colIndices, stackId, options) {
+	if(!colIndices) {
+		colIndices = this._getSelectedColumns();
+	} else {
+		colIndices.sort(function(a, b) { return a - b; });
+	}
+
+	var i, colIndex, len = colIndices.length;
+	var colCount = this.getColumnCount();
+	var validIndices = [];
+	for (i = 0; i < len; i++) {
+		colIndex = colIndices[i];
+		if(colIndex < colCount) {
+			validIndices.push(colIndex);
+		}
+	}
+	len = validIndices.length;
+	if(len <= 1) {
+		return false; // Only two or more columns can be stacked
+	}
+	if(!this.isColumnStackable(validIndices)) {
+		return false;
+	}
+	var sid;
+	if(stackId) {
+		if(this._stacks[stackId]) {
+			return false; // Cannot store the same stack Id
+		}
+		sid = stackId;
+	} else {
+		sid = "Stack" + ColumnStackPlugin._runningId++;
+		while(this._stacks[sid]) {
+			sid = "Stack" + ColumnStackPlugin._runningId++;
+		}
+	}
+
+	options = options || {};
+
+	var activeIndex = validIndices[0];
+	// Collecting data
+	var stack = {};
+	stack.stackId = sid;
+	stack.spreading = options.spreading === true;
+	if(stack.spreading) {
+		activeIndex = validIndices[len - 1];
+	}
+	stack.collapsed = options.collapsed !== false;
+	stack.stackRefs = new Array(len);
+	for(i = 0; i < len; ++i) {
+		colIndex = validIndices[i];
+		this._setColumnStackOptions(colIndex, stack);
+		stack.stackRefs[i] = this._getColumnStacking(colIndex);
+
+		// Prevent from flashing in stack mode
+		if(colIndex !== activeIndex && stack.collapsed !== false) {
+			this._setColumnVisibility(colIndex, false);
+		}
+	}
+	// Make sure that all columns stay packed together
+	this._moveStackedColumns(stack.stackRefs);
+
+	if(stack.spreading) {
+		stack.activeColumn = stack.stackRefs[stack.stackRefs.length - 1]; // Right most column is the active column
+	} else {
+		stack.activeColumn = stack.stackRefs[0]; // Left most column is the active column
+		var csp = this._getPlugin("ColumnSelectionPlugin");
+		if(csp && csp.isEnabled()) {
+			csp.selectSingleColumn(activeIndex);
+		}
+	}
+	this._stacks[sid] = stack;
+
+
+	var cfp = this._getPlugin("ColumnFilterPlugin");
+	if(cfp) {
+		cfp["refresh"]();
+	}
+	this._updateUI(); // asyncronuos
+	return true;
+};
+
+/** @public
+* @description Remove all stacking from the grid and replace it with a new one
+* @param {Array.<number|string>} colRefs Names of fields or column indices
+* @return {boolean} true if the stack has been modified
+*/
+ColumnStackPlugin.prototype.setStack = function(colRefs) {
+	colRefs = this.getColumnIndices(colRefs);
+	if(colRefs.length <= 1) { // When the array is empty or contains only one element, all stacking is removed
+		return this.removeAllStacks();
+	}
+
+	// Check old data stacking
+	var count = 0, i;
+	var sid = "_uniqueStack"; // WARNING : This hardcode for assign uniqe stacking id
+	if(this._stacks[sid]) {
+		var stackRefs = this._stacks[sid].stackRefs;
+		if(stackRefs.length === colRefs.length) {
+			for (i = 0; i < colRefs.length; i++) {
+				var stacking = this._getColumnStacking(colRefs[i]);
+				var oldStacking = stackRefs[i];
+				if(stacking === oldStacking) {
+					count++;
+				}
+			}
+			if(count === colRefs.length) {
+				return false;
+			}
+		}
+	}
+
+	this.removeAllStacks(false); // Remove the stack without updating the UI (UI will only update when column is stacked)
+
+	var activeIndex = colRefs[0]; // For the active index, choose the first element.
+
+	// Collecting data
+	var stack = {};
+	stack.stackId = sid;
+	stack.spreading = false;
+	stack.stackRefs = new Array(colRefs.length);
+	for(i = 0; i < colRefs.length; ++i) {
+		var colIndex = colRefs[i];
+		stack.stackRefs[i] = this._getColumnStacking(colIndex);
+		this._setColumnStackOptions(colIndex, stack);
+
+		// Prevent from flashing in stack mode
+		if(colIndex !== activeIndex && stack.collapsed !== false) {
+			this._setColumnVisibility(colIndex, false);
+		}
+	}
+	stack.activeColumn = stack.stackRefs[0]; // The first stacking (the first given columns) is the active column
+	this._stacks[sid] = stack;
+	var cfp = this._getPlugin("ColumnFilterPlugin");
+	if(cfp) {
+		cfp["refresh"]();
+	}
+	this._updateUI(); // asyncronuos
+	return true;
+};
+/** @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();
+	}
+
+	var i, colIndex;
+	var len = colIndices.length;
+	var stacks = {};
+	var colCount = this.getColumnCount();
+
+	for(i = 0; i < len; ++i) {
+		colIndex = colIndices[i];
+		if(colIndex < colCount) {
+			var colData = this._getColumnStackOptions(colIndex);
+			if(!colData) {
+				continue; // Invalid index
+			}
+			if(colData.collapsed === true) {
+				this.expandGroup(colIndex);
+			}
+			stacks[colData.stackId] = 1; // Exclude duplicate stacks
+		}
+	}
+
+	var dirty = false;
+	var selFrom, selLen;
+
+	for(var sid in stacks) {
+		var stack = this._stacks[sid];
+		if(!stack) {
+			continue; // Invalid stackId
+		}
+		dirty = true;
+
+		var stackRefs = stack.stackRefs;
+		len = stackRefs.length;
+		if(colData && colData.spreading) {
+			selFrom = this._getColumnIndex(stack.stackRefs[0]);
+		} else {
+			selFrom = this._getColumnIndex(stack.activeColumn);
+		}
+		selLen = len - 1;
+
+		for(i = 0; i < len; ++i) {
+			var stackRef = stackRefs[i];
+			colIndex = this._getColumnIndex(stackRef);
+			this._removeColumnStacking(colIndex);
+			this._setColumnVisibility(colIndex, true);
+		}
+
+		delete this._stacks[sid]; // Remove all reference to the stack
+	}
+	if(dirty) {
+		var csp = this._getPlugin("ColumnSelectionPlugin");
+		if(csp && csp.isEnabled()) {
+			csp.selectRange(selFrom, selLen);
+		}
+		var cfp = this._getPlugin("ColumnFilterPlugin");
+		if(cfp) {
+			cfp["refresh"]();
+		}
+		this._updateUI(); // asyncronuos
+	}
+
+	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
+*/
+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;
+		var len = stackRefs.length;
+		for(var i = 0; i < len; ++i) {
+			var stackRef = stackRefs[i];
+			var colIndex = this._getColumnIndex(stackRef);
+			if(stack.collapsed) {
+				this.collapseGroup(colIndex, false);
+			}
+			this._removeColumnStacking(colIndex);
+			this._setColumnVisibility(colIndex, true);
+		}
+	}
+	if(dirty) {
+		this._stacks = {};
+		if(!disableUpdateUI) {
+			this._updateUI(); // asyncronous
+		}
+	}
+	return dirty;
+};
+/** @public
+* @param {number|Event} colRef
+* @param {number} swappingIndex
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.swapColumn = function(colRef, swappingIndex) {
+	var colIndex = -1;
+	if(typeof colRef == "number") {
+		colIndex = colRef;
+	} else {
+		var grid = this.getRelativeGrid(colRef);
+		if(grid) {
+			var pos = grid.getRelativePosition(colRef);
+			colIndex = pos["colIndex"];
+		}
+	}
+
+	var colData = this._getColumnStackOptions(colIndex);
+	if(!colData) {
+		return false; // Invalid column index
+	}
+	var stackRefs = colData.stackRefs;
+	if(!stackRefs) {
+		return false; // Invalid column type
+	}
+	var newActiveColumn = stackRefs[swappingIndex];
+	if(!newActiveColumn) {
+		return false; // Invalid selected index
+	}
+
+	if(newActiveColumn === colData.activeColumn) {
+		return false; // The given index is already active stacked column
+	}
+
+	colData.stackRefs.splice(swappingIndex, 1);
+	colData.stackRefs.unshift(newActiveColumn); // Move data to front
+	var prevActiveColumnIndex = this._getColumnIndex(colData.activeColumn);
+	var newActiveColumnIndex = this._getColumnIndex(newActiveColumn);
+	this._moveColumn(newActiveColumnIndex, prevActiveColumnIndex); // Move UI to front
+
+	this._setColumnVisibility(prevActiveColumnIndex, false); // Hide current active column
+	colData.activeColumn = newActiveColumn; // Change active column
+	this._setColumnVisibility(newActiveColumnIndex, true);
+
+	var csp = this._getPlugin("ColumnSelectionPlugin");
+	if(csp && csp.isEnabled()) {
+		csp.selectSingleColumn(newActiveColumnIndex);
+	}
+	var cfp = this._getPlugin("ColumnFilterPlugin");
+	if(cfp) {
+		cfp["refresh"]();
+	}
+
+	this._updateUI();
+	// this._hosts.forEach(function(host){
+	// host.updateLayout();
+	// });
+
+	return true;
+};
+
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onPreSectionRender = function (e) {
+	if (e["sectionType"] !== "title") {
+		return;
+	}
+	this._updateUI(); // asyncronuos
+};
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onColumnRemoved = function (e) {
+	var colData = /** @type{Object} */(e.columnData);
+	if(!colData) { return; }
+
+	var stacking = colData["stack"];
+	if(!stacking) { return; }
+
+	var stackOpt = stacking["stackOpt"];
+	if(!stackOpt) { return; }
+
+	// update members
+	if(stackOpt.stackRefs) {
+		var index = stackOpt.stackRefs.indexOf(stacking);
+		if(index > -1) {
+			stackOpt.stackRefs.splice(index, 1);
+			if(stackOpt.stackRefs.length < 2) {
+				// delete group
+				var colIndex = this._getColumnIndex(stackOpt.activeColumn);
+				this.unstackColumns([colIndex]);
+			} else {
+				if(stackOpt.spreading) {
+					stackOpt.activeColumn = stackOpt.stackRefs[stackOpt.stackRefs.length - 1];
+				} else {
+					stackOpt.activeColumn = stackOpt.stackRefs[0];
+				}
+				this._updateUI();
+			}
+		}
+	}
+
+	colData["stack"] = null;
+};
+
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onColumnMoved = function (e) {
+	var toIndex = e.toColIndex;
+	var stackOpt = this._getColumnStackOptions(toIndex);
+
+	// column swaping
+	if(stackOpt && !stackOpt.spreading) {
+		return;
+	}
+
+	var stackRef = this._getColumnStacking(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._getColumnStacking(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._getColumnStacking(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 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];
+			} else {
+				rightStackOpt.activeColumn = rightStackOpt.stackRefs[0];
+			}
+			this._setColumnStackOptions(toIndex, null);
+			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._getColumnStacking(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._setColumnStackOptions(toIndex, leftStackOpt);
+			dirty = true;
+		}
+	}
+
+	if(dirty) {
+		this._updateUI();
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onColumnAdded = function (e) {
+	var colIndex = e.colIndex;
+	this._setColumnStacking(colIndex, {});
+
+	// 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 index = leftStackOpt.stackRefs.indexOf(leftColStackRef);
+		if(index > -1) {
+			leftStackOpt.stackRefs.splice(index + 1, 0, stackRef);
+			leftStackOpt.activeColumn = leftStackOpt.stackRefs[leftStackOpt.stackRefs.length - 1];
+			this._setColumnStackOptions(colIndex, leftStackOpt);
+			this._updateUI();
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
+	var elem = e.currentTarget;
+	if(e.button) { // right click or middle click
+		return;
+	}
+
+	var grid = this.getRelativeGrid(e);
+	var pos = grid.getRelativePosition(e);
+	var colIndex = pos["colIndex"];
+	var colData = this._getColumnStackOptions(colIndex);
+	if(!colData) { return; }
+
+	e.stopPropagation();
+
+	if(colData.spreading) {
+		this.collapseGroup(colIndex, !colData.collapsed);
+		return;
+	}
+
+	var stackRefs = colData.stackRefs;
+	var activeIndex = stackRefs.indexOf(colData.activeColumn);
+	var len = stackRefs.length;
+	var colIndices = new Array(len);
+	var menuData = new Array(len);
+	for(var i = len; --i >= 0;) {
+		colIndices[i] = this._getColumnIndex(stackRefs[i]);
+		menuData[i] = {
+			value: i,
+			selected: i === activeIndex,
+			label: this.getColumnName(colIndices[i])
+		};
+	}
+	pos["menuData"] = menuData;
+	pos["activeIndex"] = activeIndex;
+	pos["columnIndices"] = colIndices;
+	pos["activeColIndex"] = this._getColumnIndex(colData.activeColumn);
+	pos["event"] = e;
+
+	elem.focus();
+	this._dispatch("clicked", pos);
+};
+
+
+export default ColumnStackPlugin;
+export { ColumnStackPlugin, ColumnStackPlugin as ColumnStack, ColumnStackPlugin as ColumnStackExtension };