@refinitiv-ui/efx-grid 6.0.5 → 6.0.7

package/lib/core/dist/core.js

@@ -166,40 +166,6 @@ 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.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.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
@@ -267,35 +233,6 @@ 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.moveIndex = function (num, from, opt_to) {
-	if (!Util.isNumber(num)) { return -1; }
-	if (num === from) {
-		if (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
@@ -368,28 +305,6 @@ Util.stringFormat = function (format) {
 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._numericSorter = function (left, right) {
-	return left - right;
-};
-
-/** @public
-* @function
-* @ignore
-* @param {Event} e
- */
-Util._preventDefault = function (e) {
-	e.preventDefault();
-	e.stopPropagation();
-};
-
 /**
 * @public
 * @function
@@ -427,24 +342,34 @@ 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.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._preventDefault = function (e) {
+	e.preventDefault();
+	e.stopPropagation();
+};
 
 /** @public
  * @type {boolean}
@@ -1786,6 +1711,13 @@ CellFloatingPanel.prototype._items = [];
 CellFloatingPanel.prototype.hasItem = function () {
 	return !!this._items.length;
 };
+/** @public
+ * @param {Element} icon Element of item
+ * @returns {boolean}
+*/
+CellFloatingPanel.prototype.containItem = function (icon) {
+	return this._items.indexOf(icon) > -1;
+};
 /** @public
 * @param {Element} item
 * @param {number=} opt_order The greater the order, the farther the position to the right
@@ -2270,6 +2202,9 @@ Cell.prototype.updateIcon = function(icon) {
 
 	var fi = this._frontIcon;
 	if (fi) {
+		if(fi.containItem(icon)) { // Check same icon which duplicate with insertItem in _frontIcon
+			return;
+		}
 		fi.clearItems();
 	}
 	this.insertFrontIcon(icon, 0);
@@ -4202,8 +4137,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 */ const grid_ILayoutGrid = (ILayoutGrid);
 
@@ -5013,7 +4949,11 @@ StretchedCells.prototype.setCellCount = function (count) {
 * @return {Cell}
 */
 StretchedCells.prototype.getCell = function (rowIndex) {
-	return this._cells[rowIndex] || null;
+	var cell = this._cells[rowIndex];
+	if(cell && cell["getParent"]()) {
+		return cell;
+	}
+	return null;
 };
 /** @public
 * @ignore
@@ -5060,13 +5000,13 @@ StretchedCells.prototype.getColumnIndex = function (cellRef) {
 StretchedCells.prototype.getRowIndex = function (cellRef) {
 	if(cellRef) {
 		if(cellRef["getElement"]) {
-			return this._cells.indexOf(cellRef);
+			return cellRef["getParent"]() ? this._cells.indexOf(cellRef) : -1;
 		} else {
 			var cells = this._cells;
 			var rowCount = cells.length;
 			for(var r = 0; r < rowCount; ++r) {
 				var cell = cells[r];
-				if(cell && cell["getElement"]() === cellRef) {
+				if(cell && cell["getParent"]() && cell["getElement"]() === cellRef) {
 					return r;
 				}
 			}
@@ -5082,7 +5022,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;
@@ -5097,7 +5037,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);
@@ -8323,10 +8273,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
@@ -9543,8 +9491,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
@@ -9763,6 +9717,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) {
@@ -9770,9 +9728,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;
 				}
@@ -10120,8 +10075,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;
@@ -10138,7 +10094,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) {
@@ -11945,6 +11903,10 @@ Segment.prototype._collapsed = false;
 * @private
 */
 Segment.prototype._value = 0;
+/** @type {number}
+* @private
+*/
+Segment.prototype._order = 0;
 
 
 /** @public
@@ -12112,6 +12074,18 @@ Segment.prototype.getValue = function() {
 Segment.prototype.setValue = function(val) {
 	this._value = val;
 };
+/** @public
+* @return {number}
+*/
+Segment.prototype.getOrder = function() {
+	return this._order;
+};
+/** @public
+* @param {number} val
+*/
+Segment.prototype.setOrder = function(val) {
+	this._order = val;
+};
 
 
 /* harmony default export */ const data_Segment = (Segment);
@@ -12158,6 +12132,7 @@ SegmentCollection.prototype.addSegment = function(rid) {
 	if(rid && !this._segments[rid]) {
 		if(this._childToSegmentId[rid]) {
 			console.log("child of a segment cannot be set as a segment separator");
+			return false;
 		}
 		this._segments[rid] = new data_Segment(rid);
 		++this._segmentCount;
@@ -12488,8 +12463,27 @@ SegmentCollection.prototype.fillSegments = function(rids) {
 	return change;
 };
 /** @public
+* @param {Array.<string>} rids
+*/
+SegmentCollection.prototype.calcSegmentOrder = function(rids) {
+	var ridCount = rids ? rids.length : 0;
+	var segmentSeparators = this._segments;
+	var segmentCount = this._segmentCount;
+	var order = 0;
+	for(var i = 0; i < ridCount; ++i) {
+		var rid = rids[i];
+		var segment = segmentSeparators[rid];
+		if(segment) {
+			segment.setOrder(++order);
+			if(order >= segmentCount) {
+				break;
+			}
+		}
+	}
+};
+/** @public
 * @param {!Array.<string>} rids Array of row ids
-* @return {Array.<number>} Returns Array of segment values, if there are at least two segments, otherwise returns null
+* @return {Array.<number>} Returns Array of segment values, if there are at least one segment, otherwise returns null
 */
 SegmentCollection.prototype.getSegmentValues = function(rids) {
 	var rowCount = rids ? rids.length : 0;
@@ -12499,51 +12493,33 @@ SegmentCollection.prototype.getSegmentValues = function(rids) {
 	var segmentSeparators = this._segments;
 	var childToSegmentId = this._childToSegmentId;
 	var curSegment = null;
+	var prevSegment = null;
 	var segmentValues = new Array(rowCount);
-	var curSegmentCount = 0;
 	var segmentVal = 0;
-	var r = 0;
-	var childToIndex = {};
-	while(r < rowCount) {
+	var offset = 0;
+	for(var r = 0; r < rowCount; ++r) {
 		var rid = rids[r];
-		if(segmentSeparators[rid]) {
-			++curSegmentCount;
-			curSegment = segmentSeparators[rid];
-			segmentVal += 100;
-			segmentValues[r] = segmentVal;
-			curSegment.setValue(segmentVal);
-			if(curSegmentCount >= this._segmentCount) {
-				++r;
-				break;
-			}
+		curSegment = segmentSeparators[rid];
+		if(curSegment) {
+			offset = 0;
 		} else {
-			if(curSegmentCount) {
-				segmentValues[r] = segmentVal + 10;
+			var parentId = childToSegmentId[rid];
+			if(parentId) {
+				curSegment = segmentSeparators[parentId];
+				offset = 1;
 			} else {
-				segmentValues[r] = 0;
-			}
-			if(childToSegmentId[rid]) {
-				childToIndex[rid] = r;
-			}
-		}
-		++r;
-	}
-	if(curSegmentCount) {
-		while(r < rowCount) {
-			rid = rids[r];
-			segmentValues[r] = segmentVal + 10;
-			if(childToSegmentId[rid]) {
-				childToIndex[rid] = r;
+				offset = prevSegment ? 10 : 0;
 			}
-			++r;
 		}
-		for(var childId in childToIndex) {
-			curSegment = segmentSeparators[childToSegmentId[childId]];
-			segmentValues[childToIndex[childId]] = curSegment.getValue() + 1;
+
+		if(curSegment && prevSegment !== curSegment) {
+			prevSegment = curSegment;
+			segmentVal = curSegment.getOrder() * 100;
 		}
+		segmentValues[r] = segmentVal + offset;
 	}
 
-	return curSegmentCount ? segmentValues : null;
+	return prevSegment ? segmentValues : null;
 };
 
 
@@ -12799,7 +12775,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) {
@@ -13107,6 +13091,7 @@ DataTable.prototype.removeRows = function(refs) {
 			this._prevData[rid] = this._rows[rid];
 			this._removedRows[rid] = 1;
 			delete this._rows[rid];
+			// TODO: remove segments
 			dirty = true;
 		}
 	}
@@ -13203,6 +13188,7 @@ DataTable.prototype.moveRow = function(fromIndex, toIndex, suppressEvent) {
 
 	if(output) {
 		if(this._segments) {
+			this._segments.calcSegmentOrder(this._rids);
 			this._sort(null); // Reorder segment members
 		}
 		this._dispatchPositionChange(suppressEvent);
@@ -13432,12 +13418,19 @@ DataTable.prototype.isFrozen = function() {
 DataTable.prototype.setSegmentSeparator = function(rid, enabled) {
 	var change = false;
 	var memberCount = 0;
-	if(typeof rid === "string") {
+	if(rid && typeof rid === "string") {
 		if(enabled !== false) {
 			if(!this._segments) {
 				this._segments = new data_SegmentCollection();
 			}
+			if(this._autoSegmentFilling) {
+				var parentId = this._segments.getParentRowId(rid);
+				if(parentId) {
+					this._segments.removeSegmentChild(parentId, rid);
+				}
+			}
 			if(this._segments.addSegment(rid)) {
+				this._segments.calcSegmentOrder(this._rids);
 				change = true;
 			}
 		} else if(this._segments) {
@@ -13739,6 +13732,7 @@ DataTable.prototype.sortSegments = function (compare) {
 	}
 
 	if(dirty) {
+		this._segments.calcSegmentOrder(rids);
 		this._sort(null);
 		this._dispatchPositionChange();
 	}
@@ -14002,18 +13996,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];
+			}
 		}
 	}
 
@@ -14039,7 +14048,7 @@ DataTable._performMultiLevelSorting = function(dataRows, sortingDefs, segmentVal
 	}
 
 	var sortOrder = 0;
-	var sortLogic, sortContext;
+	var sortContext;
 	if(defCount > 1) {
 		sortLogic = DataTable._multiColumnCompareLogic;
 		sortContext = sortingDefs;
@@ -16970,45 +16979,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
- * @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
+ * @param {boolean=} hidden=true If the value is false, the specified rows will be shown.
  * @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
@@ -17024,7 +17053,7 @@ DataView.prototype.unhideAllRows = function(){
 * @return {boolean}
 */
 DataView.prototype.hasHiddenRow = function(){
-	return !!this._hiddenRids;
+	return this._hiddenRids ? true : false;
 };
 
 /** @public
@@ -22163,12 +22192,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}
@@ -22387,9 +22426,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
@@ -22579,10 +22619,9 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 
 
 ;// CONCATENATED MODULE: ./src/js/grid/Core.js
-/* eslint-disable */
-
 
 
+ // eslint-disable-line
 
 
 
@@ -22594,7 +22633,6 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 
 
 
-/* eslint-enable */
 
 //#region Events
 /** @event Core#sectionAdded */
@@ -22632,6 +22670,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}
@@ -22769,7 +22816,8 @@ var Core_Core = function (opt_initializer) {
 		"rowAdded",
 		"rowRemoved",
 		"columnPositionChanged",
-		"rowPositionChanged"
+		"rowPositionChanged",
+		"beforeColumnBoundUpdate"
 	);
 
 	// For debugging in advanced optimization mode
@@ -22789,13 +22837,13 @@ var Core_Core = function (opt_initializer) {
 	Core_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);
 
@@ -23101,7 +23149,7 @@ Core_Core.prototype._rowHeightTimerId = 0;
 * @return {string}
 */
 Core_Core.getVersion = function () {
-	return "5.0.59";
+	return "5.1.20";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -23265,6 +23313,9 @@ Core_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;
 	}
@@ -24098,13 +24149,118 @@ Core_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_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_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_Core.prototype._moveColumn = function (fromCol, destCol) {
 	var colCount = this.getColumnCount();
 	if (fromCol < 0) { fromCol = 0; }
 	else if (fromCol >= colCount) { fromCol = colCount - 1; }
@@ -24189,6 +24345,7 @@ Core_Core.prototype.moveColumn = function (fromCol, destCol) {
 			this._colVirtualizer.update();
 		}
 	}
+	this._updateColumnBounds();
 	return true;
 };
 
@@ -25395,6 +25552,7 @@ Core_Core.prototype.isLayoutFrozen = function () {
 
 /** Deprecated
 * @public
+* @ignore
 * @function
 * @param {boolean=} opt_shown
 * @see {@link Core#toggleBorders}
@@ -25402,6 +25560,7 @@ Core_Core.prototype.isLayoutFrozen = function () {
 Core_Core.prototype.showBorders = util._deprecatedFunction;
 /** Deprecated
 * @public
+* @ignore
 * @function
 * @param {boolean=} opt_hidden
 * @see {@link Core#toggleBorders}
@@ -25435,6 +25594,14 @@ Core_Core.prototype.toggleVerticalLines = function(forcedVal) {
 Core_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_Core.prototype.toggleContentVerticalLines = function(forcedVal) {
+	this.toggleClass("no-content-vertical-line", forcedVal != null ? !forcedVal : null);
+};
+
 
 /** @public
 * @return {Array.<string>}
@@ -26250,18 +26417,18 @@ Core_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_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_Core.prototype.hideRows = function (rowIds, hidden) {
@@ -26273,9 +26440,9 @@ Core_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_Core.prototype.showRows = function (rowIds, shown) {
@@ -26296,7 +26463,7 @@ Core_Core.prototype.unhideAllRows = function () {
 
 /**
  * @public
- * @returns {boolean}
+ * @return {boolean}
  */
 Core_Core.prototype.hasHiddenRow = function () {
 	return this._dataSource.hasHiddenRow();
@@ -26375,10 +26542,22 @@ Core_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;
@@ -26389,12 +26568,17 @@ Core_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);
 		}
@@ -27564,6 +27748,10 @@ Core_Core.prototype._updateScrollbarHeight = function (paneChanged, contentChang
 * @param {boolean} contentChanged
 */
 Core_Core.prototype._updateScrollbarWidth = function (paneChanged, contentChanged) {
+	if (this._frozenLayout) {
+		return;
+	}
+
 	if (paneChanged && this._hScrollbarEnabled) {
 		// Scroll Frame
 		var gridElem = this.getElement();
@@ -27768,7 +27956,7 @@ Core_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) {
@@ -27900,7 +28088,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.
@@ -27910,7 +28098,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;
 
@@ -27939,7 +28128,7 @@ SortableTitlePlugin.prototype._dataSorting = true;
 /** @private
 * @type {boolean}
 */
-SortableTitlePlugin.prototype._isDisableDoubleClickToSort = true;
+SortableTitlePlugin.prototype._dblClickAllowed = false;
 
 /** @private
 * @type {number}
@@ -28082,19 +28271,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);
 	}
 };
 
@@ -28272,7 +28462,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;
@@ -28645,9 +28837,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) {
@@ -28659,6 +28852,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
+				}
 			}
 		}
 	}
@@ -28758,10 +28954,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
@@ -28807,54 +29003,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
@@ -28965,7 +29133,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;
@@ -29243,18 +29411,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"];
 
-	var sortingSequence = context ? context["sortingSequence"] : null;
+	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 = 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);
 	}
@@ -29608,6 +29793,7 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 
 
 
+
 // tsd-disable
 var tr = window["tr"];
 if(!tr) {
@@ -29631,6 +29817,7 @@ tr.ColumnStats = data_ColumnStats;
 tr.DataCache = data_DataCache;
 tr.DataTable = data_DataTable;
 tr.DataView = data_DataView;
+tr.SegmentCollection = data_SegmentCollection;
 
 // Components
 grid.CellFloatingPanel = components_CellFloatingPanel;