@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/core/es6/grid/plugins/SortableTitlePlugin.js

@@ -0,0 +1,1977 @@
+/* eslint-disable */
+import Ext from "../../../../tr-grid-util/es6/Ext.js";
+import EventDispatcher from "../event/EventDispatcher.js";
+import Core from "../Core.js";
+import ILayoutGrid from "../ILayoutGrid.js";
+import ElementWrapper from "../components/ElementWrapper.js";
+import DataTable from "../../data/DataTable.js";
+import { isEmptyObject } from "../../../../tr-grid-util/es6/Util.js";
+/* 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
+*/
+
+/** @private
+* @type {string}
+*@constant
+*/
+const ROW_DEF = "ROW_DEF";
+
+/** @constructor
+* @extends {EventDispatcher}
+* @param {SortableTitlePlugin.Options=} options
+*/
+let SortableTitlePlugin = function (options) { // TODO: Extract SortableTitlePlugin to grid extension.
+	let _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._rowDefSorter = _t._rowDefSorter.bind(_t);
+
+	_t._hosts = [];
+	_t._sortLogic = {};
+
+	_t._addEvents(
+		"preClicked"
+		, "clicked"
+		, "preDataSorting"
+		, "columnSorted"
+	);
+
+	_t._sortStates = [];
+	_t._sortingSequence = ["a", "d"];
+
+	if(options) {
+		_t.config({ "sorting": options });
+	}
+};
+Ext.inherits(SortableTitlePlugin, EventDispatcher);
+
+/**
+ * @typedef {"a" | "ascending" | "d" | "descending" | "n" | null} SortableTitlePlugin~SortOrder
+ */
+
+/** An object that specifies how sorting should be performed
+ * @typedef {Object} SortableTitlePlugin~InitialSort
+ * @property {number=} colIndex Column index of a column to be sorted
+ * @property {string=} colId Column id of a column to be sorted
+ * @property {string=} field Field of a column to be sorted
+ * @property {SortableTitlePlugin~SortOrder=} sortOrder=null Set to "d" for descending order and "a" for ascending order
+ * @property {SortableTitlePlugin~SortOrder=} order Alias to sortOrder
+ */
+SortableTitlePlugin.InitialSort;
+
+/** An object that specifies how sorting should be performed
+ * @typedef {Object} SortableTitlePlugin~SortingDefinition
+ * @property {number=} colIndex Column index of a column to be sorted
+ * @property {string=} colId Column id of a column to be sorted
+ * @property {string=} field Field of a column to be sorted
+ * @property {SortableTitlePlugin~SortOrder=} sortOrder=null Set to "d" for descending order and "a" for ascending order
+ * @property {SortableTitlePlugin~SortOrder=} order Alias to sortOrder
+ */
+SortableTitlePlugin.SortingDefinition;
+
+/** The sorting properties for column option.
+ * @typedef {Object} SortableTitlePlugin~ColumnOptions
+ * @property {boolean=} sortable=false If enable, the column can be sorted by user click
+ * @property {string=} sortBy Field to be used for sorting. If defined, user can click at the header section to sort the column
+ * @property {string=} sort="" Deprecated Alias to `sortOrder`
+ * @property {string=} sortOrder="" The column can be sorted in ascending and descending order by specifying the order "a", "d". This option will sort the column when it is initialized or inserted at runtime.
+ * @property {DataTable.SortLogic=} sortLogic=null Custom compare function for sorting
+ * @property {DataTable.SortLogic=} sortingLogic Alias to `sortLogic`
+ * @property {DataTable.SortLogic=} sorter Alias to `sortLogic`
+ * @property {Array.<SortableTitlePlugin~SortOrder>=} sortingSequence Collection of sorting direction for the particular field.
+ */
+SortableTitlePlugin.ColumnOptions;
+
+/** The configuration object for sorting options. This can be defined by `sorting` property in CompositeGrid configuration object.
+ * @typedef {Object} SortableTitlePlugin~Options
+ * @property {(SortableTitlePlugin~InitialSort|Array.<SortableTitlePlugin.SortingDefinition>)=} initialSort=null Set this config to initiate sorting after grid is created.
+ * @property {(boolean|number)=} multicolumn=false Allow multiple columns to be sorted at the same time. If number is defined, it is treated as maximum number of column to be sorted.
+ * @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=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.
+ * @property {string=} mode Set to "manual" to disable data sorting. Deprecated in favor of `indicatorOnly`
+ * @property {boolean=} disabled=false If enabled, header section cannot be clicked and no sort UI is rendered. Sorting can still be triggered only through `sortColumn` method.
+ * @property {Function=} columnSorted A shortcut to define the columnSorted event handler
+ * @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 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;
+
+
+/** @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
+* @type {!Array.<Object>}
+*/
+SortableTitlePlugin.prototype._sortStates;
+/** Maximum possible number of sorting columns at any time. how a column is sorted.
+* @private
+* @type {number}
+*/
+SortableTitlePlugin.prototype._maxCount = 1;
+
+/** @private
+* @type {boolean}
+*/
+SortableTitlePlugin.prototype._dataSorting = true;
+/** @private
+* @type {boolean}
+*/
+SortableTitlePlugin.prototype._dblClickAllowed = false;
+
+/** @private
+* @type {number}
+*/
+SortableTitlePlugin.prototype._clickTimer = 0;
+/** @private
+* @type {number}
+*/
+SortableTitlePlugin.prototype._delayInterval = 0;
+/** @private
+* @type {number}
+*/
+SortableTitlePlugin.prototype._lastMouseDown = 0;
+/** @private
+* @type {SortableTitlePlugin.SortingDefinition}
+*/
+SortableTitlePlugin.prototype._initialSort = null;
+/** @private
+* @type {string}
+*/
+SortableTitlePlugin.prototype._mode = "";
+/** @private
+* @type {boolean}
+*/
+SortableTitlePlugin.prototype._sortableColumns = true;
+/** @private
+* @type {boolean}
+*/
+SortableTitlePlugin.prototype._sortableIndicator = false;
+/** @private
+ * @type {boolean}
+ */
+SortableTitlePlugin.prototype._solarTheme = false;
+/** Logic map based on field name
+* @private
+* @type {Object.<string, Function>}
+*/
+SortableTitlePlugin.prototype._sortLogic;
+/** To allow users/clients to store and provide all sorting logics by themselve
+* @private
+* @type {boolean}
+*/
+SortableTitlePlugin.prototype._userManagedLogic = false;
+/** @private
+* @type {boolean}
+*/
+SortableTitlePlugin.prototype._disabled = false;
+/** @private
+* @type {boolean}
+*/
+SortableTitlePlugin.prototype._frozenIndicator = false;
+/** Since DataView in real-time grid has only one ROW_DEF column, we need to re-map sorting field to sort correctly.
+* @private
+* @type {boolean}
+*/
+SortableTitlePlugin.prototype._rowDefMode = false;
+/**
+* @private
+* @type {Function}
+*/
+SortableTitlePlugin.prototype._userComparer = null;
+
+/** @private
+* @type {!Object.<string, string>}
+*/
+SortableTitlePlugin._icons = {};
+
+/** @private
+* @type {!Array.<string>}
+*/
+SortableTitlePlugin.prototype._sortingSequence;
+/** @private
+* @type {Object.<string, Array>}
+*/
+SortableTitlePlugin.prototype._sortingSequenceMap = null;
+
+
+/** @type {string}
+* @private
+* @const
+*/
+let CODE_UP = "\u25B2";
+/** @type {string}
+* @private
+* @const
+*/
+let CODE_DOWN = "\u25BC";
+/** @type {string}
+* @private
+* @const
+*/
+let CODE_DIAMOND = "\u25CA";
+
+/** The name must be readonly and unique among all other plugins
+* @public
+* @return {string}
+*/
+SortableTitlePlugin.prototype.getName = function () {
+	return "SortableTitlePlugin"; // Read Only
+};
+
+/** @public
+* @param {!Core} host
+* @param {Object=} options
+* @description Suppress google compiler for argument options because Internal Plugin doesn't support.
+* @suppress {checkTypes}
+*/
+SortableTitlePlugin.prototype.initialize = function (host, options) {
+	if (this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	if (this._hosts.length === 1) {
+		host.listen("columnAdded", this._onColumnAdded);
+		host.listen("columnRemoved", this._onColumnRemoved);
+	}
+	host.listen("sectionAdded", this._onSectionAdded);
+	host.listen("postSectionRender", this._onUIUpdated);
+	host.listen("dataSourceChanged", this.refresh);
+
+	this.config(options);
+};
+
+/**For disposing any resource
+* @public
+* @param {!Core} host
+*/
+SortableTitlePlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if (at < 0) { return; }
+
+	this._hosts.splice(at, 1);
+	host.unlisten("sectionAdded", this._onSectionAdded);
+	host.unlisten("postSectionRender", this._onUIUpdated);
+	host.unlisten("dataSourceChanged", this.refresh);
+
+	host.unlisten("columnAdded", this._onColumnAdded);
+	host.unlisten("columnRemoved", this._onColumnRemoved);
+
+	if (this._hosts.length <= 0) {
+		if (this._clickTimer) {
+			clearTimeout(this._clickTimer);
+			this._clickTimer = 0;
+		}
+	}
+};
+
+/** @public
+*/
+SortableTitlePlugin.prototype.afterInit = function () {
+	let t = this;
+
+	// Set logic to the data source, since the data source not available during the initialization
+	t.setSortLogics(t._sortLogic);
+
+	let userInput = t._initialSort; // This will be passed from the user when they want to start with initialize sort
+	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]);
+		}
+	}
+};
+
+/** @public
+* @param {Object=} options Core model object
+*/
+SortableTitlePlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	let t = this;
+
+	let icons = options["icons"];
+	if (icons != null) {
+		if (icons["sorting"]) {
+			SortableTitlePlugin._icons = icons["sorting"];
+		}
+	}
+	let themeName = options["themeName"];
+	if (!themeName || themeName.indexOf("solar") >= 0) {
+		t._solarTheme = true;
+	} else {
+		t._solarTheme = false;
+	}
+	t._initialSort = t._initialSortByColumnField(options);
+
+	let extOptions = options["sorting"];
+	if (!extOptions) {
+		return;
+	}
+
+	if(extOptions["ROW_DEF"]) {
+		this._rowDefMode = true;
+	}
+	if(extOptions["userManagedLogic"]) {
+		t._userManagedLogic = true;
+	}
+
+	let val = extOptions["multiColumn"] || extOptions["multicolumn"];
+	if (val != null) {
+		if (val === true) val = -1;
+		if (val === false) val = 1;
+		t.setSortableColumnCount((typeof val == "number" && val > 0) ? val : -1);
+	}
+
+	val = extOptions["sortableIndicator"];
+	if (val != null) {
+		t._sortableIndicator = val; // This can override default halo theme
+	}
+
+	val = extOptions["disabled"];
+	if (val != null) {
+		t._disabled = val ? true : false;
+	}
+
+	val = extOptions["threeStatesSorting"];
+	if (val != null) {
+		t.disableTwoStateSorting(val);
+	}
+
+	val = extOptions["sortingSequence"];
+	if (val != null) {
+		if(Array.isArray(val)) {
+			t._sortingSequence = val;
+		}
+	}
+
+	val = extOptions["mode"];
+	if (val != null) {
+		t._mode = val;
+		if (val === "manual") {
+			t.disableDataSorting();
+		}
+	}
+
+	val = extOptions["indicatorOnly"];
+	if (val != null) {
+		t.disableDataSorting(val);
+	}
+
+	val = extOptions["disableDoubleClickToSort"];
+	if (val != null) {
+		t.disableDoubleClickToSort(val);
+	}
+
+	val = extOptions["columnSorted"];
+	if (typeof val === "function") {
+		t.listen("columnSorted", val);
+	}
+	val = extOptions["preClicked"];
+	if (typeof val === "function") {
+		t.listen("preClicked", val);
+	}
+	val = extOptions["clicked"];
+	if (typeof val === "function") {
+		t.listen("clicked", val);
+	}
+	val = extOptions["preDataSorting"];
+	if (typeof val === "function") {
+		t.listen("preDataSorting", val);
+	}
+
+	val = extOptions["sortableColumns"];
+	if (val != null) {
+		t._sortableColumns = val;
+	}
+
+	// Override _initialSortByColumnField
+	val = extOptions["initialSort"];
+	if (typeof val === "object") {
+		t._initialSort = val;
+	}
+
+	val = extOptions["sortLogic"];
+	if (typeof val === "object") {
+		for (let field in val) {
+			if (typeof val[field] === "function") {
+				t._sortLogic[field] = val[field];
+			}
+		}
+	}
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	let columns = obj["columns"];
+	if (!columns) {
+		columns = obj["columns"] = [];
+	}
+
+	let host = this._hosts[0];
+
+	if (!host) return obj;
+
+	let sortedColumns = this.getSortedColumns();
+	let col, i, len;
+	// Multiple column sorting cannot retain the sort order in the column option.
+	if(this._maxCount === 1 && sortedColumns != null) {
+		// assign sorting state to each columns
+		len = sortedColumns.length;
+		for (i = 0; i < len; i++) {
+			let sortedColumn = sortedColumns[i];
+			let colIndex = sortedColumn["colIndex"];
+			col = columns[colIndex];
+			if (!col) {
+				col = columns[colIndex] = {};
+			}
+			col["sortOrder"] = sortedColumn["sortOrder"];
+		}
+	}
+
+	len = host.getColumnCount();
+	let opt, field;
+	for(i = 0; i < len; ++i) {
+		col = columns[i];
+		if (!col) {
+			col = columns[i] = {};
+		}
+
+		// TODO: We should get the state from the core, instead of getting the sort options.
+		opt = this._getSortOptions(i);
+
+		if (!opt) { continue; }
+
+		if(this._sortableColumns) {
+			if (opt["disabled"]) {
+				col["sortable"] = false;
+			}
+		} else if(!opt["disabled"]) {
+			col["sortable"] = true;
+		}
+		field = opt["field"];
+		if (field) {
+			// WARNING: When Core's column has no field, sortBy property does not get returned
+			if(col["field"] != null && col["field"] !== field) {
+				col["sortBy"] = field;
+			} // else The default value is an empty sortBy, which refers to the same column field by default.
+
+			if (this._sortingSequenceMap && this._sortingSequenceMap[field]) {
+				col["sortingSequence"] = this._sortingSequenceMap[field];
+			}
+		}
+
+	}
+
+	let extOptions = obj["sorting"];
+	if(!extOptions) {
+		extOptions = obj["sorting"] = {};
+	}
+
+	let val = sortedColumns;
+	if(val != null) {
+		extOptions["initialSort"] = val;
+	}
+
+	val = this._sortableIndicator;
+	if(val !== false) {
+		extOptions["sortableIndicator"] = val;
+	}
+
+	if(this._maxCount !== 1) {
+		extOptions["multiColumn"] = this._maxCount === -1 ? true : this._maxCount;
+	}
+	if(this._dblClickAllowed) {
+		extOptions["disableDoubleClickToSort"] = !this._dblClickAllowed;
+	}
+
+	val = this._sortableColumns;
+	if(val !== true) {
+		extOptions["sortableColumns"] = val;
+	}
+
+	val = this._dataSorting;
+	if(val !== true) {
+		extOptions["indicatorOnly"] = val;
+	}
+	// extOptions["mode"] = this._mode;
+	if(this._disabled) {
+		extOptions["disabled"] = true;
+	}
+
+	let sortingSeq = this._sortingSequence;
+	let notDefaultSeq = true;
+	if (sortingSeq.length === 2) {
+		if (sortingSeq[0] === "a" && sortingSeq[1] === "d") { // Sorting Sequence is not the default one
+			notDefaultSeq = false;
+		}
+	}
+	if(notDefaultSeq) {
+		extOptions["sortingSequence"] = sortingSeq.slice();
+	}
+
+	if(isEmptyObject(obj["sorting"])) {
+		delete obj["sorting"];
+	}
+
+	return obj;
+};
+
+/** @public
+* @description Function for ColumnMenuExtension to collect config of column menu
+* @param {number} colIndex Column index
+* @param {Object} config Column Menu configuration
+* @return {!Object}
+*/
+SortableTitlePlugin.prototype.getColumnMenu = function (colIndex, config) {
+	if (!config) {
+		config = {};
+	}
+
+	let menus = config["menus"];
+	if (!menus) {
+		menus = config["menus"] = [];
+	}
+
+	let menu = menus[0];
+	if (!menu) {
+		menu = menus[0] = {
+			"menuItems": []
+		};
+	}
+
+	let order = this.getSortOrder(colIndex);
+
+	// Menu items for this extension
+	let extMenuItem = {
+		"indexScore": 100,
+		"label": "Sort Column",
+		"icon": "sort-a-to-z",
+		"group": "FREQUENTLY_USED",
+		"subMenu": {
+			"menuItems": [{
+				"indexScore": 3,
+				"label": "Ascending",
+				"radioMode": true,
+				"value": {
+					"colIndex": colIndex,
+					"order": "a"
+				},
+				"selected": order === "a",
+				"click": this._onItemSortingClicked
+			}, {
+				"indexScore": 2,
+				"label": "Descending",
+				"radioMode": true,
+				"value": {
+					"colIndex": colIndex,
+					"order": "d"
+				},
+				"selected": order === "d",
+				"click": this._onItemSortingClicked
+			}, {
+				"indexScore": 1,
+				"label": "Un-Sort",
+				"radioMode": true,
+				"value": {
+					"colIndex": colIndex,
+					"order": "n"
+				},
+				"selected": order === "n",
+				"click": this._onItemSortingClicked
+			}]
+		}
+	};
+
+	// Push menu items to config
+	menu["menuItems"].push(extMenuItem);
+
+	return config;
+};
+
+/** @private
+* @param {Object} e
+*/
+SortableTitlePlugin.prototype._onItemSortingClicked = function (e) {
+	let host = this._hosts[0];
+	let columnMenuExt = host["getPlugin"]("ColumnMenuPlugin");
+	columnMenuExt["hide"]();
+
+	let value = e["currentTarget"]["value"];
+	let colIndex = value["colIndex"];
+	let order = value["sortOrder"];
+	this.sortColumn(colIndex, order);
+};
+
+/** @public
+* @return {Object.<string, string>} "a" for ascending, "d" for descending, and "n" for no sorting
+*/
+SortableTitlePlugin.prototype.getIcons = function () {
+	return SortableTitlePlugin._icons;
+};
+
+/** @public
+* @param {Object.<string, Function>} sortLogic
+*/
+SortableTitlePlugin.prototype.setSortLogics = function (sortLogic) { // TODO: This should be deprecated
+	if (sortLogic != null) {
+		let host = this._hosts[0];
+		if (host) {
+			let ds = host.getDataSource();
+			for (let field in sortLogic) {
+				this._setSortLogic(ds, field, sortLogic[field]);
+			}
+		}
+	}
+};
+
+/** @public
+* @param {string} field
+* @param {Function} func
+*/
+SortableTitlePlugin.prototype.setSortLogic = function (field, func) { // TODO: This should be deprecated
+	if (typeof field === "string") {
+		let host = this._hosts[0];
+		if (host) {
+			let ds = host.getDataSource();
+			this._setSortLogic(ds, field, func);
+		}
+	}
+};
+
+/** @private
+* @param {Object} ds
+* @param {string} field
+* @param {Function} func
+*/
+SortableTitlePlugin.prototype._setSortLogic = function (ds, field, func) { // TODO: This is deprecated
+	if (ds && typeof field === "string") {
+		if (field === "*") {
+			ds.setSortingLogic(func);
+		} else {
+			ds.setColumnSortingLogic(field, func);
+		}
+	}
+};
+
+/** @public
+* @param {number=} colIndex If colIndex is undefined or null the first sorted column is used instead
+* @return {string} "a" for ascending, "d" for descending, and "n" for no sorting
+*/
+SortableTitlePlugin.prototype.getSortOrder = function (colIndex) {
+	let priority = (colIndex != null) ? this.getSortPriority(colIndex) : 0;
+	let state = this._sortStates[priority];
+	let sortOrder = state ? state["sortOrder"] : "";
+	return sortOrder || "n";
+};
+/** Return the first (highest priority) sorted column's index
+* @public
+* @param {number=} priority
+* @return {number} Return negative value if there is no sorted column
+*/
+SortableTitlePlugin.prototype.getSortedColumnIndex = function (priority) {
+	return this._getColumnIndex(this._sortStates[priority || 0]);
+};
+/** 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
+* @param {string=} colRef field or column id
+* @return {number}
+*/
+SortableTitlePlugin.prototype.getSortPriority = function (colIndex, colRef) {
+	let host = this._hosts[0];
+	if(host) {
+		let i;
+		let len = this._sortStates.length;
+		if(colIndex >= 0) {
+			let colId = host.getColumnId(colIndex);
+			if(colId) {
+				for(i = 0; i < len; ++i) {
+					if(this._sortStates[i]["colId"] === colId) {
+						return i;
+					}
+				}
+			}
+		} else if(colRef) {
+			for(i = 0; i < len; ++i) {
+				let sortState = this._sortStates[i];
+				if(sortState["colId"] === colRef) {
+					return i;
+				}
+				if(sortState["field"] === colRef) {
+					return i;
+				}
+			}
+		}
+	}
+	return -1;
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+SortableTitlePlugin.prototype.isColumnSorted = function (colIndex) {
+	return this.getSortPriority(colIndex) >= 0;
+};
+/** @public
+* @return {Array.<Object>} Array of objects with colIndex, colId, field, and sortOrder properties
+*/
+SortableTitlePlugin.prototype.getSortedColumns = function () {
+	let len = this._sortStates.length;
+	if (len <= 0) { return null; }
+
+	let arr = new Array(len);
+	for (let i = 0; i < len; ++i) {
+		let colIndex = this.getSortedColumnIndex(i);
+		let state = this._sortStates[i];
+		let retObj = {};
+		let colId = "";
+		if(colIndex >= 0) {
+			retObj["colIndex"] = colIndex;
+			colId = this._getColumnId(colIndex);
+		}
+		if(colId) {
+			retObj["colId"] = colId;
+		}
+		let field = state["field"] || "";
+		if(field) {
+			retObj["field"] = field;
+		}
+		retObj["sortOrder"] = state["sortOrder"] || "n";
+		arr[i] = retObj;
+	}
+	return arr;
+};
+/** @public
+* @return {boolean}
+*/
+SortableTitlePlugin.prototype.isSorting = function () {
+	return this._sortStates.length ? true : false;
+};
+
+/** @public
+* @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 (colRef, sortOrder, opt_arg) {
+	let sortOptions = this._prepareSorting(colRef, sortOrder);
+	this._sortColumn(sortOptions, opt_arg);
+	if (opt_arg && opt_arg["isUserAction"]) { // Currently, the 'isUserAction' flag is triggered by a user clicking on the title and clicking the filter dialog. TODO: preClicked should be firing too.
+		let ce = {};
+		ce["colIndex"] = sortOptions.colIndex;
+		ce["sortOrder"] = this.getSortOrder(sortOptions.colIndex);
+		ce["dataColumnName"] = this.getColumnSortingField(sortOptions.colIndex); // This should be deprecated
+		this._dispatch("clicked", ce);
+	}
+};
+
+/** Sort multiple columns at once
+* @public
+* @param {Array.<SortableTitlePlugin.SortingDefinition>} sortOptions Input an array to specify the multiple column sort order
+* @param {Object=} opt_arg Event argument to be sent with preDataSorting event
+* @fires SortableTitlePlugin#preDataSorting
+* @fires SortableTitlePlugin#columnSorted
+*/
+SortableTitlePlugin.prototype.sortColumns = function (sortOptions, opt_arg) {
+	if (Array.isArray(sortOptions)) {
+		let len = sortOptions.length;
+		let states = new Array(len);
+		for (let i = 0; i < len; i++) {
+			states[i] = this._prepareSorting(sortOptions[i]);
+		}
+		this._sortColumn(states, opt_arg);
+	}
+};
+/** @description Clear all sorting states
+* @public
+* @param {Object=} opt_arg Event argument to be sent with preDataSorting event
+*/
+SortableTitlePlugin.prototype.clearSortState = function (opt_arg) {
+	if(this._popSortState(0, opt_arg)) {
+		this.updateSortSymbols();
+	}
+};
+/** @description Perform sorting with the same parameter.
+* @public
+* @fires SortableTitlePlugin#preDataSorting
+*/
+SortableTitlePlugin.prototype.refresh = function () {
+	if (this._sortStates.length) {
+		this._sortDataView();
+		this.updateSortSymbols();
+	}
+};
+
+/** @description Perform sorting with the same parameter. Alias to {@link SortableTitlePlugin#refresh}
+* @public
+* @function
+*/
+SortableTitlePlugin.prototype.restoreUserActions = SortableTitlePlugin.prototype.refresh;
+
+/** @public
+* @param {number} count
+*/
+SortableTitlePlugin.prototype.setSortableColumnCount = function (count) {
+	this._maxCount = count ? count : 1;
+	this._popSortState(this._maxCount);
+};
+
+/** Deprecated. Use getSortedColumns instead of this
+* @public
+* @return {Array.<Object>} Array of sorted column states ordered by priority
+* @see {@link SortableTitlePlugin#getSortedColumns}
+*/
+SortableTitlePlugin.prototype.getSortingStates = function () {
+	return this._sortStates; // WARNING: Exposing internal variable
+};
+
+/** @public
+*/
+SortableTitlePlugin.prototype.updateSortSymbols = function () {
+	if(!this._disabled) {
+		for (let i = this._hosts.length; --i >= 0;) {
+			this._updateSortableIndicator(i);
+		}
+	}
+};
+
+/** Get Array of fields used for sorting
+* @public
+* @return {!Array.<string>}
+*/
+SortableTitlePlugin.prototype.getDataColumnMap = function () {
+	let host = this._hosts[0];
+	let dataMap = [];
+	if (host) {
+		let colCount = host.getColumnCount();
+		for (let i = 0; i < colCount; ++i) {
+			dataMap[i] = this.getColumnSortingField(i);
+		}
+	}
+	return dataMap;
+};
+SortableTitlePlugin.prototype.getDataColumnNames = SortableTitlePlugin.prototype.getDataColumnMap;
+
+/** Set sorting field for multiple columns at once
+* @public
+* @param {Array.<string|null>} dataMap
+*/
+SortableTitlePlugin.prototype.setDataColumnMap = function (dataMap) { // TODO: This should be deprecated
+	// This should work just like "sortBy"
+	if (Array.isArray(dataMap)) {
+		for (let i = dataMap.length; --i >= 0;) {
+			this.setColumnSortingField(i, dataMap[i]);
+		}
+	}
+};
+SortableTitlePlugin.prototype.setDataColumnNames = SortableTitlePlugin.prototype.setDataColumnMap;
+
+/** @public
+* @param {number} colIndex
+* @return {string} field A field used for sorting
+*/
+SortableTitlePlugin.prototype.getColumnSortingField = function (colIndex) {
+	let sortOptions = this._getSortOptions(colIndex);
+	// options["field"] is already consolidated from field, sortBy, and sortable properties.
+	let field = (sortOptions) ? sortOptions["field"] : null;
+
+	if (field == null && !this._rowDefMode) { // Old CompositeGrid may store sorting field in DataColumnName
+		let host = this._hosts[0];
+		if (host) {
+			field = host.getColumnField(colIndex);
+			if(!field) {
+				field = host.getDataColumnName(colIndex);
+			}
+			if(field && sortOptions) {
+				sortOptions["field"] = field; // Cache for later use
+			}
+		}
+	}
+
+	return field || "";
+};
+/** 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=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, rowSorting) {
+	if (typeof colIndex == "number" && field != null) {
+		let options = this._newSortOptions(colIndex);
+		if (!field) {
+			field = "";
+		}
+		if (options["field"] !== field) {
+			options["field"] = 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
+				}
+			}
+		}
+	}
+};
+
+/** @private
+* @param {Object} sortState
+* @returns {string}
+*/
+let _toField = function(sortState) {
+	return sortState["field"] || "";
+};
+/** Return array of the fields from the currently sorted columns
+* @public
+* @return {!Array.<string>} fields of each sorting states
+*/
+SortableTitlePlugin.prototype.getColumnSortingFields = function () {
+	return this._sortStates.map(_toField);
+};
+
+/** This is deprecated in favor of setSortingSequence method. Move existing sort order to the front of sorting sequence. New sort order will be added, if the specified sort order does not exist in current sorting sequence.
+* @public
+* @param {string|number|Array.<string|number>} colIdentifier string is data column name, while number is display column index. If null value is given, first sort order is set to grid level configuration
+* @param {string=} sortOrder="a" "ascending", "descending", "none"
+* @see {@link SortableTitlePlugin#setSortingSequence}
+*/
+SortableTitlePlugin.prototype.setFirstSortOrder = function (colIdentifier, sortOrder) {
+	if (sortOrder) {
+		sortOrder = SortableTitlePlugin._toSortOrder(sortOrder);
+	} else {
+		sortOrder = "a";
+	}
+	if (sortOrder !== "a" && sortOrder !== "d") {
+		sortOrder = "a"; // There is no "none" as the first sorting order
+	}
+
+	let fields = null;
+	if (Array.isArray(colIdentifier)) {
+		fields = colIdentifier;
+	} else {
+		fields = [/** @type{string|number} */(colIdentifier)];
+	}
+
+	let len = fields.length;
+	for (let i = 0; i < len; ++i) {
+		let field = fields[i];
+		let sortingSeq = this.getSortingSequence(field).slice();
+		let index = sortingSeq.indexOf(sortOrder);
+		if (index >= 0) {
+			sortingSeq.splice(index, 1);
+		}
+		sortingSeq.unshift(sortOrder);
+		this.setSortingSequence(sortingSeq, field);
+
+	}
+};
+
+/** This is deprecated in favor of setSortingSequence method. If two-state sorting is disabled, "n" (original order) will be added to current sorting sequence. If two-state sorting is enabled, "n" will be removed from current sorting sequence.
+* @public
+* @param {boolean=} disabled
+* @see {@link SortableTitlePlugin#setSortingSequence}
+*/
+SortableTitlePlugin.prototype.disableTwoStateSorting = function (disabled) {
+	let at = this._sortingSequence.indexOf("n");
+	if(disabled === false) { // two-state sorting
+		if(at >= 0) {
+			this._sortingSequence.splice(at, 1);
+		}
+	} else { // three-state sorting
+		if(at < 0) {
+			this._sortingSequence.push("n");
+		}
+	}
+
+};
+/** @public
+* @param {boolean=} bool=true, if set to false it will be unfreeze indicator
+*/
+SortableTitlePlugin.prototype.freezeIndicator = function (bool) {
+	let prevState = this._frozenIndicator;
+	this._frozenIndicator = bool !== false;
+	if(prevState && !this._frozenIndicator) { // from frozen to unfrozen, update the ui
+		for (let i = this._hosts.length; --i >= 0;) {
+			this._updateSortableIndicator(i);
+		}
+	}
+
+};
+/** @public
+* @param {boolean=} disabled
+*/
+SortableTitlePlugin.prototype.disableSortSymbols = function (disabled) {
+	// this._sortSymbols = disabled === false;
+	// TODO: Clear existing UIs at run-time
+};
+/** @public
+* @param {boolean=} disabled
+*/
+SortableTitlePlugin.prototype.disableDataSorting = function (disabled) {
+	this._dataSorting = disabled === false;
+};
+/** @public
+* @description To allow double click action to sort. Default value is false.
+* @param {boolean=} disabled=false
+*/
+SortableTitlePlugin.prototype.disableDoubleClickToSort = function (disabled) {
+	this._dblClickAllowed = !disabled;
+};
+/** This api is deprecated. Use {@link SortableTitlePlugin.prototype.disableColumnSorting} instead
+ * @public
+* @param {ElementWrapper} cell
+* @param {boolean=} disabled
+*/
+SortableTitlePlugin.prototype.disableCellClick = function (cell, disabled) {
+	if (cell) {
+		cell.enableClass("no-sort", disabled !== false);
+	}
+};
+/** @public
+* @param {number|Array.<number>} columns
+* @param {boolean=} disabled
+*/
+SortableTitlePlugin.prototype.disableColumnSorting = function (columns, disabled) {
+	disabled = disabled !== false;
+	if (typeof columns === "number") {
+		this._disableColumnSorting(columns, disabled);
+	} else if (Array.isArray(columns)) {
+		let len = columns.length;
+		for (let i = 0; i < len; ++i) {
+			this._disableColumnSorting(columns[i] || 0, disabled);
+		}
+	}
+};
+/** @private
+* @param {number} colIndex
+* @param {boolean} disabled
+*/
+SortableTitlePlugin.prototype._disableColumnSorting = function (colIndex, disabled) {
+	let sortOptions = this._newSortOptions(colIndex);
+	if (sortOptions["disabled"] !== disabled) {
+		sortOptions["disabled"] = disabled;
+		// TODO: Remove existing sort
+	}
+};
+
+/** @public
+* @param {number=} opt_ms Delay before actual sorting in milliseconds. Setting undefined value will be 500ms. Setting 0 to instantly perform sorting
+*/
+SortableTitlePlugin.prototype.setClickDelayInterval = function (opt_ms) {
+	this._delayInterval = (opt_ms != null) ? opt_ms : 500;
+};
+
+/** @private
+* @description Get initial sort from column option `defaultSort` or `sort`
+* @param {Object} options Core model object
+* @returns {Object}
+*/
+SortableTitlePlugin.prototype._initialSortByColumnField = function (options) {
+	let columns = options["columns"];
+	let colCount = columns ?  columns.length : 0;
+	for (let i = 0; i < colCount; i++) {
+		let column = columns[i];
+		let sortOrder = column["defaultSort"]; // composite and rt grid option for default sort order
+		if (sortOrder) {
+			// TODO: Support multi-column sorting
+			return {
+				"colIndex": i,
+				"sortOrder": sortOrder
+			};
+		}
+	}
+	return null;
+};
+
+/** @private
+* @param {Object} e
+*/
+SortableTitlePlugin.prototype._onSectionAdded = function (e) {
+	if (e["sectionType"] !== "title") { return; }
+
+	let section = /** @type{ILayoutGrid} */(e["section"]);
+	if (section.getIndex() !== 0) return; // only topmost header can click
+	section.listen("mousedown", this._onMouseDown);
+	section.listen("click", this._onClickTitle.bind(this, e["sender"]), 0); // Sorting has higher priority
+};
+
+/** @private
+* @param {Object} e
+*/
+SortableTitlePlugin.prototype._onUIUpdated = function (e) {
+	if (e["sectionType"] === "title") {
+		this.updateSortSymbols();
+	}
+};
+
+/** @private
+* @param {Object} hitObj
+* @return {boolean}
+* @fires SortableTitlePlugin#preClicked
+*/
+SortableTitlePlugin.prototype._canClickToSort = function (hitObj) {
+	if(this._disabled) {
+		return false;
+	}
+
+	let grid = hitObj["grid"];
+	if (!grid || !grid.getElement()) { // The given grid has been disposed
+		return false;
+	}
+
+	let cep = this._getPlugin("CellEditingPlugin");
+	if (cep && cep["isEditing"]()) { // Current cell is being edited, so skip the sort
+		return false;
+	}
+
+	this._dispatch("preClicked", hitObj);
+	if (hitObj["cancel"]) { // User want to cancel the operation
+		return false;
+	}
+
+	let colIndex = hitObj["colIndex"];
+	let section = hitObj["section"];
+	let rowIndex = hitObj["rowIndex"];
+
+	if (!this._isCellSortable(section, colIndex, rowIndex)) {
+		return false;
+	}
+
+	return true;
+};
+
+/** @private
+* @param {Object} hitObj
+* @fires SortableTitlePlugin#preDataSorting
+* @fires SortableTitlePlugin#columnSorted
+* @fires SortableTitlePlugin#clicked
+*/
+SortableTitlePlugin.prototype._proceedSorting = function (hitObj) {
+	this._clickTimer = 0;
+
+	if (this._canClickToSort(hitObj)) {
+		let colIndex = hitObj["colIndex"];
+		// _proceedSorting() method is always produced by user clicking at the header // Thus, this operation is guaranteed to be a user action
+		this.sortColumn(colIndex, null, { "isUserAction": true });
+
+		let grid = hitObj["grid"];
+		if(grid && grid["focus"]) {
+			grid["focus"]();
+		}
+	}
+};
+
+/** @private
+* @param {MouseEvent} e
+ */
+SortableTitlePlugin.prototype._onMouseDown = function (e) {
+	if (!e.button) { // left mouse only
+		this._lastMouseDown = e.timeStamp;
+	}
+};
+/** @private
+* @param {string} pluginName
+* @return {*|null}
+ */
+SortableTitlePlugin.prototype._getPlugin = function(pluginName) {
+	let host = this._hosts[0];
+	return (host) ? host.getPlugin(pluginName) : null;
+};
+
+/** @public
+* @description Click title to sort with mouse event. This is for testing purpose.
+* @ignore
+* @param {Core} grid
+* @param {Object=} mouseEvt
+*/
+SortableTitlePlugin.prototype.clickTitleByMouse = function (grid, mouseEvt) {
+	this._onClickTitle(grid, mouseEvt);
+};
+
+/** @private
+* @param {Core} grid
+* @param {MouseEvent} e
+ */
+SortableTitlePlugin.prototype._onClickTitle = function (grid, e) {
+	if(this._disabled) {
+		return;
+	}
+	if (e.detail === 2 && !this._dblClickAllowed) { // dblclick
+		if (this._clickTimer) {
+			clearTimeout(this._clickTimer);
+			this._clickTimer = 0;
+		}
+		return; // This is registered as double click in modern browser so we ignored the click
+	} else if (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) { // If any modifier key is pressed, ignored the click
+		return;
+	}
+
+	// Avoid click by dragging
+	if (!(e.timeStamp - this._lastMouseDown < 500)) {
+		return;
+	}
+
+	let hitObj = grid.getRelativePosition(e);
+	if (!hitObj["hit"]) { // Click across multiple elements (dragging)
+		return;
+	}
+
+	let csp = this._getPlugin("ColumnSelectionPlugin");
+	if (csp && csp["isEnabled"]()) {
+		let colIndex = hitObj["colIndex"];
+		if (!csp["isSelectedColumn"](colIndex)) { // Sort only if the column is selected
+			return;
+		}
+	}
+	hitObj["target"] = e["target"];
+
+	if (this._delayInterval > 0) {
+		if (!this._clickTimer) {
+			this._clickTimer = setTimeout(
+				this._proceedSorting.bind(this, hitObj),
+				this._delayInterval
+			);
+		}
+	} else {
+		this._proceedSorting(hitObj);
+	}
+};
+
+/** @private
+* @param {number} toIndex INCLUSIVE
+* @param {Object=} opt_arg Event argument to be sent with preDataSorting event
+* @return {boolean}
+* @fires SortableTitlePlugin#preDataSorting
+*/
+SortableTitlePlugin.prototype._popSortState = function (toIndex, opt_arg) {
+	if (toIndex < 0 || this._sortStates.length <= toIndex) { return false; }
+
+	let dirty = false;
+	for (let i = this._sortStates.length; --i >= toIndex;) {
+		this._clearSortSymbols(this._sortStates[i]);
+		dirty = true;
+	}
+	this._sortStates.length = toIndex;
+	this._sortDataView(opt_arg);
+	return dirty;
+};
+
+/** @private
+* @param {string=} order "ascending", "descending", "none"
+* @return {string}
+*/
+SortableTitlePlugin._toSortOrder = function(order) {
+	if (order && typeof order === "string") {
+		order = order.charAt(0).toLowerCase();
+		if (order === "d" || order === "a") {
+			return order;
+		}
+	}
+	return "n";
+};
+
+/** Returns current sorting sequence for either a grid (all columns), or a single column.
+* @public
+* @param {(number|string)=} colRef Column index or column field. If no value is given or no field is found, grid level sorting sequence is returned
+* @return {!Array.<string>}
+*/
+SortableTitlePlugin.prototype.getSortingSequence = function (colRef) {
+	if (this._sortingSequenceMap && (colRef || colRef === 0)) {
+		if(typeof colRef !== "string") {
+			colRef = this.getColumnSortingField(/** @type{number} */(colRef));
+		}
+		if(this._sortingSequenceMap[colRef]) {
+			return /** @type{!Array.<string>} */(this._sortingSequenceMap[colRef]);
+		}
+	}
+	return this._sortingSequence;
+};
+/** Specify sorting sequence for either a grid (all columns), or a single column.
+* @public
+* @param {Array.<string>} sequence Collection of sorting direction. If null value or empty Array is given, sorting sequence will be reverted to default.
+* @param {(number|string)=} colRef Column index or column field. If no value is given, sorting sequence will be set to grid level configuration.
+* @example
+* stPlugin.setSortingSequence(["d", "a", "n"]); // Set three-state sorting and start with "d"
+* stPlugin.setSortingSequence(["a"]); // Force to sort with ascending order only and cannot change to other order
+* stPlugin.setSortingSequence(["d", "a"], "field"); // The specified column will have different sorting sequence
+*/
+SortableTitlePlugin.prototype.setSortingSequence = function (sequence, colRef) {
+	if (Array.isArray(sequence)) {
+		if(!sequence.length) {
+			sequence = null; // Empty array is treated as null value
+		}
+	} else if(sequence) { // true, 1, "string", and other datatypes are not allowed
+		return;
+	}
+
+	let field;
+	if (colRef != null) {
+		if (typeof colRef === "string") {
+			field = colRef;
+		} else if (typeof colRef === "number") {
+			field = this.getColumnSortingField(colRef);
+		}
+	}
+
+	if (sequence) {
+		// Ensure that user sequence has only valid sort order
+		let sortingSequence = sequence.map(SortableTitlePlugin._toSortOrder);
+		if (field) {
+			if (!this._sortingSequenceMap) {
+				this._sortingSequenceMap = {};
+			}
+
+			this._sortingSequenceMap[field] = sortingSequence;
+		} else {
+			this._sortingSequence = sortingSequence;
+		}
+	} else { // No sequence is specified, revert existing sequence to default
+		if(field) {
+			if (this._sortingSequenceMap) {
+				delete this._sortingSequenceMap[field];
+			}
+		} else { // Reset current sorting sequence to default
+			this._sortingSequence = this._sortingSequence.length > 2 ? ["a", "d", "n"] : ["a", "d"];
+		}
+	}
+};
+/** @public
+*/
+SortableTitlePlugin.prototype.clearAllColumnSortingSequences = function () {
+	this._sortingSequenceMap = null;
+};
+/** @private
+* @param {Object} rowA
+* @param {Object} rowB
+* @param {number} sortOrder
+* @param {*} context
+* @returns {number}
+*/
+SortableTitlePlugin.prototype._rowDefSorter = function (rowA, rowB, sortOrder, context) {
+	return this._userComparer(
+		rowA[ROW_DEF].getRowData(),
+		rowB[ROW_DEF].getRowData(),
+		sortOrder,
+		context
+	);
+};
+/** @public
+* @description Sorting all separators according to compare function. If compare function is not specified, separators will will be sort by current sorting states.
+* @param {Function} comparer Compare function
+*/
+SortableTitlePlugin.prototype.sortSeparators = function (comparer) {
+	let host = this._hosts[0];
+	let dv = host.getDataSource();
+	if(comparer){
+		if(this._rowDefMode) {
+			this._userComparer = comparer;
+			dv.sortSeparators(this._rowDefSorter);
+			this._userComparer = null;
+		} else {
+			dv.sortSeparators(comparer);
+		}
+	} else {
+		let sortLogics = dv.getSortingLogics();
+		let sortOrders = [];
+		let sortFields = [];
+		let sortStateCount = this._sortStates.length;
+		for(let i = 0; i < sortStateCount; i++){
+			let sortState = this._sortStates[i];
+			let field = this._rowDefMode ? ROW_DEF : sortState["field"];
+			sortOrders.push(sortState["sortOrder"]);
+			sortFields.push(field);
+		}
+		dv.sortSeparators(sortLogics, sortOrders, sortFields);
+	}
+};
+
+
+/** @private
+* @param {(number|string|SortableTitlePlugin.SortingDefinition)} sortingDef This could be column index, field, or SortingDefinition
+* @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._prepareSorting = function (sortingDef, sortOrder) {
+	if (!this._maxCount) {
+		return null;
+	}
+	let host = this._hosts[0];
+	if(!host) {
+		return null;
+	}
+
+	let colIndex = -1;
+	let colRef = "";
+	if(typeof sortingDef === "number") {
+		colIndex = sortingDef;
+	} else if(typeof sortingDef === "string") { // This would be either column id or field
+		colRef = sortingDef;
+		colIndex = this._getColumnIndex(colRef);
+	} else if(sortingDef && typeof sortingDef === "object") {
+		colRef = sortingDef["colId"] || sortingDef["field"];
+		if(colRef) {
+			colIndex = this._getColumnIndex(colRef);
+		} else if(typeof sortingDef["colIndex"] === "number") {
+			colIndex = sortingDef["colIndex"];
+		}
+		if(!sortOrder) {
+			sortOrder = sortingDef["sortOrder"] || sortingDef["order"] || null;
+		}
+	}
+
+	let field = "";
+	let sortLogic = null;
+	if(colIndex >= 0) {
+		field = this.getColumnSortingField(colIndex);
+		let sortOptions = this._getSortOptions(colIndex);
+		if(sortOptions) {
+			sortLogic = sortOptions["sortLogic"];
+		}
+	} else if(colRef) {
+		field = colRef; // Assume that colRef is a field and not a column id
+	}
+
+	let priority = this.getSortPriority(colIndex, field);
+	let curState = (priority >= 0) ? this._sortStates[priority] : null;
+	let curOrder = curState ? curState["sortOrder"] : "n";
+
+	// Getting next sort order
+	let nextOrder = "n";
+	if (sortOrder == null) { // Auto order switch
+		let sortingSequence = this.getSortingSequence(field);
+
+		let sequenceIndex = sortingSequence.indexOf(curOrder);
+		if (sequenceIndex < 0) {
+			sequenceIndex = 0;
+		} else {
+			sequenceIndex = (sequenceIndex + 1) % sortingSequence.length;
+		}
+		nextOrder = sortingSequence[sequenceIndex];
+	} else {
+		nextOrder = SortableTitlePlugin._toSortOrder(sortOrder);
+	}
+
+	if (curState) { // Remove existing state to rearrange priority later
+		if (curOrder === nextOrder) {
+			this.updateSortSymbols(); // Update Display
+			return null; // Nothing has changed
+		}
+
+		this._sortStates.splice(priority, 1); // Remove sort states
+		this._clearSortSymbols(curState); // Clear any previous symbols
+	}
+
+	if (nextOrder === "a" || nextOrder === "d") { // Reorder sort states
+		if(colIndex < 0 && !field) {
+			return null;
+		}
+		if (!curState) {
+			curState = {};
+			let colId = host.getColumnId(colIndex);
+			if(colId) {
+				curState["colId"] = colId;
+			}
+		}
+		curState["field"] = field;
+		curState["sortLogic"] = sortLogic || null;
+
+		this._sortStates.push(curState); // Latest sorting have lowest priority (multiColumn sorting)
+	}
+
+	if (curState) { // Update current state
+		if(curOrder !== "n") {
+			curState["prevOrder"] = curOrder; // For backward compatibility
+		} else {
+			delete curState["prevOrder"];
+		}
+		curState["order"] = nextOrder; // For backward compatibility
+		curState["sortOrder"] = nextOrder;
+	}
+
+	let clearedSortColIndexes = [];
+	if (this._maxCount > 0) {
+		while (this._sortStates.length > this._maxCount) { // Shift excess
+			let index = this._clearSortSymbols(this._sortStates.shift());
+			if (index !== null) {
+				clearedSortColIndexes.push(index);
+			}
+		}
+	}
+
+	return { // TODO: Refactor this code as it is only used by "columnSorted" event (unnecessarily complex).
+		"colIndex": colIndex,
+		"sortedField": field,
+		"sortOrder": nextOrder || "n",
+		"prevOrder": curOrder,
+		"clearedSortColIndexes": clearedSortColIndexes
+	};
+};
+
+/** @private
+* @param {Object|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
+*/
+SortableTitlePlugin.prototype._sortColumn = function (states, opt_arg) {
+	if(!states) {
+		return;
+	}
+
+	this._sortDataView(opt_arg); // Update Data
+	this.updateSortSymbols(); // Update Display
+
+	let evtArg = null;
+	if(Array.isArray(states)) {
+		let len = states.length;
+		for(let i = 0; i < len; ++i) {
+			let state = states[i];
+			if(state) {
+				if(evtArg) {
+					if(!evtArg["colIndices"]) {
+						evtArg["colIndices"] = [];
+						evtArg["sortedFields"] = [];
+						evtArg["sortOrders"] = [];
+						evtArg["prevOrders"] = [];
+					}
+
+					evtArg["colIndices"].push(state["colIndex"]);
+					evtArg["sortedFields"].push(state["sortedField"]);
+					evtArg["sortOrders"].push(state["sortOrder"]);
+					evtArg["prevOrders"].push(state["prevOrder"]);
+				} else {
+					evtArg = state;
+				}
+			}
+		}
+		evtArg = states[0];
+	} else {
+		evtArg = states;
+	}
+	this._dispatch("columnSorted", evtArg);
+};
+
+/** @private
+* @param {Object} e
+*/
+SortableTitlePlugin.prototype._onColumnAdded = function (e) {
+	let t = this;
+	let colIndex = e["colIndex"];
+	let column = e["context"] || {};
+
+	let sortable = !!t._sortableColumns;
+	let field = column["field"];
+	let sortBy = column["sortBy"];
+
+	if (sortBy != null) { // composite grid option
+		sortable = !!sortBy;
+		field = sortBy;
+	}
+	if (column["sortable"] != null) { // rt grid option
+		sortable = !!column["sortable"];
+	}
+
+	let 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;
+	}
+
+	let sortingSequence = column["sortingSequence"];
+	if (sortingSequence != null && field) { // Make sure that column config does not affect grid level config
+		t.setSortingSequence(sortingSequence, field);
+	}
+
+	if (sortable) { // TODO: Check if empty field should be sortable
+		t.setColumnSortingField(colIndex, field, sortLogic, column["rowSorting"]);
+	} else {
+		t.disableColumnSorting(colIndex, true);
+	}
+
+	let sortOrder = column["sortOrder"] || column["sort"];
+	if(sortOrder != null) {
+		sortOrder = SortableTitlePlugin._toSortOrder(sortOrder); // Invalid input will return "n"
+		if(sortOrder !== "n") {
+			t.clearSortState(); // clear previous sorting state
+			t.sortColumn(colIndex, sortOrder);
+		}
+	}
+};
+
+/** @private
+* @param {Object} e
+* @fires SortableTitlePlugin#preDataSorting
+* @fires SortableTitlePlugin#columnSorted
+*/
+SortableTitlePlugin.prototype._onColumnRemoved = function (e) {
+	let sortCount = this._sortStates.length;
+	if (!sortCount) {
+		return;
+	}
+	let colId = e["colId"];
+	if (!colId) {
+		return;
+	}
+	// WARNING: columnRemoved event could be fired repeatedly. Sorting could be triggered multiple times
+	for(let i = 0; i < sortCount; ++i) {
+		let sortState = this._sortStates[i];
+		if (sortState["colId"] === colId) {
+			this._sortStates.splice(i, 1);
+			this._clearSortSymbols(sortState);
+			this._sortDataView();
+			break;
+		}
+	}
+};
+
+/** @private
+* @return {string}
+*/
+SortableTitlePlugin._toRowDefField = function() {
+	return ROW_DEF;
+};
+/** @private
+* @param {Object=} opt_action Action that raised the sort. This is optional
+* @fires SortableTitlePlugin#preDataSorting
+*/
+SortableTitlePlugin.prototype._sortDataView = function (opt_action) {
+	opt_action = opt_action || {};
+	this._dispatch("preDataSorting", opt_action);
+
+	if (!this._dataSorting) { return; }
+
+	let sortCount = this._sortStates.length;
+	if(this._userManagedLogic && sortCount > 1) { // The logic is managed by the user. There is no point in using multi-column sorting
+		sortCount = 1;
+	}
+	let orders = null;
+	let sortLogics = null;
+	let c_ref = null;
+	if (sortCount) {
+		orders = new Array(sortCount);
+		sortLogics = new Array(sortCount);
+		for (let i = 0; i < sortCount; ++i) {
+			orders[i] = this._sortStates[i]["sortOrder"];
+			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);
+		} else {
+			c_ref = this.getColumnSortingFields();
+		}
+		if(this._userManagedLogic && c_ref.length > 1) {
+			c_ref = c_ref.slice(0, 1);
+		}
+	}
+
+	// Perform sorting even if there is no sort state
+	for (let j = this._hosts.length; --j >= 0;) {
+		let host = this._hosts[j];
+		// TODO: In wrap mode all hosts does not need to be sorted
+		let dataSource = host.getDataSource();
+		if (dataSource) {
+			let noOptimization = opt_action["isUserAction"] == true;
+			dataSource.sort(c_ref, orders, sortLogics, noOptimization); // If length === 0 data is not sorted
+		}
+	}
+};
+/**`section` and `cell` variable in this scope can either be instance of LayoutGrid or SectionWriter (from tr-grid-printer).
+ * Need to force calling public methods (section["isColumnActive"] and section["getCell"]) so it works while being minified.
+ * @private
+* @param {Object} state
+* @return {number|null} The column index of cleared sort
+*/
+SortableTitlePlugin.prototype._clearSortSymbols = function (state) {
+	let cells = state["targetCells"];
+	if (!cells) {
+		return null;
+	}
+	let colIndex = null;
+	for (let j = cells.length; --j >= 0;) {	// One single cell per host
+		let cell = cells[j];
+		cell["removeClass"]("sorting");
+		cell["removeClass"]("sortable");
+		cell["removeFloatingIcon"]("sort-symbol");
+		cell["removeFloatingIcon"]("priority-symbol");
+		let section;
+		if(colIndex == null && (section = cell["getSection"]())) {
+			colIndex = section["getColumnIndex"](cell["getParent"]());
+		}
+	}
+	cells.length = 0;
+	return colIndex;
+};
+/**`section` and `cell` variable in this scope can either be instance of LayoutGrid or SectionWriter (from tr-grid-printer).
+ * Need to force calling public methods (section["getColumnCount"] and section["getCell"]) so it works while being minified.
+ * @private
+* @param {number} hostIndex
+*/
+SortableTitlePlugin.prototype._updateSortableIndicator = function (hostIndex) {
+	let t = this;
+	let host = t._hosts[hostIndex];
+	if (!host || this._frozenIndicator) { return; }
+
+	let section = host.getSection("title");
+	if (section == null) { return; }
+	let colCount = section["getColumnCount"]();
+	for (let col = colCount; --col >= 0;) {
+
+		let rowCount = section["getRowCount"]();
+		for (let r = 0; r < rowCount; r++) {
+
+			let cell = section["getCell"](col, r, true);
+			if (!cell) { continue; }
+
+			// Clear all sorting icons
+			cell["removeClass"]("sorting");
+			cell["removeClass"]("sortable");
+			cell["removeClass"]("asc");
+			cell["removeClass"]("desc");
+			cell["removeClass"]("edge-indicator");
+			cell["removeFloatingIcon"]("sort-symbol");
+			cell["removeFloatingIcon"]("priority-symbol");
+			cell["removeFloatingIcon"]("sortable-indicator");
+
+			if (r !== rowCount - 1) { continue; } // Sort icon should only appear in last row of section otherwise skip
+			if (!t._isCellSortable(section, col, r)) { continue; }
+
+			cell["addClass"]("sortable");
+
+			let priority = t.getSortPriority(col);
+			let state = t._sortStates[priority];
+
+			let isSorting = state && state["sortOrder"] !== "n";
+			let symbol, icon;
+			if (isSorting) {
+				if (!state["targetCells"]) {
+					state["targetCells"] = [];
+				}
+
+				state["targetCells"][hostIndex] = cell; // NOTE: This can be improved.
+
+				if (state["sortOrder"] === "a") {
+					cell["addClass"]("asc");
+				} else {
+					cell["addClass"]("desc");
+				}
+				cell["addClass"]("sorting");
+
+				if(t._solarTheme) { // Insert icon when use solar theme
+					let textContent;
+
+					if (state["sortOrder"] === "a") {
+						textContent = CODE_UP;
+						icon = SortableTitlePlugin._icons["ascending"];
+					} else {
+						textContent = CODE_DOWN;
+						icon = SortableTitlePlugin._icons["descending"];
+					}
+
+					symbol = t._createIconElem(icon, textContent);
+					symbol.className = "sort-symbol";
+					cell["insertFloatingIcon"](symbol, 0);
+				} else {
+					cell["addClass"]("edge-indicator");
+				}
+
+				if (t._sortStates.length > 1) {
+					symbol = document.createElement("span");
+					symbol.className = "priority-symbol";
+					symbol.textContent = priority + 1;
+					cell["insertFloatingIcon"](symbol, 1);
+				}
+			} else if (t._sortableIndicator) { // Can sort but currently not sorting
+				icon = SortableTitlePlugin._icons["sortable"];
+				symbol = t._createIconElem(icon, CODE_DIAMOND);
+				symbol.className = "sortable-indicator";
+				cell["insertFloatingIcon"](symbol, 0);
+			}
+		}
+	}
+};
+
+/** @private
+* @param {string} icon - valid elf icon name
+* @param {string} fallback - a fallback in case icon in not defined
+* @return {Element}
+*/
+SortableTitlePlugin.prototype._createIconElem = function (icon, fallback) {
+	let elem;
+	if (!icon || typeof icon !== "string") {
+		elem = document.createElement("span");
+		elem.textContent = fallback;
+	} else {
+		elem = document.createElement("ef-icon");
+		elem.setAttribute("icon", icon);
+	}
+	return elem;
+};
+
+/** @private
+* @param {string|number|Object} colRef This can be sortState, column id, column field, or column index
+* @return {number}
+*/
+SortableTitlePlugin.prototype._getColumnIndex = function (colRef) {
+	if(colRef != null) {
+		let host = this._hosts[0];
+		if(host) {
+			if(typeof colRef === "number") {
+				return colRef;
+			} else if(typeof colRef === "string") {
+				return host.getColumnIndex(colRef);
+			} else {
+				return host.getColumnIndex(colRef["colId"]);
+			}
+		}
+	}
+	return -1;
+};
+
+/** @private
+* @param {string|number} colRef
+* @return {string} column id or empty string for not found
+*/
+SortableTitlePlugin.prototype._getColumnId = function (colRef) {
+	let host = this._hosts[0];
+	if(host && colRef != null) {
+		return host.getColumnId(colRef);
+	}
+	return "";
+};
+
+/** @private
+* @param {number} colIndex
+* @return {Object}
+*/
+SortableTitlePlugin.prototype._getSortOptions = function (colIndex) {
+	let host = this._hosts[0];
+	if (host) {
+		return host.getColumnData(colIndex)["sortableTitle"] || null;
+	}
+	return null;
+};
+/** @private
+* @param {number} colIndex
+* @return {!Object}
+*/
+SortableTitlePlugin.prototype._newSortOptions = function (colIndex) {
+	let host = this._hosts[0];
+	let sortOptions = null;
+	if (host && colIndex >= 0) {
+		let colData = host.getColumnData(colIndex); // colData is guaranteed to exist
+		sortOptions = colData["sortableTitle"];
+		if (!sortOptions) {
+			sortOptions = colData["sortableTitle"] = {};
+		}
+	}
+	return sortOptions || {};
+};
+/** @private
+* @param {ILayoutGrid} section
+* @param {number} colIndex
+* @param {number} rowIndex
+* @return {boolean}
+*/
+SortableTitlePlugin.prototype._isCellSortable = function (section, colIndex, rowIndex) {
+	let options = this._getSortOptions(colIndex);
+	if (options) {
+		if (options["disabled"]) {
+			return false;
+		}
+
+		let field = options["field"];
+		if (field != null) {
+			if (!field) {
+				return false;
+			}
+		}
+	}
+
+	let targetCell = section["getCell"](colIndex, rowIndex, true);
+	if (targetCell.hasClass("no-sort")) {
+		return false; // The cell is not allowed for sorting
+	}
+	let bottomCell = section["getCell"](colIndex, section["getRowCount"]() - 1, true);
+	if (targetCell !== bottomCell) {
+		return false;
+	}
+	let parentCell = targetCell.getParent();
+	let classList = parentCell["classList"];
+	// "collapsed" class in column element only enable by column stack in spreading mode
+	if (classList.contains("collapsed")) { // HACK: unsortable for collapsed stack in spreading mode
+		return false;
+	}
+
+	return true; // By default all cells are sortable
+};
+
+SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
+
+export default SortableTitlePlugin;
+export { SortableTitlePlugin };