@refinitiv-ui/efx-grid 6.0.5 → 6.0.7

package/lib/rt-grid/dist/rt-grid.js

@@ -2392,7 +2392,7 @@ Dom.getRelativePosition = function(A, B, retObj) {
 	retObj["y"] -= bp["y"];
 	return /**@type {!Object} */(retObj);
 };
-/** Return closest ancestor element or the element itself with specified class string. Otherwise return null
+/** The method returns closest ancestor element or the element itself with specified class string. Otherwise, it returns null
 * @public
 * @function
 * @param {Element|Node|undefined} elem
@@ -2401,15 +2401,17 @@ Dom.getRelativePosition = function(A, B, retObj) {
 */
 Dom.closestElement = function(elem, classStr) {
 	var n = elem;
-	while(n && n.classList) {
-		if(n.classList.contains(classStr)) {
-			return /** @type{Element} */(n);
+	while (n) {
+		if(n.classList) { // DocumentFragment does not have classList property
+			if (n.classList.contains(classStr)) {
+				return /** @type{Element} */(n);
+			}
 		}
-		n = n.parentNode;
+		n = n.parentNode || n.host; // ShadowRoot has host, but not parentNode
 	}
 	return null;
 };
-/** Return closest ancestor element or the element itself with the specified tagName. Otherwise return null
+/** The method returns closest ancestor element or the element itself with the specified tagName. Otherwise, it returns null
 * @public
 * @function
 * @param {Element|Node|undefined} elem
@@ -2418,11 +2420,13 @@ Dom.closestElement = function(elem, classStr) {
 */
 Dom.closestTagName = function(elem, tn) {
 	var n = elem;
-	while(n && n.tagName) {
-		if(n.tagName == tn) {
-			return /** @type{Element} */(n);
+	while(n) {
+		if(n.tagName) {
+			if(n.tagName == tn) {
+				return /** @type{Element} */(n);
+			}
 		}
-		n = n.parentNode;
+		n = n.parentNode || n.host; // ShadowRoot has host, but not parentNode
 	}
 	return null;
 };
@@ -2979,7 +2983,10 @@ Deferred.prototype._rejectHandler = null;
 * @private
 */
 Deferred.prototype._ctx = null;
-
+/** @type {boolean}
+* @private
+*/
+Deferred.prototype._fulfilled = false;
 
 /** @public
 * @param {*=} result
@@ -3011,10 +3018,17 @@ Deferred.prototype.reject = function(result) {
 		this._finally();
 	}
 };
+/** @public
+* @return {boolean}
+*/
+Deferred.prototype.isFulfilled = function() {
+	return this._fulfilled;
+};
 
 /** @private */
 Deferred.prototype._finally = function() {
 	// Release all references to avoid memory leak
+	this._fulfilled = true;
 	this._ctx = this._resolveHandler = this._rejectHandler = null;
 	this._resolve = this._reject = null;
 };
@@ -3238,6 +3252,10 @@ ElfUtil._observed = false;
 * @private
 */
 ElfUtil._pendingResolve = false;
+/** @type {boolean}
+* @private
+*/
+ElfUtil._themeLoaded = false;
 
 /** @type {Object.<string, Object>}
 * @private
@@ -3386,6 +3404,32 @@ ElfUtil.getThemeName = function (optElem) {
 	return ElfUtil._themeName;
 };
 
+/** This method is using for unit test
+* @public
+* @ignore
+* @function
+* @param {string} themeName
+*/
+ElfUtil.setThemeName = function (themeName) {
+	ElfUtil._themeName = themeName;
+};
+
+/** @public
+* @function
+* @return {boolean}
+*/
+ElfUtil.isThemeLoaded = function () {
+	return ElfUtil._themeLoaded;
+};
+
+/** @public
+* @function
+* @return {Object}
+*/
+ElfUtil.getColors = function() {
+	return ElfUtil.themeColors;
+};
+
 /** Check the current ELF theme is Halo theme
 * @public
 * @function
@@ -3536,8 +3580,22 @@ ElfUtil._addThemeChangedCallback = function(cb) {
 	}
 };
 
+/** @public
+* @return {Promise<Object>} A promise of object of theme colors
+*/
+ElfUtil.reloadThemeColors = function() {
+	if (ElfUtil._deferred && ElfUtil._deferred.isFulfilled()) {
+		ElfUtil._profileName = "";
+		ElfUtil._themeLoaded = false;
+		ElfUtil.themeReady = null;
+		return ElfUtil.getThemeColors();
+	} else {
+		return ElfUtil.themeReady;
+	}
+};
+
 /** Gets current theme colors from the document and returns a promise. <br>
-* WANRING: This method sets movement color profile to html tag automatically, if JET.Settings exists or RTK is available. <br>
+* WANRING: This method sets movement color profile to html tag automatically, if JET.Settings exists or RTK.Settings is available. <br>
 * To re-request/reset theme colors, set ElfUtil.themeReady variable to null
 * @public
 * @param {Function=} themeChangedCb
@@ -3569,8 +3627,11 @@ ElfUtil.getThemeColors = function(themeChangedCb) {
 		};
 
 		var jet = window ? window.JET : null;
+		ElfUtil._themeLoaded = false;
 		if(ElfUtil._rtk && ElfUtil._rtk.Settings) {
-			ElfUtil._rtk.Settings.getAsync(options).then(ElfUtil._loadingProfileSuccess, ElfUtil._loadingProfileFailure);
+			ElfUtil._rtk.Settings.getAsync(options)
+				.then(ElfUtil._loadingProfileSuccess)
+				.catch(ElfUtil._loadingProfileFailure);
 		} else if(jet && jet.Settings) {
 			try {
 				jet.Settings.read(ElfUtil._loadingProfileSuccess, options);
@@ -3589,7 +3650,7 @@ ElfUtil.getThemeColors = function(themeChangedCb) {
 * @param {string} profileName
 */
 var movementColorProfileChanged = function(profileName) {
-	if(profileName && profileName !== ElfUtil._profileName) {
+	if(profileName !== ElfUtil._profileName) {
 		ElfUtil._retrieveThemeColors(profileName);
 
 		if(ElfUtil._pendingResolve) {
@@ -3604,7 +3665,7 @@ var movementColorProfileChanged = function(profileName) {
 	}
 };
 
-/** Get user's color profile from JET or TRK and set it to html tag (document.documentElement)
+/** Get user's color profile from JET or RTK and set it to html tag (document.documentElement)
 * @private
 * @param {string} profileName Returned from JET.Settings or RTK.Settings
 */
@@ -3623,6 +3684,7 @@ ElfUtil._loadingProfileSuccess = function(profileName) {
 /** @private
 */
 ElfUtil._loadingProfileFailure = function() {
+	ElfUtil._retrieveThemeColors();
 	if(!ElfUtil._observed) {
 		ElfUtil._observed = true;
 		ElementObserver.addAttributeListener(document.documentElement, movementColorProfileChanged, "movement-color-profile");
@@ -3647,6 +3709,7 @@ ElfUtil._profileNameRetrieved = function() {
 * @param {string} profileName Movement color profile name
 */
 ElfUtil._retrieveThemeColors = function(profileName) {
+	ElfUtil._themeLoaded = true;
 	ElfUtil._profileName = profileName;
 
 	var colors = ElfUtil.themeColors = ElfUtil.getCssVariables({
@@ -7894,40 +7957,6 @@ util_Util.moveArrayItem = function (ary, from, to) {
 	}
 	return ary;
 };
-/** Insert an item in the given array at the specified position. If the position exceeds the array length, the array will be expanded
-* @public
-* @ignore
-* @param {Array|*} ary
-* @param {number} at INCLUSIVE
-* @param {*} item
-*/
-util_Util.insertArrayItem = function (ary, at, item) {
-	if (!ary) { return; }
-
-	if (at < 0) {
-		return; // Negative index cannot be added
-	}
-	if (at < ary.length) {
-		ary.splice(at, 0, item); // any subsequence item is shifted to the right
-	} else {
-		ary[at] = item;
-	}
-};
-/** Remove the specified item from the given array
-* @public
-* @ignore
-* @param {Array|*} ary
-* @param {number} at INCLUSIVE
-* @return {*} removed item. If not existed, null is returned
-*/
-util_Util.removeArrayItem = function (ary, at) {
-	if (!ary) { return null; }
-
-	if (at >= 0 && at < ary.length) {
-		return ary.splice(at, 1)[0];
-	}
-	return null;
-};
 /** @public
 * @function
 * @param {Array} ary
@@ -7995,35 +8024,6 @@ util_Util.cycleArray = function (ary, numItems) {
 	return ary || null;
 };
 
-/** Correct the index when associated item is moved by the specified indices
-* @public
-* @ignore
-* @param {number|null} num
-* @param {number|null} from INCLUSIVE removed index
-* @param {number|null=} opt_to INCLUSIVE added index
-* @return {number} Negative if the index is removed
-*/
-util_Util.moveIndex = function (num, from, opt_to) {
-	if (!util_Util.isNumber(num)) { return -1; }
-	if (num === from) {
-		if (util_Util.isNumber(opt_to)) {
-			return /** @type{number} */(opt_to);
-		}
-		return -1;
-	}
-	if (from !== null) {
-		if (num > from) {
-			--num;
-		}
-	}
-	if (opt_to !== null) {
-		if (num >= opt_to) {
-			++num;
-		}
-	}
-	return /** @type{number} */(num);
-};
-
 /** STL implementation of lowerBound() of the C++ vector class with no recursion
 * @public
 * @ignore
@@ -8096,28 +8096,6 @@ util_Util.stringFormat = function (format) {
 util_Util._defaultLessComparator = function (left, right) {
 	return left < right;
 };
-/** @public
-* @function
-* @ignore
-* @param {number} left
-* @param {number} right
-* @return {number}
-* @example [4, 1, 2].sort(Util._numericSorter) === [1, 2, 4];
-*/
-util_Util._numericSorter = function (left, right) {
-	return left - right;
-};
-
-/** @public
-* @function
-* @ignore
-* @param {Event} e
- */
-util_Util._preventDefault = function (e) {
-	e.preventDefault();
-	e.stopPropagation();
-};
-
 /**
 * @public
 * @function
@@ -8155,24 +8133,34 @@ util_Util.calculatePercent = function (lowVal, lastVal, highVal) {
 	return percent * 100;
 };
 
-/** @description Return closest ancestor element or the element itself with specified class string. Otherwise return null
+/** @description The method returns closest ancestor element or the element itself with specified class string. Otherwise, it returns null
  * @public
  * @function
- * @ignore
  * @param {Element|Node|undefined} elem
  * @param {string} classStr The class string can only be one single class without spaces
  * @return {Element}
  */
 util_Util.closestElement = function (elem, classStr) {
 	var n = elem;
-	while (n && n.classList) {
-		if (n.classList.contains(classStr)) {
-			return /** @type{Element} */(n);
+	while (n) {
+		if(n.classList) { // DocumentFragment does not have classList property
+			if (n.classList.contains(classStr)) {
+				return /** @type{Element} */(n);
+			}
 		}
-		n = n.parentNode;
+		n = n.parentNode || n.host; // ShadowRoot has host, but not parentNode
 	}
 	return null;
 };
+/** @public
+* @function
+* @ignore
+* @param {Event} e
+ */
+util_Util._preventDefault = function (e) {
+	e.preventDefault();
+	e.stopPropagation();
+};
 
 /** @public
  * @type {boolean}
@@ -10692,7 +10680,15 @@ DataTable.prototype.setRowData = function(rid, values, eventArg) { // Data chang
 			this._prevData[rid] = this._rows[rid]; // Move reference from the removed row to history
 			delete this._rows[rid];
 			if(this._segments) {
-				segmentChanged = this._segments.containsSegment(rid); // TODO: Handle this case where the segment separator row is removed
+				var segment = this._segments.getSegment(rid);
+				if(segment) {
+					if(this._segments.removeSegment(rid)) {
+						segmentChanged = true;
+						if(!this._segments.getSegmentCount()) {
+							this._segments = null;
+						}
+					}
+				}
 			}
 			for(var i = this._rids.length; --i >= 0;) {
 				if(this._rids[i] === rid) {
@@ -11895,18 +11891,33 @@ DataTable._performMultiLevelSorting = function(dataRows, sortingDefs, segmentVal
 		return null;
 	}
 
+	var sortLogic;
 	// Populate data for each definition
 	for(var c = 0; c < defCount; ++c) {
 		var sortingDef = sortingDefs[c];
-		var columnId = sortingDef[0];
 		var rows = sortingDef[1];
-		if(rows) {
-			rows.length = rowCount;
-		} else {
-			rows = sortingDef[1] = new Array(rowCount);
-		}
-		for(var r = 0; r < rowCount; ++r) {
-			rows[r] = dataRows[r][columnId];
+		sortLogic = sortingDef[2];
+		var rowSorting = sortLogic["rowSorting"];
+		var r;
+		if(rowSorting) {
+			if(rows) {
+				rows.length = rowCount;
+				for(r = 0; r < rowCount; ++r) {
+					rows[r] = dataRows[r];
+				}
+			} else {
+				rows = sortingDef[1] = dataRows;
+			}
+		}	else {
+			if(rows) {
+				rows.length = rowCount;
+			} else {
+				rows = sortingDef[1] = new Array(rowCount);
+			}
+			var columnId = sortingDef[0];
+			for(r = 0; r < rowCount; ++r) {
+				rows[r] = dataRows[r][columnId];
+			}
 		}
 	}
 
@@ -11932,7 +11943,7 @@ DataTable._performMultiLevelSorting = function(dataRows, sortingDefs, segmentVal
 	}
 
 	var sortOrder = 0;
-	var sortLogic, sortContext;
+	var sortContext;
 	if(defCount > 1) {
 		sortLogic = DataTable._multiColumnCompareLogic;
 		sortContext = sortingDefs;
@@ -12397,7 +12408,12 @@ RowDefinition.prototype.setContent = function(userInput) {
 	this._dataId = this._rowId + this._ric; // JET/RTK will generate data id to be rowId (given from this rowDef) + ric;
 
 	// This will work for runtime ric modification, but not for first initilization.
-	this.subscribeForUpdates();
+	if(!this.subscribeForUpdates()) {
+		// Avoid losing the ROW_DEF pointer.
+		var rowData = {};
+		rowData[ROW_DEF] = this; // Enable tracking back and updating data
+		this.setRowData(rowData);
+	}
 	return true;
 };
 /** @public
@@ -12419,7 +12435,7 @@ RowDefinition.prototype.getConfigObject = function(rowOptions) {
 
 	val = this._staticValues;
 	if(val) {
-		obj["values"] = val;
+		obj["values"] = Object(Util["b" /* cloneObject */])(val);
 	}
 
 	val = this._chainRic;
@@ -12676,15 +12692,16 @@ RowDefinition.prototype.isRealTimeRow = function() {
 };
 
 /** @public
+* @return {boolean} If a subscription is made, return true.
 */
 RowDefinition.prototype.subscribeForUpdates = function() {
 	if(!this.isRealTimeRow()) {
-		return;
+		return false;
 	}
 
 	var subs = this._dc ? this._dc.getSubscriptions() : null;
 	if(!subs) {
-		return;
+		return false;
 	}
 	// TODO: Check if the same subscription is being made.
 	var prevRowData = this.unsubscribeForUpdates();
@@ -12701,6 +12718,7 @@ RowDefinition.prototype.subscribeForUpdates = function() {
 	} else {
 		this._dc.setRowData(this._dataId, {"X_RIC_NAME": this._ric, "ROW_DEF": this}); // Trigger data update immediately
 	}
+	return true;
 };
 /** @public
  * @returns {*}
@@ -13227,6 +13245,11 @@ FieldDefinition._synapse = '';
 * @const
 */
 FieldDefinition._lang = 'en';
+/**
+* @type {boolean}
+* @private
+*/
+FieldDefinition._caching = false;
 
 /**
  * @type {Object.<string, boolean>}
@@ -13248,7 +13271,10 @@ FieldDefinition.set = function(field, def) {
 * @return {Object}
 */
 FieldDefinition.get = function(field) {
-	return FieldDefinition._defs[field];
+	if(this._caching) {
+		return FieldDefinition._defs[field];
+	}
+	return null;
 };
 /** @public
 * @function
@@ -13269,11 +13295,10 @@ FieldDefinition.setSynapseConfig = function (config) {
 
 /** @public
 * @function
-* @param {string} field
-* @param {Object} def
+* @param {boolean} caching
 */
-FieldDefinition.set = function (field, def) {
-	FieldDefinition._defs[field] = def || null;
+FieldDefinition.setFieldCaching = function (caching) {
+	FieldDefinition._caching = caching;
 };
 
 /** to get more info about field via synapse service
@@ -13580,7 +13605,11 @@ var TYPE_MAPPING = {
 
 	PRICE: "number",
 	DOUBLE: "number",
-	MONEY: "number"
+	MONEY: "number",
+
+	INTEGER: "number",
+	FLOAT: "number",
+	SCORE: "number"
 };
 
 /** @type {string}
@@ -13658,6 +13687,10 @@ ColumnDefinition.prototype._name = "";
 * @private
 */
 ColumnDefinition.prototype._isDefaultName = true;
+/** @type {boolean}
+* @private
+*/
+ColumnDefinition.prototype._emptyField = false;
 /** @type {string|null}
 * @private
 */
@@ -13978,6 +14011,17 @@ ColumnDefinition.prototype.getDataType = function () {
 	}
 	return "";
 };
+/** set data type
+* @public
+* @param {string} dataType
+*/
+ColumnDefinition.prototype.setDataType = function (dataType) {
+	var val = TYPE_MAPPING[dataType.toUpperCase()];
+	if(val) {
+		dataType = val;
+	}
+	this._dataType = dataType;
+};
 /** get data type
 * @public
 * @param {string} field
@@ -14140,6 +14184,13 @@ ColumnDefinition.prototype.getTextAlign = function() {
 	var colIndex = grid.getColumnIndex(this);
 	return core.getColumnAlignment(colIndex);
 };
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isFieldEmpty = function() {
+	return this._emptyField;
+};
+
 /** @public
 * @return {string}
 */
@@ -14398,9 +14449,11 @@ ColumnDefinition.prototype._setField = function(field, formulaStr) {
 	if(defaultField) {
 		this._field = "COLUMN_" + this._id;
 		this._name = "Column " + this._id;
+		this._emptyField = true;
 	} else {
 		this._field = field;
 		this._name = field;
+		this._emptyField = false;
 		this._realTimeField = field ? true : false;
 	}
 	this._isDefaultName = true;
@@ -14456,6 +14509,8 @@ ColumnDefinition.prototype._customRenderer = function(e) {
 	arg["rowIndex"] = e["rowIndex"];
 	if(rowData) {
 		arg["data"] = rowData[this._field];
+	} else {
+		arg["data"] = null;
 	}
 	arg["colIndex"] = e["colIndex"];
 	arg["cell"] = e["cell"];
@@ -18037,8 +18092,9 @@ ILayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPosit
 * @ignore
 * @param {!Array.<number>} positions Left and right bound positions in pixel
 * @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+* @param {number=} topPx Top position of bound
 */
-ILayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {};
+ILayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {};
 
 /* harmony default export */ var grid_ILayoutGrid = (ILayoutGrid);
 
@@ -18917,7 +18973,7 @@ StretchedCells.prototype.getRowIndex = function (cellRef) {
 * @return {Cell}
 */
 StretchedCells.prototype.stretchCell = function (rowIndex, colIndex) {
-	// Increase the active count regardless of redundancy. This acts as a dirty flag. It does not needed to be accurate
+	// Increase the active count regardless of redundancy. This acts as a dirty flag. It does not need to be accurate
 	++this._activeCount;
 	if(!colIndex || colIndex < 0) {
 		colIndex = 0;
@@ -18932,7 +18988,17 @@ StretchedCells.prototype.stretchCell = function (rowIndex, colIndex) {
 	}
 	var cellElem = cell["getElement"]();
 	cellElem["stretched"] = true;
-	cellElem._colIndex = colIndex;
+	if(cellElem._colIndex !== colIndex) {
+		cellElem._colIndex = colIndex;
+		if(colIndex > 0) {
+			cellElem.classList.add("right-stretching");
+		} else {
+			cellElem.classList.remove("right-stretching");
+		}
+	}
+	if(cellElem._rowIndex !== rowIndex) {
+		cellElem._rowIndex = rowIndex;
+	}
 
 	var width = this._stretchSize || this._trackX.getTrackSize();
 	_updateXAxis(cell, this._trackX, colIndex, width);
@@ -22158,10 +22224,8 @@ LayoutGrid.prototype._updateColumnLayout = function () {
 /** @public
  * @ignore
  * @param {boolean} enabled
- * @param {number=} fromR
- * @param {number=} toR
  */
-LayoutGrid.prototype._startBindingSession = function (enabled, fromR, toR) {
+LayoutGrid.prototype._startBindingSession = function (enabled) {
 	// Prevent error when calling _startBindingSession in LayoutGrid
 };
 /** @public
@@ -23378,8 +23442,14 @@ LayoutGrid.prototype.moveColumn = function (from, to) {
 
 	util.moveArrayItem(this._columns, from, to);
 
-	var nextSibling = this._columns[to + 1] || null;
-	movedColumn.insertBefore(nextSibling);
+	if(movedColumn.getElement().offsetParent) {
+		var siblingIndex = to + 1;
+		var nextSibling = this._columns[siblingIndex] || null;
+		while (nextSibling && !nextSibling.getElement().offsetParent) {
+			nextSibling = this._columns[++siblingIndex];
+		}
+		movedColumn.insertBefore(nextSibling);
+	}
 
 	this._updateColumnIndices();
 	this._updateCellSpans(cellSpans, true); // Restore all styling
@@ -23598,6 +23668,10 @@ LayoutGrid.prototype.updateStretchedCells = function () {
 * @return {number}
 */
 LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
+	if(this._frozenLayout) {
+		return this._stretchedCells.getStretchSize();
+	}
+
 	var ctx = this._ctx;
 	var stretchSize = forceRecal ? 0 : this._stretchedCells.getStretchSize();
 	if(!stretchSize && ctx) {
@@ -23605,9 +23679,6 @@ LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
 			var contentWidth = this.getContentWidth();
 			stretchSize = ctx["getWidth"]();
 			if(stretchSize) { // Grid may not be in the document
-				if(!ctx.hasClass("no-borders")) {
-					stretchSize -= 1;
-				}
 				if(contentWidth < stretchSize) { // If view width is larger than actual content
 					stretchSize = contentWidth;
 				}
@@ -23955,8 +24026,9 @@ LayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositi
 * @ignore
 * @param {!Array.<number>} positions Left and right bound positions in pixel
 * @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+* @param {number=} topPx Top position of bound
 */
-LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
+LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {
 	var columnBound = this._columnBound;
 	if(!columnBound) {
 		return;
@@ -23973,7 +24045,9 @@ LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
 		columnBound.style.left = lftPx + "px";
 		columnBound.style.width = (rgtPx - lftPx) + "px";
 
-		columnBound.style.height = this._trackY.getTrackSize() + "px";
+		topPx = topPx || 0;
+		columnBound.style.top = topPx + "px";
+		columnBound.style.height = (this._trackY.getTrackSize() - topPx) + "px";
 		columnBound.classList.toggle("no-left-bound", noBorders[0]);
 		columnBound.classList.toggle("no-right-bound", noBorders[1]);
 		if(this._boundLayer) {
@@ -26977,45 +27051,65 @@ DataView.prototype.isSorting = function() {
 
 /** Hide rows in the data view
  * @param {string|number} rId Row id to hide. If the rId is a number, it will be treated as a row index
- * @param {boolean=} opt_show show if false
+ * @param {boolean=} hidden=true If the value is false, the specified row will be shown.
  * @public
  */
-DataView.prototype.hideRow = function(rId, opt_show) {
-	this.showRows([rId], opt_show === false);
+DataView.prototype.hideRow = function(rId, hidden) {
+	this.hideRows([rId], hidden);
 };
 /** Hide rows in the data view
  * @param {Array.<string|number>} rowRefs Array of row ids or indices to hide
- * @param {boolean=} opt_show show if false
+ * @param {boolean=} hidden=true If the value is false, the specified rows will be shown.
  * @public
  */
-DataView.prototype.hideRows = function(rowRefs, opt_show) {
-	this.showRows(rowRefs, opt_show === false);
-};
-/**
- * Show/hide rows in the data view
- * @param {Array.<string|number>} rowRefs Array of row ids or indices to hide
- * @param {boolean=} opt_show hide instead show if false
- * @public
- */
-DataView.prototype.showRows = function(rowRefs, opt_show) {
-	var hidden = opt_show === false;
+DataView.prototype.hideRows = function(rowRefs, hidden) {
+	hidden = hidden !== false;
+	var dirty = false;
+	var rids = this._toRowIds(rowRefs);
+	var hiddenRids = this._hiddenRids;
+
 	if(hidden){
-		if(!this._hiddenRids) {
-			this._hiddenRids = {};
+		if(!hiddenRids) {
+			hiddenRids = this._hiddenRids = {};
 		}
-	} else if(!this._hiddenRids) {
+	} else if(!hiddenRids) {
 		return; // All rows are visible
 	}
 
-	var rids = this._toRowIds(rowRefs);
 	for(var i = rids.length; --i >= 0;) {
 		var rid = rids[i];
 		if(rid) { // undefined, null, and an empty string value are not a valid row id
-			this._hiddenRids[rid] = hidden;
+			if(!!hiddenRids[rid] !== hidden) {
+				hiddenRids[rid] = hidden;
+				dirty = true;
+			}
 		}
 	}
 
-	this._refreshAndNotify(); // Very slow
+	if(dirty) {
+		if(!hidden) {
+			var hasHiddenRow = false;
+			for(var key in hiddenRids) {
+				if(hiddenRids[key]) {
+					hasHiddenRow = true;
+					break;
+				}
+			}
+			if(!hasHiddenRow) {
+				hiddenRids = this._hiddenRids = null;
+			}
+		}
+		this._refreshAndNotify(); // Very slow
+	}
+};
+/**
+ * Show/hide rows in the data view
+ * @param {Array.<string|number>} rowRefs Array of row ids or indices to hide
+ * @param {boolean=} shown=true If the value is false, the specified rows will be hidden.
+ * @public
+ */
+DataView.prototype.showRows = function(rowRefs, shown) {
+	this.hideRows(rowRefs, shown === false);
 };
 /** Unhide all rows
 * @public
@@ -27031,7 +27125,7 @@ DataView.prototype.unhideAllRows = function(){
 * @return {boolean}
 */
 DataView.prototype.hasHiddenRow = function(){
-	return !!this._hiddenRids;
+	return this._hiddenRids ? true : false;
 };
 
 /** @public
@@ -32170,12 +32264,22 @@ VirtualizedLayoutGrid.prototype.updateLayout = function () {
 /** {@link ILayoutGrid#stretchCell}
 * @inheritDoc */
 VirtualizedLayoutGrid.prototype.stretchCell = function (cellRef, rowIndex, opt_stretching, onlyToTheRight) {
-	return this._grid.stretchCell(
+	var stretchedCell = this._grid.stretchCell(
 		cellRef,
 		(rowIndex != null) ? rowIndex - this._firstIndex : null,
 		opt_stretching,
 		onlyToTheRight
 	);
+
+	if (stretchedCell){
+		var cellElem = stretchedCell.getElement();
+		if(rowIndex === 0) {
+			cellElem.classList.add("top");
+		} else {
+			cellElem.classList.remove("top");
+		}
+	}
+	return stretchedCell;
 };
 
 /** {@link ILayoutGrid#unstretchCell}
@@ -32394,9 +32498,10 @@ VirtualizedLayoutGrid.prototype._updateCellBounds = function () {
 * @ignore
 * @param {!Array.<number>} positions Left and right bound positions in pixel
 * @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+* @param {number=} topPx Top position of bound
 */
-VirtualizedLayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
-	this._grid.updateColumnBounds(positions, noBorders);
+VirtualizedLayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {
+	this._grid.updateColumnBounds(positions, noBorders, topPx);
 	this._updateRowBounds();
 };
 /** @private
@@ -32586,10 +32691,9 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 
 
 // CONCATENATED MODULE: ./node_modules/@grid/core/es6/grid/Core.js
-/* eslint-disable */
-
 
 
+ // eslint-disable-line
 
 
 
@@ -32601,7 +32705,6 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 
 
 
-/* eslint-enable */
 
 //#region Events
 /** @event Core#sectionAdded */
@@ -32639,6 +32742,15 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 */
 //#endregion Events
 
+/** @private
+* @param {number} a
+* @param {number} b
+* @return {number}
+*/
+var ascNumberSorter = function (a, b) {
+	return a - b;
+};
+
 /** @constructor
 * @param {Element=} opt_initializer this can be either element id (string) or DOM element.
 * @extends {ElementWrapper}
@@ -32776,7 +32888,8 @@ var Core = function (opt_initializer) {
 		"rowAdded",
 		"rowRemoved",
 		"columnPositionChanged",
-		"rowPositionChanged"
+		"rowPositionChanged",
+		"beforeColumnBoundUpdate"
 	);
 
 	// For debugging in advanced optimization mode
@@ -32796,13 +32909,13 @@ var Core = function (opt_initializer) {
 	Core._runningGridId++;
 
 	// init hiddenInput for retrieve copy and cut event
-	var hiddenInput = document.createElement('input');
-	hiddenInput.style.position = 'absolute';
-	hiddenInput.style.width = '0';
-	hiddenInput.style.height = '0';
-	hiddenInput.style.padding = '0';
-	hiddenInput.style.border = '0';
-	hiddenInput.value = '0';
+	var hiddenInput = document.createElement("input");
+	hiddenInput.style.position = "absolute";
+	hiddenInput.style.width = "0";
+	hiddenInput.style.height = "0";
+	hiddenInput.style.padding = "0";
+	hiddenInput.style.border = "0";
+	hiddenInput.value = "0";
 	_t._hiddenInput = hiddenInput;
 	elem.insertBefore(hiddenInput, elem.firstChild);
 
@@ -33108,7 +33221,7 @@ Core.prototype._rowHeightTimerId = 0;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.0.59";
+	return "5.1.15";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -33272,6 +33385,9 @@ Core.prototype.getConfigObject = function (gridOptions) {
 	if(this.hasClass("no-horizontal-grid-line")) {
 		obj["horizontalLines"] = false;
 	}
+	if(this.hasClass("no-content-vertical-line")) {
+		obj["contentVerticalLines"] = false;
+	}
 	if(this._bottomPaddingSect) {
 		obj["contentBottomPadding"] = this._bottomPadding;
 	}
@@ -34105,13 +34221,118 @@ Core.prototype.isColumnMoveAllowed = function (fromColIndex, toColIndex) {
 	return true;
 };
 
+/** This method is used for checking movability of column.
+* @public
+* @param {number} colIndex Index of the column.
+* @return {boolean} Return true if the column moving is movable, and false otherwise
+*/
+Core.prototype.isColumnMovable = function (colIndex) {
+	var stationaryIndex = this.getStationaryColumnIndex();
+
+	if (stationaryIndex > -1) {
+		if (colIndex <= stationaryIndex) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
 /** @public
-* @param {number} fromCol INCLUSIVE
+* @param {number|Array.<number>} fromCol INCLUSIVE index/indices of the column to be moved
 * @param {number} destCol INCLUSIVE
 * @return {boolean} Return true if there is any change, and false otherwise
 * @fires Core#columnMoved
 */
 Core.prototype.moveColumn = function (fromCol, destCol) {
+	if(typeof fromCol === "number") {
+		return this._moveColumn(fromCol, destCol);
+	}
+	if(!Array.isArray(fromCol)) {
+		return false;
+	}
+
+	// Validate user inputs
+	var i;
+	var len = fromCol.length;
+	var colIndices = [];
+	var colIndex = 0;
+	var colCount = this.getColumnCount();
+	var dict = {};
+	for(i = 0; i < len; ++i) {
+		colIndex = fromCol[i];
+		if(colIndex >= 0 && colIndex < colCount) { // Filter out invalid index
+			if(dict[colIndex] == null) { // Remove duplication
+				dict[colIndex] = 1;
+				colIndices.push(colIndex);
+			}
+		}
+	}
+	if (destCol < 0) {
+		destCol = 0;
+	} else if (destCol >= colCount) {
+		destCol = colCount - 1;
+	}
+
+	// Skip unneccessary cases
+	len = colIndices.length;
+	if(!len) {
+		return false;
+	}
+	if(len === 1) {
+		return this._moveColumn(colIndices[0], destCol);
+	}
+	if(!this.isColumnMoveAllowed(colIndices, destCol)) {
+		return false;
+	}
+
+	colIndices.sort(ascNumberSorter);
+	if(dict[destCol]) { // Destination falls in the same place as source columns
+		// Check if source columns are in continuous sequence
+		var continuousSequence = true;
+		colIndex = colIndices[0];
+		for(i = 1; i < len; ++i) {
+			if(++colIndex !== colIndices[i]) {
+				continuousSequence = false;
+				break;
+			}
+		}
+		if(continuousSequence) {
+			return false; // No moving operation is required
+		}
+	}
+	var prevState = this.freezeLayout(true);
+
+	// Start moving multiple items
+	var rhsCount = 0;
+	var srcIndex, destIndex;
+	// Perform move operation on the right hand side
+	for(i = 0; i < len; ++i) {
+		srcIndex = colIndices[i];
+		if(srcIndex >= destCol) {
+			destIndex = destCol + rhsCount;
+			this._moveColumn(srcIndex, destIndex);
+			++rhsCount;
+		}
+	}
+	// Perform move operation on the left hand side
+	var lhsCount = len - rhsCount;
+	destIndex = rhsCount ? destCol - 1 : destCol;
+	for(i = 0; i < lhsCount; ++i) {
+		srcIndex = colIndices[i] - i;
+		this._moveColumn(srcIndex, destIndex);
+	}
+
+	this.freezeLayout(prevState);
+	return true;
+};
+/** @private
+* @param {number} fromCol INCLUSIVE
+* @param {number} destCol INCLUSIVE
+* @return {boolean} Return true if there is any change, and false otherwise
+* @fires Core#columnMoved
+*/
+Core.prototype._moveColumn = function (fromCol, destCol) {
 	var colCount = this.getColumnCount();
 	if (fromCol < 0) { fromCol = 0; }
 	else if (fromCol >= colCount) { fromCol = colCount - 1; }
@@ -34196,6 +34417,7 @@ Core.prototype.moveColumn = function (fromCol, destCol) {
 			this._colVirtualizer.update();
 		}
 	}
+	this._updateColumnBounds();
 	return true;
 };
 
@@ -35402,6 +35624,7 @@ Core.prototype.isLayoutFrozen = function () {
 
 /** Deprecated
 * @public
+* @ignore
 * @function
 * @param {boolean=} opt_shown
 * @see {@link Core#toggleBorders}
@@ -35409,6 +35632,7 @@ Core.prototype.isLayoutFrozen = function () {
 Core.prototype.showBorders = util._deprecatedFunction;
 /** Deprecated
 * @public
+* @ignore
 * @function
 * @param {boolean=} opt_hidden
 * @see {@link Core#toggleBorders}
@@ -35442,6 +35666,14 @@ Core.prototype.toggleVerticalLines = function(forcedVal) {
 Core.prototype.toggleHorizontalLines = function(forcedVal) {
 	this.toggleClass("no-horizontal-grid-line", forcedVal != null ? !forcedVal : null);
 };
+/** Toggle vertical gridlines. This applies to ONLY content sections.
+* @public
+* @param {boolean=} forcedVal If value is true, show horizontal lines, otherwise hide them
+*/
+Core.prototype.toggleContentVerticalLines = function(forcedVal) {
+	this.toggleClass("no-content-vertical-line", forcedVal != null ? !forcedVal : null);
+};
+
 
 /** @public
 * @return {Array.<string>}
@@ -36257,18 +36489,18 @@ Core.prototype.isBinding = function() {
 };
 
 /**
- * Hide row(s) in the Grid by specifying the rId
+ * Hide the specified rows by row id
  * @param {number | string} rowId rowId of the row to hide
- * @param {boolean=} hidden if false, show instead of hide
+ * @param {boolean=} hidden=true If the value is false, the specified rows will be shown.
  * @public
  */
 Core.prototype.hideRow = function (rowId, hidden) {
 	this._dataSource.hideRow(rowId, hidden);
 };
 /**
- * Hide row(s) in the Grid by specifying the rIds
+ * Hide the specified rows by rowIds
  * @param {number | string | Array.<number | string>} rowIds rowId(s) of the rows to hide
- * @param {boolean=} hidden if false, show instead of hide
+ * @param {boolean=} hidden=true If the value is false, the specified rows will be shown.
  * @public
  */
 Core.prototype.hideRows = function (rowIds, hidden) {
@@ -36280,9 +36512,9 @@ Core.prototype.hideRows = function (rowIds, hidden) {
 };
 
 /**
- * Show row(s) in the Grid by specifying the rIds
+ * Show the specified rows by rowIds. To show all rows, use unhideAllRows method for better performance.
  * @param {number | string | Array.<number | string>} rowIds rowId(s) of the rows to show
- * @param {boolean=} shown if false, hide instead of show
+ * @param {boolean=} shown=true If the value is false, the specified rows will be hidden.
  * @public
  */
 Core.prototype.showRows = function (rowIds, shown) {
@@ -36303,7 +36535,7 @@ Core.prototype.unhideAllRows = function () {
 
 /**
  * @public
- * @returns {boolean}
+ * @return {boolean}
  */
 Core.prototype.hasHiddenRow = function () {
 	return this._dataSource.hasHiddenRow();
@@ -36382,10 +36614,22 @@ Core.prototype._updateColumnBounds = function () {
 		return;
 	}
 
+	var colCount = this.getColumnCount();
+	var colIndices = [];
+	var i;
+	for(i = 0; i < colCount; i++) {
+		if(this.isSelectedColumn(i)) {
+			colIndices.push(i);
+		}
+	}
+	var arg = {
+		selectedColumns: colIndices
+	};
+	this._dispatch("beforeColumnBoundUpdate", arg);
+
 	var len = this.getColumnCount();
 	var lftIdx = -1;
 	var rgtIdx = -1;
-	var i;
 	for(i = 0; i < len; ++i) {
 		if(this.isSelectedColumn(i)) {
 			rgtIdx = i;
@@ -36396,12 +36640,17 @@ Core.prototype._updateColumnBounds = function () {
 	}
 	var sectCount = this._settings.length;
 	if(sectCount) {
-		var section = this._settings[0].getSection();
+		var sectionSetting = this._settings[0];
+		var section = sectionSetting.getSection();
 		var positions = [0, 0];
 		var noBorders = [false, false];
 		section.calculateColumnBounds(lftIdx, rgtIdx, positions, noBorders);
-
-		for (i = sectCount; --i >= 0; ) {
+		var topPx = 0;
+		if(sectionSetting.getType() === "title" && arg.topBoundRowIndex != null) {
+			topPx = this._layoutY.getLaneStart(arg.topBoundRowIndex);
+		}
+		section.updateColumnBounds(positions, noBorders, topPx);
+		for(i = 1; i < sectCount; i++) {
 			section = this._settings[i].getSection();
 			section.updateColumnBounds(positions, noBorders);
 		}
@@ -37571,6 +37820,10 @@ Core.prototype._updateScrollbarHeight = function (paneChanged, contentChanged, n
 * @param {boolean} contentChanged
 */
 Core.prototype._updateScrollbarWidth = function (paneChanged, contentChanged) {
+	if (this._frozenLayout) {
+		return;
+	}
+
 	if (paneChanged && this._hScrollbarEnabled) {
 		// Scroll Frame
 		var gridElem = this.getElement();
@@ -37775,7 +38028,7 @@ Core.prototype._updateLayout = function () {
 	this._syncLayoutToColumns(); // Update only if need
 
 	this._updateScrollbarHeight(true, true);
-	this._updateScrollbarWidth(true, true);
+	this._updateScrollbarWidth(true, true); // WARNING this may be redundant with _syncLayoutToColumns
 
 	var sectionCount = this.getSectionCount();
 	for (var s = 0; s < sectionCount; ++s) {
@@ -38287,6 +38540,14 @@ DataConnector.prototype.removeFields = function (fieldRef, referer) {
 	this._commitFieldsChanges();
 };
 
+/** @public
+* @param {string} referrer
+*/
+DataConnector.prototype.removeFieldReferrer = function (referrer) {
+	this._fields.removeReferer(referrer);
+	this._commitFieldsChanges();
+};
+
 /** @public
 */
 DataConnector.prototype.removeAllFields = function () {
@@ -38595,7 +38856,7 @@ SortableTitlePlugin.ColumnOptions;
  * @property {(boolean|number)=} multiColumn=false Alias to `multicolumn`
  * @property {boolean=} threeStatesSorting=false If enabled, sorting will cycle through ascending, descending and original order states. This option is deprecated in favor of sortingSequence option
  * @property {Object.<string, DataTable.SortLogic>=} sortLogic=null Custom logic for sorting based on the specified field. The key is field name and the value pair is a function.
- * @property {boolean=} disableDoubleClickToSort=false If enabled, double click on column title to sort
+ * @property {boolean=} disableDoubleClickToSort=true If disabled, double click will trigger sorting operation
  * @property {boolean=} sortableColumns=false If enabled, all columns will be sortable by field automatically
  * @property {boolean=} sortableIndicator=false If enabled, sort indicator (diamond) icon will always show regardless of sorting states. In Halo theme, this option will be enabled by default.
  * @property {boolean=} indicatorOnly=false If enabled, data will not be sorted, but the UI is rendered normally. This is useful for server side sorting.
@@ -38605,7 +38866,8 @@ SortableTitlePlugin.ColumnOptions;
  * @property {Function=} preClicked A shortcut to define the preClicked event handler
  * @property {Function=} clicked A shortcut to define the clicked event handler
  * @property {Function=} preDataSorting A shortcut to define the preDataSorting event handler
- * @property {Array.<SortableTitlePlugin~SortOrder>=} sortingSequence=["a", "d"] Sequence in which sort order will be changed. The default value is ["a", "d"]. This option override threeStatesSorting
+ * @property {Array.<SortableTitlePlugin~SortOrder>=} sortingSequence=["a", "d"] Sequence in which sort order will be changed. The default value is ["a", "d"]. This option overrides threeStatesSorting
+ * @property {boolean=} rowSorting=false A flag indicating that the given sortLogic takes entire row data instead of a field value for comparison
  */
 SortableTitlePlugin.Options;
 
@@ -38634,7 +38896,7 @@ SortableTitlePlugin.prototype._dataSorting = true;
 /** @private
 * @type {boolean}
 */
-SortableTitlePlugin.prototype._isDisableDoubleClickToSort = true;
+SortableTitlePlugin.prototype._dblClickAllowed = false;
 
 /** @private
 * @type {number}
@@ -38777,19 +39039,20 @@ SortableTitlePlugin.prototype.unload = function (host) {
 SortableTitlePlugin.prototype.afterInit = function () {
 	var t = this;
 
-	// Data source not available during initialization
+	// Set logic to the data source, since the data source not available during the initialization
 	t.setSortLogics(t._sortLogic);
 
-	// Sort columns if initialSort are specified initially
-	if (t._initialSort != null) {
-		var initialSort = t._initialSort;
-		if (!Array.isArray(initialSort)) {
-			initialSort = [initialSort];
-		}
-		if (t._maxCount === 1) {
-			initialSort = initialSort.slice(0, 1); // Ensure only 1 item is sorted in non-multiColumn mode
+	var userInput = t._initialSort;
+	if (userInput != null) {
+		if(Array.isArray(userInput)) {
+			if(t._maxCount === 1) { // TODO: max count could be part of sortColumns method
+				t.sortColumns(userInput.slice(0, 1));
+			} else {
+				t.sortColumns(userInput);
+			}
+		} else {
+			t.sortColumns([userInput]);
 		}
-		t.sortColumns(initialSort);
 	}
 };
 
@@ -38967,7 +39230,9 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 	if(this._maxCount !== 1) {
 		extOptions["multiColumn"] = this._maxCount === -1 ? true : this._maxCount;
 	}
-	extOptions["disableDoubleClickToSort"] = this._isDisableDoubleClickToSort;
+	if(this._dblClickAllowed) {
+		extOptions["disableDoubleClickToSort"] = !this._dblClickAllowed;
+	}
 	extOptions["sortableColumns"] = this._sortableColumns;
 	extOptions["indicatorOnly"] = !this._dataSorting;
 	// extOptions["mode"] = this._mode;
@@ -39340,9 +39605,10 @@ SortableTitlePlugin.prototype.getColumnSortingField = function (colIndex) {
 * @public
 * @param {number} colIndex
 * @param {string|null} field A field used for sorting
-* @param {Function=} sortLogic
+* @param {Function=} sortLogic=null
+* @param {boolean=} rowSorting=false A flag indicating that the given sortLogic takes entire row data instead of a field value for comparison
 */
-SortableTitlePlugin.prototype.setColumnSortingField = function (colIndex, field, sortLogic) {
+SortableTitlePlugin.prototype.setColumnSortingField = function (colIndex, field, sortLogic, rowSorting) {
 	if (typeof colIndex == "number" && field != null) {
 		var options = this._newSortOptions(colIndex);
 		if (!field) {
@@ -39354,6 +39620,9 @@ SortableTitlePlugin.prototype.setColumnSortingField = function (colIndex, field,
 		if(sortLogic != null && !this._userManagedLogic) {
 			if (options["sortLogic"] !== sortLogic) {
 				options["sortLogic"] = sortLogic || null;
+				if(rowSorting && sortLogic) {
+					sortLogic["rowSorting"] = true; // Tell data view/table about the argument
+				}
 			}
 		}
 	}
@@ -39453,10 +39722,10 @@ SortableTitlePlugin.prototype.disableDataSorting = function (disabled) {
 };
 /** @public
 * @description To allow double click action to sort. Default value is false.
-* @param {boolean=} disabled
+* @param {boolean=} disabled=false
 */
 SortableTitlePlugin.prototype.disableDoubleClickToSort = function (disabled) {
-	this._isDisableDoubleClickToSort = !!disabled;
+	this._dblClickAllowed = !disabled;
 };
 /** This api is deprecated. Use {@link SortableTitlePlugin.prototype.disableColumnSorting} instead
  * @public
@@ -39502,54 +39771,26 @@ SortableTitlePlugin.prototype.setClickDelayInterval = function (opt_ms) {
 	this._delayInterval = (opt_ms != null) ? opt_ms : 500;
 };
 
-/** @private
-* @description Pre-process columns options to support both composite and rt-grid backward compatible
-* @param {number} colIndex
-* @param {Object} options
-* @returns {Object}
-*/
-SortableTitlePlugin.prototype._prepareColumnOptions = function (colIndex, options) {
-	var t = this;
-	var column = options || {};
-	var colOption = {
-		"colIndex": colIndex,
-		"field": column["field"],
-		"sortable": !!t._sortableColumns
-	};
-
-	if (column["sortBy"] != null) { // composite grid option
-		colOption["sortable"] = !!column["sortBy"];
-		colOption["sortBy"] = column["sortBy"];
-	}
-	if (column["sortable"] != null) { // rt grid option
-		colOption["sortable"] = !!column["sortable"];
-	}
-
-	colOption["sortLogic"] = column["sortLogic"] || column["sortingLogic"] || column["sorter"]; // Originally, rt grid support option for sortLogic by column
-	colOption["sort"] = column["defaultSort"] || column["sort"]; // composite and rt grid option for default sort order
-	return colOption;
-};
-
 /** @private
 * @description Get initial sort from column option `defaultSort` or `sort`
 * @param {Object} options Core model object
 * @returns {Object}
 */
 SortableTitlePlugin.prototype._initialSortByColumnField = function (options) {
-	var t = this;
-	var columns = options["columns"] || [];
-	var initialSort = null;
-	for (var i = 0; i < columns.length; i++) {
-		var col = t._prepareColumnOptions(i, columns[i]);
-		var val = col["sort"];
-		if (val) {
-			initialSort = {
-				"colIndex": col["colIndex"],
-				"sortOrder": val
+	var columns = options["columns"];
+	var colCount = columns ?  columns.length : 0;
+	for (var i = 0; i < colCount; i++) {
+		var column = columns[i];
+		var sortOrder = column["defaultSort"] || column["sort"]; // composite and rt grid option for default sort order
+		if (sortOrder) {
+			// TODO: Support multi-column sorting
+			return {
+				"colIndex": i,
+				"sortOrder": sortOrder
 			};
 		}
 	}
-	return initialSort;
+	return null;
 };
 
 /** @private
@@ -39660,7 +39901,7 @@ SortableTitlePlugin.prototype._onClickTitle = function (grid, e) {
 	if(this._disabled) {
 		return;
 	}
-	if (e.detail === 2 && this._isDisableDoubleClickToSort) { // dblclick
+	if (e.detail === 2 && !this._dblClickAllowed) { // dblclick
 		if (this._clickTimer) {
 			clearTimeout(this._clickTimer);
 			this._clickTimer = 0;
@@ -39938,18 +40179,35 @@ SortableTitlePlugin.prototype._sortColumn = function (states, opt_arg) {
 SortableTitlePlugin.prototype._onColumnAdded = function (e) {
 	var t = this;
 	var colIndex = e["colIndex"];
-	var context = e["context"];
-	var col = t._prepareColumnOptions(colIndex, context);
-	var field = col["sortBy"] || col["field"];
-	var logic = col["sortLogic"] || t._sortLogic[field];
+	var column = e["context"] || {};
+
+	var sortable = !!t._sortableColumns;
+	var field = column["field"];
+	var sortBy = column["sortBy"];
+
+	if (sortBy != null) { // composite grid option
+		sortable = !!sortBy;
+		field = sortBy;
+	}
+	if (column["sortable"] != null) { // rt grid option
+		sortable = !!column["sortable"];
+	}
+
+	var sortLogic = column["sortLogic"] || column["sortingLogic"] || column["sorter"]; // Originally, rt grid support option for sortLogic by column
+	if(!sortLogic) {
+		sortLogic = t._sortLogic[field];
+	}
+	if(typeof sortLogic !== "function") {
+		sortLogic = null;
+	}
 
-	var sortingSequence = context ? context["sortingSequence"] : null;
+	var sortingSequence = column["sortingSequence"];
 	if (sortingSequence != null && field) { // Make sure that column config does not affect grid level config
 		t.setSortingSequence(sortingSequence, field);
 	}
 
-	if (col["sortable"]) {
-		t.setColumnSortingField(colIndex, field, typeof logic === "function" ? logic : null);
+	if (sortable) { // TODO: Check if empty field should be sortable
+		t.setColumnSortingField(colIndex, field, sortLogic, column["rowSorting"]);
 	} else {
 		t.disableColumnSorting(colIndex, true);
 	}
@@ -40334,6 +40592,7 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 * @property {boolean=} borders=true Lines around grid element
 * @property {boolean=} gridlines=true Horizontal and Vertical lines for ONLY content sections
 * @property {boolean=} verticalLines=true Vertical lines for all sections
+* @property {boolean=} contentVerticalLines=true Vertical lines for all content section
 * @property {boolean=} horizontalLines=true Horizontal lines for all sections
 * @property {*=} RTK=null rtk toolkit instance
 * @property {Grid~ADCOptions=} ADC=null ADC requesting level config object from adc team
@@ -40348,6 +40607,7 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 * @property {Element=} scrollbarParent=null Element to be attached by grid's scrollbars, allowing them to move outside and avoid overlapping with the content.
 * @property {boolean=} formulaEngine=false If enabled, field with leading equal sign will be treated as a formula and rows will be filled with the calculated values.
 * @property {number=} adcPollingInterval=0 Length of polling interval for refreshing ADC data in milliseconds. The default value (0) means no polling.
+* @property {boolean=} fieldCaching=false If enabled, field definition will be caching internal mechanism
 */
 
 /** @typedef {number|string|RowDefinition} Grid~RowReference
@@ -40360,7 +40620,7 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 /** @typedef {number|string|ColumnDefinition} Grid~ColumnReference
 * @description A column in Grid can be referred by the following values:<br>
 * <b>number</b> : Column index including all invisible (hidden) columns<br>
-* <b>string</b> : Field name of the column<br>
+* <b>string</b> : Field name or column id of the column<br>
 * <b>ColumnDefinition</b> : Column definition object<br>
 */
 
@@ -40456,25 +40716,6 @@ var cloneRowData = function(fromRowDef, toRowDef) {
 	}
 };
 
-/** @private
-* @param {number} a
-* @param {number} b
-* @return {number}
-*/
-var ascNumberSorter = function (a, b) {
-	return a - b;
-};
-
-/** @private
-* @param {number} min
-* @param {number} max
-* @param {number} elem
-* @return {boolean}
-*/
-var inRangeFilter = function (min, max, elem) {
-	return elem >= min && elem <= max;
-};
-
 /** @private
 * @param {string} sortField
 * @param {Object} elemData
@@ -40772,6 +41013,10 @@ Grid.prototype._lastPollingRequest = 0;
 * @private
 */
 Grid.prototype._pollingEnabled = true;
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._fieldCaching = false;
 
 
 /** @public
@@ -41016,6 +41261,11 @@ Grid.prototype.initialize = function(gridOption) {
 		js_FieldDefinition.setSynapseConfig(t._synapse);
 	}
 
+	if (gridOption["fieldCaching"]) {
+		t._fieldCaching = gridOption["fieldCaching"];
+		js_FieldDefinition.setFieldCaching(t._fieldCaching);
+	}
+
 	if (gridOption["icons"] && gridOption["icons"]["rowGrouping"] && gridOption["icons"]["rowGrouping"]["expander"]) {
 		js_StyleLoader.chainIcon = gridOption["icons"]["rowGrouping"]["expander"];
 	}
@@ -41038,6 +41288,10 @@ Grid.prototype.initialize = function(gridOption) {
 	if (vLines != null) {
 		grid.toggleVerticalLines(vLines);
 	}
+	var cvLines = gridOption["contentVerticalLines"];
+	if (cvLines != null) {
+		grid.toggleContentVerticalLines(cvLines);
+	}
 	var hLines = gridOption["horizontalLines"];
 	if (hLines != null) {
 		grid.toggleHorizontalLines(hLines);
@@ -41326,11 +41580,14 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	if(this._pollingInterval) {
 		obj["adcPollingInterval"] = this._pollingInterval;
 	}
+	if(this._fieldCaching) {
+		obj["fieldCaching"] = this._fieldCaching;
+	}
 
 	// get all rows config
 	var rowDefs = this.getAllRowDefinitions();
 	var rows = obj["rows"] = [];
-	var rowDef, rowConfig, pluginInstance, retObj, row;
+	var rowDef, rowConfig;
 	len = rowDefs.length;
 	for (i = 0; i < len; i++) {
 		rowDef = rowDefs[i];
@@ -41340,6 +41597,7 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 
 	// get row config from extensions
 	var extensions = grid.getPlugins();
+	var pluginInstance, row;
 	for(var key in extensions) {
 		pluginInstance = extensions[key];
 		if(typeof pluginInstance["getRowConfigObject"] === "function") {
@@ -41347,15 +41605,7 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 			for (i = 0; i < len; i++) {
 				rowDef = rowDefs[i];
 				row = rows[i];
-				retObj = pluginInstance["getRowConfigObject"](rowDef.getRowId());
-				if(retObj) {
-					if(row.values) {
-						// eslint-disable-next-line es5/no-es6-static-methods
-						Object.assign(row.values, retObj); // Ignore lint
-					} else {
-						row.values = retObj;
-					}
-				}
+				pluginInstance["getRowConfigObject"](row, rowDef.getRowId());
 			}
 		}
 	}
@@ -41887,78 +42137,7 @@ Grid.prototype.removeAllColumns = function() {
  * @return {boolean} Return true if there is any change, and false otherwise
  */
 Grid.prototype.moveColumn = function (fromColIndex, toColIndex) {
-	//Wrap single index to array
-	if (!Array.isArray(fromColIndex)) {
-		fromColIndex = [fromColIndex];
-	}
-
-	var columnCount = this._grid.getColumnCount();
-	var lastColIndex = columnCount - 1;
-	fromColIndex.sort(ascNumberSorter);
-	fromColIndex = fromColIndex.filter(inRangeFilter.bind(null, 0, lastColIndex));
-
-	if (!this._grid.isColumnMoveAllowed(fromColIndex, toColIndex)) {
-		return false;
-	}
-
-	var frozen = this._grid.isLayoutFrozen();
-	this._grid.freezeLayout(true);
-
-	var marker = [];
-	var runner = 0;
-	var i;
-	for (i = 0; i < columnCount; i++) {
-		if (i == fromColIndex[runner]) {
-			marker.push(true);
-			runner++;
-		} else {
-			marker.push(false);
-		}
-	}
-	//Find the index to be moved to
-	var counter = -1;
-	var toMoveTo = -1;
-
-	for (i = 0; i < columnCount; i++) {
-		if (marker[i] === false) {
-			counter++;
-		}
-
-		if (counter === toColIndex) {
-			toMoveTo = i;
-			break;
-		}
-	}
-
-	//If toMoveTo == -1, it means the target column index is beyond the last colmn so just move the columns
-	//to the end of the table
-	if (toMoveTo === -1) {
-		toMoveTo = columnCount;
-	}
-
-	//Perform moving
-	var leftList = [], rightList = [];
-
-	for (i = 0; i < fromColIndex.length; i++) {
-		if (fromColIndex[i] < toMoveTo) {
-			leftList.push(fromColIndex[i]);
-		} else if (fromColIndex[i] > toMoveTo) {
-			rightList.push(fromColIndex[i]);
-		}
-	}
-
-	for (i = 0; i < rightList.length; i++) {
-		this._grid.moveColumn(rightList[i], toMoveTo + i);
-	}
-
-	for (i = leftList.length - 1; i >= 0; i--) {
-		toMoveTo--;
-
-		this._grid.moveColumn(leftList[i], toMoveTo);
-	}
-
-	this._grid.freezeLayout(frozen);
-	return true;
+	return this._grid.moveColumn(fromColIndex, toColIndex);
 };
 
 /** The hidden column still occupies the same index.
@@ -42023,7 +42202,7 @@ Grid.prototype.addDataFields = function(fieldRef, referrer) {
 
 			if(!dataType) {
 				// wait field-info to be loaded before adding field
-				onLoaded = this._onFieldLoaded.bind(this, field);
+				onLoaded = this._onFieldLoaded.bind(this, field, referrer);
 				prom = prom.then(onLoaded).catch(onLoaded);
 			} else {
 				this._connector.addFields(field, referrer || "grid");
@@ -42049,6 +42228,16 @@ Grid.prototype.removeDataFields = function(fieldRef, referrer) {
 	this._connector.removeFields(fieldRef, referrer || "grid");
 	return true;
 };
+/** @public
+* @param {string} referrer
+*/
+Grid.prototype.removeFieldReferrer = function(referrer) {
+	if(!referrer) {
+		return;
+	}
+
+	this._connector.removeFieldReferrer(referrer);
+};
 
 /** @public
 * @param {Grid~ColumnReference} colRef
@@ -42675,6 +42864,40 @@ Grid.prototype.getColumnDefinition = function(colIndex) {
 	}
 	return null;
 };
+
+/** @public
+* @param {string} colId
+* @return {ColumnDefinition}
+*/
+Grid.prototype.getColumnDefinitionById = function(colId) {
+	if(typeof colId === "string") {
+		var colIndex = this.getColumnIndex(colId);
+		var colData = this._grid.getColumnData(colIndex);
+		if(colData) {
+			return /** @type{ColumnDefinition} */(colData[COL_DEF]) || null;
+		}
+	}
+	return null;
+};
+
+/** @public
+* @param {Array.<string>} colIds
+* @return {ColumnDefinition}
+*/
+Grid.prototype.getColumnDefinitionsById = function(colIds) {
+	var colCount = Array.isArray(colIds) ? colIds.length : 0;
+	if(colCount > 0) {
+		var i, colId;
+		var colDefs = new Array(colCount);
+		for(i = 0; i < colCount; i++) {
+			colId = colIds[i];
+			colDefs[i] = this.getColumnDefinitionById(colId);
+		}
+		return colDefs;
+	}
+	return null;
+
+};
 /** @private
 * @param {Grid~ColumnReference} colRef
 * @return {ColumnDefinition}
@@ -42688,7 +42911,7 @@ Grid.prototype._getColumnDefinition = function(colRef) {
 		var colCount = this.getColumnCount();
 		for(var i = 0; i < colCount; ++i) {
 			var colDef = this.getColumnDefinition(i);
-			if(colDef.getField() === colRef) {
+			if(colDef.getField() === colRef || colDef.getId() === colRef) {
 				return colDef; // Return the first found field
 			}
 		}
@@ -42880,7 +43103,7 @@ Grid.prototype.getColumnIndex = function(colRef) {
 	} else if(typeof colRef === "string") {
 		for(i = 0; i < colCount; ++i) {
 			colDef = this.getColumnDefinition(i);
-			if(colDef.getField() === colRef) {
+			if(colDef.getField() === colRef || colDef.getId() === colRef) {
 				return i; // Return the first found field
 			}
 		}
@@ -45714,6 +45937,11 @@ var dataGen = new DataGenerator();
 */
 var DataGrid = {};
 
+/** @private
+* @namespace
+*/
+var Adc = {};
+
 /** @private
 * @function
 * @param {Object} payload
@@ -45792,6 +46020,97 @@ DataGrid.request = function (payload, mockResponse) {
 	}));
 };
 
+/** @private
+* @function
+* @param {Object} payload
+* @param {Object=} mockResponse
+* @return {Promise}
+*/
+Adc.request = function (payload, mockResponse) {
+	if (mockResponse) {
+		return Promise.resolve(JSON.stringify(mockResponse));
+	}
+
+	var i, f, len, row;
+	var identifiers = payload.identifiers;
+	var formula = payload.formula.split(",");
+	var fields = [];
+
+	// _invalidFieldDict is a dictionary of non exist field
+	// so we must remove invalid field to make "mocking api" return result more like a "real api".
+	var invalidDict = _invalidFieldDict;
+	for (i = 0; i < formula.length; i++) {
+		f = formula[i];
+		if (!invalidDict[f]) {
+			fields.push(f);
+		}
+	}
+
+	// build row header
+	var rows = [];
+	rows[0] = [{
+		"h": true,
+		"i": "instrument",
+		"v": "Instrument"
+	}];
+	for (i = 0; i < fields.length; i++) {
+		f = fields[i];
+		rows[0].push({
+			"h": true,
+			"r": f.toUpperCase()
+			// "v": "Price Close", // Doesn't use
+			// "p": "I_TRP_PH_PriceClose" // Doesn't use this property
+		});
+	}
+
+	// build data
+	var rowMap = {};
+
+	len = identifiers.length;
+	var rowData = dataGen.generate(fields, len);
+	for (i = 0; i < len; ++i) {
+		var inst = identifiers[i];
+		row = rowMap[inst];
+		if (!row) {
+			row = rowMap[inst] = rowData[i];
+			row.unshift(inst); // prepend instrument on each row
+		}
+		rows.push(row);
+	}
+
+	// There is a chance that rtk will return multiple row data per instrument
+	// so we must create mock up for this case
+	if (rows.length > 0) {
+		var chance = dataGen.randInt(1, 10);
+		if (chance <= 3) { // chance 30%
+			var pos = dataGen.randInt(0, rows.length - 1); // random row pos
+			row = rows[pos];
+			len = row.length;
+			var mockupRow = new Array(len);
+			mockupRow[0] = row[0]; // 1st index is for instrument
+			for (i = 1; i < len; i++) {
+				mockupRow[i] = ''; // real case will return null or empty string
+			}
+			rows.splice(pos + 1, 0, mockupRow);
+		}
+	}
+
+	/*
+	response type is :
+	{
+		cols: number,
+		faults: Array<obj>,
+		rows: Array<obj>,
+		status: string
+	}
+	Currently, we use only the rows property for cache ADC data
+	*/
+	return Promise.resolve(JSON.stringify({
+		rows: rows
+		// TODO : supports faults property
+	}));
+};
+
 /** @public
 * @function
 * @param {string} dataType
@@ -45800,6 +46119,8 @@ DataGrid.request = function (payload, mockResponse) {
 var mockDataAPI = function (dataType) {
 	if (dataType === "datagrid") {
 		return Promise.resolve(DataGrid);
+	}  else if(dataType === "adc") {
+		return Promise.resolve(Adc);
 	} else {
 		return Promise.reject(dataType + " is not supported.");
 	}
@@ -46151,7 +46472,7 @@ CellPainter.prototype.clearHeatMap = function() {
 
 /** @public */
 CellPainter.prototype.applyThemeColor = function() {
-	var colors = ElfUtil.themeColors;
+	var colors = ElfUtil.getColors();
 	var cond = this._conditions[0]; // Heatmap, color text condition must be the first
 	if(cond) {
 		if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) { // Heatmap uses grid color to blend the result color
@@ -46738,16 +47059,13 @@ CellPainter.themeChanged = function() {};
 CellPainter.setThemeColors = function() {};
 /** @private
 * @function
-* @param {Object} colors
-* @return {Object} colors
 */
-CellPainter._onThemeChanged = function(colors) {
+CellPainter._onThemeChanged = function() {
 	// Apply newly changed theme to all the painters
 	var painters = CellPainter._painters;
 	for(var i = painters.length; --i >= 0;) {
 		painters[i].applyThemeColor(); // Re-apply theme color
 	}
-	return colors;
 };
 /** Load theme colors and change colors for all instances of CellPainter
 * @public
@@ -46756,7 +47074,9 @@ CellPainter._onThemeChanged = function(colors) {
 */
 CellPainter.loadThemeColors = function() {
 	if(!CellPainter.themeReady) {
-		CellPainter.themeReady = ElfUtil.getThemeColors(CellPainter._onThemeChanged).then(CellPainter._onThemeChanged);
+		CellPainter.themeReady = ElfUtil.getThemeColors(CellPainter._onThemeChanged)
+			.then(CellPainter._onThemeChanged)
+			.catch(CellPainter._onThemeChanged);
 	}
 	return CellPainter.themeReady;
 };
@@ -46767,8 +47087,10 @@ CellPainter.loadThemeColors = function() {
 * @return {Promise<Object>}
 */
 CellPainter.reloadThemeColors = function () {
-	CellPainter.themeReady = ElfUtil.themeReady = null;
-	return CellPainter.loadThemeColors();
+	CellPainter.themeReady = ElfUtil.reloadThemeColors()
+		.then(CellPainter._onThemeChanged)
+		.catch(CellPainter._onThemeChanged);
+	return CellPainter.themeReady;
 };
 
 /** @public