@refinitiv-ui/efx-grid 6.0.3 → 6.0.4

package/lib/core/dist/core.js

@@ -2,7 +2,7 @@
 /******/ 	"use strict";
 var __webpack_exports__ = {};
 
-// UNUSED EXPORTS: Cell, CellFloatingPanel, CellSpan, CellSpans, Column, ColumnStats, Conflator, Core, DataCache, DataTable, DataView, DragAndDropTitlePlugin, ElementFrameWork, ElementWrapper, EventDispatcher, HScrollbar, ILayoutGrid, LayoutGrid, Plugin, Reverter, Scrollbar, SectionSettings, SelectionList, SortableTitlePlugin, TrackLayout, VScrollbar, VirtualizedLayoutGrid, Virtualizer, default
+// UNUSED EXPORTS: Cell, CellFloatingPanel, CellSpan, CellSpans, Column, ColumnStats, Conflator, Core, DataCache, DataTable, DataView, ElementFrameWork, ElementWrapper, EventDispatcher, HScrollbar, ILayoutGrid, LayoutGrid, Reverter, Scrollbar, SectionSettings, SelectionList, SortableTitlePlugin, TrackLayout, VScrollbar, VirtualizedLayoutGrid, Virtualizer, default
 
 ;// CONCATENATED MODULE: ./src/js/grid/util/util.js
 /**
@@ -3031,6 +3031,33 @@ TrackLayout.prototype.setLaneSize = function (index, val) {
 	return false;
 };
 
+/** @public
+* @param {number} index
+* @param {string} propName
+* @param {*} val
+* @return {boolean}
+*/
+TrackLayout.prototype.setLaneProperty = function (index, propName, val) {
+	if (index < 0 || index >= this._laneCount) { return false; }
+
+	var col = this._cols[index];
+	if (col == null || col[propName] !== val) {
+		col = this._newColumn(index);
+		col[propName] = val;
+		return true;
+	}
+
+	return false;
+};
+/** @public
+* @param {number} index
+* @param {string} propName
+* @return {*}
+*/
+TrackLayout.prototype.getLaneProperty = function (index, propName) {
+	var col = this._cols[index];
+	return (col && col[propName] != null) ? col[propName] : null;
+};
 /** @public
 * @param {number} index
 * @return {number}
@@ -5017,10 +5044,10 @@ StretchedCells.prototype.getColumnIndex = function (cellRef) {
 		if(cellRef["getElement"]) {
 			var cellElement = cellRef["getElement"]();
 			if(cellElement) {
-				return cellElement._colIndex || 0;
+				return cellElement._colIndex != null ? cellElement._colIndex : -1;
 			}
 		} else {
-			return cellRef._colIndex || 0;
+			return cellRef._colIndex != null ? cellRef._colIndex : -1;
 		}
 	}
 	return -1;
@@ -8280,6 +8307,22 @@ LayoutGrid.prototype._setColumnWidth = function (indexX, val) {
 LayoutGrid.prototype._updateColumnLayout = function () {
 	this._syncLayoutToColumns(0);
 };
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ * @param {number=} fromR
+ * @param {number=} toR
+ */
+LayoutGrid.prototype._startBindingSession = function (enabled, fromR, toR) {
+	// Prevent error when calling _startBindingSession in LayoutGrid
+};
+/** @public
+ * @ignore
+ * @return {Array<boolean>}
+ */
+LayoutGrid.prototype._getTempRowHeights = function () {
+	return null;
+};
 
 /**
  * {@link ILayoutGrid#getRowHeight}
@@ -9121,6 +9164,11 @@ LayoutGrid.prototype.setRowHighlight = function (rowIndex) {
 			this._highlightedCells[c] = cell;
 			cell.addClass("highlighted-row");
 		}
+		var stretchEl = this.getStretchedCell(rowIndex); // check stretched cell
+		if(stretchEl) {
+			this._highlightedCells.push(stretchEl);
+			stretchEl.addClass("highlighted-row");
+		}
 	} else {
 		this._highlightedCells.length = 0;
 	}
@@ -9406,6 +9454,7 @@ LayoutGrid.prototype.insertColumn = function (index, opt_json) {
 				cell.addClass("selected-row");
 			}
 		}
+		// TODO: Check if it can insert column with stretch cell
 	}
 
 	column.activate(atTheMiddle || !this._colVir);
@@ -9637,6 +9686,10 @@ LayoutGrid.prototype.stretchCell = function (cellRef, rowIndex, opt_stretching,
 	} else {
 		cell = this._stretchedCells.unstretchCell(rowIndex);
 	}
+	if(cell) {
+		var selected = this._selectionList.getSelection(rowIndex);
+		cell.enableClass("selected-row", selected); // It's can enable class without get stretch cell again.
+	}
 	return cell;
 };
 
@@ -9719,6 +9772,19 @@ LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
 	}
 	return stretchSize;
 };
+
+/**
+* @private
+* @param {number} rowIndex
+* @param {string} className
+* @param {boolean} enabled
+*/
+LayoutGrid.prototype._enableStretchCellClass = function (rowIndex, className, enabled ) {
+	var stretchEl = this.getStretchedCell(rowIndex); // check stretched cell
+	if(stretchEl) {
+		stretchEl.enableClass(className, enabled);
+	}
+};
 /** View size is width of container (Grid's pane) or content (LayoutGrid's columns), whichever is smaller.
 * @public
 * @ignore
@@ -10402,11 +10468,16 @@ LayoutGrid.prototype._updateCellSpans = function (cellSpans, adding) {
  */
 LayoutGrid.prototype._onMouseMove = function (e) {
 	var target = e["target"];
-	var colElement = util.closestElement(target, "column");
-	var colIndex = this.getColumnIndex(colElement);
-	var cellElement = (colIndex >= 0) ? util.closestElement(target, "cell") : null;
 
-	this.setRowHighlight(this.getCellIndex(colIndex, cellElement));
+	var cellElement = util.closestElement(target, "cell");
+	var colIndex = this._stretchedCells.getColumnIndex(cellElement);
+	if(colIndex < 0) { // Not found colIndex in stretching cell, then get from normal row
+		var colElement = util.closestElement(target, "column");
+		colIndex =	this.getColumnIndex(colElement);
+	}
+	var rowIndex = this.getCellIndex(colIndex, cellElement);
+
+	this.setRowHighlight(rowIndex);
 };
 
 /**
@@ -10437,27 +10508,16 @@ LayoutGrid.prototype._onMouseOut = function (e) {
  */
 LayoutGrid.prototype._updateSelectionUI = function (rowIndex) { // Update UI of the specified row index
 	var selected = this._selectionList.getSelection(rowIndex);
-
-	for (var c = 0; c < this._colCount; ++c) {
-		var cell = this._columns[c].getCell(rowIndex);
-
-		if (cell) {
-			cell.enableClass("selected-row", selected);
-		}
-	}
+	this._enableStretchCellClass(rowIndex, "selected-row", selected);
+	this.enableRowClass(rowIndex, "selected-row", selected);
 };
 
 /** @private
 * @param {number} rowIndex
 */
 LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
-	for (var c = 0; c < this._colCount; ++c) {
-		var cell = this._columns[c].getCell(rowIndex);
-
-		if (cell) {
-			cell.addClass("selected-row");
-		}
-	}
+	this._enableStretchCellClass(rowIndex, "selected-row", true);
+	this.enableRowClass(rowIndex, "selected-row", true);
 };
 
 /**
@@ -10465,13 +10525,8 @@ LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
  * @param {number} rowIndex
  */
 LayoutGrid.prototype._removeSelectionUI = function (rowIndex) {
-	for (var c = 0; c < this._colCount; ++c) {
-		var cell = this._columns[c].getCell(rowIndex);
-
-		if (cell) {
-			cell.removeClass("selected-row");
-		}
-	}
+	this._enableStretchCellClass(rowIndex, "selected-row", false);
+	this.enableRowClass(rowIndex, "selected-row", false);
 };
 
 /**
@@ -13326,7 +13381,7 @@ DataTable.prototype.setColumnSortingLogic = function(cid, func) {
 * @example
 * var prevState = dt.freeze();
 * for(var i = 0; i < 100; ++i) {
-*   dt.insertRow({}); // no event is fired
+*   dt.insertRow(); // no event is fired
 * }
 * dt.freeze(prevState); // Restore previous freeze states
 */
@@ -20614,6 +20669,11 @@ SectionSettings.prototype._dispatchDataChanged = function (firstUpdate, lastUpda
 */
 SectionSettings.prototype.updateRowData = function (fromRowIndex, lastRowIndex, e) {
 	if(this.isDataBindable()) { // Prevent dispatching dataChanged event without the data view
+		if(this._grid._getTempRowHeights()){
+			fromRowIndex = this._grid.getFirstIndexInView();
+			lastRowIndex = this._grid.getLastIndexInView() + 1;
+		}
+
 		e = this.extendDataEventArg(e, fromRowIndex, lastRowIndex);
 		if(e["fromRowIndex"] < e["toRowIndex"]) {
 			this._dispatch("dataChanged", e);
@@ -21374,6 +21434,14 @@ VirtualizedLayoutGrid.prototype._boundLayer = null;
 * @private
 */
 VirtualizedLayoutGrid.prototype._hscrollbar = null;
+/** @type {string}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._session = "A";
+/** @type {Array<boolean>}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._tempRowHeights = null;
 
 //#region ====== Override ElementWrapper ======//
 /** @override */
@@ -21485,13 +21553,68 @@ VirtualizedLayoutGrid.prototype._setColumnWidth = function (indexX, val) {
 VirtualizedLayoutGrid.prototype._updateColumnLayout = function () {
 	this._grid._updateColumnLayout();
 };
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ */
+VirtualizedLayoutGrid.prototype._startBindingSession = function (enabled) {
+	this._isBinding = enabled;
+	if(!enabled){
+		// Clear old session
+		if(this._tempRowHeights){
+			var defaultRowHeight = this.getDefaultRowHeight();
+			var hasSession = true;
+			var removedIndices = [];
+
+			for(var key in this._tempRowHeights){
+				var index = +key;
+				var rowSession = this._layoutY.getLaneProperty(index, "sizeSession");
+				if(rowSession) {
+					if(rowSession != this._session){
+						this.setRowHeight(index, defaultRowHeight);
+						this._layoutY.setLaneProperty(index, "sizeSession", null);
+						removedIndices.push(index);
+					}
+				}
+			}
+			var removedCount = removedIndices.length;
+			for(var i = 0; i < removedCount; i++){
+				delete this._tempRowHeights[removedIndices[i]];
+			}
+			if(removedCount){
+				for(var remainingKey in this._tempRowHeights){
+					hasSession = remainingKey != null;
+					break;
+				}
+			}
+			if(!hasSession){
+				this._tempRowHeights = null;
+			}
 
+		}
+		this._session = this._session === "A" ? "B" : "A";
+	}
+};
+/** @public
+ * @ignore
+ * @return {Array<boolean>}
+ */
+VirtualizedLayoutGrid.prototype._getTempRowHeights = function () {
+	return this._tempRowHeights;
+};
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.getRowHeight = function (index) {
 	return this._layoutY.getLaneSize(index);
 };
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.setRowHeight = function (index, val) {
+	if(this._isBinding && val != this.getDefaultRowHeight()){
+		this._layoutY.setLaneProperty(index, "sizeSession", this._session);
+		if(!this._tempRowHeights){
+			this._tempRowHeights = [];
+		}
+		this._tempRowHeights[index] = true; // Store row index that set temporary row height
+	}
 	if(this._layoutY.setLaneSize(index, val)) {
 		this._grid.setRowHeight(index - this._firstIndex, val);
 		this._element.style.height = this._layoutY.getTrackSize() + "px";
@@ -21645,6 +21768,9 @@ VirtualizedLayoutGrid.prototype.setRowCount = function (val, noBinding) {
 	var prevCount = this._layoutY.getLaneCount();
 	if(prevCount !== val){
 		this._layoutY.setLaneCount(val);
+		if(this._tempRowHeights){
+			this._tempRowHeights.length = val;
+		}
 		this._element.style.height = this._layoutY.getTrackSize() + "px";
 		this._requestUpdatingRowBounds();
 		//After rowCountChanged fires, virtualizer will update virtual row count if
@@ -22533,6 +22659,7 @@ var Core_Core = function (opt_initializer) {
 	_t._updateColumnBounds = _t._updateColumnBounds.bind(_t);
 	_t._dispatchColumnPositionChanged = _t._dispatchColumnPositionChanged.bind(_t);
 	_t._dispatchRowPositionChanged = _t._dispatchRowPositionChanged.bind(_t);
+	_t._requestScrollbarUpdate = _t._requestScrollbarUpdate.bind(_t);
 
 	// Text nodes are unintentionally getting in the tag.
 	if(opt_initializer) { // Any node other than element node is not allowed within the tag.
@@ -22950,6 +23077,10 @@ Core_Core.prototype._preserveProportion = false;
 * @private
 */
 Core_Core.prototype._preserveGridSize = false;
+/** @type {number}
+* @private
+*/
+Core_Core.prototype._rowHeightTimerId = 0;
 //#region Public Methods
 
 /**
@@ -22957,7 +23088,7 @@ Core_Core.prototype._preserveGridSize = false;
 * @return {string}
 */
 Core_Core.getVersion = function () {
-	return "5.0.53";
+	return "5.0.58";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -25910,6 +26041,13 @@ Core_Core.prototype.requestRowRefresh = function() {
 		this._rowRefreshTimer = setTimeout(this._onRowRefresh, 100);
 	}
 };
+/** Set a timer to call updateScrollbarHeight only once to avoid performance issue due to multiple call of _updateScrollbarHeight()
+* @public
+*/
+Core_Core.prototype._requestScrollbarUpdate = function() {
+	this._updateScrollbarHeight(true, true);
+	this._rowHeightTimerId = 0;
+};
 
 /** prevent bind data process
 * @public
@@ -26805,6 +26943,9 @@ Core_Core.prototype._onSectionDataChanged = function (e) {
 	var dataView = /** @type{DataView} */(e["dataSource"]);
 	var hasDataView = (dataView && dataView.getDataSource()) ? 1 : 0;
 	var rids, rowDataCollection;
+
+	section._startBindingSession(true);
+
 	if(hasDataView) {
 		rids = dataView.getVisibleRowIds(true);
 		rowDataCollection = dataView.getMultipleRowData(rids, fromR, toR);
@@ -26842,8 +26983,9 @@ Core_Core.prototype._onSectionDataChanged = function (e) {
 	}
 
 	this._dispatch("postSectionDataBinding", e);
-
 	this._dispatchRowExpansionBinding(e);
+
+	section._startBindingSession(false);
 	this._dispatchingDataChanged = false;
 };
 
@@ -27169,8 +27311,14 @@ Core_Core.prototype._onRowHeightChanged = function (e) {
 		this._rowHeightConflator._needScrollbarUpdate = false;
 		this._updateScrollbarHeight(true, true);
 	} else if(minSectionIndex >= 0) {
-		this._updateScrollbarHeight(minSectionIndex < this._startVScrollbarIndex,
-			minSectionIndex >= this._startVScrollbarIndex);
+		if(this._dispatchingDataChanged){
+			if(!this._rowHeightTimerId){
+				this._rowHeightTimerId = setTimeout(this._requestScrollbarUpdate, 0);
+			}
+		} else {
+			this._updateScrollbarHeight(minSectionIndex < this._startVScrollbarIndex,
+				minSectionIndex >= this._startVScrollbarIndex);
+		}
 	}
 
 	this._dispatchRowPositionChanged();
@@ -27626,985 +27774,94 @@ Core_Core._proto = Core_Core.prototype;
 /* harmony default export */ const grid_Core = (Core_Core);
 
 
-;// CONCATENATED MODULE: ./src/js/grid/plugins/Plugin.js
+;// CONCATENATED MODULE: ./src/js/grid/plugins/SortableTitlePlugin.js
+/* eslint-disable */
 
 
- // eslint-disable-line
 
- // eslint-disable-line
 
 
-/** Base class for all built-in plugins
-* @constructor
-* @extends {EventDispatcher}
-*/
-var Plugin = function () {
-	/* throw("Plugin is an abstract Class"); */
-};
-es6_Ext.inherits(Plugin, event_EventDispatcher); // Inherits() will replace prototype of the derived object
 
-//#region Public Methods
-/**The name must be readonly and unique among all other plugins
-* @public
-* @return {string}
-*/
-Plugin.prototype.getName = function () {
-	return "Plugin";
-};
+/* eslint-enable */
 
-/** @public
-* @param {!Core} owner
-*/
-Plugin.prototype.initialize = function (owner) {
-	this._host = owner;
-};
-/**For disposing any resource
-* @public
-* @param {!Core} owner
+/** Fired when user click and before the sorting operation.
+* @event SortableTitlePlugin#preClicked
+* @property {number} colIndex
+* @property {Element} target Element being clicked
+* @example
+* function onPreClicked(e) {
+*   e.cancel = true; // Cancel sorting operation
+* }
 */
-Plugin.prototype.unload = function (owner) {
-	this._host = null;
-	this.unlistenAll();
-};
 
-/** @public
-* @param {Event|Element|ElementWrapper} e
-* @return {Core}
+/** Fired when user click and after the sorting operation
+* @event SortableTitlePlugin#clicked
+* @property {number} colIndex
+* @property {string} sortOrder "a" for "ascending, "d" for descending, and "n" for none
+* @property {string} dataColumnName Field that is used for sorting
 */
-Plugin.prototype.getRelativeGrid = function (e) {
-	var targetEl;
-	if(e.target) { // The Given object is an Event
-		targetEl = /** @type{Element} */(e.target);
-		var gridAPI = targetEl["api"];
-		if(gridAPI && gridAPI["getCoreGrid"]) {
-			return /** @type{Core} */(gridAPI["getCoreGrid"]());
-		}
-	} else if(e["getElement"]) { // The Given object is implementing ElementWrapper
-		targetEl = e["getElement"]();
-	} else if(util.isElement(e)){ // The Given object is just an element
-		targetEl = /** @type{Element} */(e);
-	}
 
-	var gridEl = (targetEl) ? util.closestElement(targetEl, "tr-grid") : null;
-	if(gridEl) {
-		if(this._host) {
-			if(this._host.getElement() === gridEl) {
-				return this._host;
-			}
-		} else {
-			var hostLength = this._hosts ? this._hosts.length : 0;
-			for (var i = 0; i < hostLength; i++) {
-				var host = this._hosts[i];
-				if (host.getElement() === gridEl) {
-					return host;
-				}
-			}
-		}
-	}
+/** Fired just before sorting data. This allows additional modification before the actual sorting
+* @event SortableTitlePlugin#preDataSorting
+* @property {boolean=} isUserAction This has true value, if event initiate from clicking title/header section
+*/
 
-	return null;
-};
-/** Use in case of there is an overlay over the top of the grid (target element cannot be used).
-* @public
-* @param {number} x
-* @param {number} y
-* @return {Element}
+/** Fired once column is sorted and before {@link SortableTitlePlugin#clicked}
+* @event SortableTitlePlugin#columnSorted
+* @property {number} colIndex
+* @property {string} sortOrder "a" for "ascending, "d" for descending, and "n" for none
+* @property {string} sortedField Field that is used for sorting
+* @property {Array.<number>} colIndices An array of colIndex
+* @property {Array.<string>} sortOrders An array of sortOrder
+* @property {Array.<string>} sortedFields An array of sortedField
 */
-Plugin.prototype.getGridElementFromPoint = function (x, y) {
-	var elem = document.elementFromPoint(x, y);
-	var grid = util.closestElement(elem, "tr-grid");
 
-	// Some elements are over grid element, hide them all by setting the visibility to hidden
-	var skipElem = [];
-	var skipVisibility = [];
-	while (!grid && elem && elem.tagName != "HTML") {
-		skipElem.push(elem);
-		skipVisibility.push(elem.style.visibility);
-		elem.style.visibility = "hidden";
-		elem = document.elementFromPoint(x, y);
+/** @constructor
+* @extends {EventDispatcher}
+* @param {SortableTitlePlugin.Options=} options
+*/
+var SortableTitlePlugin = function (options) { // TODO: Extract SortableTitlePlugin to grid extension.
+	var _t = this;
+	_t._onSectionAdded = _t._onSectionAdded.bind(_t);
+	_t._onMouseDown = _t._onMouseDown.bind(_t);
 
-		grid = util.closestElement(elem, "tr-grid");
-	}
-	for (var i = 0; i < skipElem.length; i++) {
-		skipElem[i].style.visibility = skipVisibility[i];
-	}
-	return grid;
-};
+	_t._onUIUpdated = _t._onUIUpdated.bind(_t);
 
-//#endregion Public Methods
+	_t._onColumnAdded = _t._onColumnAdded.bind(_t);
+	_t._onColumnRemoved = _t._onColumnRemoved.bind(_t);
+	_t._onItemSortingClicked = _t._onItemSortingClicked.bind(_t);
+	_t.refresh = _t.refresh.bind(_t);
 
-//#region Protected Methods
-/** @protected
-* @ignore
-* @return {Array.<string>}
-*/
-Plugin.prototype._getDataColumnMap = function () {
-	if (this._dataMap) { return this._dataMap; }
+	_t._hosts = [];
+	_t._sortLogic = {};
 
-	if (this._host) {
-		return this._host.getDataColumnMap();
-	}
-	if (this._hosts && this._hosts[0]) {
-		return this._hosts[0].getDataColumnMap();
-	}
-	return null;
-};
-/** @protected
- * @ignore
- * @param {number} colIndex
- * @return {string}
- */
-Plugin.prototype._getDataColumnName = function (colIndex) {
-	var dataMap = this._getDataColumnMap();
-	if(dataMap){
-		return dataMap[colIndex] || "";
-	}
-	return "";
-};
+	_t._addEvents(
+		"preClicked"
+		, "clicked"
+		, "preDataSorting"
+		, "columnSorted"
+	);
 
-/** @protected
-* @ignore
-* @param {Object} e
-* @return {boolean}
-*/
-Plugin.prototype._isNotFirstHost = function(e) {
-	if (this._hosts) {
-		return e["sender"] !== this._hosts[0];
-	}
-	return false;
-};
-/** @protected
-* @ignore
-* @param {Object} e
-*/
-Plugin.prototype._onColumnAdded = function (e) {
-	if (this._isNotFirstHost(e)) {
-		return;
-	}
-	if (!e["atTheMiddle"]) { return; }
-	var colIndex = /** @type{number} */(e["colIndex"]);
-	util.insertArrayItem(this._colData, colIndex, null);
-	util.insertArrayItem(this._dataMap, colIndex, null);
-};
-/** @protected
-* @ignore
-* @param {Object} e
-*/
-Plugin.prototype._onColumnMoved = function (e) {
-	if (this._isNotFirstHost(e)) {
-		return;
-	}
-	var from = /** @type{number} */(e["fromColIndex"]);
-	var to = /** @type{number} */(e["toColIndex"]);
+	_t._sortStates = [];
+	_t._sortingSequence = ["a", "d"];
 
-	util.moveArrayItem(this._colData, from, to);
-	util.moveArrayItem(this._dataMap, from, to);
-};
-/** @protected
-* @ignore
-* @param {Object} e
-*/
-Plugin.prototype._onColumnRemoved = function (e) {
-	if (this._isNotFirstHost(e)) {
-		return;
-	}
-	if (!e["atTheMiddle"]) { return; }
-	var colIndex = /** @type{number} */(e["colIndex"]);
-	if(this._colData) {
-		this._colData.splice(colIndex, 1);
-	}
-	if(this._dataMap) {
-		this._dataMap.splice(colIndex, 1);
+	if(options) {
+		_t.config({ "sorting": options });
 	}
 };
+es6_Ext.inherits(SortableTitlePlugin, event_EventDispatcher);
 
-
-/** @protected
-* @ignore
-* @return {number}
+/**
+ * @typedef {"a" | "ascending" | "d" | "descending" | "n" | null} SortableTitlePlugin~SortOrder
  */
-Plugin.prototype._getColumnCount = function() {
-	var host = this._host || this._hosts[0];
-	return (host) ? host.getColumnCount() : 0;
-};
-/** @protected
-* @ignore
-* @param {string} pluginName
-* @return {*|null}
+
+/** The sorting object which will be used for initialSort config.
+ * @typedef {Object} SortableTitlePlugin~InitialSort
+ * @property {number} colIndex Index of the column
+ * @property {SortableTitlePlugin~SortOrder=} sortOrder=null Set to "d" for descending order and "a" for ascending order
+ * @property {SortableTitlePlugin~SortOrder=} order Alias of sortOrder
  */
-Plugin.prototype._getPlugin = function(pluginName) {
-	var host = this._host || this._hosts[0];
-	return (host) ? host.getPlugin(pluginName) : null;
-};
-
-/** @protected
-* @ignore
-* @param {number} scrollVal
-*/
-Plugin.prototype._scrollDown = function (scrollVal) {
-	var host = this._host || this._hosts[0];
-	host.scrollDown(scrollVal);
-};
-/** @protected
-* @ignore
-* @param {number} rowIndex
-*/
-Plugin.prototype._scrollToRow = function (rowIndex) {
-	var host = this._host || this._hosts[0];
-	host.scrollToRow(null, rowIndex);
-};
-/** @protected
-* @ignore
-* @param {number} scrollVal
-*/
-Plugin.prototype._scrollRight = function (scrollVal) {
-	if(this._host) {
-		this._host.scrollRight(scrollVal);
-	} else if(this._hosts) {
-		var len = this._hosts.length;
-		for(var i = 0; i < len; ++i) {
-			var host = this._hosts[i];
-			host.scrollRight(scrollVal);
-		}
-	}
-};
-
-//#endregion Protected Methods
-
-//#region Protected Fields
-/** @protected
-* @ignore
-* @type {Core}
-*/
-Plugin.prototype._host = null;
-/** @protected
-* @ignore
-* @type {Array.<Core>}
-*/
-Plugin.prototype._hosts = null; // For a plug-in that support multi-table
-
-/** @protected
-* @ignore
-* @type {Array.<string|null>}
-*/
-Plugin.prototype._dataMap = null;
-/** @protected
-* @ignore
-* @type {Array.<Object>}
-*/
-Plugin.prototype._colData = null;
-//#endregion Protected Fields
-
-Plugin._proto = Plugin.prototype;
-
-/* harmony default export */ const plugins_Plugin = (Plugin);
-
-
-;// CONCATENATED MODULE: ./src/js/grid/plugins/DragAndDropTitlePlugin.js
-/* eslint-disable */
-
-
-
-
-
-/* eslint-enable */
-
-/** Event
-* @event DragAndDropTitlePlugin#dragged
-* @type {MouseEvent}
-* @property {*} * Depends on the browser's mouse event arguments
-*/
-/** Event
-* @event DragAndDropTitlePlugin#columnMoved
-* @property {number} startColumnIndex
-* @property {number} destColumnIndex
-*/
-
-/** @constructor
- * @extends {Plugin}
- */
-var DragAndDropTitlePlugin = function () {
-	var _t = this;
-
-	_t._onColumnAdded = _t._onColumnAdded.bind(_t);
-	_t._onColumnMoved = _t._onColumnMoved.bind(_t);
-	_t._onColumnRemoved = _t._onColumnRemoved.bind(_t);
-
-	_t._onMouseUp = _t._onMouseUp.bind(_t);
-	_t._onMouseDown = _t._onMouseDown.bind(_t);
-
-	_t._onDrag = _t._onDrag.bind(_t);
-	_t._onDragStart = _t._onDragStart.bind(_t);
-	_t._onDragEnd = _t._onDragEnd.bind(_t);
-	_t._onDragPulse = _t._onDragPulse.bind(_t);
-
-	_t._hosts = [];
-
-	_t._guideline = document.createElement("svg");
-	_t._guideline.className = "tr-guideline";
-	_t._dragbox = document.createElement("svg");
-	_t._dragbox.className = "tr-dragbox";
-
-	_t._addEvent("dragged"); // drag
-	_t._addEvent("dragStart");
-	_t._addEvent("dragInterval");
-	_t._addEvent("preColumnMoved");
-	_t._addEvent("columnMoved");
-
-};
-es6_Ext.inherits(DragAndDropTitlePlugin, plugins_Plugin);
-
-
-/** @private
-* @type {Core}
-*/
-DragAndDropTitlePlugin.prototype._clickedGrid;
-/** @private
-* @type {ILayoutGrid}
-*/
-DragAndDropTitlePlugin.prototype._clickedSection = null;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._clickedRow = -1;
-/** @private
-* @type {!Element}
-*/
-DragAndDropTitlePlugin.prototype._guideline;
-/** @private
-* @type {!Element}
-*/
-DragAndDropTitlePlugin.prototype._dragbox;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._timerId = 0;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._dragPulseId = 0;
-/** @private
-* @type {Object}
-*/
-DragAndDropTitlePlugin.prototype._pos = null; // Cache of current mouse position
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._cacheLeft = 0;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._cacheWidth = 0;
-
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._startColumn = -1;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._endColumn = -1;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._destColumn = -1;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._leftMovableBorder = -1;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._rightMovableBorder = -1;
-/** @private
-* @type {boolean}
-*/
-DragAndDropTitlePlugin.prototype._isDragging = false;
-/** @private
-* @type {boolean}
-*/
-DragAndDropTitlePlugin.prototype._lockFrozen = false;
-/** @private
-* @type {boolean}
-*/
-DragAndDropTitlePlugin.prototype._disabled = false;
-/** @private
-* @type {boolean}
-*/
-DragAndDropTitlePlugin.prototype._noColumnMoving = false;
-/** @private
-* @type {boolean}
-*/
-DragAndDropTitlePlugin.prototype._noDragBox = false;
-
-
-/** @override */
-DragAndDropTitlePlugin.prototype.getName = function () {
-	return "DragAndDropTitlePlugin"; // Read Only
-};
-/** @override */
-DragAndDropTitlePlugin.prototype.initialize = function (host) {
-	if(this._hosts.indexOf(host) >= 0) { return; }
-
-	this._hosts.push(host);
-	host.listen("mousedown", this._onMouseDown);
-	host.listen("columnAdded", this._onColumnAdded);
-	host.listen("columnMoved", this._onColumnMoved);
-	host.listen("columnRemoved", this._onColumnRemoved);
-
-	host.listen("dragstart", util._preventDefault);
-};
-
-/** @override */
-DragAndDropTitlePlugin.prototype.unload = function (host) {
-	var at = this._hosts.indexOf(host);
-	if(at < 0) { return; }
-
-	this._hosts.splice(at, 1);
-	host.unlisten("mousedown", this._onMouseDown);
-	host.unlisten("columnAdded", this._onColumnAdded);
-	host.unlisten("columnMoved", this._onColumnMoved);
-	host.unlisten("columnRemoved", this._onColumnRemoved);
-};
-
-/** Specify column to be processed by this plugin
-* @public
-* @return {null}
-*/
-DragAndDropTitlePlugin.prototype.getMarker = function () {
-	return null;
-};
-
-/**
-* Lock moving of frozen column. If true is spsecified, dragging is disabled for frozen column.
-* @public
-* @param {boolean} lock
-*/
-DragAndDropTitlePlugin.prototype.lockFrozenColumn = function(lock) {
-	this._lockFrozen = lock;
-};
-
-/** Disable this plugin entirely
-* @public
-* @param {boolean=} opt_disabled
-*/
-DragAndDropTitlePlugin.prototype.disable = function(opt_disabled) {
-	this._disabled = opt_disabled !== false;
-};
-/** Disable column moving. Only cursor is showing and events are fired. No real column moving.
-* @public
-* @param {boolean=} opt_disabled
-*/
-DragAndDropTitlePlugin.prototype.disableMoving = function(opt_disabled) {
-	this._noColumnMoving = opt_disabled !== false;
-};
-/** Disable column moving. Only cursor is showing and events are fired. No real column moving.
-* @public
-* @param {boolean=} opt_disabled
-*/
-DragAndDropTitlePlugin.prototype.disableDragBox = function(opt_disabled) {
-	this._noDragBox = opt_disabled !== false;
-};
-
-/** @private
-* @param {number} colIndex
-* @return {boolean}
-*/
-DragAndDropTitlePlugin.prototype._isAllowed = function(colIndex) {
-	var host = this._clickedGrid || this._hosts[0];
-	if (host) {
-		var stationaryIndex = host.getStationaryColumnIndex();
-		if (stationaryIndex < 0) {
-			return true;
-		}
-		if (colIndex <= stationaryIndex) {
-			return false;
-		}
-	}
-	return true;
-};
-/** @private
-* @param {Event} e
-*/
-DragAndDropTitlePlugin.prototype._onMouseDown = function (e) {
-	if(this._disabled) {
-		return;
-	}
-	if(e.shiftKey || e.ctrlKey || e.altKey) {
-		return; // Ignore mousedown event, if modifier key is detected
-	}
-	if(e.button) {
-		return; // We don't allow drag with middle click (button == 1), or right click (button == 2)
-	}
-	if(this._timerId) {
-		return; // Drag timer is already start
-	}
-
-	var host = this.getRelativeGrid(e);
-	if(!host) {
-		return; // Given event should be within grid element
-	}
-
-	this._pos = host.getRelativePosition(e);
-	if (this._pos["hit"] === false) {
-		return; // Only start dragging when mouse is down on the grid
-	}
-
-	var section = /** @type{ILayoutGrid} */(this._pos["section"]);
-	if(!section) {
-		return; // The section that is not in the target section list cannot be dragged
-	} else if(this._pos["sectionType"] !== "title") {
-		return; // Sections other than title section cannot be dragged by default
-	}
-
-	var colIndex = this._pos["colIndex"];
-	if(!this._isAllowed(colIndex)) {
-		return; // The column cannot be dragged
-	}
-	if(this._lockFrozen && host.isPinnedColumn(colIndex)) {
-		return; // If the lock frag is on, frozen columns cannot be dragged
-	}
-
-	var rowIndex = this._pos["rowIndex"]; // rowIndex may not exist
-	var movableBorder = this._findMoveableBorder(colIndex, rowIndex - 1, section);
-	var movingColumns = this._getSpan(colIndex, rowIndex, section);
-
-	this._clickedGrid = host;
-	this._clickedSection = section;
-	this._clickedRow = rowIndex;
-
-	this._startColumn = movingColumns["left"];
-	this._endColumn = movingColumns["right"];
-	this._leftMovableBorder = movableBorder["left"];
-	this._rightMovableBorder = movableBorder["right"];
-	this._destColumn = this._startColumn;
-
-	this._timerId = setTimeout(this._onDragStart, 300);
-	window.addEventListener("mouseup", this._onMouseUp, false);
-};
-/** @private
-* @param {Object} e
-*/
-DragAndDropTitlePlugin.prototype._onMouseUp = function (e) {
-	if(this._timerId) {
-		window.clearTimeout(this._timerId);
-		window.removeEventListener("mouseup", this._onMouseUp, false);
-		this._timerId = 0;
-		this._clearCache();
-	}
-};
-
-/** @private
-*/
-DragAndDropTitlePlugin.prototype._onDragStart = function () {
-	if(this._disabled || this._isDragging) { return; }
-
-	if (this._hasListener("dragStart")) {
-		this._dispatch("dragStart", /** @type{!Object} */(this._pos));
-	}
-
-	if (this._pos["cancel"]) {
-		return;
-	}
-
-	this._timerId = 0;
-	window.removeEventListener("mouseup", this._onMouseUp, false);
-
-	if(!this._clickedGrid) {
-		return;
-	}
-
-	this._isDragging = true;
-	document.body.classList.add("tr-dragging"); // Prevent text selection
-	// document.body.classList.add("tr-move-cursor");
-
-	window.addEventListener("mousemove", this._onDrag, false);
-	window.addEventListener("mouseup", this._onDragEnd, true);
-
-	var host = this._clickedGrid;
-	var height = host.getHeight();
-	var sectionBound =  this._clickedSection.getBoundingClientRect();
-	var clickedCellBound =  this._clickedSection.getCell(this._startColumn, this._clickedRow).getBoundingClientRect();
-
-	var gridElem = host.getElement();
-	this._guideline.style.top = (clickedCellBound.top - sectionBound.top) + "px";
-	this._guideline.style.height = (height - 1) + "px";
-	this._dragbox.style.height = (height - 33) + "px"; // WARNING: Height could be long
-	this._dragbox.style.width = this._clickedSection.getColumnWidth(this._startColumn) + "px";
-
-	 // TODO: guideline and drag box should be outside of grid area
-	gridElem.appendChild(this._guideline);
-
-	this._dimCol(true);
-	this._renderGuideline();
-
-	// For step scrolling // TODO: Merge this logic with DraggableContentPlugin
-	this._scrollStep = Math.floor(host.getScrollWidth() / 25); // Update the scrollbar first
-	if(this._scrollStep < 40) {
-		this._scrollStep = 40;
-	} else if(this._scrollStep > 400) {
-		this._scrollStep = 400;
-	}
-	var scrollbar = host.getHScrollbar();
-	this._cacheLeft = scrollbar.getLeft() + 20;
-	this._cacheWidth = scrollbar.getLeft() + scrollbar.getWidth() - 20;
-
-	this._dragPulseId = window.setInterval(this._onDragPulse, 150); // Start pulse
-};
-/** @private
-* @param {Event} e
-*/
-DragAndDropTitlePlugin.prototype._onDrag = function (e) {
-	if(!this._isDragging) { return; }
-
-	util._preventDefault(e);
-	this._pos = this._clickedGrid.getRelativePosition(e); // Relative to the clicked grid
-
-	var	host = this.getRelativeGrid(e);
-	if (!host || host !== this._clickedGrid) { return; }
-
-	var colIndex = this._pos["colIndex"];
-	if ((colIndex >= this._leftMovableBorder) &&
-		(colIndex <= this._rightMovableBorder) &&
-		this._isAllowed(colIndex) &&
-		!(this._lockFrozen && host.isPinnedColumn(colIndex))) {
-		this._renderGuideline();
-		this._dispatch("dragged", /** @type{!Object} */(e));
-	}
-	this._renderDragBox(e);
-};
-/** @private
-* @param {Event} e
-*/
-DragAndDropTitlePlugin.prototype._onDragEnd = function (e) {
-	if(!this._isDragging) {
-		return;
-	}
-
-	this._isDragging = false;
-	document.body.classList.remove("tr-dragging");
-	// document.body.classList.remove("tr-move-cursor");
-	this._dimCol(false);
-
-	var pn = this._guideline.parentNode;
-	if(pn) {
-		pn.removeChild(this._guideline);
-	}
-
-	pn = this._dragbox.parentNode;
-	if(pn) {
-		pn.removeChild(this._dragbox);
-	}
-
-	window.removeEventListener("mousemove", this._onDrag, false);
-	window.removeEventListener("mouseup", this._onDragEnd, true);
-
-	if(this._dragPulseId) {
-		window.clearInterval(this._dragPulseId);
-		this._dragPulseId = 0;
-	}
-	this._pos = null;
-
-	util._preventDefault(e);
-
-	//When move to the right, the first position is the current one.
-	if (this._destColumn > this._startColumn) {
-		--this._destColumn;
-	}
-	//Cancel moving if the destination column is the current column or not allowed column
-	if ((!this._destColumn && this._destColumn !== 0) || // undefined, NaN, null
-		this._destColumn < 0 ||
-		!this._isAllowed(this._destColumn) ||
-		(this._destColumn >= this._startColumn && this._destColumn <= this._endColumn)) {
-		this._clearCache();
-		return;
-	}
-
-	var arg = {
-		"startColumnIndex": this._startColumn,
-		"destColumnIndex": this._destColumn
-	};
-
-	if (this._hasListener("preColumnMoved")) {
-		this._dispatch("preColumnMoved", arg);
-	}
-
-	if (arg["cancel"]) {
-		return;
-	}
-
-	if (!this._noColumnMoving) {
-		var shiftStart = -1;
-		var shiftEnd = -1;
-		var moveSize = -1;
-		if (this._startColumn > this._destColumn) { //Move backward
-			shiftStart = this._destColumn;
-			shiftEnd = this._startColumn - 1;
-			moveSize = -1 * (this._startColumn - this._destColumn); //Move to the left
-		} else
-		if (this._startColumn < this._destColumn) { //Move foward
-			shiftStart = this._endColumn + 1;
-			shiftEnd = this._destColumn;
-			moveSize = ((shiftEnd - shiftStart) + 1); //Move to the right
-		}
-
-		//Perform moving all columns in the range
-		for(var j = this._hosts.length; --j >= 0;) {
-			var host = this._hosts[j];
-			var i;
-			if (moveSize > 0) { //Move forward
-				for (i = this._startColumn; i <= this._endColumn; i++) {
-					host.moveColumn(this._startColumn, this._destColumn);
-				}
-			} else { //Move backward
-				for (i = this._startColumn; i <= this._endColumn; i++) {
-					host.moveColumn(this._startColumn + (i - this._startColumn), this._destColumn + (i - this._startColumn));
-				}
-			}
-		}
-	}
-
-	if (this._hasListener("columnMoved")) {
-		this._dispatch("columnMoved", {
-			"startColumnIndex": this._startColumn,
-			"endColumnIndex": this._endColumn,
-			"destColumnIndex": this._destColumn,
-			"clickedRow": this._clickedRow
-		});
-	}
-	this._clearCache();
-};
-
-/** @private
-*/
-DragAndDropTitlePlugin.prototype._onDragPulse = function() {
-	if(!this._isDragging || !this._pos) { return; }
-
-	this._dispatch("dragInterval", /** @type{!Object} */(this._pos));
-
-	var host = this._clickedGrid;
-	if(!host || !host.getHScrollbar().isActive()) { return; }
-
-	var x = this._pos["x"];
-	var scrollVal = 0;
-	if(x < this._cacheLeft) {
-		scrollVal = -Math.floor(this._scrollStep * (0.8 + Math.random()));
-
-	} else if(x > this._cacheWidth) {
-		scrollVal = Math.floor(this._scrollStep * (0.8 + Math.random()));
-	}
-
-	this._scrollRight(scrollVal);
-};
-/** @private
-*/
-DragAndDropTitlePlugin.prototype._clearCache = function() {
-	this._startColumn = this._endColumn = this._destColumn = -1;
-
-	this._leftMovableBorder = this._rightMovableBorder = -1;
-
-	this._clickedRow = -1;
-	this._clickedSection = this._clickedGrid = null;
-};
-
-/** @private
-* @param {number} colIndex
-* @param {number} row
-* @param {ILayoutGrid} section
-* @return {!Object}
-*/
-DragAndDropTitlePlugin.prototype._getSpan = function(colIndex, row, section) {
-	var cellSpan = section.getCellColSpan(colIndex, row);
-
-	if (cellSpan <= 0) { // The specified cell is being occupied
-		colIndex += cellSpan; // Convert the given negative index to the spanning cell
-		cellSpan = section.getCellColSpan(colIndex, row);
-	}
-
-	return { "left": colIndex, "right": (colIndex + cellSpan - 1) };
-};
-/** @private
-* @param {number} col
-* @param {number} row
-* @param {ILayoutGrid} section
-* @return {!Object}
-*/
-DragAndDropTitlePlugin.prototype._findMoveableBorder = function(col, row, section) {
-	if (row < 0 || (!row && row !== 0)) { // Guaranteed to get out of infinite loop by checking undefined, NaN, null
-		return { "left": 0, "right": (section.getColumnCount() - 1) };
-	}
-	var span = this._getSpan(col, row, section);
-	if (span["right"] >= span["left"]) {
-		return span;
-	} else {
-		return this._findMoveableBorder(col, row - 1, section);
-	}
-};
-/**
-* @private
-*/
-DragAndDropTitlePlugin.prototype._renderGuideline = function() {
-	var colIndex = this._pos["colIndex"];
-	if(colIndex == null || colIndex < 0) { // undefined, null or negative number
-		return;
-	}
-
-	var currentSpan = this._getSpan(colIndex, this._clickedRow, this._clickedSection);
-	var colStart = currentSpan["left"]; // This can be different from colIndex
-	var colEnd = currentSpan["right"];
-	var colLeft = this._clickedGrid.getColumnLeft(colStart);
-	var colWidth = 0;
-	for(var i = colStart; i <= colEnd; ++i) {
-		colWidth += this._clickedGrid.getColumnWidth(i);
-	}
-
-	var rightHand = this._pos["x"] > colLeft + colWidth / 2;
-	var destColumn = (rightHand) ? colEnd + 1 : colStart;
-
-	colLeft = this._clickedGrid.getColumnLeft(this._destColumn);
-	// If destination exceeds the specified bounds
-	if (destColumn < this._leftMovableBorder) {
-		destColumn = this._leftMovableBorder;
-	} else if (destColumn > this._rightMovableBorder) {
-		destColumn = this._rightMovableBorder + 1;
-		if(rightHand) {
-			colLeft -= 4; // Shift guideline to the left if this is the rightmost column
-		}
-	}
-
-	this._destColumn = destColumn;
-	this._guideline.style.left = colLeft + "px";
-};
-/** @private
-* @param {!Element|Event|MouseEvent} e
-*/
-DragAndDropTitlePlugin.prototype._renderDragBox = function(e) {
-	if(this._noDragBox) {
-		return;
-	}
-
-	var gridElem = this._clickedGrid.getElement();
-	var pn = this._dragbox.parentNode;
-	if(!pn) {
-		gridElem.appendChild(this._dragbox);
-	}
-
-	var gridRect = gridElem.getBoundingClientRect();
-	var zoomFactor = this._clickedGrid["zoomFactor"]; // TODO: Remove zoom factor
-	var contentWidth = gridRect.width;
-
-	var x = e.clientX - gridRect.left;
-	var y = ((e.pageY - gridRect.top) / zoomFactor) - window.scrollY;
-	var midFactor = parseFloat((x / contentWidth).toFixed(2));
-	var dragboxLeft = (gridRect.width * midFactor) / zoomFactor - this._dragbox.offsetWidth * midFactor;
-
-	this._dragbox.style.left = dragboxLeft + "px";
-	this._dragbox.style.top = (y + 10)  + "px";
-};
-
-/**
-* @private
-* @param {boolean} inOut
-*/
-DragAndDropTitlePlugin.prototype._dimCol = function(inOut) {
-	for (var i = this._startColumn; i <= this._endColumn; i++) {
-		this._clickedGrid.enableColumnClass(i, "drag-fadeout", inOut);
-	}
-};
-
-DragAndDropTitlePlugin._proto = DragAndDropTitlePlugin.prototype;
-
-/* harmony default export */ const plugins_DragAndDropTitlePlugin = (DragAndDropTitlePlugin);
-
-
-;// CONCATENATED MODULE: ./src/js/grid/plugins/SortableTitlePlugin.js
-/* eslint-disable */
-
-
-
-
-
-
-/* eslint-enable */
-
-/** Fired when user click and before the sorting operation.
-* @event SortableTitlePlugin#preClicked
-* @property {number} colIndex
-* @property {Element} target Element being clicked
-* @example
-* function onPreClicked(e) {
-*   e.cancel = true; // Cancel sorting operation
-* }
-*/
-
-/** Fired when user click and after the sorting operation
-* @event SortableTitlePlugin#clicked
-* @property {number} colIndex
-* @property {string} sortOrder "a" for "ascending, "d" for descending, and "n" for none
-* @property {string} dataColumnName Field that is used for sorting
-*/
-
-/** Fired just before sorting data. This allows additional modification before the actual sorting
-* @event SortableTitlePlugin#preDataSorting
-* @property {boolean=} isUserAction This has true value, if event initiate from clicking title/header section
-*/
-
-/** Fired once column is sorted and before {@link SortableTitlePlugin#clicked}
-* @event SortableTitlePlugin#columnSorted
-* @property {number} colIndex
-* @property {string} sortOrder "a" for "ascending, "d" for descending, and "n" for none
-* @property {string} sortedField Field that is used for sorting
-* @property {Array.<number>} colIndices An array of colIndex
-* @property {Array.<string>} sortOrders An array of sortOrder
-* @property {Array.<string>} sortedFields An array of sortedField
-*/
-
-/** @constructor
-* @extends {Plugin}
-* @param {SortableTitlePlugin.Options=} options
-*/
-var SortableTitlePlugin = function (options) { // TODO: Extract SortableTitlePlugin to grid extension.
-	var _t = this;
-	_t._onSectionAdded = _t._onSectionAdded.bind(_t);
-	_t._onMouseDown = _t._onMouseDown.bind(_t);
-
-	_t._onUIUpdated = _t._onUIUpdated.bind(_t);
-
-	_t._onColumnAdded = _t._onColumnAdded.bind(_t);
-	_t._onColumnRemoved = _t._onColumnRemoved.bind(_t);
-	_t._onItemSortingClicked = _t._onItemSortingClicked.bind(_t);
-	_t.refresh = _t.refresh.bind(_t);
-
-	_t._hosts = [];
-	_t._sortLogic = {};
-
-	_t._addEvents(
-		"preClicked"
-		, "clicked"
-		, "preDataSorting"
-		, "columnSorted"
-	);
-
-	_t._sortStates = [];
-	_t._sortingSequence = ["a", "d"];
-
-	if(options) {
-		_t.config({ "sorting": options });
-	}
-};
-es6_Ext.inherits(SortableTitlePlugin, plugins_Plugin);
-
-/**
- * @typedef {"a" | "ascending" | "d" | "descending" | "n" | null} SortableTitlePlugin~SortOrder
- */
-
-/** The sorting object which will be used for initialSort config.
- * @typedef {Object} SortableTitlePlugin~InitialSort
- * @property {number} colIndex Index of the column
- * @property {SortableTitlePlugin~SortOrder=} sortOrder=null Set to "d" for descending order and "a" for ascending order
- * @property {SortableTitlePlugin~SortOrder=} order Alias of sortOrder
- */
-SortableTitlePlugin.InitialSort;
+SortableTitlePlugin.InitialSort;
 
 /** The sorting properties for column option.
  * @typedef {Object} SortableTitlePlugin~ColumnOptions
@@ -28638,6 +27895,12 @@ SortableTitlePlugin.ColumnOptions;
  */
 SortableTitlePlugin.Options;
 
+
+/** @type {Array.<Core>}
+* @private
+*/
+SortableTitlePlugin.prototype._hosts = null; // For a plug-in that support multi-table
+
 /** Order of item indicates sort priorities used in DataView. <br>
 * Each state contains column name{string}, sort order {string}, and rendering cell {ElementWrapper}
 * @private
@@ -28742,13 +28005,17 @@ var CODE_DOWN = "\u25BC";
 */
 var CODE_DIAMOND = "\u25CA";
 
-/** @override */
+/** The name must be readonly and unique among all other plugins
+* @public
+* @return {string}
+*/
 SortableTitlePlugin.prototype.getName = function () {
 	return "SortableTitlePlugin"; // Read Only
 };
 
-/**
-* @override
+/** @public
+* @param {!Core} host
+* @param {Object=} options
 * @description Suppress google compiler for argument options because Internal Plugin doesn't support.
 * @suppress {checkTypes}
 */
@@ -28767,7 +28034,10 @@ SortableTitlePlugin.prototype.initialize = function (host, options) {
 	this.config(options);
 };
 
-/** @override */
+/**For disposing any resource
+* @public
+* @param {!Core} host
+*/
 SortableTitlePlugin.prototype.unload = function (host) {
 	var at = this._hosts.indexOf(host);
 	if (at < 0) { return; }
@@ -29158,31 +28428,18 @@ SortableTitlePlugin.prototype.getSortOrder = function (colIndex) {
 * @return {number} Return negative value if there is no sorted column
 */
 SortableTitlePlugin.prototype.getSortedColumnIndex = function (priority) {
-	var state = this._sortStates[priority || 0];
-	if (state) {
-		var host = this._hosts[0];
-		var colCount = host ? host.getColumnCount() : 0;
-		for (var c = 0; c < colCount; ++c) {
-			var sortOptions = this._getSortOptions(c);
-			if (sortOptions === state) {
-				return c;
-			}
-		}
-	}
-	return -1;
+	return this._getColumnIndexByOptions(this._sortStates[priority || 0]);
 };
-/** @public
+/** Start with 0 (the first column that is being sorted). The highest number will be sorted last. Negative value means the specified column is not sorted
+* @public
 * @param {number} colIndex
-* @return {number} Start with 0 (first column to be sorted) and end in the highest number. Negative means the specified column is not sorted
+* @return {number}
 */
 SortableTitlePlugin.prototype.getSortPriority = function (colIndex) {
-	var sortOptions = this._getSortOptions(colIndex);
-	if (sortOptions && sortOptions["sortOrder"]) {
-		var len = this._sortStates.length;
-		for (var i = 0; i < len; ++i) {
-			if (this._sortStates[i] === sortOptions) {
-				return i;
-			}
+	var len = this._sortStates.length;
+	for (var i = 0; i < len; ++i) {
+		if (this._sortStates[i] === this._getSortOptions(colIndex)) {
+			return i;
 		}
 	}
 	return -1;
@@ -29195,7 +28452,7 @@ SortableTitlePlugin.prototype.isColumnSorted = function (colIndex) {
 	return this.getSortPriority(colIndex) >= 0;
 };
 /** @public
-* @return {Array.<Object> | null} Array of object with "colIndex" and "sortOrder"
+* @return {Array.<Object>} Array of object with "colIndex" and "sortOrder"
 */
 SortableTitlePlugin.prototype.getSortedColumns = function () {
 	var len = this._sortStates.length;
@@ -29204,28 +28461,33 @@ SortableTitlePlugin.prototype.getSortedColumns = function () {
 	var arr = new Array(len);
 	for (var i = 0; i < len; ++i) {
 		var colIndex = this.getSortedColumnIndex(i);
+		var state = this._sortStates[i];
 		arr[i] = {
 			"colIndex": colIndex,
-			"sortOrder": this._sortStates[i]["sortOrder"] || "n"
+			"field": state["field"] || "",
+			"sortOrder": state["sortOrder"] || "n"
 		};
 	}
 	return arr;
 };
+/** @public
+* @return {boolean}
+*/
+SortableTitlePlugin.prototype.isSorting = function () {
+	return this._sortStates.length ? true : false;
+};
 
 /** @public
-* @param {number} colIndex
+* @param {number|string} colRef Column index or field
 * @param {string=} sortOrder "a" for ascending, "d" for descending, and "n" for no sorting
 * @param {Object=} opt_arg Event argument to be sent with preDataSorting event
 * @fires SortableTitlePlugin#preDataSorting
 * @fires SortableTitlePlugin#columnSorted
 */
-SortableTitlePlugin.prototype.sortColumn = function (colIndex, sortOrder, opt_arg) {
-	if (colIndex >= 0) { // ColIndex can be greater than the host column count, to allow default sorting
-
-		var state = this._preSortColumn(colIndex, sortOrder);
-		if (state) {
-			this._sortColumn([state], opt_arg);
-		}
+SortableTitlePlugin.prototype.sortColumn = function (colRef, sortOrder, opt_arg) {
+	var state = this._prepareSorting(colRef, sortOrder);
+	if (state) {
+		this._sortColumn([state], opt_arg);
 	}
 };
 
@@ -29241,7 +28503,14 @@ SortableTitlePlugin.prototype.sortColumns = function (sortOptions, opt_arg) {
 		var states = [];
 		for (var i = 0; i < sortOptions.length; i++) {
 			var opt = sortOptions[i];
-			var state = this._preSortColumn(opt["colIndex"], opt["sortOrder"] || opt["order"]);
+			var colRef = opt["colIndex"];
+			if(colRef < 0 || colRef == null) {
+				colRef = opt["field"];
+			}
+			var state = this._prepareSorting(
+				colRef,
+				opt["sortOrder"] || opt["order"]
+			);
 			if (state) {
 				states[i] = state;
 			}
@@ -29270,7 +28539,6 @@ SortableTitlePlugin.prototype.refresh = function () {
 
 /** @description Perform sorting with the same parameter. Alias to {@link SortableTitlePlugin#refresh}
 * @public
-* @override
 * @function
 */
 SortableTitlePlugin.prototype.restoreUserActions = SortableTitlePlugin.prototype.refresh;
@@ -29338,20 +28606,24 @@ SortableTitlePlugin.prototype.setDataColumnNames = SortableTitlePlugin.prototype
 * @return {string} field A field used for sorting
 */
 SortableTitlePlugin.prototype.getColumnSortingField = function (colIndex) {
-	var options = this._getSortOptions(colIndex);
+	var sortOptions = this._getSortOptions(colIndex);
 	// options["field"] is already consolidated from field, sortBy, and sortable properties.
-	var field = (options) ? options["field"] : null;
+	var field = (sortOptions) ? sortOptions["field"] : null;
 
-	if (field == null && !this._rowDefMode) { // Old CompositeGrid may stored sorting field in DataColumnName
+	if (field == null && !this._rowDefMode) { // Old CompositeGrid may store sorting field in DataColumnName
 		var host = this._hosts[0];
 		if (host) {
 			field = host.getDataColumnName(colIndex);
+			if(field && sortOptions) {
+				sortOptions["field"] = field; // Cache for later use
+			}
 		}
 	}
 
 	return field || "";
 };
-/** @public
+/** This is equivalent to setting sortBy in the configuration object.
+* @public
 * @param {number} colIndex
 * @param {string|null} field A field used for sorting
 * @param {Function=} sortLogic
@@ -29372,21 +28644,26 @@ SortableTitlePlugin.prototype.setColumnSortingField = function (colIndex, field,
 		}
 	}
 };
-/** @public
+/** Return array of the fields from the currently sorted columns
+* @public
 * @return {!Array.<string>} fields of each sorting states
 */
 SortableTitlePlugin.prototype.getColumnSortingFields = function () {
-	var ary = [];
+	var len = this._sortStates.length;
+	var ary = new Array(len);
 	var host = this._hosts[0];
-	var colCount = host ? host.getColumnCount() : 0;
-	for (var c = 0; c < colCount; ++c) {
-		var sortOptions = this._getSortOptions(c);
-		if (sortOptions && sortOptions["sortOrder"]) {
-			var priority = this._sortStates.indexOf(sortOptions);
-			if (priority >= 0) {
-				ary[priority] = this.getColumnSortingField(c);
+
+	for(var i = 0; i < len; ++i) {
+		var sortOptions = this._sortStates[i];
+		var field = sortOptions["field"];
+		if(!field && !this._rowDefMode) {
+			var colIndex = this._getColumnIndexByOptions(sortOptions); // Slow
+			field = host.getDataColumnName(colIndex);
+			if(field) {
+				sortOptions["field"] = field; // Cache for later use
 			}
 		}
+		ary[i] = field || "";
 	}
 	return ary;
 };
@@ -29630,7 +28907,7 @@ SortableTitlePlugin.prototype._proceedSorting = function (hitObj) {
 	if (this._canClickToSort(hitObj)) {
 		var colIndex = hitObj["colIndex"];
 		// _proceedSorting() method is always produced by user clicking at the header // Thus, this operation is guaranteed to be a user action
-		var state = this._preSortColumn(colIndex);
+		var state = this._prepareSorting(colIndex);
 		if (state) {
 			this._sortColumn([state], { "isUserAction": true });
 		}
@@ -29654,6 +28931,14 @@ SortableTitlePlugin.prototype._onMouseDown = function (e) {
 	}
 };
 /** @private
+* @param {string} pluginName
+* @return {*|null}
+ */
+SortableTitlePlugin.prototype._getPlugin = function(pluginName) {
+	var host = this._hosts[0];
+	return (host) ? host.getPlugin(pluginName) : null;
+};
+/** @private
 * @param {Core} grid
 * @param {MouseEvent} e
  */
@@ -29808,23 +29093,36 @@ SortableTitlePlugin.prototype.clearAllColumnSortingSequences = function () {
 
 
 /** @private
-* @param {number} colIndex
+* @param {number|string} colRef Column index or field
 * @param {string=} sortOrder "a" for ascending, "d" for descending, and "n" for no sorting
 * @returns {Object} state Returns null, if nothing is changed
 */
-SortableTitlePlugin.prototype._preSortColumn = function (colIndex, sortOrder) {
-	if (!this._maxCount) { return null; }
+SortableTitlePlugin.prototype._prepareSorting = function (colRef, sortOrder) {
+	if (!this._maxCount) {
+		return null;
+	}
 
-	var priority = this.getSortPriority(colIndex);
-	var curState = (priority >= 0) ? this._sortStates[priority] : null;
+	var colIndex = -1;
+	var field = "";
+	var priority = -1;
+	if(typeof colRef === "number") {
+		colIndex = colRef;
+		field = this.getColumnSortingField(colIndex);
+		priority = this.getSortPriority(colIndex);
+	} else if(typeof colRef === "string") {
+		field = colRef;
+		colIndex = this._getColumnIndexByField(field);
+		var fields = this.getColumnSortingFields();
+		priority = fields.indexOf(field);
+	}
 
+	var curState = (priority >= 0) ? this._sortStates[priority] : null;
 	var curOrder = curState ? curState["sortOrder"] : "n";
 
 	// Getting next sort order
 	var nextOrder = "n";
-	var sortingField = this.getColumnSortingField(colIndex);
 	if (sortOrder == null) { // Auto order switch
-		var sortingSequence = this.getSortingSequence(sortingField);
+		var sortingSequence = this.getSortingSequence(field);
 
 		var sequenceIndex = sortingSequence.indexOf(curOrder);
 		if (sequenceIndex < 0) {
@@ -29849,10 +29147,16 @@ SortableTitlePlugin.prototype._preSortColumn = function (colIndex, sortOrder) {
 	}
 
 	if (nextOrder === "a" || nextOrder === "d") { // Reorder sort states
+		if(colIndex < 0 && !field) {
+			return null;
+		}
 		if (!curState) {
 			// TODO: Sort state object should not be sortOptions
 			curState = this._newSortOptions(colIndex); // This may come with sortLogic
 		}
+		if(colIndex < 0) {
+			curState["field"] = field;
+		}
 
 		this._sortStates.push(curState); // Latest sorting have lowest priority (multiColumn sorting)
 	}
@@ -29879,7 +29183,7 @@ SortableTitlePlugin.prototype._preSortColumn = function (colIndex, sortOrder) {
 
 	return { // TODO: Refactor this code as it is only used by "columnSorted" event (unnecessarily complex).
 		"colIndex": colIndex,
-		"sortedField": sortingField,
+		"sortedField": field,
 		"sortOrder": nextOrder || "n",
 		"prevOrder": curOrder,
 		"clearedSortColIndexes": clearedSortColIndexes
@@ -29887,7 +29191,7 @@ SortableTitlePlugin.prototype._preSortColumn = function (colIndex, sortOrder) {
 };
 
 /** @private
-* @param {Array.<Object>} states States from _preSortColumn for dispatching columnSorted event.
+* @param {Array.<Object>} states States from _prepareSorting for dispatching columnSorted event.
 * @param {Object=} opt_arg Event argument to be sent with preDataSorting event
 * @fires SortableTitlePlugin#preDataSorting
 * @fires SortableTitlePlugin#columnSorted
@@ -29914,8 +29218,8 @@ SortableTitlePlugin.prototype._sortColumn = function (states, opt_arg) {
 	this._dispatch("columnSorted", res);
 };
 
-/** @override
-* @ignore
+/** @private
+* @param {Object} e
 */
 SortableTitlePlugin.prototype._onColumnAdded = function (e) {
 	var t = this;
@@ -29937,8 +29241,8 @@ SortableTitlePlugin.prototype._onColumnAdded = function (e) {
 	}
 };
 
-/** @override
-* @ignore
+/** @private
+* @param {Object} e
 * @fires SortableTitlePlugin#preDataSorting
 * @fires SortableTitlePlugin#columnSorted
 */
@@ -29990,7 +29294,7 @@ SortableTitlePlugin.prototype._sortDataView = function (opt_action) {
 		sortLogics = new Array(sortCount);
 		for (var i = 0; i < sortCount; ++i) {
 			orders[i] = this._sortStates[i]["sortOrder"];
-			sortLogics[i] = this._sortStates[i]["sortLogic"];
+			sortLogics[i] = this._sortStates[i]["sortLogic"]; // sortLogic can be null
 		}
 		if(this._rowDefMode) { // DataView in real-time grid has only ROW_DEF column
 			c_ref = this._sortStates.map(SortableTitlePlugin._toRowDefField);
@@ -30072,7 +29376,7 @@ SortableTitlePlugin.prototype._updateSortableIndicator = function (hostIndex) {
 
 			cell["addClass"]("sortable");
 
-			var priority = t._getColumnSortingStatePriority(col);
+			var priority = t.getSortPriority(col);
 			var state = t._sortStates[priority];
 
 			var isSorting = state && state["sortOrder"] !== "n";
@@ -30143,18 +29447,40 @@ SortableTitlePlugin.prototype._createIconElem = function (icon, fallback) {
 };
 
 /** @private
- * @param {number} colIndex
-* @return {number} -1 means not found
+* @param {Object} sortOptions
+* @return {number}
 */
-SortableTitlePlugin.prototype._getColumnSortingStatePriority = function (colIndex) {
-	var t = this;
-	for (var i = t._sortStates.length; --i >= 0;) {
-		var col = t.getSortedColumnIndex(i);
-		if (col === colIndex) return i;
+SortableTitlePlugin.prototype._getColumnIndexByOptions = function (sortOptions) {
+	if(sortOptions) {
+		var host = this._hosts[0];
+		var colCount = host ? host.getColumnCount() : 0;
+		for (var c = 0; c < colCount; ++c) {
+			var colData = host.getColumnData(c); // Equivalent to _getSortOptions() method
+			if (colData) {
+				if(sortOptions === colData["sortableTitle"]) {
+					return c;
+				}
+			}
+		}
+	}
+	return -1;
+};
+/** @private
+* @param {string} field
+* @return {number}
+*/
+SortableTitlePlugin.prototype._getColumnIndexByField = function (field) {
+	if(field) {
+		var host = this._hosts[0];
+		var colCount = host ? host.getColumnCount() : 0;
+		for (var c = 0; c < colCount; ++c) {
+			if(field === this.getColumnSortingField(c)) {
+				return c;
+			}
+		}
 	}
 	return -1;
 };
-
 /** @private
 * @param {number} colIndex
 * @return {Object}
@@ -30177,10 +29503,7 @@ SortableTitlePlugin.prototype._newSortOptions = function (colIndex) {
 	var host = this._hosts[0];
 	var sortOptions = null;
 	if (host && colIndex >= 0) {
-		var colData = host.getColumnData(colIndex);
-		if (!colData) {
-			colData = host.setColumnData(colIndex, {});
-		}
+		var colData = host.getColumnData(colIndex); // colData is guaranteed to exist
 		sortOptions = colData["sortableTitle"];
 		if (!sortOptions) {
 			sortOptions = colData["sortableTitle"] = {};
@@ -30260,8 +29583,6 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 // Plugins
 
 
-
-
 // Data
 
 
@@ -30313,8 +29634,6 @@ grid.SelectionList = util_SelectionList;
 grid.SectionSettings = util_SectionSettings;
 
 // Plugins
-grid.Plugin = plugins_Plugin;
-grid.DragAndDropTitlePlugin = plugins_DragAndDropTitlePlugin;
 grid.SortableTitlePlugin = plugins_SortableTitlePlugin;
 // tsd-enable