@refinitiv-ui/efx-grid 6.0.24 → 6.0.25

package/lib/core/dist/core.js

@@ -1,6 +1,577 @@
 /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 869:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "kI": () => (/* binding */ cloneObject)
+/* harmony export */ });
+/* unused harmony exports Util, extendObject, arrayToObject, extendProperty, extendArrayProperty, parseCondition, prettifyCss, getShadowRoot, injectCss, isIE, isMac, isTouchDevice, nestedObjectToArray, rgb2Hex, prepareTSVContent */
+/** @namespace */
+var Util = {};
+
+/** This is a shorthand for fetch() API by POST method and with json body <br>
+* WARNING: fetch is not supported in IE (including IE11)
+* @public
+* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch}
+* @function
+* @param {string} url
+* @param {Object|string} obj
+* @return {!Promise<Response>}
+*/
+Util.post = function(url, obj) { // Not supported in IE
+	return Util._post(url, obj).then(Util.toJSON);
+};
+/** Request a server response from server as text by POST method <br>
+* WARNING: fetch is not supported in IE (including IE11)
+* @public
+* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch}
+* @function
+* @param {string} url
+* @param {Object|string} obj
+* @return {!Promise<Response>}
+*/
+Util.requestText = function(url, obj) { // Not supported in IE
+	return Util._post(url, obj, "text/plain").then(Util.toText);
+};
+/** Request a server response from server by POST method and with url-encoded body <br>
+* WARNING: fetch is not supported in IE (including IE11)
+* @public
+* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch}
+* @function
+* @param {string} url
+* @param {string} obj
+* @return {!Promise<Response>}
+*/
+Util.requestByUrlEncoded = function(url, obj) { // Not supported in IE
+	return Util._post(url, obj, "application/x-www-form-urlencoded").then(Util.toJSON);
+};
+
+/** @public
+* @function
+* @param {Response} resp
+* @return {!Promise<Object>}
+*/
+Util.toJSON = function (resp) {
+	if(Util._logError(resp)) {
+		return Promise.reject(resp);
+	}
+	return resp.json();
+};
+/** @public
+* @function
+* @param {Response} resp
+* @return {!Promise<string>}
+*/
+Util.toText = function (resp) {
+	if(Util._logError(resp)) {
+		return Promise.reject(resp);
+	}
+	return resp.text();
+};
+
+/** @private
+* @see {@link https://en.wikipedia.org/wiki/List_of_HTTP_status_codes}
+* @function
+* @param {Response} resp
+* @return {boolean}
+*/
+Util._logError = function(resp) {
+	if(resp && resp.status >= 300) {
+		console.log("Response " + resp.status + ": " + resp.statusText);
+		return true;
+	}
+	return false;
+};
+/** @private
+* @function
+* @param {string} url
+* @param {Object|string} obj
+* @param {string=} contentType
+* @return {!Promise<Response>}
+*/
+Util._post = function(url, obj, contentType) {
+	var options = {
+		method: obj ? "POST" : "GET",
+		headers: { "Content-Type": contentType || "application/json" }
+	};
+	if(obj) {
+		options.body = typeof obj === "string" ? obj : JSON.stringify(obj);
+	}
+
+	return fetch(url, options);
+};
+
+/** WARNING: Only one level of property tree is affected (i.e. no recursive or nested operation). <br>
+* Property with undefined or null value will not have an impact on the object. <br>
+* Existing properties will be overridden.
+* @public
+* @function
+* @param {Object} obj Object that is extended (new properties will be added to this object)
+* @param {Object=} extender Master object (no modification will be made on the extender)
+* @param {Array.<string>=} limiters Specify property to be extended
+* @return {Object}
+*/
+var extendObject = function (obj, extender, limiters) {
+	if(!obj) { // null undefined NaN empty string and 0
+		return null;
+	}
+	if(!extender || obj === extender) {
+		return obj;
+	}
+
+	var key;
+	if(limiters) {
+		var len = limiters.length;
+		for(var i = 0; i < len; ++i) {
+			key = limiters[i];
+			if(key) {
+				extendProperty(obj, extender, key);
+			}
+		}
+	} else {
+		for(key in extender) {
+			extendProperty(obj, extender, key);
+		}
+	}
+	return obj;
+};
+/** WARNING: Only one level of property tree is affected (i.e. no recursive or nested operation). <br>
+* Property with undefined or null value will not be cloned.
+* @public
+* @function
+* @param {Object} obj
+* @param {Array.<string>=} limiters
+* @return {Object}
+*/
+var cloneObject = function (obj, limiters) {
+	return extendObject({}, obj, limiters);
+};
+/** @public
+* @param {Array=} data
+* @param {Array.<string>=} fields In case of the given data is an array, this param will be used for mapping index to field
+* @return {Object|null}
+*/
+var arrayToObject = function(data, fields) {
+	if(!Array.isArray(data)) {
+		return data;
+	} else if(!fields) {
+		return null;
+	}
+	var ary = data;
+	data = {};
+	var len = ary.length;
+	for(var i = 0; i < len; ++i) {
+		var field = fields[i];
+		// eslint-disable-next-line no-undefined
+		if(field && ary[i] !== undefined) {
+			data[field] = ary[i];
+		}
+	}
+	return data;
+};
+/** Replace the specified property with the value from the extender. If the value is an array, the value will be added to the array instead of replacement
+* @public
+* @function
+* @param {Object} obj
+* @param {Object} extender
+* @param {string} propName
+* @example
+* extendProperty({a: 0}, {a: 1}, "a"); // {a: 1}
+* extendProperty({a: 0}, {b: 1}, "b"); // {a: 0, b: 1}
+* extendProperty({a: [0]}, {a: 1}, "a"); // {a: [0, 1]}
+* extendProperty({a: [0]}, {a: [1, 2]}, "a"); // {a: [0, 1, 2]}
+*/
+var extendProperty = function (obj, extender, propName) {
+	var val = extender[propName];
+	if(val != null) {
+		var objVal = obj[propName];
+		if(Array.isArray(objVal)) {
+			obj[propName] = objVal.concat(val);
+		} else if(Array.isArray(val) && objVal) {
+			obj[propName] = val.concat(objVal); // TODO: Preserve the order
+		} else {
+			obj[propName] = val; // WARNING: Overriding existing data
+		}
+	}
+};
+/** Array.push() is much faster than Array.concat(). The downside is the parameters must be an array, whereas concat() has no such requirement. <br>
+* This method excels in extending known array property in an object.
+* @public
+* @function
+* @param {Object} obj
+* @param {string} propName
+* @param {*} ary
+* @return {Array} Returns the result of the extended array
+* @see {@link https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki}
+* @example
+* var obj = {};
+* extendArrayProperty(obj, "prop1", 1); // [1]
+* extendArrayProperty(obj, "prop1", 2); // [1, 2]
+* extendArrayProperty(obj, "prop1", [3, 4]); // [1, 2, 3, 4]
+* obj.prop2 = 5;
+* extendArrayProperty(obj, "prop2", 6); // [5, 6]
+* extendArrayProperty(obj, "prop2", [7]); // [5, 6, 7]
+* extendArrayProperty(obj, "prop2", null); // null
+*/
+var extendArrayProperty = function (obj, propName, ary) {
+	var objAry = null;
+	if(ary) {
+		var objVal = obj[propName];
+		if(objVal) {
+			if(Array.isArray(objVal)) {
+				objAry = objVal;
+			} else {
+				objAry = obj[propName] = [objVal];
+			}
+		} else {
+			objAry = obj[propName] = [];
+		}
+		// objAry is guaranteed to be an array at this point
+
+		if(Array.isArray(ary)) {
+			if(ary.length) {
+				if(ary.length > 1) {
+					Array.prototype.push.apply(objAry, ary);
+				} else {
+					objAry.push(ary[0]);
+				}
+			}
+		} else {
+			objAry.push(ary);
+		}
+	}
+	return objAry;
+};
+
+
+/** Regex for matching the field token E.g. '[CF_BID]'
+* @type {!RegExp}
+* @private
+* @const
+*/
+var _bracketExp = (/* unused pure expression or super */ null && (new RegExp(/\[[^\[]*\]/g))); // eslint-disable-line no-useless-escape
+/** @public
+* @function
+* @param {string|Function} expression
+* @return {Function}
+* @example
+* var fn = parseCondition("[CF_BID] >= 10 && [CF_BID] <= 100");
+* window.console.log(fn(25));
+*/
+var parseCondition = function(expression) {
+	if(!expression) {
+		return null;
+	}
+	if(typeof expression !== "string") {
+		return (typeof expression == "function") ? /** @type {Function} */(expression) : null;
+	}
+
+	var brackets = expression.match(_bracketExp); // Retrieving field tokens (anything in between brackets)
+	var map = {}; // For checking duplication
+	var fields = [];
+	var len = brackets ? brackets.length : 0;
+	for(var i = len; --i >= 0;) {
+		var field = brackets[i];
+		if(!map[field]) {
+			map[field] = "f[" + fields.length + "]"; // Create mapping of field token to array with index E.g. { "[CF_BID]": "f[0]" }
+			fields.push(field.substring(1, field.length - 1)); // Strip '[' and ']' of field token to get field name
+		}
+	}
+
+	// Replace the field tokens with rowData of array with index E.g. [CF_BID] ==> rowData[f[0]]
+	expression = expression.replace(_bracketExp, function(match) {
+		return "rowData[" + map[match] + "]";
+	});
+	var finalExp = "(function(f, rowData) { return (" + expression + "); })";
+
+	var fn = null;
+	try {
+		fn = eval(finalExp);
+		fn = fn.bind(null, fields); // Bind fields for matching field name
+	} catch(err) {
+		console.log(err.message);
+	}
+	return (fn) ? fn : null;
+};
+
+
+/** @private
+* @param {string|Array.<string>} item
+* @return {string}
+*/
+var _encloseBracket = function(item) {
+	return Array.isArray(item) ? "{\n" + item.join("\n") + "\n}" : item;
+};
+/** @private
+* @param {string} str
+* @return {string}
+*/
+var _indentBracketContent = function(str){
+	return str.replace(/\n+/g, "\n\t").replace(/\n\t}$/, "\n}");
+};
+/** @public
+* @param {string|Array} css
+* @return {string} prettified CSS string
+* @example
+* prettifyCss(["div", [
+*   "color: red;",
+*   "padding: 20px;"
+* ],
+* ".class", [
+*   "margin: 0;"
+* ]
+* ]);
+*/
+var prettifyCss = function(css) {
+	if(css) {
+		var cssStr = "";
+		if (Array.isArray(css)) {
+			var ary = css.map(_encloseBracket);
+			cssStr = ary.join("\n").replace(/{\s*{/g, "{").replace(/\s+{/g, " {");
+		} else {
+			cssStr = (typeof css === "string") ? css : css + "";
+		}
+
+		if(cssStr) {
+			return cssStr.replace(/{[\w\W]*?}/g, _indentBracketContent);
+		}
+	}
+	return "";
+};
+/** Get shadow root of the given element regardless of whether the element is in the DOM or not. The immediate shadow root parent is returned in case of nested shadow roots. Any other case return null.
+* @public
+* @param {Element} elem
+* @return {DocumentFragment}
+*/
+var getShadowRoot = function(elem) {
+	if(elem) {
+		var rootNode;
+		if(elem.shadowRoot) {
+			rootNode = elem.shadowRoot;
+		} else if(elem.getRootNode) {
+			rootNode = elem.getRootNode();
+		}
+		if(rootNode) { // getRootNode does not supported in IE. It should be implemented by the polyfills
+			if(rootNode !== document) { // element that is in the DOM and not in the shadow has document as its root node
+				if(rootNode !== elem) { // element that is NOT in the DOM and not in the shadow has itself as its root node
+					return rootNode;
+				}
+			}
+		}
+	}
+	return null;
+};
+/** Attach style tag to the proper document (in case of element inside a shadow root)
+* @public
+* @param {string} cssStr Valid CSS string (e.g. "div {color: red;}")
+* @param {Element=} targetContext Element that needs the CSS
+* @return {Element} New style tag
+*/
+var injectCss = function(cssStr, targetContext) {
+	if(!cssStr) {
+		return null;
+	}
+
+	var styleTag = document.createElement("style");
+	styleTag.textContent = "\n" + cssStr + "\n";
+
+	var styleHost = getShadowRoot(targetContext);
+	var isInShadow = true;
+	if(!styleHost) {
+		isInShadow = false;
+		styleHost = document.head;
+	}
+
+	// Find a place to insert the style tag
+	var beforeElem;
+	if(isInShadow) {
+		if(styleHost.children && styleHost.children.length) {
+			beforeElem = styleHost.children[0];
+		}
+	}
+	if(beforeElem) {
+		styleHost.insertBefore(styleTag, beforeElem);
+	} else {
+		styleHost.appendChild(styleTag);
+	}
+	return styleTag;
+};
+
+/** return true if browser is IE or Edge
+* @public
+* @return {boolean}
+*/
+var isIE = function () {
+	var ua = window.navigator.userAgent;
+	return (ua.indexOf('MSIE ') > 0) || (ua.indexOf('Trident/') > 0) || (ua.indexOf('Edge/') > 0);
+};
+
+/** return true if device is mac
+* @public
+* @return {boolean}
+*/
+var isMac = function () {
+	return /Mac/.test(navigator.platform);
+};
+
+/** Return true if device is mac
+* @public
+* @return {boolean}
+*/
+var isTouchDevice = function () {
+	if ((navigator["maxTouchPoints"] && navigator["maxTouchPoints"] < 256) ||
+		(navigator["msMaxTouchPoints"] && navigator["msMaxTouchPoints"] < 256)) {
+		return true;
+	}
+	return false;
+};
+
+/** parse nested object in to array
+* @public
+* @param {Object} obj
+* @param {Array=} ary
+* @return {Array}
+*/
+var nestedObjectToArray = function (obj, ary) {
+	if (!ary) {
+		ary = [];
+	}
+	for (var key in obj) {
+		var element = obj[key];
+		if ('object' === typeof element) {
+			nestedObjectToArray(element, ary);
+		} else {
+			ary.push(element);
+		}
+	}
+	return ary;
+};
+
+/** Convert CSS rgb or rgba formats to CSS hex color string (# prefix)
+* @public
+* @param {string} rgbCode
+* @return {string}
+* @example
+* rgb2Hex("rgb(255, 255, 0)"); // "#FFFF00"
+* rgb2Hex("rgba(255, 255, 0, 1)"); // "#FFFF00"
+* rgb2Hex("255 255.0"); // "#FFFF00"
+* rgb2Hex("#FFFF00"); // "#FFFF00"
+* rgb2Hex("#1a1a1a"); // "#1a1a1a"
+* rgb2Hex("2552550"); // "2552550"
+* rgb2Hex("invalid"); // "invalid"
+* rgb2Hex(null); // ""
+*/
+var rgb2Hex = function (rgbCode) {
+	if(!rgbCode || typeof rgbCode !== "string") {
+		return "";
+	}
+	if(rgbCode.charAt(0) === "#") {
+		return rgbCode;
+	}
+	var rgb = rgbCode.match(/\d+/g);
+	if(!rgb || rgb.length < 3) {
+		return rgbCode;
+	}
+
+	var hex = "#";
+	for(var i = 0; i < 3; i++) {
+		var num = +rgb[i];
+		if(!(num >= 16)) { // Handle NaN case
+			hex += "0";
+		}
+		hex += (num) ? num.toString(16).toUpperCase() : "0";
+	}
+	return hex;
+};
+
+/** transform data to tab seperated value
+* @public
+* @param {*} data
+* @return {string}
+*/
+var prepareTSVContent = function (data) {
+	if (data == null) {
+		return "";
+	}
+
+	var content = (typeof data === 'string') ? data : data.toString();
+
+	if (!content.length) { return ""; }
+
+	// Replace any new line and tab
+	if (content.indexOf("\n") >= 0) {
+		content = content.replace(/[\r\n]/g, " ");
+	}
+
+	if (content.indexOf("\t") >= 0) {
+		content = content.replace(/\t/g, " ");
+	}
+
+	// Trim front and back spaces
+	if (content.charAt(0) === " " || content.charAt(content.length - 1) === " ") {
+		content = content.trim();
+	}
+
+	return content;
+};
+
+/* unused harmony default export */ var __WEBPACK_DEFAULT_EXPORT__ = ((/* unused pure expression or super */ null && (Util)));
+
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/************************************************************************/
 var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
 
 // UNUSED EXPORTS: Cell, CellFloatingPanel, CellSpan, CellSpans, Column, ColumnStats, Conflator, Core, DataCache, DataTable, DataView, ElementFrameWork, ElementWrapper, EventDispatcher, HScrollbar, ILayoutGrid, LayoutGrid, Reverter, Scrollbar, SectionSettings, SelectionList, SortableTitlePlugin, TrackLayout, VScrollbar, VirtualizedLayoutGrid, Virtualizer, default
 
@@ -10390,181 +10961,723 @@ LayoutGrid.prototype._updateCellSpanLayout = function (cellSpans) {
 	}
 };
 
-/**
- * @private
- * @param {number} indexX
- * @param {number} indexY
- * @param {!CellSpan} cellSpan
- * @param {boolean} adding
- */
-LayoutGrid.prototype._updateCellSpan = function (indexX, indexY, cellSpan, adding) {
-	this._updateCellSpanSize(indexX, indexY, adding ? cellSpan : null);
-	this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.rowSpan, adding);
+/**
+ * @private
+ * @param {number} indexX
+ * @param {number} indexY
+ * @param {!CellSpan} cellSpan
+ * @param {boolean} adding
+ */
+LayoutGrid.prototype._updateCellSpan = function (indexX, indexY, cellSpan, adding) {
+	this._updateCellSpanSize(indexX, indexY, adding ? cellSpan : null);
+	this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.rowSpan, adding);
+};
+
+/**
+ * @private
+ * @param {number} indexX
+ * @param {number} indexY
+ * @param {number} colSpan
+ * @param {number} rowSpan
+ * @param {boolean} adding
+ */
+LayoutGrid.prototype._updateCellSpanClass = function (indexX, indexY, colSpan, rowSpan, adding) {
+	var column;
+
+	for (var c = 0; c < colSpan; ++c) {
+		column = this._columns[indexX + c];
+
+		if (!column) {
+			break;
+		}
+
+		column.collapseCells(indexY, rowSpan, adding, (c === 0), (c > 0));
+	}
+
+	var cell = this._getCell(indexX, indexY);
+
+	if (cell) {
+		cell._colSpan = (adding) ? colSpan : 1;
+		cell._rowSpan = (adding) ? rowSpan : 1; // For quick rendering
+	}
+};
+
+/**
+ * @private
+ * @param {Array.<CellSpan>} cellSpans
+ * @param {boolean} adding
+ */
+LayoutGrid.prototype._updateCellSpans = function (cellSpans, adding) {
+	if (cellSpans == null) { return; }
+
+	for (var i = cellSpans.length; --i >= 0; ) {
+		var cellSpan = cellSpans[i];
+
+		this._updateCellSpan(cellSpan.indexX, cellSpan.indexY, cellSpan, adding);
+	}
+};
+
+/**
+ * @private
+ * @param {Object} e
+ */
+LayoutGrid.prototype._onMouseMove = function (e) {
+	var target = e["target"];
+
+	var cellElement = util.closestElement(target, "cell");
+	var colIndex = this._stretchedCells.getColumnIndex(cellElement);
+	if(colIndex < 0) { // Not found colIndex in stretching cell, then get from normal row
+		var colElement = util.closestElement(target, "column");
+		colIndex =	this.getColumnIndex(colElement);
+	}
+	var rowIndex = this.getCellIndex(colIndex, cellElement);
+
+	this.setRowHighlight(rowIndex);
+};
+
+/**
+ * @private
+ * @param {Object} e
+ */
+LayoutGrid.prototype._onMouseOut = function (e) {
+	var rel = e.relatedTarget;
+
+	if (rel) {
+		var thisElem = this._element;
+
+		while (rel.parentNode !== null) {
+			rel = rel.parentNode;
+
+			if (rel === thisElem) {
+				return;
+			}
+		}
+	}
+
+	this.setRowHighlight(-1);
+};
+
+/**
+ * @private
+ * @param {number} rowIndex
+ */
+LayoutGrid.prototype._updateSelectionUI = function (rowIndex) { // Update UI of the specified row index
+	var selected = this._selectionList.getSelection(rowIndex);
+	this._enableStretchCellClass(rowIndex, "selected-row", selected);
+	this.enableRowClass(rowIndex, "selected-row", selected);
+};
+
+/** @private
+* @param {number} rowIndex
+*/
+LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
+	this._enableStretchCellClass(rowIndex, "selected-row", true);
+	this.enableRowClass(rowIndex, "selected-row", true);
+};
+
+/**
+ * @private
+ * @param {number} rowIndex
+ */
+LayoutGrid.prototype._removeSelectionUI = function (rowIndex) {
+	this._enableStretchCellClass(rowIndex, "selected-row", false);
+	this.enableRowClass(rowIndex, "selected-row", false);
+};
+
+/**
+ * @public
+ * @ignore
+ */
+LayoutGrid.prototype._onEnterDocument = function () {
+	if (!this._initialized && this.getParent()) {
+		for (var c = 0; c < this._colCount; ++c) {
+			this._columns[c].enableAutoStyleUpdating();
+		}
+
+		this._syncLayoutToColumns(0);
+		this._initialized = true;
+	}
+};
+
+/** @public
+* @ignore
+* @param {*} ctx
+*/
+LayoutGrid.prototype._setContext = function(ctx) {
+	this._ctx = ctx;
+};
+
+/** @public
+* @ignore
+* @return {*} ctx
+*/
+LayoutGrid.prototype._getContext = function () {
+	return this._ctx;
+};
+
+/** This is a WORKAROUND to fix Internet Explorer couldn't render top 50% with translateX -50% correctly
+ * @private
+*/
+LayoutGrid.prototype._resetTransformIETimer = function () {
+	if (util.isIE) {
+		if(!this._transformIETimer) {
+			this.enableClass("reset-transform");
+			this._transformIETimer = setTimeout(this._onResetTransformIE, 20);
+		}
+	}
+};
+/** @private
+*/
+LayoutGrid.prototype._onResetTransformIE = function () {
+	this._transformIETimer = 0;
+	this.enableClass("reset-transform", false);
+};
+
+LayoutGrid._proto = LayoutGrid.prototype;
+
+/* harmony default export */ const grid_LayoutGrid = (LayoutGrid);
+
+
+// EXTERNAL MODULE: ./node_modules/tr-grid-util/es6/Util.js
+var es6_Util = __webpack_require__(869);
+;// CONCATENATED MODULE: ./node_modules/tr-grid-util/es6/GroupDefinitions.js
+
+
+/** @constructor
+*/
+var GroupDefinitions = function () {
+	this._groupMap = {};
+	this._childToParent = {};
+};
+
+/** @type {!Object.<string, Object>}
+* @description A map of group id to group defintion
+* @private
+*/
+GroupDefinitions.prototype._groupMap;
+/** @type {!Object.<string, string>}
+* @description A map of child id to parent id
+* @private
+*/
+GroupDefinitions.prototype._childToParent;
+
+
+/** @public
+* @function
+* @param {Object} groupDef
+* @return {string}
+*/
+GroupDefinitions.getGroupId = function(groupDef) {
+	if(groupDef) {
+		return groupDef.id || "";
+	}
+	return "";
+};
+/** @public
+* @param {Object.<string, Object>} groupMap
+* @param {Object} groupDef
+* @return {number} Return total number of parents. Return 0 if there is no parent.
+*/
+GroupDefinitions.calcTreeDepth = function (groupMap, groupDef) {
+	var curDepth = -1;
+	var curNode = groupDef;
+	while(curNode) { // WARNING: infinite loop could occured, if parentId is cycle back to one of the child group
+		if(++curDepth > 15) {
+			console.log("WARNING: Infinite loop detected during column group creation");
+			break;
+		}
+		var parentId = curNode.parentId;
+		curNode = groupMap[parentId];
+	}
+	return curDepth;
+};
+/** @public
+* @param {Object.<string, Object>} groupMap
+* @param {string} groupId
+* @return {Array.<string>}
+*/
+GroupDefinitions.getLeafDescendants = function (groupMap, groupId) {
+	var groupDef = groupMap[groupId];
+	if(!groupDef) {
+		return null;
+	}
+
+	var leaves = [];
+	var unvisitedGroups = [groupDef];
+	var visitedCount = 0;
+	var visitedMap = {};
+	while(visitedCount < unvisitedGroups.length) {
+		groupDef = unvisitedGroups[visitedCount++];
+		visitedMap[groupDef.id] = true;
+		var chdr = groupDef.children;
+		var len = chdr.length;
+		for(var i = 0; i < len; ++i) {
+			var childId = chdr[i];
+			groupDef = groupMap[childId];
+			if(groupDef) {
+				if(!visitedMap[groupDef.id]) { // Prevent infinite loop
+					unvisitedGroups.push(groupDef);
+				}
+			} else {
+				leaves.push(childId);
+			}
+		}
+	}
+	return leaves;
+};
+
+
+/** @private
+* @function
+* @param {Object} obj
+* @return {Object}
+*/
+GroupDefinitions._cloneObject = function(obj) {
+	var newObj = (0,es6_Util/* cloneObject */.kI)(obj);
+	if(Array.isArray(newObj.children)) {
+		newObj.children = newObj.children;
+	} else {
+		newObj.children = [];
+	}
+	return newObj;
+};
+/** @private
+* @param {Object} groupMap
+* @return {!Object}
+*/
+GroupDefinitions._cloneGroupMap = function (groupMap) {
+	var outMap = {};
+	for(var groupId in groupMap) {
+		var groupDef = groupMap[groupId];
+		var obj = GroupDefinitions._cloneObject(groupDef);
+		obj.children = groupDef.children.slice();
+		outMap[groupId] = obj;
+	}
+	return outMap;
+};
+
+/** @private
+* @function
+* @param {Array.<string>|Object} obj
+* @param {string=} groupId
+* @return {Object}
+*/
+GroupDefinitions._toGroupDefinition = function(obj, groupId) {
+	var groupDef = null;
+	if(obj) {
+		if(Array.isArray(obj)) {
+			groupDef = {
+				children: obj
+			};
+		} else {
+			groupDef = GroupDefinitions._cloneObject(obj);
+		}
+		if(groupId) {
+			if(!groupDef.id) {
+				groupDef.name = groupId;
+			}
+			groupDef.id = groupId;
+		}
+	}
+	return groupDef;
+};
+
+/** @public
+* @return {string}
+*/
+GroupDefinitions.prototype.toString = function() {
+	var groupMap = this._groupMap;
+	var lines = [];
+	lines.push("=== groupDefs ===");
+	for(var key in groupMap) {
+		var group = groupMap[key];
+		lines.push(key + ": " + JSON.stringify(group, ["id", "parentId", "children"]));
+	}
+
+	lines.push("=== childToParent ===");
+	lines.push(JSON.stringify(this._childToParent, null, 2));
+	lines.push("");
+
+	return lines.join("\n");
+};
+
+/** Get group definition object. This method can be used to check whether the given id is a group id or not (i.e., isGroupId).
+* @public
+* @param {string} groupId
+* @return {Object}
+*/
+GroupDefinitions.prototype.getGroup = function (groupId) {
+	if(groupId) {
+		return this._groupMap[groupId] || null;
+	}
+	return null;
+};
+/** @public
+* @function
+* @param {string} groupId
+* @return {Object}
+*/
+GroupDefinitions.prototype.getDefinition = GroupDefinitions.prototype.getGroup;
+/** Get array of all existing group definitions
+* @public
+* @return {!Array.<Object>}
+*/
+GroupDefinitions.prototype.getGroups = function () {
+	var groupDefs = [];
+	var groupMap = this._groupMap;
+	for(var key in groupMap) {
+		groupDefs.push(groupMap[key]);
+	}
+	return groupDefs;
+};
+/** @public
+* @return {!Object.<string, Object>}
+*/
+GroupDefinitions.prototype.getGroupMap = function () {
+	return this._groupMap; // WARNING: Allow access to private member
+};
+/** @public
+* @return {!Object.<string, Object>}
+*/
+GroupDefinitions.prototype.cloneGroupMap = function () {
+	return GroupDefinitions._cloneGroupMap(this._groupMap);
+};
+
+/** Get immediate child ids of the specified group. The returned array can contain both child ids and group ids
+* @public
+* @param {string} groupId
+* @return {Array.<string>}
+*/
+GroupDefinitions.prototype.getGroupChildren = function (groupId) {
+	var groupDef = this._groupMap[groupId];
+	return groupDef ? groupDef.children : null;
+};
+/** Get all non-group descendants of the given group id.
+* @public
+* @param {string} groupId
+* @return {Array.<string>}
+*/
+GroupDefinitions.prototype.getLeafDescendants = function (groupId) {
+	return GroupDefinitions.getLeafDescendants(this._groupMap, groupId);
+};
+/** @public
+* @param {string} groupId
+* @return {number} Return -1 if the given groupDef is null. Return 0 if there is no parent. Return 1 or more if it has a parent
+*/
+GroupDefinitions.prototype.getGroupLevel = function (groupId) {
+	return GroupDefinitions.calcTreeDepth(this._groupMap, this._groupMap[groupId]);
+};
+/** @public
+* @param {string} groupId
+* @return {Object}
+*/
+GroupDefinitions.prototype.getRootGroup = function (groupId) {
+	if (!groupId) {
+		return null;
+	}
+	var groupMap = this._groupMap;
+	var groupDef = groupMap[groupId] || null;
+	// TODO: Support column id
+	if(groupDef) {
+		while (groupDef.parentId) {
+			var parentDef = groupMap[groupDef.parentId];
+			if(parentDef) {
+				groupDef = parentDef;
+			} else {
+				break;
+			}
+		}
+	}
+	return groupDef;
+};
+/** @public
+* @param {string} childId
+* @return {Object}
+*/
+GroupDefinitions.prototype.getParentGroup = function (childId) {
+	return this.getGroup(this._childToParent[childId]);
+};
+/** @public
+* @param {string} childId
+* @return {Array.<string>}
+*/
+GroupDefinitions.prototype.getParentIds = function(childId) {
+	if (childId && typeof childId === "string") {
+		var groupId = this._childToParent[childId];
+		if (groupId) {
+			var groupIds = [groupId];
+			var group = this._groupMap[groupId];
+			while (group && group.parentId) {
+				group = this._groupMap[group.parentId];
+				if (group) {
+					groupIds.push(group.id);
+				}
+			}
+			return groupIds;
+		}
+	}
+	return null;
+};
+/** @public
+* @param {string} childId
+* @param {number=} groupLevel
+* @return {string}
+*/
+GroupDefinitions.prototype.getParentId = function (childId, groupLevel) {
+	var parentId = this._childToParent[childId];
+	if(groupLevel != null) {
+		var currentLevel = this.getGroupLevel(parentId);
+		while(currentLevel > groupLevel && parentId){
+			parentId = this._childToParent[parentId];
+			currentLevel--;
+		}
+	}
+
+	return parentId || "";
 };
 
-/**
- * @private
- * @param {number} indexX
- * @param {number} indexY
- * @param {number} colSpan
- * @param {number} rowSpan
- * @param {boolean} adding
- */
-LayoutGrid.prototype._updateCellSpanClass = function (indexX, indexY, colSpan, rowSpan, adding) {
-	var column;
 
-	for (var c = 0; c < colSpan; ++c) {
-		column = this._columns[indexX + c];
+/** Remove all existing group definitions and replace them with the given definitions.
+* @public
+* @param {Array.<Object>=} groupDefs Use null or empty array to remove all existing groups
+*/
+GroupDefinitions.prototype.setGroups = function (groupDefs) {
+	// Clear existing group structure
+	var groupMap = this._groupMap = {};
+	var childToParent = this._childToParent = {};
 
-		if (!column) {
-			break;
+	// Create group map
+	var i;
+	var grpCount = groupDefs ? groupDefs.length : 0;
+	var groupId = "";
+	for (i = 0; i < grpCount; i++) {
+		var groupDef = groupDefs[i];
+		groupId = groupDef.id;
+		if(groupId) {
+			groupMap[groupId] = groupDef;
+		}
+	}
+
+	// Create child to parent map
+	var groupIds = Object.keys(groupMap);
+	grpCount = groupIds.length;
+	for(i = 0; i < grpCount; ++i) {
+		groupId = groupIds[i];
+		var children = groupMap[groupId].children;
+		var childCount = children.length;
+		for (var j = 0; j < childCount; j++) {
+			childToParent[children[j]] = groupId;
 		}
-
-		column.collapseCells(indexY, rowSpan, adding, (c === 0), (c > 0));
 	}
 
-	var cell = this._getCell(indexX, indexY);
-
-	if (cell) {
-		cell._colSpan = (adding) ? colSpan : 1;
-		cell._rowSpan = (adding) ? rowSpan : 1; // For quick rendering
+	// Apply a parent id to group definition to make it easier to find depth
+	for(i = 0; i < grpCount; ++i) {
+		groupId = groupIds[i];
+		var parentId = childToParent[groupId];
+		if(parentId) {
+			groupMap[groupId].parentId = parentId;
+		}
 	}
 };
-
-/**
- * @private
- * @param {Array.<CellSpan>} cellSpans
- * @param {boolean} adding
- */
-LayoutGrid.prototype._updateCellSpans = function (cellSpans, adding) {
-	if (cellSpans == null) { return; }
-
-	for (var i = cellSpans.length; --i >= 0; ) {
-		var cellSpan = cellSpans[i];
-
-		this._updateCellSpan(cellSpan.indexX, cellSpan.indexY, cellSpan, adding);
+/** Add new group definition to existing group structure. Existing group with the same id will be replaced.
+* @public
+* @param {Object} groupDef Group definition object
+* @return {string} Return group ID
+*/
+GroupDefinitions.prototype.addGroup = function (groupDef) {
+	var groupId = GroupDefinitions.getGroupId(groupDef);
+	if(groupId) {
+		return this.setGroup(groupId, groupDef);
 	}
+	return groupId;
 };
+/** @public
+* @param {string} groupId
+* @return {boolean}
+*/
+GroupDefinitions.prototype.removeGroup = function (groupId) {
+	var curDef = this._groupMap[groupId];
+	if(curDef) {
+		this.removeAllChildren(groupId);
+		this.removeGroupChild(groupId);
+		delete this._groupMap[groupId];
 
-/**
- * @private
- * @param {Object} e
- */
-LayoutGrid.prototype._onMouseMove = function (e) {
-	var target = e["target"];
-
-	var cellElement = util.closestElement(target, "cell");
-	var colIndex = this._stretchedCells.getColumnIndex(cellElement);
-	if(colIndex < 0) { // Not found colIndex in stretching cell, then get from normal row
-		var colElement = util.closestElement(target, "column");
-		colIndex =	this.getColumnIndex(colElement);
+		return true;
 	}
-	var rowIndex = this.getCellIndex(colIndex, cellElement);
-
-	this.setRowHighlight(rowIndex);
+	return false;
 };
+/** Replace and update existing group definition. New group is added if the given id has no match. Existing group will be removed of no new definition is given.
+* @public
+* @param {string} groupId
+* @param {Array.<string>|Object=} groupDef
+* @return {string} Return group Id. Return empty string if nothing has been changed.
+*/
+GroupDefinitions.prototype.setGroup = function (groupId, groupDef) {
+	if(!groupId) {
+		return "";
+	}
 
-/**
- * @private
- * @param {Object} e
- */
-LayoutGrid.prototype._onMouseOut = function (e) {
-	var rel = e.relatedTarget;
-
-	if (rel) {
-		var thisElem = this._element;
+	if(groupDef) {
+		var newDef = GroupDefinitions._toGroupDefinition(groupDef, groupId);
+		this._ungroupChildren(newDef.children);
 
-		while (rel.parentNode !== null) {
-			rel = rel.parentNode;
+		var curDef = this._groupMap[groupId];
+		if(curDef) { // Replace
+			this.removeAllChildren(groupId);
+		}
+		var parentDef = this._childToParent[groupId];
+		if(parentDef) {
+			newDef.parentId = parentDef.id;
+		}
+		this._groupMap[groupId] = newDef;
 
-			if (rel === thisElem) {
-				return;
+		var chdr = newDef.children;
+		var len = chdr.length;
+		for(var i = 0; i < len; ++i) {
+			var childId = chdr[i];
+			this._childToParent[childId] = groupId;
+			var childDef = this._groupMap[childId];
+			if(childDef) {
+				childDef.parentId = groupId;
 			}
 		}
+	} else { // Remove
+		if(!this.removeGroup(groupId)) {
+			return "";
+		}
 	}
 
-	this.setRowHighlight(-1);
-};
-
-/**
- * @private
- * @param {number} rowIndex
- */
-LayoutGrid.prototype._updateSelectionUI = function (rowIndex) { // Update UI of the specified row index
-	var selected = this._selectionList.getSelection(rowIndex);
-	this._enableStretchCellClass(rowIndex, "selected-row", selected);
-	this.enableRowClass(rowIndex, "selected-row", selected);
-};
-
-/** @private
-* @param {number} rowIndex
-*/
-LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
-	this._enableStretchCellClass(rowIndex, "selected-row", true);
-	this.enableRowClass(rowIndex, "selected-row", true);
+	return groupId;
 };
 
-/**
+/** Remove each child from any group
  * @private
- * @param {number} rowIndex
- */
-LayoutGrid.prototype._removeSelectionUI = function (rowIndex) {
-	this._enableStretchCellClass(rowIndex, "selected-row", false);
-	this.enableRowClass(rowIndex, "selected-row", false);
-};
-
-/**
- * @public
- * @ignore
+ * @param {Array.<string>} children
  */
-LayoutGrid.prototype._onEnterDocument = function () {
-	if (!this._initialized && this.getParent()) {
-		for (var c = 0; c < this._colCount; ++c) {
-			this._columns[c].enableAutoStyleUpdating();
+GroupDefinitions.prototype._ungroupChildren = function(children) {
+	if (Array.isArray(children)) {
+		var len = children.length;
+		for(var i = 0; i < len; ++i) {
+			this.removeGroupChild(children[i]);
 		}
-
-		this._syncLayoutToColumns(0);
-		this._initialized = true;
 	}
 };
 
-/** @public
-* @ignore
-* @param {*} ctx
-*/
-LayoutGrid.prototype._setContext = function(ctx) {
-	this._ctx = ctx;
-};
 
 /** @public
-* @ignore
-* @return {*} ctx
+* @param {string} parentId Group id
+* @param {string} childId
+* @return {boolean}
 */
-LayoutGrid.prototype._getContext = function () {
-	return this._ctx;
-};
+GroupDefinitions.prototype.addGroupChild = function (parentId, childId) {
+	var groupDef = this._groupMap[parentId];
 
-/** This is a WORKAROUND to fix Internet Explorer couldn't render top 50% with translateX -50% correctly
- * @private
+	if(childId && groupDef) {
+		var chdr = groupDef.children;
+		if(chdr && chdr.indexOf(childId) < 0) {
+			this.removeGroupChild(childId); // Remove previous parent
+			// Add new child to group structures
+			this._childToParent[childId] = parentId;
+			var childDef = this._groupMap[childId];
+			if(childDef) {
+				childDef.parentId = parentId;
+			}
+			chdr.push(childId);
+			return true;
+		}
+	}
+	return false;
+};
+/** Remove the given child from its own parent (i.e., unset Parent of the given child).
+* @public
+* @param {string} childId
+* @return {boolean}
 */
-LayoutGrid.prototype._resetTransformIETimer = function () {
-	if (util.isIE) {
-		if(!this._transformIETimer) {
-			this.enableClass("reset-transform");
-			this._transformIETimer = setTimeout(this._onResetTransformIE, 20);
+GroupDefinitions.prototype.removeGroupChild = function (childId) {
+	var parentId = this._childToParent[childId];
+	if(!parentId) {
+		return false;
+	}
+	this._childToParent[childId] = "";
+	var childDef = this._groupMap[childId];
+	if(childDef) {
+		childDef.parentId = "";
+	}
+	var parentDef = this._groupMap[parentId];
+	if(parentDef) {
+		var chdr = parentDef.children;
+		if(chdr.length) {
+			var at = chdr.indexOf(childId);
+			if (at >= 0) {
+				chdr.splice(at, 1); // splice is slow
+			}
 		}
 	}
+	return true;
 };
-/** @private
+/** Remove all children from the specified group
+* @public
+* @param {string} groupId
+* @return {boolean}
 */
-LayoutGrid.prototype._onResetTransformIE = function () {
-	this._transformIETimer = 0;
-	this.enableClass("reset-transform", false);
+GroupDefinitions.prototype.removeAllChildren = function(groupId) {
+	var grpDef = this._groupMap[groupId];
+	if(grpDef) {
+		var chdr = grpDef.children;
+		var len = chdr.length;
+		if(len) {
+			grpDef.children = [];
+			for(var i = 0; i < len; ++i) {
+				var childId = chdr[i];
+				if(this._childToParent[childId]) {
+					this._childToParent[childId] = "";
+				}
+				var childDef = this._groupMap[childId];
+				if(childDef) {
+					childDef.parentId = "";
+				}
+			}
+			return true;
+		}
+	}
+	return false;
 };
+/** Replace and update existing group definition.
+* @public
+* @param {string} groupId
+* @param {Array.<string>} newChildList If null is given, all existing children in the group will be removed
+* @return {boolean}
+*/
+GroupDefinitions.prototype.setGroupChildren = function (groupId, newChildList) {
+	var groupDef = this._groupMap[groupId];
+	if(groupDef) {
+		if(Array.isArray(newChildList)) {
+			var chdr = newChildList.slice();
+			this._ungroupChildren(chdr);
+			this.removeAllChildren(groupId);
+			groupDef.children = chdr;
+
+			var parentId = groupDef.id;
+			var len = chdr.length;
+			for(var i = 0; i < len; ++i) {
+				var childId = chdr[i];
+				this._childToParent[childId] = parentId;
+				var childDef = this._groupMap[childId];
+				if(childDef) {
+					childDef.parentId = parentId;
+				}
+			}
 
-LayoutGrid._proto = LayoutGrid.prototype;
+			return true;
+		} else if(!newChildList && groupDef.children.length) {
+			this.removeAllChildren(groupId);
+			return true;
+		}
+	}
+	return false;
+};
 
-/* harmony default export */ const grid_LayoutGrid = (LayoutGrid);
+/* harmony default export */ const es6_GroupDefinitions = ((/* unused pure expression or super */ null && (GroupDefinitions)));
 
 
 ;// CONCATENATED MODULE: ./src/js/data/DataCache.js
@@ -23722,6 +24835,7 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 
 ;// CONCATENATED MODULE: ./src/js/grid/Core.js
 
+ // eslint-disable-line
 
  // eslint-disable-line
 
@@ -23797,6 +24911,9 @@ var Core_Core = function (opt_initializer) {
 	var _t = this;
 
 	// Initialize method binding
+	_t.getColumnId = _t.getColumnId.bind(_t);
+	_t.getColumnIndex = _t.getColumnIndex.bind(_t);
+
 	_t._onMouseMove = _t._onMouseMove.bind(_t);
 	_t._onRowHightlighted = _t._onRowHightlighted.bind(_t);
 
@@ -24244,6 +25361,10 @@ Core_Core.prototype._preserveGridSize = false;
 * @private
 */
 Core_Core.prototype._rowHeightTimerId = 0;
+/** @type {GroupDefinitions}
+* @private
+*/
+Core_Core.prototype._groupDefs = null;
 //#region Public Methods
 
 /**
@@ -24251,7 +25372,7 @@ Core_Core.prototype._rowHeightTimerId = 0;
 * @return {string}
 */
 Core_Core.getVersion = function () {
-	return "5.1.32";
+	return "5.1.34";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -25379,7 +26500,7 @@ Core_Core.prototype._moveColumn = function (fromCol, destCol) {
 		vEnd = this._colVirtualizer.getLastIndexInView();
 	}
 
-	var colId = this._getColumnId(fromCol);
+	var colId = this.getColumnId(fromCol);
 	this._layoutX.moveLane(fromCol, destCol);
 	var sectionCount = this._settings.length;
 	for (var i = 0; i < sectionCount; ++i) {
@@ -25499,6 +26620,11 @@ Core_Core.prototype._deserializeColumn = function (index, jsonObj) {
 	// TODO: Load specific styles for each column type (e.g. "content", "title", "header")
 
 	var colDef = this._getColumnDef(index);
+	var colId = jsonObj["id"];
+	if(colId && typeof colId === "string") {
+		colDef["id"] = colId; // WARNING: We do not guarantee uniqueness of user id
+	}
+
 	var value = jsonObj["dataColumnName"];
 	if (value != null) {
 		colDef["dataColumnName"] = value;
@@ -26942,14 +28068,19 @@ Core_Core.prototype.getRelativePosition = function (obj, context) {
 	return ret_obj;
 };
 
-/** @public
-* @param {string} str data column name
-* @return {number} Return negative if the mouse is not hit
+/** Find column index by column id or data column name
+* @public
+* @param {string} str Column id or data column name
+* @return {number} Return negative value if there is no match
 */
 Core_Core.prototype.getColumnIndex = function (str) {
-	for(var c = this.getColumnCount(); --c >= 0;) {
-		if(str === this.getDataColumnName(c)) {
-			return c;
+	if(str) {
+		var colCount = this.getColumnCount();
+		for(var c = 0; c < colCount; ++c) {
+			var colDef = this._getColumnDef(c);
+			if(str === colDef["id"] || str === colDef["dataColumnName"]) {
+				return c;
+			}
 		}
 	}
 	return -1;
@@ -27834,6 +28965,37 @@ Core_Core.prototype.normalizeConfig = function (configObj) {
 
 	return configObj;
 };
+/** @public
+* @param {GroupDefinitions} groupDefs
+*/
+Core_Core.prototype.setColumnGrouping = function (groupDefs) {
+	this._groupDefs = groupDefs || null;
+};
+/** @public
+* @param {string|number} colRef
+* @return {string} Return group id of immediate group parent. Return empty string, if no parent is found.
+*/
+Core_Core.prototype.getColumnGroupParentId = function (colRef) {
+	if(this._groupDefs) {
+		var colId = (typeof colRef === "number") ? this.getColumnId(colRef) : colRef;
+		return this._groupDefs.getParentId(colId);
+	}
+	return "";
+};
+
+/** @public
+* @param {string} groupId
+* @return {Array.<string>} Return array of column id. Return null if the specified group has no child
+*/
+Core_Core.prototype.getColumnGroupChildIds = function (groupId) {
+	if(this._groupDefs) {
+		var ary = this._groupDefs.getLeafDescendants(groupId);
+		if(ary && ary.length > 0) {
+			return ary;
+		}
+	}
+	return null;
+};
 //#endregion Public Methods
 
 //#region Private Methods
@@ -28491,13 +29653,35 @@ Core_Core.prototype._getNestedColumnDef = function (colIndex, firstLvl, secondLv
 	}
 	return def;
 };
+
 /** @public
+* @param {number} colIndex
+* @return {string} Return empty string if the specified column does not exist
+*/
+Core_Core.prototype.getColumnId = function (colIndex) {
+	if(colIndex >= 0 && colIndex < this.getColumnCount()) {
+		return this._getColumnDef(colIndex)["id"] || "";
+	}
+	return "";
+};
+/** @deprecated
+* @public
+* @function
 * @ignore
 * @param {number} colIndex
 * @return {string}
 */
-Core_Core.prototype._getColumnId = function (colIndex) {
-	return this._getColumnDef(colIndex)["id"];
+Core_Core.prototype._getColumnId = Core_Core.prototype.getColumnId;
+/** @public
+* @return {!Array.<string>} Return all column ids from existing column
+*/
+Core_Core.prototype.getColumnIds = function () {
+	var colCount = this.getColumnCount();
+	var ary = new Array(colCount);
+	for(var c = 0; c < colCount; ++c) {
+		ary[c] = this._getColumnDef(c)["id"] || "";
+	}
+	return ary;
 };
 
 
@@ -30969,5 +32153,7 @@ grid.SortableTitlePlugin = plugins_SortableTitlePlugin;
 
 /* harmony default export */ const src = ((/* unused pure expression or super */ null && (Core)));
 
+})();
+
 /******/ })()
 ;