@refinitiv-ui/efx-grid 6.0.33 → 6.0.35

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

@@ -150,20 +150,22 @@ Ext.inherits = function (childCtor, parentCtor) {
 
 "use strict";
 /* unused harmony export Util */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return extendObject; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return extendObject; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return cloneObject; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return isEmptyObject; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return deepEqual; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return arrayToObject; });
 /* unused harmony export extendProperty */
 /* unused harmony export extendArrayProperty */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return parseCondition; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return prettifyCss; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return parseCondition; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return prettifyCss; });
 /* unused harmony export getShadowRoot */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return injectCss; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return injectCss; });
 /* unused harmony export isIE */
 /* unused harmony export isMac */
 /* unused harmony export isTouchDevice */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return nestedObjectToArray; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return rgb2Hex; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return nestedObjectToArray; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "j", function() { return rgb2Hex; });
 /* unused harmony export prepareTSVContent */
 /** @namespace */
 var Util = {};
@@ -305,6 +307,20 @@ var extendObject = function (obj, extender, limiters) {
 var cloneObject = function (obj, limiters) {
 	return extendObject({}, obj, limiters);
 };
+
+/** Check empty object
+* @public
+* @function
+* @param {Object} obj
+* @return {boolean}=true, if the obj is empty
+*/
+var isEmptyObject = function (obj) {
+	for (var key in obj) {
+		return false;
+	}
+	return true;
+};
+
 /** @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
@@ -353,6 +369,58 @@ var extendProperty = function (obj, extender, propName) {
 		}
 	}
 };
+
+
+/** Compare the values of obj1 and obj2. if they are the same object or have the same value, the result will be true. Otherwise, it will return false.
+* @public
+* @param {*} obj1
+* @param {*} obj2
+* @return {boolean}
+*/
+var deepEqual = function (obj1, obj2) {
+
+	if(obj1 === obj2) {
+		return true;
+	}
+
+	if (typeof obj1 !== typeof obj2) {
+		return false;
+	}
+
+	if (typeof obj1 === "object") {
+
+		// We need to split array and object for performance reason
+		if(Array.isArray(obj1)) {
+			if(obj1.length !== obj2.length) {
+				return false;
+			}
+
+			for (var i = 0; i < obj1.length; i++) {
+				if (!deepEqual(obj1[i], obj2[i])) { // The array may not be a match if the elements are not sorted, so it will not be considered equal if there is a mismatch.
+					return false;
+				}
+			}
+
+		} else {
+
+			if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+				return false;
+			}
+
+			for (var key in obj1) {
+				if (!deepEqual(obj1[key], obj2[key])) {
+					return false;
+				}
+			}
+		}
+
+
+		return true;
+	}
+
+	return false;
+
+};
 /** 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
@@ -3475,7 +3543,7 @@ ElfUtil.injectIcons = function (configObj, optElem) {
 */
 ElfUtil.getIconList = function () {
 	var iconStruct = ElfUtil._icons[ElfUtil.getThemeName()];
-	return iconStruct ? Object(Util["e" /* nestedObjectToArray */])(iconStruct) : [];
+	return iconStruct ? Object(Util["g" /* nestedObjectToArray */])(iconStruct) : [];
 };
 
 /** @private
@@ -3767,9 +3835,9 @@ ElfUtil._retrieveThemeColors = function(profileName) {
 		}
 	}
 	// WARNING: Computed styles return rgb/rgba color format instead of hex format
-	colors["tableBg"] = Object(Util["h" /* rgb2Hex */])(colors["tableBg"]);
-	colors["tableText"] = Object(Util["h" /* rgb2Hex */])(colors["tableText"]);
-	colors["tableBorder"] = Object(Util["h" /* rgb2Hex */])(colors["tableBorder"]);
+	colors["tableBg"] = Object(Util["j" /* rgb2Hex */])(colors["tableBg"]);
+	colors["tableText"] = Object(Util["j" /* rgb2Hex */])(colors["tableText"]);
+	colors["tableBorder"] = Object(Util["j" /* rgb2Hex */])(colors["tableBorder"]);
 	document.body.removeChild(tableElem);
 
 	// For CellPainter backward compatability
@@ -10497,6 +10565,22 @@ Segment.prototype.getOrder = function() {
 	}
 	return this._order * 10000;
 };
+/** Get the last (highest) order from the entire tree regardless of the current position segment in the hierachy
+* @public
+* @return {number}
+*/
+Segment.prototype.getLastOrder = function() {
+	if(this._subSegDef) {
+		var subSegments = this._subSegDef.subSegments;
+		if(subSegments) {
+			var lastSegment = subSegments[subSegments.length - 1];
+			if(lastSegment) {
+				return lastSegment.getOrder();
+			}
+		}
+	}
+	return this.getOrder();
+};
 /** @public
 * @param {number} val
 */
@@ -10618,9 +10702,10 @@ SegmentCollection.prototype.dispose = function() {
 };
 /** @public
 * @param {string} rid
+* @param {Array.<string>=} childRids Children of the newly added segment. This is a shorthand to addSegmentChildren method
 * @return {boolean} Returns true if there is any change. Otherwise, returns false
 */
-SegmentCollection.prototype.addSegment = function(rid) {
+SegmentCollection.prototype.addSegment = function(rid, childRids) {
 	if(rid && !this._segments[rid]) {
 		if(this.getParentRowId(rid)) {
 			console.log("child of a segment cannot be set as a segment separator");
@@ -10631,6 +10716,10 @@ SegmentCollection.prototype.addSegment = function(rid) {
 		segment.addEventListener("subSegmentRemoved", this._onSubSegmentRemoved);
 		++this._segmentCount;
 		this._segmentList = null; // order could be changed
+
+		if(childRids && childRids.length) {
+			segment.addChildren(childRids);
+		}
 		return true;
 	}
 	return false;
@@ -10978,9 +11067,10 @@ SegmentCollection.prototype.calcSegmentOrder = function(rids) {
 };
 /** @public
 * @param {!Array.<string>} rids Array of row ids
+* @param {boolean=} partial Indicating that the given ids are not the whole list
 * @return {Array.<number>} Returns Array of segment values, if there are at least one segment, otherwise returns null
-*/
-SegmentCollection.prototype.getSegmentValues = function(rids) {
+*/ //
+SegmentCollection.prototype.getSegmentValues = function(rids, partial) {
 	var rowCount = rids ? rids.length : 0;
 	if(!rowCount) {
 		return null;
@@ -10997,29 +11087,30 @@ SegmentCollection.prototype.getSegmentValues = function(rids) {
 		var rid = rids[r];
 		curSegment = segmentSeparators[rid];
 		if(curSegment) { // segment separator
-			if(prevSegment !== curSegment) {
-				prevSegment = curSegment;
-				segmentVal = curSegment.getOrder() * 100;
-				if(segmentVal > highestVal) {
-					highestVal = segmentVal;
+			segmentVal = curSegment.getOrder() * 100;
+			offset = 0;
+			if(!curSegment.isSubSegment()) {
+				if(prevSegment !== curSegment) {
+					prevSegment = curSegment;
+					highestVal = curSegment.getLastOrder() * 100;
 				}
 			}
-			offset = 0;
 		} else {
 			var parentId = childToSegmentId[rid];
 			if(parentId) { // segment member
 				curSegment = segmentSeparators[parentId];
-				if(prevSegment !== curSegment) {
-					prevSegment = curSegment;
-					segmentVal = curSegment.getOrder() * 100;
-					if(segmentVal > highestVal) {
-						highestVal = segmentVal;
-					}
-				}
+				segmentVal = curSegment.getOrder() * 100;
 				offset = 1;
+				if(partial) {
+					highestVal = curSegment.getLastOrder() * 100;
+				}
 			} else { // row outside of segments
-				segmentVal = highestVal;
-				offset = 10;
+				if(highestVal) {
+					segmentVal = highestVal;
+					offset = 10;
+				} else {
+					segmentVal = offset = 0;
+				}
 			}
 		}
 
@@ -12038,7 +12129,24 @@ DataTable.prototype.setSortingLogic = function(func) {
 * @param {DataTable.SortLogic} func Use null to remove current sorting logic
 */
 DataTable.prototype.setColumnSortingLogic = function(cid, func) {
-	this._compMap[cid] = func;
+	if(cid) {
+		this._compMap[cid] = func;
+	}
+};
+/** Get sorting logic for the specified field. Default logic is returned, if no logic is specified for the column
+* @public
+* @param {string=} cid
+* @return {DataTable.SortLogic}
+*/
+DataTable.prototype.getColumnSortingLogic = function(cid) {
+	if(cid) {
+		var logic = this._compMap[cid];
+		if(logic) {
+			return logic;
+		}
+	}
+
+	return this._compMap["_default"] || null;
 };
 
 /** Freeze data table so that no event is fired for data processing until executing {@link DataTable#unfreeze} method
@@ -12201,11 +12309,12 @@ DataTable.prototype.getSegmentParentRowId = function(rid) {
 /**
 * @public
 * @param {Array.<string>=} rids If no row id is given, row ids of this data table is used instead
+* @param {boolean=} partial Indicating that the given ids are not the whole list
 * @return {Array.<number>} Return null if there is no segmentation
 */
-DataTable.prototype.getSegmentValues = function(rids) {
+DataTable.prototype.getSegmentValues = function(rids, partial) {
 	if(this._segments) {
-		return this._segments.getSegmentValues(rids || this._rids);
+		return this._segments.getSegmentValues(rids || this._rids, partial);
 	}
 	return null;
 };
@@ -12288,9 +12397,9 @@ DataTable.prototype.addSegmentChild = function(segmentId, rid, dataId) {
 	if(this._segments) {
 		var dirty = this._segments.addSegmentChild(segmentId, rid, dataId);
 		if(dirty) {
-			if(this._sort(null)) {
-				this._dispatchPositionChange();
-			}
+			this._sort(null);
+			this._dispatchPositionChange(); // Force rerendering, even if there is no position change
+
 			this.requestClassifying();
 			return true;
 		}
@@ -12307,9 +12416,9 @@ DataTable.prototype.addSegmentChildren = function(segmentId, rids, dataIds) {
 	if(this._segments) {
 		var dirty = this._segments.addSegmentChildren(segmentId, rids, dataIds);
 		if(dirty) {
-			if(this._sort(null)) {
-				this._dispatchPositionChange();
-			}
+			this._sort(null);
+			this._dispatchPositionChange(); // Force rerendering, even if there is no position change
+
 			this.requestClassifying();
 			return true;
 		}
@@ -13062,6 +13171,7 @@ DataTable._proto = DataTable.prototype;
 /** @typedef {Object} RowDefinition~Options
 * @description RowDefinition options
 * @property {string=} ric="" RIC for real-time fields. Prefixing 0# to the ric is equivalent to specifying asChain property.
+* @property {string=} permId="" Organization PermId to be used instead of ric for private company.
 * @property {(Array|Object)=} values=null Values for static data
 * @property {Array.<string>=} fields=null Field that corresponds to the given static values
 * @property {boolean=} asChain=false The given ric will be treated as a chain
@@ -13143,6 +13253,10 @@ RowDefinition.prototype._ric = ""; // Contains no 0#
 /** @type {string}
 * @private
 */
+RowDefinition.prototype._permId = "";
+/** @type {string}
+* @private
+*/
 RowDefinition.prototype._displayText = "";
 /** @type {string|null}
 * @private
@@ -13268,13 +13382,20 @@ RowDefinition.prototype.initialize = function(rowOptions) {
 
 	var val = rowOptions["ric"];
 	if(val != null) {
-		this.setContent(/** @type{string} */(val)); // this._dataId is modified
+		this._ric = val;
+	}
+	val = rowOptions["permId"];
+	if(val != null) {
+		this._permId = val;
 	}
+	if(this._ric || this._permId){
+		this.setContent(this._ric, this._permId); // this._dataId is modified
+	}
+
 	val = rowOptions["chainRic"];
 	if(val != null) {
 		this._chainRic = val;
 	}
-
 	val = rowOptions["values"];
 	// eslint-disable-next-line no-undefined
 	if(val !== undefined) {
@@ -13328,10 +13449,11 @@ RowDefinition.prototype._initializeAsConstituent = function(rowOptions) {
 	}
 };
 /** @public
-* @param {string} userInput
+* @param {string} userInput RIC
+* @param {string=} permId=null Organization PermId, which use for getting ADC data for private  company
 * @return {boolean} True if there is any change otherwise false
 */
-RowDefinition.prototype.setContent = function(userInput) {
+RowDefinition.prototype.setContent = function(userInput, permId) {
 	if(this._autoGenerated) { // AutoGenerated RowDefinition cannot be changed by user input
 		return false;
 	}
@@ -13342,7 +13464,15 @@ RowDefinition.prototype.setContent = function(userInput) {
 		userInput += "";
 	}
 
-	if(this._userInput === userInput) {
+	var dirty = (this._userInput !== userInput);
+	if(this._permId !== permId){
+		this._permId = permId || "";
+		if(!userInput){
+			this._displayText = this._permId;
+			dirty = true;
+		}
+	}
+	if(!dirty) {
 		return false;
 	}
 
@@ -13369,7 +13499,7 @@ RowDefinition.prototype.setContent = function(userInput) {
 		this._displayText = this._ric; // No 0#
 	}
 
-	this._dataId = this._rowId + this._ric; // JET/RTK will generate data id to be rowId (given from this rowDef) + ric;
+	this._dataId = this._rowId + this.getSymbol(); // 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.
 	if(!this.subscribeForUpdates()) {
@@ -13397,6 +13527,11 @@ RowDefinition.prototype.getConfigObject = function(rowOptions) {
 		obj["ric"] = val;
 	}
 
+	val = this._permId;
+	if(val) {
+		obj["permId"] = val;
+	}
+
 	val = this._chainRic;
 	if(val) {
 		obj["chainRic"] = val;
@@ -13642,6 +13777,18 @@ RowDefinition.prototype.getRic = function() {
 /** @public
 * @return {string}
 */
+RowDefinition.prototype.getPermId = function() {
+	return this._permId;
+};
+/** @public
+* @return {string}
+*/
+RowDefinition.prototype.getSymbol = function() {
+	return this._ric || this._permId;
+};
+/** @public
+* @return {string}
+*/
 RowDefinition.prototype.getDisplayText = function() {
 	if(this._label != null) { // Empty string is allowed
 		return this._label;
@@ -13707,7 +13854,7 @@ RowDefinition.prototype.isAutoGenerated = function() {
 * @return {boolean}
 */
 RowDefinition.prototype.isRealTimeRow = function() {
-	if(!this._ric) { // Empty row
+	if(!this.getRic()) { // Empty row
 		return false;
 	}
 	if(this.isRowHeader()) {
@@ -13724,7 +13871,7 @@ RowDefinition.prototype.isRealTimeRow = function() {
 * @return {boolean} If a subscription is made, return true.
 */
 RowDefinition.prototype.subscribeForUpdates = function() {
-	if(!this.isRealTimeRow()) {
+	if(!this.isRealTimeRow() && !this.getPermId()) {
 		return false;
 	}
 
@@ -13738,14 +13885,14 @@ RowDefinition.prototype.subscribeForUpdates = function() {
 	if(this.isChain()) {
 		this._subId = subs["addChain"](this._chainRic || this._ric, this._rowId); // Some chain require 0# symbol to populate its constituents
 		// TODO: Handle Dynamic chain such as .PG.PA
-	} else {
+	} else if(this._ric) {
 		this._subId = subs["addRic"](this._ric, this._rowId);
 	}
 
 	if(prevRowData) {
 		this._dc.setRowData(this._dataId, prevRowData); // TODO: We may need to create a new object instead of prevRowData for data correctness
 	} else {
-		this._dc.setRowData(this._dataId, {"X_RIC_NAME": this._ric, "ROW_DEF": this}); // Trigger data update immediately
+		this._dc.setRowData(this._dataId, {"X_RIC_NAME": this.getSymbol(), "ROW_DEF": this}); // Trigger data update immediately
 	}
 	return true;
 };
@@ -15402,7 +15549,7 @@ ColumnDefinition.prototype.getAllFields = function() {
 * @return {boolean}
 */
 ColumnDefinition.prototype.isRealTimeField = function() {
-	return js_FieldDefinition.isRealTimeField(this.getField());
+	return js_FieldDefinition.isRealTimeField(this.getField() || this._field);
 };
 /** @public
 * @return {boolean}
@@ -15593,8 +15740,9 @@ ColumnDefinition.prototype.getConfigObject = function(colOptions) {
 		obj["sort"] = this._initialOrder;
 	}
 
-	if(this._classes) {
-		obj["className"] = this._classes.join(" ");
+	var classes = this._classes;
+	if(classes && classes.length > 0) {
+		obj["className"] = classes.join(" ");
 	}
 
 	if(this._textSelect) {
@@ -15612,14 +15760,18 @@ ColumnDefinition.prototype.getConfigObject = function(colOptions) {
 	var core = this._eventArg["core"];
 	var grid = this._eventArg["grid"];
 	var colIndex = grid.getColumnIndex(this);
-	value = core.getColumnScalability(colIndex);
-	obj["scalable"] = value;
 
-	value = core.getColumnCustomLaneSize(colIndex);
-	obj["width"] = value;
+	// The scalable, width and minWidth cannot be shifted into core as getConfigObject is accessible from colDef.
+	var scalable = core.getColumnScalability(colIndex);
+	var width = core.getColumnCustomLaneSize(colIndex);
+
+	if (scalable !== true || width !== 1) {
+		obj["scalable"] = scalable;
+		obj["width"] = width;
+	}
 
 	value = core.getMinimumColumnWidth(colIndex);
-	if(value !== 32) {
+	if(value !== 0) {
 		obj["minWidth"] = value;
 	}
 
@@ -15976,16 +16128,6 @@ ColumnDefinition.prototype._setCoreColumnDef = function(obj) {
 
 
 
-/** @private
-* @param {Object} obj
-* @return {boolean}
-*/
-var isEmptyObject = function (obj) {
-	for (var key in obj) {
-		return false;
-	}
-	return true;
-};
 
 /** This class make requesting ADC field easier by encapsulating JET.Data APIs and mapping data to the row
 * @constructor
@@ -16305,7 +16447,7 @@ SnapshotFiller.prototype._onJETSuccess = function (fields, serverResult) {
 	var updatedData = {};
 	for (ric in ricMap) {
 		var obj = ricMap[ric];
-		if (!isEmptyObject(obj)) {
+		if (!Object(Util["f" /* isEmptyObject */])(obj)) {
 			updatedData[ric] = obj;
 		}
 	}
@@ -16378,7 +16520,7 @@ SnapshotFiller.prototype._onRTKSuccess = function (fields, serverResult) {
 	var updatedData = {};
 	for (ric in ricMap) {
 		var obj = ricMap[ric];
-		if (!isEmptyObject(obj)) {
+		if (!Object(Util["f" /* isEmptyObject */])(obj)) {
 			updatedData[ric] = obj;
 		}
 	}
@@ -16448,7 +16590,7 @@ SnapshotFiller.prototype._onRTKTimeSeriesSuccess = function (fields, serverResul
 	var dataMapping = {};
 	for (ric in ricMap) {
 		var obj = ricMap[ric];
-		if (!isEmptyObject(obj)) {
+		if (!Object(Util["f" /* isEmptyObject */])(obj)) {
 			dataMapping[ric] = obj;
 		}
 	}
@@ -29320,6 +29462,17 @@ DataView.prototype.setColumnSortingLogic = function(cid, func) {
 		this._dt.setColumnSortingLogic(cid, func);
 	}
 };
+/** Get sorting logic for the specified field. Default logic is returned, if no logic is specified for the column
+* @public
+* @param {string=} cid
+* @return {DataTable.SortLogic}
+*/
+DataView.prototype.getColumnSortingLogic = function(cid) {
+	if(this._dt) {
+		return this._dt.getColumnSortingLogic(cid);
+	}
+	return null;
+};
 /** Check if this view is in sorting mode
 * @public
 * @return {boolean}
@@ -31837,7 +31990,7 @@ DataView.prototype._sort = function() {
 	if(this._dt._getSegmentSeparators() || this.isSorting()) {
 		var rids = this._rids;
 		var dataRows = this._dt.getMultipleRowData(rids);
-		var segmentValues = this._dt.getSegmentValues(rids);
+		var segmentValues = this._dt.getSegmentValues(rids, true); // WARNING: This does not work well for hidden/filtered rows
 		var change = data_DataTable._performMultiLevelSorting(dataRows, this._sortingDefs, segmentValues);
 
 		if(change) {
@@ -35056,6 +35209,7 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 
  // eslint-disable-line
 
+
  // eslint-disable-line
 
 
@@ -35255,7 +35409,9 @@ var Core = function (opt_initializer) {
 		"rowRemoved",
 		"columnPositionChanged",
 		"rowPositionChanged",
-		"beforeColumnBoundUpdate"
+		"beforeColumnBoundUpdate",
+		"beforeBatchOperation",
+		"afterBatchOperation"
 	);
 
 	// For debugging in advanced optimization mode
@@ -35330,6 +35486,15 @@ Core.SectionReference;
 */
 Core.MouseInfo;
 
+/** @typedef {Object} Core~BatchInfo
+* @private
+* @property {string=} reset //set columns
+* @property {string=} insertion //add cols
+* @property {string=} removal //remove cols
+* @property {string=} moving //reorder
+*/
+Core.BatchInfo;
+
 /** @typedef {Core.MouseInfo|ElementWrapper|Element} Core~CellReference
 * @description A section in core grid can be refered by the following object <br>
 * `{Core.MouseInfo}` : Object with valid x, y coordinates and section index <br>
@@ -35584,6 +35749,10 @@ Core.prototype._rowHeightTimerId = 0;
 * @private
 */
 Core.prototype._groupDefs = null;
+/** @type {BatchInfo}
+* @private
+*/
+Core.prototype._batches = null;
 //#region Public Methods
 
 /**
@@ -35591,7 +35760,7 @@ Core.prototype._groupDefs = null;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.41";
+	return "5.1.48";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -35727,10 +35896,10 @@ Core.prototype.getConfigObject = function (gridOptions) {
 		}
 	}
 
-	if(this._rowHighlighting) {
-		obj["rowHighlighting"] = true;
-	}
-	obj["columnVirtualization"] = this._colVirtualizer.isEnabled();
+	// It will be overwrite in rt-grid or atlas-blotter
+	obj["rowVirtualization"] = this.isRowVirtualizationEnabled();
+	obj["columnVirtualization"] = this.isColumnVirtualizationEnabled();
+	obj["rowHighlighting"] = this._rowHighlighting;
 
 	if(this._fixFrozenTopSections) {
 		obj["topFreezingCount"] = this._startVScrollbarIndex >= 0 ? (this._startVScrollbarIndex + 1) : false;
@@ -35743,7 +35912,13 @@ Core.prototype.getConfigObject = function (gridOptions) {
 	if(this._rowScrollingStep) {
 		obj["stepScroll"] = (this._rowScrollingStep === 1) ? true : this._rowScrollingStep;
 	}
-	obj["autoHideScrollbar"] = this._vscrollbar.getAutoHide(); // this._hscrollbar has the same settings
+
+	var val = this._vscrollbar.getAutoHide();
+	if(val !== true) {
+		// TODO: check this._hscrollbar and this._vscrollbar can be difference config
+		obj["autoHideScrollbar"] = val; // this._hscrollbar has the same settings
+	}
+
 	var wheelSpeed = this._vscrollbar.getMouseWheelSpeed();
 	if(wheelSpeed) {
 		obj["linearWheelScrolling"] = wheelSpeed;
@@ -36524,6 +36699,10 @@ Core.prototype.removeColumnAt = function (index) {
 
 	if (this._hasListener("columnRemoved")) {
 		var e = {};
+		var batches = this._batches;
+		if(batches){
+			e["batches"] = batches;
+		}
 		e["atTheMiddle"] = true;
 		e["colIndex"] = index;
 		e["columns"] = "deprecated";
@@ -38716,6 +38895,14 @@ Core.prototype.enableRowVirtualization = function (opt_enabled) {
 		this._rowVirtualizer.deactivate();
 	}
 };
+
+/** @public
+* @return {boolean}
+*/
+Core.prototype.isRowVirtualizationEnabled = function () {
+	return this._rowVirtualizer.isEnabled();
+};
+
 /** No runtime support
 * @public
 * @param {boolean=} opt_enabled
@@ -38730,6 +38917,13 @@ Core.prototype.enableColumnVirtualization = function (opt_enabled) {
 	}
 };
 
+/** @public
+* @return {boolean}
+*/
+Core.prototype.isColumnVirtualizationEnabled = function () {
+	return this._colVirtualizer.isEnabled();
+};
+
 /** Scrolling step will be multiple of the default row height in pixels. For example, if default row height is 32 pixel and row scrolling step is 2, <br>
 * then the actual scrolling step for vertical scrollbar will be (32 * 2) = 64 pixels
 * @public
@@ -39353,6 +39547,40 @@ Core.prototype.getColumnGroupChildIds = function (groupId) {
 	}
 	return null;
 };
+
+/** @public
+* @param {string} batchType
+* @return {boolean}
+* @fires Core#beforeBatchOperation
+*/
+Core.prototype.startBatch = function (batchType) {
+	if(!batchType){
+		return false;
+	}
+	if(!this._batches){
+		this._batches = {};
+	}
+	this._batches[batchType] = batchType;
+	this._dispatch("beforeBatchOperation", { batches: this._batches, batchType: batchType });
+	return true;
+};
+/** @public
+* @param {string} batchType
+* @return {boolean}
+* @fires Core#afterBatchOperation
+*/
+Core.prototype.stopBatch = function (batchType) {
+	if(!batchType){
+		return false;
+	}
+	this._dispatch("afterBatchOperation", { batches: this._batches, batchType: batchType });
+
+	delete this._batches[batchType];
+	if(Object(Util["f" /* isEmptyObject */])(this._batches)){
+		this._batches = null;
+	}
+	return true;
+};
 //#endregion Public Methods
 
 //#region Private Methods
@@ -39596,6 +39824,10 @@ Core.prototype._dispatchColumnAddedEvent = function (at, count, atTheMiddle, ctx
 	if (this._hasListener("columnAdded")) {
 		var e = {};
 		e["atTheMiddle"] = atTheMiddle;
+		var batches = this._batches;
+		if(batches){
+			e["batches"] = batches;
+		}
 		if(count === 1) {
 			e["colIndex"] = at;
 			e["context"] = ctx;
@@ -39747,6 +39979,10 @@ Core.prototype._removeColumn = function (num) {  // TODO: change the logic to us
 
 	if (this._hasListener("columnRemoved")) {
 		var e = {};
+		var batches = this._batches;
+		if(batches){
+			e["batches"] = batches;
+		}
 		for (var c = colCount; --c >= newCount; ) {
 			var colDef = removedCols[c - newCount];
 			e["colIndex"] = c;
@@ -40746,7 +40982,7 @@ StyleLoader.chainIcon = '';
 /** @type {string}
 * @public
 */
-StyleLoader.styles = Object(Util["g" /* prettifyCss */])([
+StyleLoader.styles = Object(Util["i" /* prettifyCss */])([
 	".tr-grid .chain-icon", [
 		"cursor: pointer;"
 	],
@@ -40769,7 +41005,7 @@ StyleLoader.styles = Object(Util["g" /* prettifyCss */])([
 StyleLoader.applyStyle = function (grid) {
 	if (grid && !grid._rowGroupingStyles) { // TODO: Support run-time theme loading
 		grid._rowGroupingStyles = true; // Prevent loading the same style twice
-		Object(Util["d" /* injectCss */])(StyleLoader.styles, grid.getElement());
+		Object(Util["e" /* injectCss */])(StyleLoader.styles, grid.getElement());
 	}
 };
 
@@ -41107,7 +41343,7 @@ DataConnector.prototype.getRowDefByRic = function (ric) {
 * @return {boolean} True if new reference is added.
 */
 DataConnector.prototype.addRic = function (rowDef) {
-	var ric = rowDef ? rowDef.getRic() : "";
+	var ric = rowDef ? rowDef.getSymbol() : "";
 	if(!ric) {
 		return false;
 	}
@@ -41135,7 +41371,8 @@ DataConnector.prototype.addRic = function (rowDef) {
 */
 DataConnector.prototype.removeRic = function (rowDef, ric) {
 	if(!ric) {
-		ric = rowDef ? rowDef.getRic() : "";
+		// TODO: RIC or permId maybe change during run-time, need to check before remove RIC/permId
+		ric = rowDef ? rowDef.getSymbol() : "";
 	}
 	if(!ric) {
 		return;
@@ -41296,73 +41533,150 @@ DataConnector.prototype.reset = function () {
 /* harmony default export */ var js_DataConnector = (DataConnector);
 
 // CONCATENATED MODULE: ./src/js/RowDefSorter.js
+
+
+/** @private
+* @param {*} a
+* @param {*} b
+* @param {number} order
+* @return {number}
+*/
+var _defaultCompare = function(a, b, order) {
+	if(a == null || a !== a) {
+		if(b == null || b !== b) {
+			return 0;
+		}
+		return 1;
+	}
+	if(b == null || b !== b) {
+		return -1;
+	}
+
+	if(a < b) {
+		return -order;
+	}
+	if(b < a) {
+		return order;
+	}
+	return 0;
+};
+
 /** @constructor
 */
 var RowDefSorter = function() {
 	this._defaultSorter = this._defaultSorter.bind(this);
 	this._dataSorter = this._dataSorter.bind(this);
 	this._rowDefSorter = this._rowDefSorter.bind(this);
+	this._multiColumnsSorter = this._multiColumnsSorter.bind(this);
 
-	this._sortContext = {};
+	this._globalContext = {};
+	this._sortParams = [];
+	this._ctxCaches = [];
 };
 
-
-/** @type {string}
+/** @type {!Object}
 * @private
 */
-RowDefSorter.prototype._field = "";
-/** @type {!Object}
+RowDefSorter.prototype._globalContext;
+/** @type {!Array.<Array>}
 * @private
 */
-RowDefSorter.prototype._sortContext;
-/** @type {Function}
+RowDefSorter.prototype._sortParams;
+/** @type {!Array.<Object>}
+* @private
+*/
+RowDefSorter.prototype._ctxCaches;
+/** @type {Array}
 * @private
 */
-RowDefSorter.prototype._sortLogic = null;
+RowDefSorter.prototype._primaryParams;
 
 
 /** @public
 */
 RowDefSorter.prototype.dispose = function() {
-	this._sortLogic = null;
-	this._sortContext = {}; // Clear any existing reference
+	this._globalContext = {}; // Clear any existing reference
+	this._sortParams.length = 0;
+	this._ctxCaches.length = 0;
+	this._primaryParams = null;
 };
 
 /** @public
-* @param {boolean=} rowSorting=false
 * @return {Function}
 */
-RowDefSorter.prototype.getSorter = function(rowSorting) {
-	if(this._sortLogic) {
-		return rowSorting ? this._rowDefSorter : this._dataSorter;
-	} else {
-		return this._defaultSorter;
+RowDefSorter.prototype.getSorter = function() {
+	this._primaryParams = null;
+	var sortCount = this._sortParams.length;
+	if(sortCount === 1) {
+		var params = this._primaryParams = this._sortParams[0];
+		var sortLogic = params[1];
+		if(sortLogic) {
+			var rowSorting = params[3];
+			return rowSorting ? this._rowDefSorter : this._dataSorter;
+		} else {
+			return this._defaultSorter;
+		}
+	} else if(sortCount > 1) {
+		return this._multiColumnsSorter;
 	}
-};
-/** @public
-* @param {Function=} func
-*/
-RowDefSorter.prototype.setSortLogic = function(func) {
-	this._sortLogic = (typeof func === "function") ? func : null;
-};
 
+	return RowDefSorter._noSorting;
+};
 
 /** @public
-* @param {string} field
+* @param {string} key
+* @param {*} value
 */
-RowDefSorter.prototype.setField = function(field) {
-	if(!field) {
-		field = "";
+RowDefSorter.prototype.reset = function() {
+	if(this._sortParams.length) {
+		this._sortParams.length = 0;
 	}
-	this._sortContext["field"] = this._field = field;
-	this._sortContext["formattedField"] = field + "_FORMATTED";
 };
 /** @public
 * @param {string} key
 * @param {*} value
 */
 RowDefSorter.prototype.setContext = function(key, value) {
-	this._sortContext[key] = value;
+	this._globalContext[key] = value;
+};
+/** @public
+* @param {string} field
+* @param {Function} logic
+* @param {boolean} rowSorting
+* @param {string} order
+* @param {number} colIndex
+* @param {*} colDef
+*/
+RowDefSorter.prototype.addColumnContext = function(field, logic, rowSorting, order, colIndex, colDef) {
+	if(!field) {
+		field = "";
+	}
+	var sortPriority = this._sortParams.length;
+	var ctx = this._ctxCaches[sortPriority];
+	if(!ctx) {
+		ctx = this._ctxCaches[sortPriority] = Object(Util["b" /* cloneObject */])(this._globalContext);
+	}
+	var orderNum = 0;
+	if(order === "a") {
+		orderNum = 1;
+	} else if(order === "d") {
+		orderNum = -1;
+	}
+
+	var params = [
+		field, // 0
+		(typeof logic === "function") ? logic : null,  // 1
+		ctx, // 2
+		rowSorting, // 3
+		orderNum  // 4
+	];
+
+	ctx["colIndex"] = colIndex;
+	ctx["field"] = field;
+	ctx["formattedField"] = field + "_FORMATTED";
+	ctx["colDef"] = colDef;
+
+	this._sortParams.push(params);
 };
 
 /** @private
@@ -41371,32 +41685,7 @@ RowDefSorter.prototype.setContext = function(key, value) {
 * @param {number} order
 * @return {number}
 */
-RowDefSorter.prototype._defaultSorter = function(rowDefA, rowDefB, order) {
-	var orderA = rowDefA.getGroupOrder();
-	var orderB = rowDefB.getGroupOrder();
-	if(orderA !== orderB) {
-		return orderA - orderB; // Regardless of sort order
-	}
-
-	var a = rowDefA.getData(this._field);
-	var b = rowDefB.getData(this._field);
-
-	if(a == null || a !== a) {
-		if(b == null || b !== b) {
-			return 0;
-		}
-		return 1;
-	}
-	if(b == null || b !== b) {
-		return -1;
-	}
-
-	if(a < b) {
-		return -order;
-	}
-	if(b < a) {
-		return order;
-	}
+RowDefSorter._noSorting = function(rowDefA, rowDefB, order) {
 	return 0;
 };
 /** @private
@@ -41405,16 +41694,30 @@ RowDefSorter.prototype._defaultSorter = function(rowDefA, rowDefB, order) {
 * @param {number} order
 * @return {number}
 */
+RowDefSorter.prototype._defaultSorter = function(rowDefA, rowDefB, order) {
+	var field = this._primaryParams[0];
+	return _defaultCompare(
+		rowDefA.getData(field),
+		rowDefB.getData(field),
+		order
+	);
+};
+/** @private
+* @param {RowDefinition} rowDefA
+* @param {RowDefinition} rowDefB
+* @param {number} order
+* @return {number}
+*/
 RowDefSorter.prototype._dataSorter = function(rowDefA, rowDefB, order) {
-	var orderA = rowDefA.getGroupOrder();
-	var orderB = rowDefB.getGroupOrder();
-	if(orderA !== orderB) {
-		return orderA - orderB; // Regardless of sort order
-	}
-
-	var a = rowDefA.getData(this._field);
-	var b = rowDefB.getData(this._field);
-	return this._sortLogic(a, b, order, this._sortContext);
+	var params = this._primaryParams;
+	var field = params[0];
+	var sortLogic = params[1];
+	return sortLogic(
+		rowDefA.getData(field),
+		rowDefB.getData(field),
+		order,
+		params[2]
+	);
 };
 /** @private
 * @param {RowDefinition} rowDefA
@@ -41423,13 +41726,41 @@ RowDefSorter.prototype._dataSorter = function(rowDefA, rowDefB, order) {
 * @return {number}
 */
 RowDefSorter.prototype._rowDefSorter = function(rowDefA, rowDefB, order) {
-	var orderA = rowDefA.getGroupOrder();
-	var orderB = rowDefB.getGroupOrder();
-	if(orderA !== orderB) {
-		return orderA - orderB; // Regardless of sort order
+	var params = this._primaryParams;
+	var sortLogic = params[1];
+	return sortLogic(rowDefA, rowDefB, order, params[2]);
+};
+/** @private
+* @param {RowDefinition} rowDefA
+* @param {RowDefinition} rowDefB
+* @param {number} primaryOrder
+* @return {number}
+*/
+RowDefSorter.prototype._multiColumnsSorter = function(rowDefA, rowDefB, primaryOrder) {
+	var sortParams = this._sortParams;
+	var sortCount = sortParams.length;
+	for(var i = 0; i < sortCount; ++i) {
+		var params = sortParams[i];
+		var field = params[0];
+		var sortLogic = params[1];
+		var ctx = params[2];
+		var rowSorting = params[3];
+		var orderNum = params[4];
+		var ret = 0;
+		if(sortLogic) {
+			if(rowSorting) {
+				ret = sortLogic(rowDefA, rowDefB, orderNum, ctx);
+			} else {
+				ret = sortLogic(rowDefA.getData(field), rowDefB.getData(field), orderNum, ctx);
+			}
+		} else {
+			ret = _defaultCompare(rowDefA.getData(field), rowDefB.getData(field), orderNum);
+		}
+		if(ret) {
+			return ret;
+		}
 	}
-
-	return this._sortLogic(rowDefA, rowDefB, order, this._sortContext);
+	return 0;
 };
 
 /* harmony default export */ var js_RowDefSorter = (RowDefSorter);
@@ -41442,6 +41773,7 @@ RowDefSorter.prototype._rowDefSorter = function(rowDefA, rowDefB, order) {
 
 
 
+
 /* eslint-enable */
 
 /** Fired when user click and before the sorting operation.
@@ -41901,7 +42233,10 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		}
 		field = opt["field"];
 		if (field) {
-			col["sortBy"] = field;
+			if(col["field"] !== field) {
+				col["sortBy"] = field;
+			} // else The default value is an empty sortBy, which refers to the same column field by default.
+
 			if (this._sortingSequenceMap && this._sortingSequenceMap[field]) {
 				col["sortingSequence"] = this._sortingSequenceMap[field];
 			}
@@ -41914,16 +42249,32 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions = obj["sorting"] = {};
 	}
 
-	extOptions["initialSort"] = this.getSortedColumns();
-	extOptions["sortableIndicator"] = this._sortableIndicator;
+	var val = this.getSortedColumns();
+	if(val != null) {
+		extOptions["initialSort"] = val;
+	}
+
+	val = this._sortableIndicator;
+	if(val !== false) {
+		extOptions["sortableIndicator"] = val;
+	}
+
 	if(this._maxCount !== 1) {
 		extOptions["multiColumn"] = this._maxCount === -1 ? true : this._maxCount;
 	}
 	if(this._dblClickAllowed) {
 		extOptions["disableDoubleClickToSort"] = !this._dblClickAllowed;
 	}
-	extOptions["sortableColumns"] = this._sortableColumns;
-	extOptions["indicatorOnly"] = !this._dataSorting;
+
+	val = this._sortableColumns;
+	if(val !== true) {
+		extOptions["sortableColumns"] = val;
+	}
+
+	val = this._dataSorting;
+	if(val !== true) {
+		extOptions["indicatorOnly"] = val;
+	}
 	// extOptions["mode"] = this._mode;
 	if(this._disabled) {
 		extOptions["disabled"] = true;
@@ -41940,6 +42291,10 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions["sortingSequence"] = sortingSeq.slice();
 	}
 
+	if(Object(Util["f" /* isEmptyObject */])(obj["sorting"])) {
+		delete obj["sorting"];
+	}
+
 	return obj;
 };
 
@@ -42954,6 +43309,9 @@ SortableTitlePlugin.prototype._sortDataView = function (opt_action) {
 	if (!this._dataSorting) { return; }
 
 	var sortCount = this._sortStates.length;
+	if(this._userManagedLogic && sortCount > 1) { // The logic is managed by the user. There is no point in using multi-column sorting
+		sortCount = 1;
+	}
 	var orders = null;
 	var sortLogics = null;
 	var c_ref = null;
@@ -42969,6 +43327,9 @@ SortableTitlePlugin.prototype._sortDataView = function (opt_action) {
 		} else {
 			c_ref = this.getColumnSortingFields();
 		}
+		if(this._userManagedLogic && c_ref.length > 1) {
+			c_ref = c_ref.slice(0, 1);
+		}
 	}
 
 	// Perform sorting even if there is no sort state
@@ -43077,16 +43438,16 @@ SortableTitlePlugin.prototype._updateSortableIndicator = function (hostIndex) {
 					symbol = t._createIconElem(icon, textContent);
 					symbol.className = "sort-symbol";
 					cell["insertFloatingIcon"](symbol, 0);
-
-					if (t._sortStates.length > 1) {
-						symbol = document.createElement("span");
-						symbol.className = "priority-symbol";
-						symbol.textContent = priority + 1;
-						cell["insertFloatingIcon"](symbol, 1);
-					}
 				} else {
 					cell["addClass"]("edge-indicator");
 				}
+
+				if (t._sortStates.length > 1) {
+					symbol = document.createElement("span");
+					symbol.className = "priority-symbol";
+					symbol.textContent = priority + 1;
+					cell["insertFloatingIcon"](symbol, 1);
+				}
 			} else if (t._sortableIndicator) { // Can sort but currently not sorting
 				icon = SortableTitlePlugin._icons["sortable"];
 				symbol = t._createIconElem(icon, CODE_DIAMOND);
@@ -44220,7 +44581,7 @@ Grid.prototype.initialize = function(gridOption) {
 			if(rows[n]["values"]) { // merge row's values, values can be object or array
 				values = Object(Util["a" /* arrayToObject */])(rows[n]["values"], fields);
 				data = Object(Util["a" /* arrayToObject */])(ary[n], fields);
-				rows[n]["values"] = Object(Util["c" /* extendObject */])(values, data);
+				rows[n]["values"] = Object(Util["d" /* extendObject */])(values, data);
 			} else {
 				rows[n]["values"] = ary[n];
 			}
@@ -44282,6 +44643,28 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 		grid.getConfigObject(obj);
 	}
 
+	// Difference from composite grid in default config
+	if(obj["columnVirtualization"] === false) {
+		delete obj["columnVirtualization"];
+	}
+
+	if(obj["rowVirtualization"] === true) {
+		delete obj["rowVirtualization"];
+	}
+
+	if(obj["rowHighlighting"] === true) {
+		delete obj["rowHighlighting"];
+	}
+
+	if(obj["contentVerticalLines"] === false) { // the default value change in wrapper (atlas-blotter)
+		delete obj["contentVerticalLines"];
+	}
+
+	if(obj["borders"] === false) { // the default value change in wrapper (atlas-blotter)
+		delete obj["borders"];
+	}
+
+
 	var i, len;
 	len = this.getColumnCount();
 	for (i = 0; i < len; ++i) {
@@ -44306,12 +44689,12 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	}
 
 	val = grid.getDefaultRowHeight();
-	if(val !== 32) {
+	if(val !== 28) { // the default value change in wrapper (atlas-blotter)
 		obj["rowHeight"] = val;
 	}
 
 	val = grid.getSection("title").getDefaultRowHeight();
-	if(val !== 32) {
+	if(val !== 28) { // the default value change in wrapper (atlas-blotter)
 		obj["headerRowHeight"] = val;
 	}
 
@@ -44319,7 +44702,8 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 		obj["autoLayoutUpdate"] = true;
 	}
 
-	if (this._defaultColumnOptions) {
+	val = Object(Util["f" /* isEmptyObject */])(this._defaultColumnOptions);
+	if (!val) { // Currently, this variable is the object, we need to check empty array for default value
 		obj["defaultColumnOptions"] = this._defaultColumnOptions;
 	}
 
@@ -44378,10 +44762,13 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	}
 
 	// TODO: The following states need to be retrieved
-	// rowHighlighting
-	// columnVirtualization
 	// topFreezingCount, bottomFreezingCount
 	// scrollbarParent
+	// linearWheelScrolling
+	// stepScroll
+	// noColumnDragging
+	// columnReorder
+	// topSection
 
 	// NOTE: no need to export synapseApiKey, ADC and RTK
 
@@ -44457,7 +44844,7 @@ Grid.prototype._onRicAdded = function(e) {
 		var jLen = rowDefs ? rowDefs.length : 0;
 		for (var j = 0; j < jLen; ++j) {
 			var rowDef = rowDefs[j];
-			if (rowDef.getRic() === ric) {
+			if (rowDef.getSymbol() === ric) {
 				this._snapshot.addRic(ric); // ADC
 			}
 		}
@@ -44482,7 +44869,7 @@ Grid.prototype._onFieldAdded = function(e) {
 
 	// ADC
 	for (var i in rowDefs) {
-		this._snapshot.addRic(rowDefs[i].getRic());
+		this._snapshot.addRic(rowDefs[i].getSymbol());
 	}
 	this._snapshot.addFields(addedFields);
 
@@ -44676,7 +45063,7 @@ Grid.prototype.replaceColumn = function (columnOption, colRef) {
 	colConfig["width"] = value;
 
 	value = core.getMinimumColumnWidth(colIndex);
-	if(value !== 32) {
+	if(value > 0) {
 		colConfig["minWidth"] = value;
 	}
 
@@ -44814,22 +45201,101 @@ Grid.prototype._shouldLoadFieldInfo = function (field) {
 * @param {Array.<Object>} columns Array of column options
 */
 Grid.prototype.setColumns = function(columns) {
+	var grid = this._grid;
 	var colCount = (columns) ? columns.length : 0;
 
+	grid.startBatch("reset");
 	this.removeAllColumns();
 	if(colCount > 0) {
 		var prevState = false;
 		if(colCount > 1) {
-			prevState = this._grid.freezeLayout(true); // Insert multiple columns can be a huge time consuming
+			prevState = grid.freezeLayout(true); // Insert multiple columns can be a huge time consuming
 		}
 		for(var i = 0; i < colCount; ++i) {
 			this.insertColumn(columns[i], i);
 		}
 		if(colCount > 1) {
-			this._grid.freezeLayout(prevState);
+			grid.freezeLayout(prevState);
+		}
+	}
+	grid.stopBatch("reset");
+};
+
+
+/** Remove, add and keep column based on the given column data
+* @public
+* @param {Array.<Object>} columns Array of column options
+*/
+Grid.prototype.restoreColumns = function(columns) {
+	var grid = this._grid;
+	grid.startBatch("reset");
+	var configObj = this.getConfigObject();
+	var previousColumns = configObj.columns;
+
+	var preColLen = previousColumns.length;
+	var newColLen = columns.length;
+
+	var removingFields = [];
+	var keepingColumns = [];
+	var columnOrdering = [];
+
+	var i, j, found;
+	// Slow, time complexity BigO(n ^ 2)
+	for (i = 0; i < preColLen; i++) {
+		found = false;
+		for (j = 0; j < newColLen; j++) {
+			if (Object(Util["c" /* deepEqual */])(previousColumns[i], columns[j])) {
+				keepingColumns.push(previousColumns[i]);
+				found = true;
+				break;
+			}
+		}
+		if (!found) {
+			removingFields.push(previousColumns[i].field);
+		}
+	}
+
+	var sortingStates;
+	var removeLen = removingFields.length;
+	if(removeLen > 0 && this._stp) {
+		sortingStates = this._stp.getSortingStates().slice(); // We need to clone array for avoid object reference in remove column
+	}
+
+	this.removeColumns(removingFields);
+
+	var keepingLen = keepingColumns.length;
+	var prevState = false;
+	if(newColLen > 1) {
+		prevState = this._grid.freezeLayout(true); // Insert multiple columns can be a huge time consuming
+	}
+	for (i = 0; i < newColLen; i++) {
+		found = false;
+		for (j = 0; j < keepingLen; j++) { // loop only keeping column
+			if (Object(Util["c" /* deepEqual */])(columns[i], keepingColumns[j])) {
+				found = true;
+				var colIndex = this.getColumnIndex(columns[i].field); // We cannot use 'i' (colIndex) in this case, as it will sort the columns. Instead, we need to obtain a new column index from the field.
+				columnOrdering.push(this.getColumnId(colIndex));
+				break;
+			}
+		}
+		if (!found) {
+			this.insertColumn(columns[i], i);
+			columnOrdering.push(this.getColumnId(i)); // Use new insertion column index
 		}
 	}
+
+	if(newColLen > 1) {
+		this._grid.freezeLayout(prevState);
+	}
+
+	if(removeLen > 0 && this._stp) {
+		this._stp.sortColumns(sortingStates);
+	}
+
+	grid.reorderColumns(columnOrdering);
+	grid.stopBatch("reset");
 };
+
 /** Remove all existing columns and add new columns based on the given texts/fields
 * @public
 * @function
@@ -44974,10 +45440,11 @@ Grid.prototype.removeColumn = function(colRef) {
 			this._dc.removeStaticFields([colDef.getField()]);
 		}
 	}
-	colDef.dispose();
-	this._grid.removeColumnAt(colIndex);
 
+	this._grid.removeColumnAt(colIndex);
 	this._connector.removeFields(colDef);
+
+	colDef.dispose(); // Dispose at the last line to avoid making properties inaccessible
 	// TODO: Remove fields that are related to the column (e.g. fields for coloring)
 };
 /** Remove multiple columns through array. To remove all columns, use removeAllColumns() instead of this method
@@ -45323,7 +45790,7 @@ Grid.prototype.setColumnSorter = function(colRef, func) {
 * @param {RowDefinition} rowDef
 */
 Grid.prototype._initDuplicateRicData = function(rowDef) {
-	var ric = rowDef.getRic();
+	var ric = rowDef.getSymbol();
 	var rowDefs = this._connector.getRowDefByRic(ric);
 	if(rowDefs && rowDefs.length) {
 		cloneRowData(rowDefs[0], rowDef);
@@ -45740,8 +46207,9 @@ Grid.prototype.setRic = function(rowRef, str, options) {
 				this.insertRow(options, rowIndex);
 			}
 		} else {
-			var oldRic = rowDef.getRic();
-			if(rowDef.setContent(str)) { // The given string may not be a RIC
+			var oldRic = rowDef.getSymbol();
+			var permId = options["permId"] || "";
+			if(rowDef.setContent(str, permId)) { // The given string may not be a RIC
 				this._connector.removeRic(rowDef, oldRic);
 				this._initDuplicateRicData(rowDef);
 				this._connector.addRic(rowDef);
@@ -46062,7 +46530,7 @@ Grid.prototype.setRicData = function(ric, values) {
 	var rowCount = rowDefs ? rowDefs.length : 0;
 	for (var i = 0; i < rowCount; ++i) {
 		var rowDef = rowDefs[i];
-		if (rowDef && rowDef.getRic() === ric) {
+		if (rowDef && rowDef.getSymbol() === ric) {
 			rowDef.setRowData(values); // TODO: Need conflator to improve performance
 		}
 	}
@@ -46518,33 +46986,34 @@ Grid.prototype._updateStreamingData = function() {
 * @param {Object} e
 */
 Grid.prototype._onPreDataSorting = function (e) {
-	var field = "";
-	var rowSorting = false;
-	var sortLogic = null;
-
-	var states = this._stp.getSortingStates(); // WARNING: Use of deprecated function
-	var state = states ? states[0] : null; // TODO: Support multi-column sorting
-
-	if(state) {
-		field = state["field"] || "";
-		var colIndex = this._stp.getSortedColumnIndex(0);
-		var colDef = (colIndex >= 0) ? this.getColumnDefinition(colIndex) : null;
-		this._sorter.setContext("colIndex", colIndex);
-		this._sorter.setContext("colDef", colDef);
+	var objs = this._stp.getSortedColumns();
+
+	this._sorter.reset();
+	if(Array.isArray(objs)) {
+		var sortCount = objs.length;
+		for(var i = 0; i < sortCount; ++i) {
+			var obj = objs[i];
+			var field = obj["field"] || "";
+			var colIndex = obj["colIndex"];
+			var colDef = (colIndex >= 0) ? this.getColumnDefinition(colIndex) : null;
+
+			var rowSorting = false;
+			var sortLogic = null;
+			if(colDef) {
+				field = colDef.getField(); // WARNING: Field and logic could be out of sync
+				rowSorting = colDef.isRowSorting();
+				sortLogic = colDef.getSorter();
+			}
+			// TODO: get sortLogic from DataView
+			// if(!sortLogic && field) {
+			// sortLogic = state["sortLogic"];
+			// }
 
-		if(colDef) {
-			field = colDef.getField(); // WARNING: Field and logic could be out of sync
-			sortLogic = colDef.getSorter();
-			rowSorting = colDef.isRowSorting();
+			this._sorter.addColumnContext(field, sortLogic, rowSorting, obj["sortOrder"], colIndex, colDef);
 		}
 	}
-	if(!sortLogic && field) {
-		sortLogic = state["sortLogic"];
-	}
 
-	this._sorter.setField(field);
-	this._sorter.setSortLogic(sortLogic);
-	this._columnSorter = this._sorter.getSorter(rowSorting);
+	this._columnSorter = this._sorter.getSorter();
 };
 /** @private
 * @param {RowDefinition} rowDefA
@@ -47445,7 +47914,7 @@ var _fieldInfo = {
 	"words2": {type: "string", min: 3, max: 10},
 	"words3": {type: "string", min: 5, max: 15},
 	"sentence": {type: "string", min: 8, max: 20},
-	"id": {type: "function", generate: _generateId},
+	"id": {type: "function", hash: 0, generate: _generateId},
 	"companyName": {type: "set", members: jet_DataSet.companyName },
 	"industry": {type: "set", members: jet_DataSet.industry },
 	"market": {type: "set", members: jet_DataSet.market },
@@ -47465,14 +47934,16 @@ var getFieldInfo = function(field) {
 * @param {Object|Function} options
 */
 var addFieldInfo = function(field, options) {
-	var opt = options;
-	if(typeof options === "function") {
-		opt = {
-			type: "function",
-			generate: options
-		};
+	if(field) {
+		var opt = options;
+		if(typeof options === "function") {
+			opt = {
+				type: "function",
+				generate: options
+			};
+		}
+		_fieldInfo[field] = opt; // WARNING: This could replace existing info
 	}
-	_fieldInfo[field] = opt;
 };
 
 /** Return pseudo random number in the range of 0 to 1 (exclusive of 1)
@@ -47814,8 +48285,9 @@ var _generate2DArray = function(fields, options, seed) {
 */
 var _hash = function(str) {
 	var sum = 0;
-	for(var i = str.length; --i >= 0;) {
-		sum += str.charCodeAt(i) * (i + 0.9);
+	var i = str ? str.length : 0;
+	while(--i >= 0) {
+		sum += str.charCodeAt(i) * (i + 0.9879);
 	}
 	return sum;
 };
@@ -47827,35 +48299,34 @@ var _hash = function(str) {
 */
 var _generateFieldData = function(field, options, seed) {
 	var fInfo = getFieldInfo(field);
+	if(!fInfo.type) {
+		fInfo.type = "number";
+		addFieldInfo(field, fInfo);
+	}
+	if(fInfo.fixedValue){
+		fInfo.value = value;
+		return fInfo;
+	}
+	if(seed != null) {
+		if(fInfo.hash == null) {
+			fInfo.hash = _hash(field);
+		}
+		seed += fInfo.hash; // Make each field unique for the same seed
+	}
+
 	var min = fInfo.min != null ? fInfo.min : 100; // WARNING: Default values are non-standard values
 	var max = fInfo.max != null ? fInfo.max : 10000;
-	var prec = fInfo.prec != null ? fInfo.prec : 0;
 	var value;
 
-	if(fInfo.fixedValue){
-		value = fInfo.fixedValue;
-	} else if(!fInfo.type) { // Unknown type
-		if(seed != null) {
-			if(field) {
-				if(!fInfo.hash) {
-					fInfo.hash = _hash(field);
-					addFieldInfo(field, fInfo); // WARNING: modify global state
-				}
-				seed += fInfo.hash;
-			}
-		}
-		value = randNumber(min, max, prec, seed);
-	} else if(fInfo.type === "string") {
+	if(fInfo.type === "string") {
 		if(fInfo.min != null || fInfo.max != null) {
-			if(seed != null) {
-				if(!fInfo.hash) {
-					fInfo.hash = _hash(field);
-				}
-				seed += fInfo.hash;
-			}
 			value = randString(min, max, seed);
 		} else {
-			value = options.text || "";
+			if(options) {
+				value = options.text || "";
+			} else {
+				value = "";
+			}
 		}
 	} else if(fInfo.type === "set") {
 		value = randMember(fInfo.members, seed);
@@ -47872,7 +48343,8 @@ var _generateFieldData = function(field, options, seed) {
 	} else if(fInfo.type === "function") {
 		fInfo.field = field;
 		value = fInfo.generate(fInfo, seed);
-	} else { // Default is number
+	} else { // Default is number for all unknown type
+		var prec = fInfo.prec != null ? fInfo.prec : 0;
 		value = randNumber(min, max, prec, seed);
 	}
 	fInfo.value = value;
@@ -49979,7 +50451,7 @@ CellPainter.themeReady = null;
 * var fn = CellPainter.parse("[CF_BID] >= 10 && [CF_BID] <= 100");
 * window.console.log(fn(25));
 */
-CellPainter.parse = Util["f" /* parseCondition */];
+CellPainter.parse = Util["h" /* parseCondition */];
 
 
 /** @public */
@@ -50077,25 +50549,17 @@ CellPainter.prototype.clearHeatMap = function() {
 /** @public */
 CellPainter.prototype.applyThemeColor = function() {
 	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
+	if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) { // Heatmap uses grid color to blend the result color
+		var cond = this._conditions[0]; // Heatmap, color text condition must be the first
+		if(cond) {
 			if(cond["textMode"]) {
 				cond["baseColor"] = colors["baseText"];
 			} else {
 				cond["baseColor"] = colors["baseGrid"];
 			}
-		}
-		if(cond["useThemeColor"]) { // Only heatmap and colorText painters use theme color
-			if(this._coloringType === CellPainter.ColoringTypes.HEATMAP || this._coloringType === CellPainter.ColoringTypes.TEXT) {
-				var up, down;
-				if(this._coloringType === CellPainter.ColoringTypes.TEXT && cond["field"] === "CF_TICK") {
-					up = colors["tickUp"];
-					down = colors["tickDown"];
-				} else {
-					up = colors["up"];
-					down = colors["down"];
-				}
+			if(cond["useThemeColor"]) {
+				var up = colors["up"];
+				var down = colors["down"];
 				var level = (colors["level"] === colors["baseText"]) ? "" : colors["level"];
 				CellPainter._setUpDownColors(cond, up, down, level);
 			}
@@ -50214,34 +50678,36 @@ CellPainter.prototype.addHeatmapWithTheme = function(field, midPoint, opt_textMo
 /** @private
 * @param {Function} expression
 * @param {string} field
-* @param {string} upColor
-* @param {string} downColor
-* @param {string} levelColor
+* @param {string=} upClass CSS class name
+* @param {string=} downClass CSS class name
+* @param {string=} levelClass CSS class name
 * @return {!Object}
 */
-CellPainter.prototype._addColorText = function(expression, field, upColor, downColor, levelColor) {
+CellPainter.prototype._addColorText = function(expression, field, upClass, downClass, levelClass) {
 	this._setColoringType(CellPainter.ColoringTypes.TEXT);
 
 	var condition = {};
 	condition["field"] = field;
 	condition["expression"] = expression.bind(null, field);
-	CellPainter._setUpDownColors(condition, upColor, downColor, levelColor);
+	condition["upClass"] = upClass;
+	condition["downClass"] = downClass;
+	condition["levelClass"] = levelClass;
 
 	this._addCondition(condition);
 	return condition;
 };
 /** @public
 * @param {string} field
-* @param {string} upColor
-* @param {string} downColor
-* @param {string} levelColor
+* @param {string=} upClass CSS class name
+* @param {string=} downClass CSS class name
+* @param {string=} levelClass CSS class name
 * @return {!Object}
 */
-CellPainter.prototype.addColorText = function(field, upColor, downColor, levelColor) {
+CellPainter.prototype.addColorText = function(field, upClass, downClass, levelClass) {
 	return this._addColorText(
 		TickFields[field] ? CellPainter._tickColorTextCondition : CellPainter._colorTextCondition,
 		field,
-		upColor, downColor, levelColor
+		upClass, downClass, levelClass
 	);
 };
 /** @public
@@ -50249,14 +50715,7 @@ CellPainter.prototype.addColorText = function(field, upColor, downColor, levelCo
 * @return {!Object}
 */
 CellPainter.prototype.addColorTextWithTheme = function(field) {
-	var colors = ElfUtil.themeColors;
-	var condition = this.addColorText(field,
-		colors["up"],
-		colors["down"],
-		(colors["level"] === colors["baseText"]) ? "" : colors["level"]
-	);
-
-	condition["useThemeColor"] = true;
+	var condition = this.addColorText(field, "positive", "negative", "neutral");
 	return condition;
 };
 /** @public
@@ -50358,14 +50817,16 @@ CellPainter.prototype.renderForPrinting = function(cell, rowData, min, max) {
 		return;
 	}
 	var styles = this._getStyles(rowData, min, max);
-	var cssClass = styles["cssClass"];
-	if (cssClass) {
-		if (cell._coloringCssClass !== cssClass) {
-			cell.classList.remove(cell._coloringCssClass);
-			cell._coloringCssClass = null;
+	var cssClass = styles["cssClass"]; // Can be an empty string
+	if (cssClass != null) { // Predefined colors mode
+		if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
+			elem.classList.remove(elem._coloringCssClass);
+			elem._coloringCssClass = null;
+		}
+		if (cssClass) {
+			elem.classList.add(cssClass);
+			elem._coloringCssClass = cssClass;
 		}
-		cell.classList.add(cssClass);
-		cell._coloringCssClass = cssClass;
 	} else {
 		if (cell._coloringCssClass) {
 			cell.classList.remove(cell._coloringCssClass);
@@ -50498,14 +50959,17 @@ CellPainter._cellRestorer = function(scope) {
 		}
 
 		var styles = this._getStyles(rowData, min, max);
-		var cssClass = styles["cssClass"];
-		if (cssClass) {
+		var cssClass = styles["cssClass"]; // Can be an empty string
+		if (cssClass != null) { // Predefined colors mode
 			if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
 				elem.classList.remove(elem._coloringCssClass);
 				elem._coloringCssClass = null;
 			}
-			elem.classList.add(cssClass);
-			elem._coloringCssClass = cssClass;
+			if (cssClass) {
+				elem.classList.add(cssClass);
+				elem._coloringCssClass = cssClass;
+			}
+			// Remove blinking color
 			elem.style.backgroundColor = "";
 			elem.style.color = "";
 		} else {
@@ -50560,13 +51024,14 @@ CellPainter.prototype._getStyles = function(rowData, min, max) {
 				}
 			} else if(this._coloringType === CellPainter.ColoringTypes.TEXT) {
 				if(ret > 0) {
-					CellPainter._colorObj["color"] = curCond["upColor"];
+					curCond["cssClass"] = curCond["upClass"];
 				} else if(ret < 0) {
-					CellPainter._colorObj["color"] = curCond["downColor"];
+					curCond["cssClass"] = curCond["downClass"];
 				} else {
-					CellPainter._colorObj["color"] = this._levelColorDisabled ? "" : curCond["levelColor"];
+					curCond["cssClass"] = this._levelColorDisabled ? "" : curCond["levelClass"];
 				}
-				return CellPainter._colorObj;
+				curCond["cssClass"] = curCond["cssClass"] || "";
+				return curCond;
 			}
 
 			// Expected return value is {
@@ -50626,7 +51091,7 @@ CellPainter.blackAndWhite = function (triplet) {
 * @param {string} rgbCode
 * @return {string} resultColor E.g. "#10FF0D"
 */
-CellPainter.rgb2Hex = Util["h" /* rgb2Hex */]; // For backward compatability
+CellPainter.rgb2Hex = Util["j" /* rgb2Hex */]; // For backward compatability
 
 /** @public
 * @function
@@ -50742,6 +51207,10 @@ CellPainter.clearCellStyle = function(cell, styles) {
 		// WARNING: Scope is not removed from the this._scopes collection to speed things up
 	}
 
+	if(elem._coloringCssClass) {
+		elem.classList.remove(elem._coloringCssClass);
+	}
+
 	styles = styles || CellPainter.supportedStyles;
 	for(var i = styles.length; --i >= 0;) {
 		elem.style[styles[i]] = "";  // WARNING: Very slow
@@ -50755,22 +51224,24 @@ CellPainter.clearCellStyle = function(cell, styles) {
 * @param {boolean=} withContrast
 */
 CellPainter._setUpDownColors = function(scp, upColor, downColor, levelColor, withContrast) {
+	scp["upColor"] = upColor;
 	if(upColor != null) {
-		scp["upColor"] = upColor;
 		if(withContrast) {
 			scp["contrastUpColor"] = CellPainter.getOppositeColor(upColor);
 		}
 		//scp["rgbUp"] = CellPainter.hex2Rgb(upColor);
 	}
+
+	scp["downColor"] = downColor;
 	if(downColor != null) {
-		scp["downColor"] = downColor;
 		if(withContrast) {
 			scp["contrastDownColor"] = CellPainter.getOppositeColor(downColor);
 		}
 		//scp["rgbDown"] = CellPainter.hex2Rgb(downColor);
 	}
+
+	scp["levelColor"] = levelColor;
 	if(levelColor != null) {
-		scp["levelColor"] = levelColor;
 		if(withContrast) {
 			scp["contrastLevelColor"] = CellPainter.getOppositeColor(levelColor);
 		}
@@ -50864,14 +51335,16 @@ CellPainter.prototype._paintCell = function(cell, rowData, min, max) {
 	}
 
 	var styles = this._getStyles(rowData, min, max);
-	var cssClass = styles["cssClass"];
-	if (cssClass) {
-		if (elem._coloringCssClass !== cssClass) {
+	var cssClass = styles["cssClass"]; // Can be an empty string
+	if (cssClass != null) { // Predefined colors mode
+		if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
 			elem.classList.remove(elem._coloringCssClass);
 			elem._coloringCssClass = null;
 		}
-		elem.classList.add(cssClass);
-		elem._coloringCssClass = cssClass;
+		if (cssClass) {
+			elem.classList.add(cssClass);
+			elem._coloringCssClass = cssClass;
+		}
 	} else {
 		if (elem._coloringCssClass) {
 			elem.classList.remove(elem._coloringCssClass);