@refinitiv-ui/efx-grid 6.0.0-next.0

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

@@ -0,0 +1,1707 @@
+/* eslint-disable */
+import Ext from "../../../../tr-grid-util/es6/Ext.js";
+import Plugin from "./Plugin.js";
+import Core from "../Core.js";
+import ILayoutGrid from "../ILayoutGrid.js";
+import ElementWrapper from "../components/ElementWrapper.js";
+import DataTable from "../../data/DataTable.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
+*/
+
+/** @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 });
+	}
+};
+Ext.inherits(SortableTitlePlugin, 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;
+
+/** 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 {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.InitialSort>)=} 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=false If enabled, double click on column title to sort
+ * @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 override threeStatesSorting
+ */
+SortableTitlePlugin.Options;
+
+/** 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._isDisableDoubleClickToSort = true;
+
+/** @private
+* @type {number}
+*/
+SortableTitlePlugin.prototype._clickTimer = 0;
+/** @private
+* @type {number}
+*/
+SortableTitlePlugin.prototype._delayInterval = 0;
+/** @private
+* @type {number}
+*/
+SortableTitlePlugin.prototype._lastMouseDown = 0;
+/** @private
+* @type {SortableTitlePlugin.InitialSort}
+*/
+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;
+/** 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 {!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
+*/
+var CODE_UP = "\u25B2";
+/** @type {string}
+* @private
+* @const
+*/
+var CODE_DOWN = "\u25BC";
+/** @type {string}
+* @private
+* @const
+*/
+var CODE_DIAMOND = "\u25CA";
+
+/** @override */
+SortableTitlePlugin.prototype.getName = function () {
+	return "SortableTitlePlugin"; // Read Only
+};
+
+/**
+* @override
+* @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);
+};
+
+/** @override */
+SortableTitlePlugin.prototype.unload = function (host) {
+	var 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 () {
+	var t = this;
+
+	// Data source not available during initialization
+	t.setSortLogics(t._sortLogic);
+
+	// Sort columns if initialSort are specified initially
+	if (t._initialSort != null) {
+		var initialSort = t._initialSort;
+		if (!Array.isArray(initialSort)) {
+			initialSort = [initialSort];
+		}
+		if (t._maxCount === 1) {
+			initialSort = initialSort.slice(0, 1); // Ensure only 1 item is sorted in non-multiColumn mode
+		}
+		t.sortColumns(initialSort);
+	}
+};
+
+/** @public
+* @param {Object=} options Core model object
+*/
+SortableTitlePlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	var t = this;
+
+	var icons = options["icons"];
+	if (icons != null) {
+		if (icons["sorting"]) {
+			SortableTitlePlugin._icons = icons["sorting"];
+		}
+	}
+	var themeName = options["themeName"];
+	if (!themeName || themeName.indexOf("solar") >= 0) {
+		t._solarTheme = true;
+	} else {
+		t._solarTheme = false;
+	}
+	t._initialSort = t._initialSortByColumnField(options);
+
+	var extOptions = options["sorting"];
+	if (!extOptions) {
+		return;
+	}
+
+	if(extOptions["ROW_DEF"]) {
+		this._rowDefMode = true;
+	}
+	if(extOptions["userManagedLogic"]) {
+		t._userManagedLogic = true;
+	}
+
+	var 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 (var field in val) {
+			if (typeof val[field] === "function") {
+				t._sortLogic[field] = val[field];
+			}
+		}
+	}
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
+	var obj = gridOptions || {};
+
+	var columns = obj["columns"];
+	if (!columns) {
+		columns = obj["columns"] = [];
+	}
+
+	var host = this._hosts[0];
+
+	if (!host) return obj;
+
+	var len = host.getColumnCount();
+	var col, opt, field;
+	for(var i = 0; i < len; ++i) {
+		col = columns[i];
+		if (!col) {
+			col = columns[i] = {};
+		}
+
+		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) {
+			col["sortBy"] = field;
+			if (this._sortingSequenceMap && this._sortingSequenceMap[field]) {
+				col["sortingSequence"] = this._sortingSequenceMap[field];
+			}
+		}
+
+	}
+
+	var extOptions = obj["sorting"];
+	if(!extOptions) {
+		extOptions = obj["sorting"] = {};
+	}
+
+	extOptions["initialSort"] = this.getSortedColumns();
+	extOptions["sortableIndicator"] = this._sortableIndicator;
+	if(this._maxCount !== 1) {
+		extOptions["multiColumn"] = this._maxCount === -1 ? true : this._maxCount;
+	}
+	extOptions["disableDoubleClickToSort"] = this._isDisableDoubleClickToSort;
+	extOptions["sortableColumns"] = this._sortableColumns;
+	extOptions["indicatorOnly"] = !this._dataSorting;
+	// extOptions["mode"] = this._mode;
+	if(this._disabled) {
+		extOptions["disabled"] = true;
+	}
+
+	var sortingSeq = this._sortingSequence;
+	var 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();
+	}
+
+	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 = {};
+	}
+
+	var menus = config["menus"];
+	if (!menus) {
+		menus = config["menus"] = [];
+	}
+
+	var menu = menus[0];
+	if (!menu) {
+		menu = menus[0] = {
+			"menuItems": []
+		};
+	}
+
+	var order = this.getSortOrder(colIndex);
+
+	// Menu items for this extension
+	var 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) {
+	var host = this._hosts[0];
+	var columnMenuExt = host["getPlugin"]("ColumnMenuPlugin");
+	columnMenuExt["hide"]();
+
+	var value = e["currentTarget"]["value"];
+	var colIndex = value["colIndex"];
+	var 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) {
+		var host = this._hosts[0];
+		if (host) {
+			var ds = host.getDataSource();
+			for (var 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") {
+		var host = this._hosts[0];
+		if (host) {
+			var 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) {
+	var priority = (colIndex != null) ? this.getSortPriority(colIndex) : 0;
+	var state = this._sortStates[priority];
+	var 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) {
+	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;
+};
+/** @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
+*/
+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;
+			}
+		}
+	}
+	return -1;
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+SortableTitlePlugin.prototype.isColumnSorted = function (colIndex) {
+	return this.getSortPriority(colIndex) >= 0;
+};
+/** @public
+* @return {Array.<Object> | null} Array of object with "colIndex" and "sortOrder"
+*/
+SortableTitlePlugin.prototype.getSortedColumns = function () {
+	var len = this._sortStates.length;
+	if (len <= 0) { return null; }
+
+	var arr = new Array(len);
+	for (var i = 0; i < len; ++i) {
+		var colIndex = this.getSortedColumnIndex(i);
+		arr[i] = {
+			"colIndex": colIndex,
+			"sortOrder": this._sortStates[i]["sortOrder"] || "n"
+		};
+	}
+	return arr;
+};
+
+/** @public
+* @param {number} colIndex
+* @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);
+		}
+	}
+};
+
+/** Sort multiple columns at once
+* @public
+* @param {Array.<SortableTitlePlugin.InitialSort>} 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)) {
+		var states = [];
+		for (var i = 0; i < sortOptions.length; i++) {
+			var opt = sortOptions[i];
+			var state = this._preSortColumn(opt["colIndex"], opt["sortOrder"] || opt["order"]);
+			if (state) {
+				states[i] = state;
+			}
+		}
+		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) {
+	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
+* @override
+* @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 (var i = this._hosts.length; --i >= 0;) {
+			this._updateSortableIndicator(i);
+		}
+	}
+};
+
+/** Get Array of fields used for sorting
+* @public
+* @return {!Array.<string>}
+*/
+SortableTitlePlugin.prototype.getDataColumnMap = function () {
+	var host = this._hosts[0];
+	var dataMap = [];
+	if (host) {
+		var colCount = host.getColumnCount();
+		for (var 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 (var 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) {
+	var options = this._getSortOptions(colIndex);
+	// options["field"] is already consolidated from field, sortBy, and sortable properties.
+	var field = (options) ? options["field"] : null;
+
+	if (field == null && !this._rowDefMode) { // Old CompositeGrid may stored sorting field in DataColumnName
+		var host = this._hosts[0];
+		if (host) {
+			field = host.getDataColumnName(colIndex);
+		}
+	}
+
+	return field || "";
+};
+/** @public
+* @param {number} colIndex
+* @param {string|null} field A field used for sorting
+* @param {Function=} sortLogic
+*/
+SortableTitlePlugin.prototype.setColumnSortingField = function (colIndex, field, sortLogic) {
+	if (typeof colIndex == "number" && field != null) {
+		var 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;
+			}
+		}
+	}
+};
+/** @public
+* @return {!Array.<string>} fields of each sorting states
+*/
+SortableTitlePlugin.prototype.getColumnSortingFields = function () {
+	var ary = [];
+	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);
+			}
+		}
+	}
+	return ary;
+};
+
+/** 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
+	}
+
+	var fields = null;
+	if (Array.isArray(colIdentifier)) {
+		fields = colIdentifier;
+	} else {
+		fields = [/** @type{string|number} */(colIdentifier)];
+	}
+
+	var len = fields.length;
+	for (var i = 0; i < len; ++i) {
+		var field = fields[i];
+		var sortingSeq = this.getSortingSequence(field).slice();
+		var 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) {
+	var 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=} 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
+*/
+SortableTitlePlugin.prototype.disableDoubleClickToSort = function (disabled) {
+	this._isDisableDoubleClickToSort = !!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)) {
+		var len = columns.length;
+		for (var i = 0; i < len; ++i) {
+			this._disableColumnSorting(columns[i] || 0, disabled);
+		}
+	}
+};
+/** @private
+* @param {number} colIndex
+* @param {boolean} disabled
+*/
+SortableTitlePlugin.prototype._disableColumnSorting = function (colIndex, disabled) {
+	var 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 Pre-process columns options to support both composite and rt-grid backward compatible
+* @param {number} colIndex
+* @param {Object} options
+* @returns {Object}
+*/
+SortableTitlePlugin.prototype._prepareColumnOptions = function (colIndex, options) {
+	var t = this;
+	var column = options || {};
+	var colOption = {
+		"colIndex": colIndex,
+		"field": column["field"],
+		"sortable": !!t._sortableColumns
+	};
+
+	if (column["sortBy"] != null) { // composite grid option
+		colOption["sortable"] = !!column["sortBy"];
+		colOption["sortBy"] = column["sortBy"];
+	}
+	if (column["sortable"] != null) { // rt grid option
+		colOption["sortable"] = !!column["sortable"];
+	}
+
+	colOption["sortLogic"] = column["sortLogic"] || column["sortingLogic"] || column["sorter"]; // Originally, rt grid support option for sortLogic by column
+	colOption["sort"] = column["defaultSort"] || column["sort"]; // composite and rt grid option for default sort order
+	return colOption;
+};
+
+/** @private
+* @description Get initial sort from column option `defaultSort` or `sort`
+* @param {Object} options Core model object
+* @returns {Object}
+*/
+SortableTitlePlugin.prototype._initialSortByColumnField = function (options) {
+	var t = this;
+	var columns = options["columns"] || [];
+	var initialSort = null;
+	for (var i = 0; i < columns.length; i++) {
+		var col = t._prepareColumnOptions(i, columns[i]);
+		var val = col["sort"];
+		if (val) {
+			initialSort = {
+				"colIndex": col["colIndex"],
+				"sortOrder": val
+			};
+		}
+	}
+	return initialSort;
+};
+
+/** @private
+* @param {Object} e
+*/
+SortableTitlePlugin.prototype._onSectionAdded = function (e) {
+	if (e["sectionType"] !== "title") { return; }
+
+	var 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;
+	}
+
+	var grid = hitObj["grid"];
+	if (!grid || !grid.getElement()) { // The given grid has been disposed
+		return false;
+	}
+
+	var 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;
+	}
+
+	var colIndex = hitObj["colIndex"];
+	var section = hitObj["section"];
+	var 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)) {
+		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);
+		if (state) {
+			this._sortColumn([state], { "isUserAction": true });
+		}
+
+		if (this._hasListener("clicked")) {
+			var ce = {};
+			ce["colIndex"] = colIndex;
+			ce["sortOrder"] = this.getSortOrder(colIndex);
+			ce["dataColumnName"] = this.getColumnSortingField(colIndex);
+			this._dispatch("clicked", ce);
+		}
+	}
+};
+
+/** @private
+* @param {MouseEvent} e
+ */
+SortableTitlePlugin.prototype._onMouseDown = function (e) {
+	if (!e.button) { // left mouse only
+		this._lastMouseDown = e.timeStamp;
+	}
+};
+/** @private
+* @param {Core} grid
+* @param {MouseEvent} e
+ */
+SortableTitlePlugin.prototype._onClickTitle = function (grid, e) {
+	if(this._disabled) {
+		return;
+	}
+	if (e.detail === 2 && this._isDisableDoubleClickToSort) { // 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;
+	}
+
+	var hitObj = grid.getRelativePosition(e);
+	if (!hitObj["hit"]) { // Click across multiple elements (dragging)
+		return;
+	}
+
+	var csp = this._getPlugin("ColumnSelectionPlugin");
+	if (csp && csp["isEnabled"]()) {
+		var 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; }
+
+	var dirty = false;
+	for (var 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;
+	}
+
+	var 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
+		var 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 {number} colIndex
+* @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; }
+
+	var priority = this.getSortPriority(colIndex);
+	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 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
+		// TODO: Other states in curState should be cleared as it is actually a sortOptions object
+	}
+
+	if (nextOrder === "a" || nextOrder === "d") { // Reorder sort states
+		if (!curState) {
+			// TODO: Sort state object should not be sortOptions
+			curState = this._newSortOptions(colIndex); // This may come with sortLogic
+		}
+
+		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;
+	}
+
+	var clearedSortColIndexes = [];
+	if (this._maxCount > 0) {
+		while (this._sortStates.length > this._maxCount) { // Shift excess
+			var 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": sortingField,
+		"sortOrder": nextOrder || "n",
+		"prevOrder": curOrder,
+		"clearedSortColIndexes": clearedSortColIndexes
+	};
+};
+
+/** @private
+* @param {Array.<Object>} states States from _preSortColumn 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) {
+	this._sortDataView(opt_arg); // Update Data
+	this.updateSortSymbols(); // Update Display
+
+	var res = states[0] || {};
+	var len = states.length;
+	if (len > 1) {
+		res["colIndices"] = new Array(len);
+		res["sortedFields"] = new Array(len);
+		res["sortOrders"] = new Array(len);
+		res["prevOrders"] = new Array(len);
+		for (var i = 0; i < len; i++) {
+			var obj = states[i];
+			res["colIndices"][i] = obj["colIndex"];
+			res["sortedFields"][i] = obj["sortedField"];
+			res["sortOrders"][i] = obj["sortOrder"];
+			res["prevOrders"][i] = obj["prevOrder"];
+		}
+	}
+	this._dispatch("columnSorted", res);
+};
+
+/** @override
+* @ignore
+*/
+SortableTitlePlugin.prototype._onColumnAdded = function (e) {
+	var t = this;
+	var colIndex = e["colIndex"];
+	var context = e["context"];
+	var col = t._prepareColumnOptions(colIndex, context);
+	var field = col["sortBy"] || col["field"];
+	var logic = col["sortLogic"] || t._sortLogic[field];
+
+	var sortingSequence = context ? context["sortingSequence"] : null;
+	if (sortingSequence != null && field) { // Make sure that column config does not affect grid level config
+		t.setSortingSequence(sortingSequence, field);
+	}
+
+	if (col["sortable"]) {
+		t.setColumnSortingField(colIndex, field, typeof logic === "function" ? logic : null);
+	} else {
+		t.disableColumnSorting(colIndex, true);
+	}
+};
+
+/** @override
+* @ignore
+* @fires SortableTitlePlugin#preDataSorting
+* @fires SortableTitlePlugin#columnSorted
+*/
+SortableTitlePlugin.prototype._onColumnRemoved = function (e) {
+	if (!e["atTheMiddle"]) { return; }
+
+	var sortCount = this._sortStates.length;
+	if (!sortCount) {
+		return;
+	}
+	var colData = e["columnData"];
+	var sortOptions = colData ? colData["sortableTitle"] : null;
+	var sortOrder = sortOptions ? sortOptions["sortOrder"] : "";
+
+	// TODO: columnRemoved event could be fired repeatedly and triggers multiple sorts
+	if (sortOrder) {
+		var priority = this._sortStates.indexOf(sortOptions);
+		if (priority >= 0) {
+			this._sortStates.splice(priority, 1);
+		}
+		this._clearSortSymbols(sortOptions);
+		this._sortDataView();
+	}
+};
+
+/** @private
+* @param {Object=} sortState
+* @return {string}
+*/
+SortableTitlePlugin._toRowDefField = function(sortState) {
+	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; }
+
+	var sortCount = this._sortStates.length;
+	var orders = null;
+	var sortLogics = null;
+	var c_ref = null;
+	if (sortCount) {
+		orders = new Array(sortCount);
+		sortLogics = new Array(sortCount);
+		for (var i = 0; i < sortCount; ++i) {
+			orders[i] = this._sortStates[i]["sortOrder"];
+			sortLogics[i] = this._sortStates[i]["sortLogic"];
+		}
+		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();
+		}
+	}
+
+	// Perform sorting even if there is no sort state
+	for (var j = this._hosts.length; --j >= 0;) {
+		var host = this._hosts[j];
+		// TODO: In wrap mode all hosts does not need to be sorted
+		var dataSource = host.getDataSource();
+		if (dataSource) {
+			var 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) {
+	var cells = state["targetCells"];
+	if (!cells) {
+		return null;
+	}
+	var colIndex = null;
+	for (var j = cells.length; --j >= 0;) {	// One single cell per host
+		var cell = cells[j];
+		cell["removeClass"]("sorting");
+		cell["removeClass"]("sortable");
+		cell["removeFloatingIcon"]("sort-symbol");
+		cell["removeFloatingIcon"]("priority-symbol");
+		var 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) {
+	var t = this;
+	var host = t._hosts[hostIndex];
+	if (!host) { return; }
+
+	var section = host.getSection("title");
+	if (section == null) { return; }
+	var sectionCount = section["getColumnCount"]();
+	for (var col = sectionCount; --col >= 0;) {
+
+		var rowCount = section["getRowCount"]();
+		for (var r = 0; r < rowCount; r++) {
+
+			var 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");
+
+			var priority = t._getColumnSortingStatePriority(col);
+			var state = t._sortStates[priority];
+
+			var isSorting = state && state["sortOrder"] !== "n";
+			var 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
+					var 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);
+
+					if (t._sortStates.length > 1) {
+						symbol = document.createElement("span");
+						symbol.className = "priority-symbol";
+						symbol.textContent = priority + 1;
+						cell["insertFloatingIcon"](symbol, 1);
+					}
+				} else {
+					cell["addClass"]("edge-indicator");
+				}
+			} 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) {
+	var 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 {number} colIndex
+* @return {number} -1 means not found
+*/
+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;
+	}
+	return -1;
+};
+
+/** @private
+* @param {number} colIndex
+* @return {Object}
+*/
+SortableTitlePlugin.prototype._getSortOptions = function (colIndex) {
+	var host = this._hosts[0];
+	if (host) {
+		var colData = host.getColumnData(colIndex);
+		if (colData) {
+			return colData["sortableTitle"];
+		}
+	}
+	return null;
+};
+/** @private
+* @param {number} colIndex
+* @return {!Object}
+*/
+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, {});
+		}
+		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) {
+	var options = this._getSortOptions(colIndex);
+	if (options) {
+		if (options["disabled"]) {
+			return false;
+		}
+
+		var field = options["field"];
+		if (field != null) {
+			if (!field) {
+				return false;
+			}
+		}
+	}
+
+	var targetCell = section["getCell"](colIndex, rowIndex, true);
+	if (targetCell.hasClass("no-sort")) {
+		return false; // The cell is not allowed for sorting
+	}
+	var bottomCell = section["getCell"](colIndex, section["getRowCount"]() - 1, true);
+	if (targetCell !== bottomCell) {
+		return false;
+	}
+
+	return true; // By default all cells are sortable
+};
+
+SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
+
+export default SortableTitlePlugin;
+export { SortableTitlePlugin };