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

package/lib/tr-grid-row-filtering/es6/RowFiltering.js

@@ -0,0 +1,2568 @@
+import {Ext} from "../../tr-grid-util/es6/Ext.js";
+import {GridPlugin} from "../../tr-grid-util/es6/GridPlugin.js";
+import {FilterBuilder, stringToDateObject} from "../../tr-grid-util/es6/FilterBuilder.js";
+import {FilterOperators} from "../../tr-grid-util/es6/FilterOperators.js";
+import {ElfUtil} from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss, cloneObject } from "../../tr-grid-util/es6/Util.js";
+
+/** @event RowFilteringPlugin#click
+* @description click event is dispatched when a user clicks the column filter icon.
+*/
+/** @event RowFilteringPlugin#beforeDialogOpened
+* @description Fired before the opening of filter dialog. This can be used to cancel the operation or set a dialog configuration at runtime.
+* @property {number} colIndex Column index
+* @property {string} field Field
+* @property {Object} grid Core grid instance
+* @example
+* beforeDialogOpened: function(e) {
+*   e.cancel = true; // To cancel the operation
+* },
+* beforeDialogOpened: function(e) {
+*   e.dialogOptions = { sortLogic: func }; // To set a dialog configuration
+* },
+*/
+/** @event RowFilteringPlugin#dialogCommitted
+* @description Fired after a user clicks done button from the filter dialog or changes sort order.
+* @property {number} colIndex
+* @property {Object=} value When filter is changed, the change will be passed through this property
+* @property {number=} sortOrder When sort order is changed, the change will be passed through this property
+* @property {string=} fieldDataType
+*/
+/** @event RowFilteringPlugin#iconCreated
+* @description iconCreated event is dispatched when a new column filter icon is created.
+* @property {Element} icon Filter icon element
+* @property {number} colIndex Column index
+* @property {Object} grid Core grid instance
+*/
+/** @event RowFilteringPlugin#filterChanged
+* @description Fired whenever global or column filter is changed by either adding or removing. The change will not immediately applied to grid's data view
+* @property {string} filterType This can be either "global" or "column"
+* @property {string} changeType This can be either "add" or "remove"
+* @property {number} colIndex Column index
+* @property {string} field specified by the current column
+*/
+/** @event RowFilteringPlugin#refreshed
+* @description Fired after new filter is applied to grid's data view
+*/
+
+/** @callback RowFilteringPlugin~FilterLogic
+* @description Logic used to filter in or out on each row
+* @param {Object.<string, *>} rowData Row data is an object with field as key and user data as value
+* @param {string} rid Row Id used in DataView
+* @param {*} ctx Context object contains context/states given by user
+* @return {boolean}
+*/
+
+/** @typedef {*} RowFilteringPlugin~Expression
+* @description An expression that can be parsed into RowFilteringPlugin~FilterLogic. The expression is intended for saving and restoring filters, so it is serializable by JSON.stringify.
+The expression can take various forms:<br>
+* 1. String for free style text input e.g., "[col1] > 10", "[field] == 20"<br>
+* 2. 2D-Array for predefined filter operators e.g., [["GT", 10, "AND"], ["EQ", "text"]]<br>
+* 3. Object map for value filters e.g., {"value": true, "10": true}<br>
+* 4. Function for RowFilteringPlugin~FilterLogic
+*/
+
+/** @typedef {Object} RowFilteringPlugin~FilterExpression
+* @description Deprecated. FilterExpression contains all data used for saving and restoring filter in a column
+* @property {string} field
+* @property {RowFilteringPlugin~Expression} expression Expression representing filter function
+* @property {*} context Context object contains context/states given by user
+*/
+
+/** @typedef {Object} RowFilteringPlugin~ColumnOptions
+* @description Extension column options that can be specified on each individual grid's column option:
+* @property {RowFilteringPlugin~Expression=} filter An expression string or Function
+* @property {*=} filterState Context object that will be passed as the third parameter for the filter logic
+* @property {boolean=} filterIcon=true If disabled, filter icon will not be shown. This property only works with "always" mode
+* @property {RowFilteringPlugin~FilterDialogOptions=} filterDialogOptions=null Configuration for Filter Dialog, applying to column.
+*/
+
+/** @typedef {Object} RowFilteringPlugin~FilterDialogOptions
+* @description Options that specify UIs of filter dialog
+* @property {boolean=} sortUI=true show/hide sort UI
+* @property {boolean=} filterUI=true show/hide filter UI
+* @property {boolean=} advancedFilter=true show advaced filter tab
+* @property {string=} fieldDataType data type of column
+* @property {string=} lang dialog language
+* @property {Function=} rawDataAccessor In case you have custom data type for the specified field, data getter is needed to retrieve raw value for filtering
+* @property {Function=} formattedDataAccessor This function will be called on each raw data, allowing formatting data to be displayed on the filter item list
+* @property {Function=} sortLogic This function for sorting filter item list in the dialog. The comparison will perform on raw values, and not formatted values
+* @property {Function=} groupCriteria This function for specify group of items to show group as headers.
+* @property {Function=} groupSortLogic This function for sorting of group header, used with `groupCriteria` to show as group.
+* @property {Array=} itemList Item list to be shown in the dialog. If this is not specified, the list will be collected from existing data on the grid
+* @property {Array=} additionalItems Additional items to be put on the itemList
+* @property {boolean=} compactMode=false force compact mode in dialog
+* @property {(boolean|string)=} blankValues=false Display a "(Blanks)" item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item
+* @property {string=} dateTimeFormat="dd-MM-yy" Specifies the string format for the date time picker in the filter dialog based on date-fns format, follow https://date-fns.org/v3.6.0/docs/format.
+* @property {boolean=} showOnlyFilteredItems=false If enabled, rows that are filtered out by other columns will not appear in the list, regardless of the current filter settings.
+*/
+
+/** @typedef {Object} RowFilteringPlugin~FilterEntry
+* @description item object to rendered element-item
+ * @property {string=} type=null Available types are "header" and "divider". If null, it will be shown as a normal item.
+ * @property {string} label="" Text of each item. If the type is "header", it will be shown as a header. If the type is "divider", it will not be shown.
+ * @property {boolean} checked=false Set to true to check the checkbox item in the filter dialog basic item.
+*/
+
+/** @typedef {Object} RowFilteringPlugin~Options
+* @description The options can be specified by `rowFiltering` property of the main grid's options
+* @property {boolean=} emptySegmentFiltering=false If enabled, the filter will automatically hide empty segment when all of its member are filtered out. If there is no active filter, any empty segment will not be hidden. Collapsed segment does not count as having a filter. A segment with no child is treated the same way as an empty segment.
+* @property {boolean=} separatorFiltering=false If enabled, segment separators will be filtered as if they were normal rows. Note that even if a separator row is filtered out, its child row may remain in the view and not be filtered out.
+* @property {boolean=} disabledUI=false Deprecated in favor of `iconActivation`. Set iconActivation to none instead.
+* @property {string=} iconActivation=onActiveFilter Filter icon redering behavior, can be set to `always`,`onHover`,`onActiveFilter`,or `none`
+* @property {RowFilteringPlugin~FilterDialogOptions=} dialogOptions=null Default configuration for Filter Dialog, applying to all columns.
+* @property {Function=} click=null Event handler dispatched when a user clicks the column filter icon.
+* @property {Function=} clicked=null Alias to `click` event handler
+* @property {Function=} iconCreated=null Event handler dispatched when a new column filter icon is created.
+* @property {Function=} filterChanged=null Event handler dispatched whenever global or column filter is changed by either adding or removing.
+* @property {Function=} beforeDialogOpened=null Event handler dispatched before dialog opening.
+* @property {Function=} dialogCommitted=null Event handler dispatched whenever the new settings from dialog are applied.
+* @property {Function=} refreshed=null Event handler dispatched after new filter is applied to grid's data view.
+* @property {boolean=} activeIconState=true If disabled, filter icon won't be automatically changed its state when filter in a column is changed.
+*/
+
+/** @private
+* @function
+* @param {Object} cfo
+* @return {!RowFilteringPlugin~FilterExpression}
+*/
+let _toFilterExpression = function(cfo) {
+	let ctx = cfo._context[0];
+	// TODO: Handle rawDataAccessor and formattedDataAccessor (saving and loading of functions)
+	return {
+		field: cfo._field || "",
+		expression: cfo._expressions[0],
+		context: (ctx != null && !ctx._autoGenerated) ? ctx : null
+	};
+};
+/** @private
+* @function
+* @param {Array} ary
+* @param {*} val
+* @return {Array}
+*/
+let _arrayConcat = function(ary, val) {
+	if(Array.isArray(val) && val.length) {
+		if(ary) {
+			return ary.concat(val);
+		} else {
+			return val;
+		}
+	}
+	return ary;
+};
+
+/** @type {Object}
+* @private
+* @const
+*/
+const BlankValues = {
+	"": true,
+	"null": true,
+	"undefined": true,
+	"NaN": true
+};
+/** @private
+* @function
+* @param {Array} ary
+* @param {string} str
+* @param {*=} orignalValue
+* @returns {boolean} Returns true if there is any change
+*/
+let _pushRawValue = function(ary, str, orignalValue) {
+	if(str) {
+		if(!BlankValues[str]) {
+			let dateObj = stringToDateObject(str);
+			if(dateObj !== str) {
+				if(orignalValue && typeof orignalValue === "number") {
+					let originalDate = new Date(orignalValue);
+					if(originalDate.getTime()) {
+						dateObj = originalDate;
+					}
+				}
+				ary.push(dateObj);
+			} else {
+				try {
+					ary.push(JSON.parse(str));
+				} catch (err) {
+					ary.push(str);
+				}
+			}
+			return true;
+		}
+	}
+	return false;
+};
+
+/** @private
+* @function
+* @param {Object} obj
+* @return {boolean}
+*/
+let _handledBlankProperties = function(obj) {
+	if(obj[""] || obj["null"] || obj["undefined"] || obj["NaN"]) {
+		let objClone = cloneObject(obj); // Blank item need to clone to prevent changes in the expression
+		delete objClone[""];
+		delete objClone["null"];
+		delete objClone["undefined"];
+		delete objClone["NaN"];
+		objClone[BLANKS] = true;
+		return objClone;
+	}
+	return obj;
+};
+
+/** @type {string}
+* @private
+* @const
+*/
+const BLANKS = "(Blanks)";
+
+/** @constructor
+* @extends {GridPlugin}
+*/
+let RowFilteringPlugin = function () {
+	let t = this;
+
+	t._onPreSectionRender = t._onPreSectionRender.bind(t);
+	t._onColumnAdded = t._onColumnAdded.bind(t);
+	t._onColumnRemoved = t._onColumnRemoved.bind(t);
+	t._onPreLoadedDialog = t._onPreLoadedDialog.bind(t);
+
+	t._onIconClicked = t._onIconClicked.bind(t);
+	t._filterLogic = t._filterLogic.bind(t);
+	t._updateAllColumnIcons = t._updateAllColumnIcons.bind(t);
+	t.refresh = t.refresh.bind(t);
+	t._requestFilterRefresh = t._requestFilterRefresh.bind(t);
+
+	t._onDialogSortChanged = t._onDialogSortChanged.bind(t);
+	t._onDialogFilterChanged = t._onDialogFilterChanged.bind(t);
+	t._onDialogClosed = t._onDialogClosed.bind(t);
+
+	t._globalFilters = [];
+	t._globalContexts = [];
+	t._columnFilters = [];
+	t._hosts = [];
+	t._dvs = [];
+
+	t._funcMap = {};
+	t._nameMap = {};
+};
+Ext.inherits(RowFilteringPlugin, GridPlugin);
+
+
+/** @type {!Object.<string, Function>}
+* @private
+*/
+RowFilteringPlugin.prototype._funcMap = null; // For preventing repetition of resolving the same expression
+/** @type {!Object.<string, Function>}
+* @private
+*/
+RowFilteringPlugin.prototype._nameMap; // Mapping name to filter function for referencing
+
+/** @type {boolean}
+* @private
+*/
+RowFilteringPlugin.prototype._disabled = false;
+/** @type {Object.<string, boolean>}
+* @private
+*/
+RowFilteringPlugin.prototype._disablingIds = null; // For nested disabling
+
+/** @type {!Array.<Function>}
+* @private
+*/
+RowFilteringPlugin.prototype._globalFilters;
+/** @type {!Array.<Object>}
+* @private
+*/
+RowFilteringPlugin.prototype._globalContexts;
+/** @type {!Array.<Object>}
+* @private
+*/
+RowFilteringPlugin.prototype._columnFilters;
+/** @type {Array.<Object>}
+* @private
+*/
+RowFilteringPlugin.prototype._activeColFilters = null;
+/** @type {string}
+* @private
+*/
+RowFilteringPlugin.prototype._iconActivation = "onActiveFilter";
+/** @type {string}
+* @private
+*/
+RowFilteringPlugin.prototype._iconTag = "";
+/** @type {number}
+* @private
+*/
+RowFilteringPlugin.prototype._filterId = 0;
+/** @type {number}
+* @private
+*/
+RowFilteringPlugin.prototype._uiTimerId = 0;
+/** @type {number}
+* @private
+*/
+RowFilteringPlugin.prototype._filterTimerId = 0;
+/** @type {Function}
+* @private
+*/
+RowFilteringPlugin.prototype._overridingFilter = null;
+/** @type {Function}
+* @private
+*/
+RowFilteringPlugin.prototype._preTransform = null;
+/** @type {Function}
+* @private
+*/
+RowFilteringPlugin.prototype._rowTransform = null;
+/** @type {Element}
+* @private
+*/
+RowFilteringPlugin.prototype._filterDialog = null;
+/** @type {boolean}
+* @private
+*/
+RowFilteringPlugin.prototype._dialogInitialized = false;
+/** @type {RowFilteringPlugin~FilterDialogOptions}
+* @private
+*/
+RowFilteringPlugin.prototype._dialogOptions = null;
+/** @type {FilterBuilder}
+* @private
+*/
+RowFilteringPlugin._filterBuilder = null;
+/** @type {string}
+* @private
+*/
+RowFilteringPlugin._dialogTagName; // intentionally left undefined
+/** Array of DataView objects
+* @type {!Array.<Object>}
+* @private
+*/
+RowFilteringPlugin.prototype._dvs;
+/** @type {boolean}
+* @private
+*/
+RowFilteringPlugin.prototype._activeIconState = true;
+
+
+/** @public
+* @return {string}
+*/
+RowFilteringPlugin.prototype.getName = function () {
+	return "RowFilteringPlugin"; // Read Only
+};
+/** @public
+* @param {Object} host core grid instance
+* @param {Object=} options
+*/
+RowFilteringPlugin.prototype.initialize = function (host, options) {
+	if(this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	if(!RowFilteringPlugin._styles) {
+		RowFilteringPlugin._styles = prettifyCss([
+			".hovering-filter-icon .cell:not(.active-filter):hover .floating-panel .title-filter-icon", [
+				"display: flex;"
+			],
+			".hovering-filter-icon .cell:not(.active-filter) .floating-panel .title-filter-icon", [
+				"display: none;"
+			],
+			".floating-panel", [
+				"position:relative;"
+			],
+			".floating-panel .title-filter-icon", [
+				"color: var(--grid-title-filter-icon-color,inherit);"
+			],
+			".title .floating-panel .title-filter-icon:hover", [
+				"color: var(--grid-title-filter-icon-hover-color,inherit);"
+			],
+			".always-on-filter .floating-panel .title-filter-icon", [
+				"color: var(--grid-header-txtcolor,inherit);"
+			],
+			".always-on-filter .active-filter .floating-panel .title-filter-icon", [
+				"color: var(--grid-title-icon-color,inherit);"
+			],
+			".always-on-filter .active-filter .floating-panel .title-filter-icon:hover", [
+				"color: var(--grid-title-filter-icon-hover-color,inherit);"
+			],
+			".hovering-filter-icon .tiny-col .cell:hover, .tr-grid .tiny-col .cell.active-filter", [
+				"padding-left:0px;"
+			],
+			".tiny-col.movable .cell .floating-panel .title-filter-icon:before", [
+				"content: '.';",
+				"position: absolute;",
+				"margin-left: auto;",
+				"margin-right: auto;",
+				"left: 0;",
+				"right: 0;",
+				"top: -10px;",
+				"font-size: 10px;",
+				"font-family: monospace;",
+				"color: var(--grid-title-dot-icon,inherit);",
+				"text-align:center;"
+			]
+		]);
+	}
+
+	if(!host._rowFilteringStyles){
+		host._rowFilteringStyles = true;
+		injectCss(RowFilteringPlugin._styles, host.getElement());
+	}
+
+
+	host.unloadPlugin("ColumnFilterPlugin");
+	host.listen("preSectionRender", this._onPreSectionRender);
+	host.listen("postDataSourceChanged", this._requestFilterRefresh); // TODO: Check if this is necessary
+	host.listen("columnAdded", this._onColumnAdded);
+	host.listen("columnRemoved", this._onColumnRemoved);
+
+	this.config(options);
+	// In case of lazy loading
+	// TODO
+};
+/** @public
+* @param {Object} host core grid instance
+*/
+RowFilteringPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+
+	this._hosts.splice(at, 1);
+
+	host.unlisten("preSectionRender", this._onPreSectionRender);
+	host.unlisten("postDataSourceChanged", this._requestFilterRefresh);
+	host.unlisten("columnAdded", this._onColumnAdded);
+	host.unlisten("columnRemoved", this._onColumnRemoved);
+
+	if(!this._hosts.length) {
+		if(this._uiTimerId) {
+			clearTimeout(this._uiTimerId);
+			this._uiTimerId = 0;
+		}
+		if(this._filterTimerId) {
+			clearTimeout(this._filterTimerId);
+			this._filterTimerId = 0;
+		}
+
+		this._hasPendingFilter = false;
+		if(this._filterDialog) {
+			this._filterDialog.hide(); // Remove the dialog from document
+			this._filterDialog = null;
+			this._dialogInitialized = false;
+		}
+	}
+
+	this._dispose();
+};
+/**
+* @protected
+* @ignore
+*/
+RowFilteringPlugin.prototype._afterInit = function() {
+	if(!this._iconTag) {
+		let tagName = "ef-icon";
+		if(ElfUtil.hasComponent(tagName) >= 3) {
+			this._iconTag = tagName;
+		} else if(ElfUtil.hasComponent("ef-icon")) {
+			this._iconTag = "ef-icon";
+		} else {
+			this._iconTag = "div";
+		}
+		this._updateAllColumnIcons();
+	}
+	if(!this._filterDialog) {
+		this._filterDialog = RowFilteringPlugin._createDialog();
+		this._dialogInitialized = false;
+		if(this._filterDialog) {
+			this._filterDialog.style.display = "none";
+			document.body.appendChild(this._filterDialog);
+			setTimeout(this._onPreLoadedDialog, 10);
+		}
+	}
+	this._applyPendingFilter();
+};
+
+/** @private
+*/
+RowFilteringPlugin.prototype._applyPendingFilter = function() {
+	if(!this._initializedGrid) {
+		return;
+	}
+	if(!this._hasPendingFilter) {
+		return;
+	}
+
+	this._hasPendingFilter = false;
+	let colCount = this.getColumnCount();
+	for(let c = 0; c < colCount; ++c) {
+		let colSettings = this._getUserColumnSettings(c);
+		if(colSettings.expression) {
+			this.addColumnFilter(c, colSettings.expression, colSettings.filterState);
+		} else {
+			this._removeColumnFilters(c);
+		}
+	}
+};
+/** @private
+*/
+RowFilteringPlugin.prototype._onPreLoadedDialog = function() {
+	if(this._filterDialog) {
+		this._filterDialog.style.display = "";
+		let pn = this._filterDialog.parentNode;
+		if(pn) {
+			pn.removeChild(this._filterDialog);
+		}
+	}
+};
+
+/** @public
+* @param {Object=} options
+*/
+RowFilteringPlugin.prototype.config = function (options) {
+	if(!options) { return; }
+
+	let rowFiltering = options["rowFiltering"];
+	if(rowFiltering) {
+		if(rowFiltering["disabledUI"] || rowFiltering["uiDisabled"]) {
+			this._iconActivation = "none";
+		}
+		if(rowFiltering["emptySegmentFiltering"] != null) {
+			// TODO: there is a chance that there is no DataView during the configuration
+			this.enableEmptySegmentFiltering(rowFiltering["emptySegmentFiltering"] ? true : false);
+		}
+		if(rowFiltering["separatorFiltering"] != null) {
+			// TODO: there is a chance that there is no DataView during the configuration
+			this.enableSeparatorFiltering(rowFiltering["separatorFiltering"] ? true : false);
+		}
+		if(rowFiltering["iconActivation"]){
+			this._iconActivation = rowFiltering["iconActivation"];
+
+			for(let index = 0; index < this._hosts.length; index++){
+				if(this._iconActivation === "onHover"){
+					this._hosts[index].enableClass("hovering-filter-icon", true);
+				}else{
+					this._hosts[index].enableClass("hovering-filter-icon", false);
+				}
+				if(this._iconActivation === "always"){
+					this._hosts[index].enableClass("always-on-filter", true);
+				} else {
+					this._hosts[index].enableClass("always-on-filter", false);
+				}
+			}
+		}
+		if(rowFiltering["dialogOptions"]){
+			this._dialogOptions = rowFiltering["dialogOptions"];
+		}
+		if(rowFiltering["activeIconState"] != null){
+			this._activeIconState = !!rowFiltering["activeIconState"];
+		}
+		if(rowFiltering["clicked"]) {
+			rowFiltering["click"] = rowFiltering["clicked"];
+		}
+
+		this.addListener(rowFiltering, "click");
+		this.addListener(rowFiltering, "beforeDialogOpened");
+		this.addListener(rowFiltering, "dialogCommitted");
+		this.addListener(rowFiltering, "iconCreated");
+		this.addListener(rowFiltering, "filterChanged");
+		this.addListener(rowFiltering, "refreshed");
+	}
+
+	let columns = options["columns"];
+	if(!columns) { return; }
+
+	// let host = this._hosts[0];
+	let len = columns.length;
+	for(let i = 0; i < len; ++i) {
+		let column = columns[i];
+		this._setColumnOptions(i, column);
+	}
+	this._applyPendingFilter();
+};
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+RowFilteringPlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	let columns = obj.columns;
+	if(!columns) {
+		columns = obj.columns = [];
+	}
+
+	let len = this.getColumnCount();
+	for(let i = 0; i < len; ++i) {
+		let column = columns[i];
+		if(!column) {
+			column = columns[i] = {};
+		}
+
+		let colSettings = this._getUserColumnSettings(i);
+		let exp = colSettings.expression;
+		if(exp && typeof exp !== "function") { // TODO: Accept function type
+			if(typeof exp === "object" && !Array.isArray(exp)) {
+				exp = _handledBlankProperties(exp);
+				column.filter = exp;
+			} else {
+				column.filter = exp; // This could be string or array
+			}
+		}
+		let ctx = colSettings.filterState;
+		if(ctx != null) {
+			if(typeof ctx !== "object" || !ctx._autoGenerated) {
+				column.filterState = ctx;
+			}
+		}
+
+		let filterIcon = colSettings.filterIcon;
+		if(!filterIcon) {
+			column.filterIcon = false;
+		}
+
+		let filterDialogOptions = colSettings.filterDialogOptions;
+		if(filterDialogOptions != null) {
+			column.filterDialogOptions = colSettings.filterDialogOptions;
+		}
+	}
+
+	let extOptions = obj.rowFiltering;
+	let dirty = false;
+	if(!extOptions) {
+		extOptions = {};
+	}
+	if(this._iconActivation !== "onActiveFilter") {
+		extOptions.iconActivation = this._iconActivation;
+		dirty = true;
+	}
+	if(this._dialogOptions) {
+		extOptions.dialogOptions = this._dialogOptions; // TODO: dialogOptions should not contain any function
+		dirty = true;
+	}
+	if(!this._activeIconState) {
+		extOptions.activeIconState = false;
+		dirty = true;
+	}
+	// TODO: get emptySegmentFiltering setting from DataView
+	// TODO: get separatorFiltering setting from DataView
+	if(dirty) {
+		obj.rowFiltering = extOptions;
+	}
+
+	return obj;
+};
+
+/** All filter logics in DataView will be temporarily removed until re-enabling. This is useful when trying to insert an item at the specified index. After re-enabling, both logics and icons will be restored.
+* @public
+* @param {boolean=} opt_disabled
+* @param {string=} opt_id For handling nested called
+*/
+RowFilteringPlugin.prototype.disable = function(opt_disabled, opt_id) {
+	let disabled = opt_disabled !== false;
+	if(!this._disablingIds) {
+		this._disablingIds = {};
+	}
+	if(!opt_id) { opt_id = "_"; }
+	this._disablingIds[opt_id] = disabled;
+
+	disabled = false;
+	for(let key in this._disablingIds) { // Find cumulative state
+		if(this._disablingIds[key]) {
+			disabled = true;
+			break;
+		}
+	}
+
+	if(this._disabled !== disabled) {
+		this._disabled = disabled;
+		if(disabled) {
+			this.refresh(); // Take an effect immediately
+			this._updateAllColumnIcons();
+		} else {
+			this._requestFilterRefresh(); // Take an effect later
+			this._setTimerForUpdatingIcons();
+		}
+	}
+};
+
+/** Add a global filter that is not related to any column. No filter icon is created in this way
+* @public
+* @param {RowFilteringPlugin~Expression} exp Expression or Function
+* @param {string=} funcName Optional function name for referencing the given function
+* @param {*=} ctx Context that will be passed as the third parameter for the filter logic
+* @return {string} If success, function name is returned, otherwise empty string
+* @fires RowFilteringPlugin#filterChanged
+*/
+RowFilteringPlugin.prototype.addFilter = function(exp, funcName, ctx) {
+	let func = this._parseFilter(exp, -1);
+	if(!func) { return ""; }
+
+	if(!funcName) {
+		funcName = "_" + this._filterId++;
+	}
+
+	if(this._nameMap[funcName] || this._globalFilters.indexOf(func) >= 0) {
+		return ""; // Function is already exists
+	}
+
+	ctx = ctx != null ? ctx : null;
+	this._nameMap[funcName] = func;
+	this._globalFilters.push(func);
+	this._globalContexts.push(ctx);
+
+	this._dispatch("filterChanged", {
+		"filterType": "global",
+		"changeType": "add",
+		"colIndex": -1,
+		"field": null
+	});
+
+	this._requestFilterRefresh();
+	return funcName;
+};
+/** Add a global filter that is not related to any column. No filter icon is created in this way
+* @public
+* @param {RowFilteringPlugin~Expression} exp Expression or Function
+* @param {*=} ctx Context that will be passed as the third parameter for the filter logic
+* @return {string} If success, function name is returned, otherwise empty string
+* @fires RowFilteringPlugin#filterChanged
+*/
+RowFilteringPlugin.prototype.addGridFilter = function(exp, ctx) {
+	return this.addFilter(exp, null, ctx);
+};
+/** @private
+* @param {RowFilteringPlugin~Expression} exp
+* @param {number=} colIndex
+* @param {*=} ctx
+* @return {Function}
+*/
+RowFilteringPlugin.prototype._parseFilter = function(exp, colIndex, ctx) {
+	if(!exp) {
+		return null;
+	}
+	if(typeof exp === "function") {
+		return exp;
+	}
+	let filterBuilder = RowFilteringPlugin._getFilterBuilder();
+	let validIdx = (colIndex || colIndex === 0);
+	let field = validIdx ? this._getField(colIndex) : "";
+	let formatter = validIdx ? this._getFormatter(colIndex) : null;
+
+	let func = null;
+	if(typeof exp === "string") { // Free text does not need data accessors
+		func = this._funcMap[exp];
+		if(func == null) {
+			func = this._funcMap[exp] = filterBuilder.parse(exp, field, formatter, field);
+		}
+	} else {
+		let rawDataAccessor = null;
+		let formattedDataAccessor = null;
+		if(ctx) {
+			rawDataAccessor = ctx.rawDataAccessor || null;
+			formattedDataAccessor = ctx.formattedDataAccessor || null;
+		}
+		if(!Array.isArray(exp)) { // If exp is an object
+			if(exp[BLANKS] || (ctx && ctx.blankValues)) { // it contains BLANKS key or context object has blank option
+				exp[""] = exp["null"] = exp["undefined"] = exp["NaN"] = true;
+				delete exp[BLANKS];
+			}
+		}
+		func = filterBuilder.parse(exp, field, formatter, field, rawDataAccessor, formattedDataAccessor);
+	}
+	return func;
+};
+/** If you want the column to always have one single filter, please use {@link RowFilteringPlugin#setColumnFilter} instead. This method allow a single column to have multiple filters.
+* @public
+* @param {number} colIndex
+* @param {RowFilteringPlugin~Expression} exp Expression can be string, Array, Object, or Function
+* @param {(Object|string)=} ctx Context object that will be passed as the third parameter for the filter logic
+* @return {boolean} True if success
+* @fires RowFilteringPlugin#filterChanged
+*/
+RowFilteringPlugin.prototype.addColumnFilter = function(colIndex, exp, ctx) {
+	if(colIndex < 0 || colIndex >= this.getColumnCount()) {
+		return false;
+	}
+
+	let cfo = this._getColumnFilterOption(colIndex);
+	if(cfo) {
+		if(cfo._expressions[0] === exp) {
+			return false; // The same expression is getting added on the same column twice
+		}
+	}
+
+	let func = null;
+	if(typeof exp === "function") {
+		func = /** @type{Function} */(exp);
+		if(ctx && typeof ctx === "string") {
+			exp = ctx;
+		}
+	} else {
+		func = this._parseFilter(exp, colIndex, ctx);
+	}
+
+	if(!func) {
+		return false;
+	}
+
+	let colSettings = this._getUserColumnSettings(colIndex);
+	colSettings.expression = exp; // WARNING: Only the last expression are saved (previous one is overwritten)
+	colSettings.filterState = ctx;
+
+	if(ctx == null) {
+		ctx = {"_autoGenerated": true};
+	}
+
+	let field = this._getField(colIndex);
+	if(ctx && typeof ctx === "object") {
+		ctx["field"] = field;
+	}
+
+	cfo = this._initColumnFilterOption(colIndex);
+	cfo._field = field; // TODO: Handle fieldDataType
+	cfo._filters.push(func);
+	cfo._expressions.push(exp);
+	cfo._context.push(ctx);
+	cfo._rawDataAccessor = ctx.rawDataAccessor || null;
+	cfo._formattedDataAccessor = ctx.formattedDataAccessor || null;
+	this._columnFilters.push(cfo);
+
+	this._dispatch("filterChanged", {
+		"filterType": "column",
+		"changeType": "add",
+		"colIndex": colIndex,
+		"field": field
+	});
+
+	// UI
+	this._requestFilterRefresh();
+	this._updateColumnIcon(colIndex);
+	return true;
+};
+/** This method guarantees that the column can have at most one filter at the time. It performs {@link RowFilteringPlugin#removeColumnFilters} before {@link RowFilteringPlugin#addColumnFilter}
+* @public
+* @param {number} colIndex
+* @param {RowFilteringPlugin~Expression} exp Expression can be string, Array, Object, or Function
+* @param {(Object|string)=} ctx Context object that will be passed as the third parameter for the filter logic
+* @return {boolean} True If there is any change
+* @fires RowFilteringPlugin#filterChanged
+* @example
+* extension.setColumnFilter(colIndex1,
+*  [["GT", 0]]
+* );
+* extension.setColumnFilter(colIndex2,
+*   "filter": "[PCTCHNG] > 0"
+* );
+* extension.setColumnFilter(colIndex3,
+*   function(rowData) {
+*     return rowData["PCTCHNG"] > 0;
+*   }
+* );
+*/
+RowFilteringPlugin.prototype.setColumnFilter = function(colIndex, exp, ctx) {
+	let curExp = this.getColumnFilterExpression(colIndex);
+	if(curExp === exp) {
+		return false;
+	}
+
+	let removed = this._removeColumnFilters(colIndex);
+
+	let added = this.addColumnFilter(colIndex, exp, ctx);
+	if(!added && removed) {
+		this._updateColumnIcon(colIndex);
+	}
+	return removed || added;
+};
+/** @public
+ * @param {number} colIndex
+ * @return {RowFilteringPlugin~Expression}
+ */
+RowFilteringPlugin.prototype.getColumnFilterExpression = function(colIndex) {
+	let colSettings = this._getUserColumnSettings(colIndex);
+	return colSettings.expression || null;
+};
+/** Set data to colData["rowFiltering"]
+* @private
+* @param {number} colIndex
+* @param {RowFilteringPlugin~ColumnOptions} userObj
+* @returns {boolean} Returns true if there is an active filter in the column options
+* @example
+* let colDef1 = {
+*   "field": "PCTCHNG",
+*   "filter": [["GT", 0]]
+* };
+* let colDef2 = {
+*   "filter": "[PCTCHNG] > 0"
+* };
+* let colDef3 = {
+*   "filter": function(rowData) {
+*     return rowData["PCTCHNG"] > 0;
+*   }
+* };
+*/
+RowFilteringPlugin.prototype._setColumnOptions = function(colIndex, userObj) {
+	let colSettings = this._getUserColumnSettings(colIndex);
+	let filterIcon = userObj["filterIcon"];
+
+	// TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
+	let fieldDataType = userObj["fieldDataType"] || userObj["dataType"];
+	if(fieldDataType) {
+		colSettings.fieldDataType = fieldDataType; // TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
+	}
+	if(filterIcon != null) {
+		colSettings.filterIcon = filterIcon;
+	}
+	let exp = userObj["filter"];
+	if(exp != null) {
+		colSettings.expression = exp;
+		colSettings.filterState = null;
+		this._hasPendingFilter = true;
+	}
+	let filterState = userObj["filterState"];
+	if(filterState != null) {
+		colSettings.filterState = filterState;
+	}
+
+	let iconActivation = filterIcon == false ? "none" : this._iconActivation;
+	if(iconActivation == "always" || iconActivation == "onHover") {
+		this._updateColumnIcon(colIndex);
+	}
+
+	let filterDialogOptions = userObj["filterDialogOptions"];
+	if(filterDialogOptions != null) {
+		colSettings.filterDialogOptions = filterDialogOptions;
+	}
+
+	return (exp != null);
+};
+/** @private
+ * @param {number} colIndex
+ * @return {!Object} colData["rowFiltering"]
+ */
+RowFilteringPlugin.prototype._getUserColumnSettings = function(colIndex) {
+	let colData = this._newColumnData(colIndex);
+	let colSettings = colData["rowFiltering"];
+	if(!colSettings) {
+		colSettings = colData["rowFiltering"] = {};
+	}
+	return colSettings;
+};
+/** @private
+* @param {number} colIndex
+* @return {Object} colData["rowFiltering"]["filterOption"]
+*/
+RowFilteringPlugin.prototype._getColumnFilterOption = function(colIndex) {
+	let colSettings = this._getUserColumnSettings(colIndex);
+	if(colSettings) {
+		return colSettings["filterOption"] || null;
+	} else {
+		return null;
+	}
+};
+/** Remove colData["rowFiltering"]["filterOption"]
+* @private
+* @param {number} colIndex
+*/
+RowFilteringPlugin.prototype._removeActiveFilterStates = function(colIndex) {
+	let colSettings = this._getUserColumnSettings(colIndex);
+	colSettings.expression = null;
+	colSettings.filterState = null;
+	let cfo = colSettings["filterOption"];
+	if(cfo) {
+		colSettings["filterOption"] = null;
+		if(cfo._filters.length) {
+			this._dispatch("filterChanged", {
+				"filterType": "column",
+				"changeType": "remove",
+				"colIndex": colIndex,
+				"field": this._getField(colIndex)
+			});
+		}
+	}
+};
+/** @private
+* @param {number} colIndex
+* @return {!Object}
+*/
+RowFilteringPlugin.prototype._initColumnFilterOption = function(colIndex) {
+	let cfo = this._getColumnFilterOption(colIndex);
+	if(!cfo) {
+		cfo = {};
+		cfo._filters = [];
+		cfo._expressions = [];
+		cfo._context = [];
+		let colSettings = this._getUserColumnSettings(colIndex);
+		colSettings["filterOption"] = cfo;
+	}
+	return cfo;
+};
+
+/** Remove the registered global filter. The column filter cannot be removed
+* @public
+* @param {Function|string} funcRef Function object or the function name can be used to remove
+* @return {boolean} True if success
+*/
+RowFilteringPlugin.prototype.removeFilter = function(funcRef) {
+	let func = null;
+	let funcName = "";
+	let funcIndex = -1;
+	if(typeof funcRef === "string") {
+		funcName = /** @type{string} */(funcRef);
+		func = this._nameMap[funcRef];
+		funcIndex = this._globalFilters.indexOf(func);
+	} else {
+		func = /** @type{Function} */(funcRef);
+		funcIndex = this._globalFilters.indexOf(func);
+		if(funcIndex >= 0) {
+			for(let key in this._nameMap) {
+				if(this._nameMap[key] === func) {
+					funcName = key;
+				}
+			}
+		}
+	}
+	if(funcIndex < 0) { return false; }
+
+	delete this._nameMap[funcName];
+	this._globalFilters.splice(funcIndex, 1);
+	this._globalContexts.splice(funcIndex, 1);
+	this._requestFilterRefresh();
+	return true;
+};
+/** Remove all filters in from the specified column
+* @public
+* @param {number} colIndex
+* @return {boolean} True if there is any change
+* @fires RowFilteringPlugin#filterChanged
+*/
+RowFilteringPlugin.prototype.removeColumnFilters = function(colIndex) {
+	if(colIndex == null) { // Prevent user mistake
+		return this.removeAllColumnFilters();
+	}
+
+	let dirty = this._removeColumnFilters(colIndex);
+	if(dirty) {
+		this._updateColumnIcon(colIndex);
+	}
+	return dirty;
+};
+/** @private
+* @param {number} colIndex
+* @return {boolean} True if there is any change
+* @fires RowFilteringPlugin#filterChanged
+*/
+RowFilteringPlugin.prototype._removeColumnFilters = function(colIndex) {
+	let cfo = this._getColumnFilterOption(colIndex);
+	if(cfo) {
+		let funcIndex = this._columnFilters.indexOf(cfo);
+		if(funcIndex >= 0) {
+			this._columnFilters.splice(funcIndex, 1);
+		}
+		this._removeActiveFilterStates(colIndex); // filterChanged fired
+		let inputExt = this._getPlugin("FilterInputPlugin"); // TODO: Use the event instead
+		inputExt && inputExt.updateUI(colIndex, "");
+		this._requestFilterRefresh();
+	}
+	return cfo ? true : false;
+};
+/** Alias to {@link RowFilteringPlugin#removeColumnFilters} Remove all filters from the specified column
+* @public
+* @function
+* @param {number} colIndex
+* @return {boolean} True if there is any change
+* @fires RowFilteringPlugin#filterChanged
+*/
+RowFilteringPlugin.prototype.removeColumnFilter = RowFilteringPlugin.prototype.removeColumnFilters;
+
+/** Remove all column filters from all columns, excluding global filters
+* @public
+* @return {boolean} Return true if there is any change
+* @fires RowFilteringPlugin#filterChanged
+*/
+RowFilteringPlugin.prototype.removeAllColumnFilters = function() {
+	if(this._columnFilters.length) {
+		this._columnFilters.length = 0;
+
+		let inputExt = this._getPlugin("FilterInputPlugin");
+		let colCount = this._getColumnCount();
+		for(let i = 0; i < colCount; ++i) {
+			this._removeActiveFilterStates(i); // filterChanged fired
+			inputExt && inputExt.updateUI(i, ""); // TODO: Use the event instead
+		}
+
+		this._updateAllColumnIcons();
+
+		this._requestFilterRefresh();
+		return true;
+	}
+	return false;
+};
+/** Remove all column and global filters. OverridingFilters are not removed by this method
+* @public
+*/
+RowFilteringPlugin.prototype.removeAllFilters = function() {
+	let totalFilter = this._globalFilters.length + this._columnFilters.length;
+	if(totalFilter <= 0) { return; }
+	if(this._globalFilters.length) {
+		this._globalFilters.length = 0;
+		this._nameMap = {};
+
+		this._dispatch("filterChanged", {
+			"filterType": "global",
+			"changeType": "remove",
+			"colIndex": -1,
+			"field": ""
+		});
+	}
+
+	this.removeAllColumnFilters();
+
+	this._requestFilterRefresh();
+};
+
+/** Column overriding function is processed before column filters and after global filters. If it returns non-zero, the result will override all other column filter results. If it returns 1, the row will be always included. If it returns -1, the row will be always excluded. If it returns 0, the column filters will be used as normal.
+* @public
+* @param {Function} func
+*/
+RowFilteringPlugin.prototype.setOverridingFilter = function(func) {
+	this._overridingFilter = func;
+};
+/** PreTransform is used to minimize the same data transformation on multiple filters. Output from the given method will be used on all subsequent filters. Note that it will be used for every existing row, so performance should be critical in here. This is optional setting.
+* @public
+* @param {Function} func This function must return object with key and value pairs
+*/
+RowFilteringPlugin.prototype.setPreTransform = function(func) {
+	this._preTransform = func;
+};
+/** This is the same as preTransform, only it is executed just before column filters and after the global filters. This is optional setting.
+* @public
+* @param {Function} func This function must return object with key and value pairs
+*/
+RowFilteringPlugin.prototype.setRowTransform = function(func) {
+	this._rowTransform = func;
+};
+
+/** @public
+* @return {!Array.<Function>} All global filters
+*/
+RowFilteringPlugin.prototype.getFilters = function() {
+	return this._globalFilters;
+};
+/** Returns filter functions. Use getConfigObject for saving and loading instead of this function
+* @public
+* @return {!Array.<Function>} All column filters
+* @see {@link RowFilteringPlugin.getConfigObject}
+*/
+RowFilteringPlugin.prototype.getAllColumnFilters = function() {
+	return this._getAllColumnFilters();
+};
+/**
+* @private
+* @param {Object=} excludedMap
+* @return {!Array.<Function>} All column filters
+*/
+RowFilteringPlugin.prototype._getAllColumnFilters = function(excludedMap) {
+	if(!excludedMap || typeof excludedMap !== "object") {
+		excludedMap = {};
+	}
+	let filters = [];
+	let len = this._columnFilters.length;
+	for(let i = 0; i < len; ++i) {
+		let cfo = this._columnFilters[i];
+		if(!excludedMap[cfo._field]) {
+			let jLen = cfo._filters.length;
+			for(let j = 0; j < jLen; ++j) {
+				filters.push(cfo._filters[j]);
+			}
+		}
+	}
+	return filters;
+};
+
+/** Deprecated in favor of getConfigObject(). Get existing filter expressions for saving and restoring.
+* @public
+* @return {Array.<RowFilteringPlugin~FilterExpression>} Return null if there is no column filter
+* @see {@link RowFilteringPlugin.getConfigObject}
+*/
+RowFilteringPlugin.prototype.getFilterExpressions = function() {
+	if(this._columnFilters.length) {
+		// TODO: Provide a way to save rawDataAccessor and formattedDataAccessor
+		return this._columnFilters.map(_toFilterExpression);
+	}
+	return null;
+};
+/** Deprecated. Clear all existing column filters and restore column filters from the given valid filter expressions. If the parameter is null, the result is equivalent to calling removeAllColumnFilters();
+* @public
+* @param {Array.<RowFilteringPlugin~FilterExpression>} filterExps
+*/
+RowFilteringPlugin.prototype.setFilterExpressions = function(filterExps) {
+	this.removeAllColumnFilters();
+
+	if(Array.isArray(filterExps)) {
+		let api = this.getGridApi();
+		let fields = api.getColumnFields();
+		let len = filterExps.length;
+		for(let i = 0; i < len; ++i) {
+			let filterExp = filterExps[i];
+			let field = filterExp.field;
+			let colIndex = fields.indexOf(field);
+			if(colIndex >= 0) {
+				this.setColumnFilter(colIndex, filterExp.expression, filterExp.context);
+			}
+		}
+	}
+};
+
+/** @public
+* @return {boolean}
+*/
+RowFilteringPlugin.prototype.hasColumnFilter = function() {
+	return (this._columnFilters.length > 0);
+};
+
+/** @private
+* @param {number} colIndex
+* @return {Array.<Element>} Bottom cells from title section of all grids
+*/
+RowFilteringPlugin.prototype._getBottomTitleCells = function(colIndex) {
+	var cells = [];
+	for(let i = this._hosts.length; --i >= 0;) {
+		let host = this._hosts[i];
+		let tsect = host.getSection("title");
+		if(tsect) {
+			let rowCount = tsect.getRowCount();
+			let cell = tsect.getCell(colIndex, rowCount - 1, true); // Get bottom cell
+			if(cell) {
+				cells.push(cell);
+			}
+		}
+	}
+	return cells;
+};
+/** @public
+* @param {number} colIndex
+* @return {Array.<Element>} icons
+*/
+RowFilteringPlugin.prototype.getColumnFilterIcons = function(colIndex) {
+	let icons = [];
+	let cells = this._getBottomTitleCells(colIndex);
+	let len = cells.length;
+	for(let i = 0; i < len; ++i) {
+		let cell = cells[i];
+		if(cell._filterIcon) {
+			icons.push(cell._filterIcon);
+		}
+	}
+	return icons;
+};
+/** Change specified filter icon state regardless of existing filter in the column. This method does NOT change the visibility of the icon.
+* @public
+* @param {number} colIndex
+* @param {boolean} active
+*/
+RowFilteringPlugin.prototype.setColumnFilterIconState = function(colIndex, active) {
+	let cells = this._getBottomTitleCells(colIndex);
+	let len = cells.length;
+	for(let i = 0; i < len; ++i) {
+		let cell = cells[i];
+		if(cell._filterIcon) {
+			cell.enableClass("active-filter", active);
+		}
+	}
+};
+/** @public
+* @param {number} colIndex
+* @returns {boolean} active
+*/
+RowFilteringPlugin.prototype.getColumnFilterIconState = function(colIndex) {
+	let cells = this._getBottomTitleCells(colIndex);
+	let len = cells.length;
+	for(let i = 0; i < len; ++i) {
+		let cell = cells[i];
+		if(cell._filterIcon) {
+			if(cell.hasClass("active-filter")) {
+				return true;
+			}
+		}
+	}
+	return false;
+};
+/** @public */
+RowFilteringPlugin.prototype.updateAllColumnIcons = function() {
+	if(this._uiTimerId) {
+		clearTimeout(this._uiTimerId);
+		this._uiTimerId = 0;
+	}
+	this._updateAllColumnIcons();
+};
+
+/** Specify a list of data views to be filtered, excluding default data views used by UI. <br>
+* This is useful when multiple shared or nested data views are employed.
+* @public
+* @param {Object} dv DataView
+*/
+RowFilteringPlugin.prototype.addDataView = function(dv) {
+	let at = this._dvs.indexOf(dv);
+	if(at < 0) {
+		this._dvs.push(dv);
+		this._requestFilterRefresh();
+	}
+};
+/** @public
+* @param {Object} dv DataView
+*/
+RowFilteringPlugin.prototype.removeDataView = function(dv) {
+	let at = this._dvs.indexOf(dv);
+	if(at >= 0) {
+		this._dvs.splice(at, 1);
+		this._requestFilterRefresh(); // This could be unnecessary
+	}
+};
+
+
+/** @private
+* @param {Object} e
+*/
+RowFilteringPlugin.prototype._onPreSectionRender = function (e) {
+	if(e["sectionType"] !== "title") { return; }
+
+	this._setTimerForUpdatingIcons();
+};
+/** @private
+* @param {Event} e
+*/
+RowFilteringPlugin.prototype._onIconClicked = function(e) {
+	let host = this._hosts[0];
+	if(!host) { return; }
+
+	let pos = host.getRelativePosition(e);
+	this.openDialog(pos.colIndex);
+
+	e.stopPropagation();
+	e.preventDefault();
+	this._dispatch("click", e);
+};
+/** @private
+* @param {string} rid
+* @param {Object} rowData
+* @return {boolean}
+*/
+RowFilteringPlugin.prototype._filterLogic = function(rid, rowData) {
+	if(rowData) {
+		if(this._rowGetter) {
+			rowData = this._rowGetter(rowData);
+		}
+		if(this._preTransform) {
+			rowData = this._preTransform(rowData);
+		}
+		let i;
+		let len = this._globalFilters.length;
+		for(i = 0; i < len; ++i) {
+			if(!this._globalFilters[i](rowData, rid, this._globalContexts[i])) {
+				return false;
+			}
+		}
+
+		len = this._activeColFilters.length;
+		if(len) {
+			if(this._overridingFilter) {
+				let ret = this._overridingFilter(rowData, rid);
+				if(ret) {
+					return (ret > 0);
+				}
+			}
+
+			if(this._rowTransform) {
+				rowData = this._rowTransform(rowData);
+			}
+
+			for(i = 0; i < len; ++i) {
+				let cfo = this._activeColFilters[i];
+				let jLen = cfo._filters.length;
+				for(let j = 0; j < jLen; ++j) {
+					if(
+						!cfo._filters[j](
+							rowData,
+							rid,
+							cfo._context[j]
+						)
+					) {
+						return false;
+					}
+				}
+			}
+		}
+	}
+	return true;
+};
+/** @private */
+RowFilteringPlugin.prototype._requestFilterRefresh = function() {
+	if(!this._filterTimerId) {
+		this._filterTimerId = setTimeout(this.refresh, 10);
+	}
+};
+/** @private */
+RowFilteringPlugin.prototype._setTimerForUpdatingIcons = function() {
+	if(this._iconActivation === "none") {
+		return;
+	}
+	if(!this._uiTimerId) {
+		this._uiTimerId = setTimeout(this._updateAllColumnIcons, 10);
+	}
+};
+
+/** Perform filtering with the same parameters. Do not call this method repeatedly as the operation is quite expensive.
+* @public
+* @suppress {checkTypes}
+* @fires RowFilteringPlugin#refreshed
+*/
+RowFilteringPlugin.prototype.refresh = function() {
+	this._filterTimerId = 0;
+
+	this._activeColFilters = this._columnFilters;
+	//check cstp
+	let cstkp = this._getPlugin("ColumnStackPlugin");
+	if(cstkp) {
+		let colIndex, cfo;
+		let host = this._hosts[0];
+		let colCount = this._getColumnCount();
+
+		this._activeColFilters = [];
+		for(colIndex = 0; colIndex < colCount; ++colIndex) {
+			cfo = this._getColumnFilterOption(colIndex);
+			if(cfo && host.getColumnVisibility(colIndex, 2)) {
+				this._activeColFilters.push(cfo);
+			}
+		}
+	}
+
+	let totalFilter = this._globalFilters.length + this._activeColFilters.length;
+	let logic = (!this._disabled && totalFilter) ? this._filterLogic : null;
+
+	let dirty = 0;
+	let dvs = this._getAvailableDataViews();
+	for(let i = dvs.length; --i >= 0;) {
+		dirty |= dvs[i].filterIn(logic);
+	}
+
+	if(dirty) {
+		this._dispatch("refreshed", {});
+	}
+};
+/** @private
+* @param {number} colIndex
+*/
+RowFilteringPlugin.prototype._updateColumnIcon = function(colIndex) {
+	if(!this._initializedGrid) {
+		return;
+	}
+
+	let colSettings = this._getUserColumnSettings(colIndex); // colData["rowFiltering"]
+	if(colSettings.hiddenIcon) {
+		return;
+	}
+	let cfo = this._getColumnFilterOption(colIndex); // colData["rowFiltering"]["filterOption"]
+	let iconActivation = colSettings.filterIcon == false ? "none" : this._iconActivation;
+	let hasFilter = cfo ? cfo._filters.length : 0;
+
+	for(let i = this._hosts.length; --i >= 0;) {
+		let host = this._hosts[i];
+		let tsect = host.getSection("title");
+		if(!tsect) {
+			continue;
+		}
+		let rCount = tsect.getRowCount();
+		let cell = tsect.getCell(colIndex, rCount - 1, true); // Get bottom cell
+		let column = tsect.getColumn(colIndex);
+		if(!cell) {
+			continue;
+		}
+		// HACK: Update cell padding for all type of icons (sorting and column grouping icons)
+		if(cell["updatePadding"]) {
+			cell["updatePadding"]();
+		}
+
+		let isColumnMovable = host.isColumnMovable(colIndex);
+		if(isColumnMovable) {
+			column.enableClass("movable", true);
+		} else {
+			column.enableClass("movable", false);
+		}
+
+		let onActiveFilter = iconActivation !== "always" && iconActivation !== "onHover";
+		let noFilterIcon = this._disabled || iconActivation === "none" || (onActiveFilter && !hasFilter);
+		if(!noFilterIcon) {
+			if(!cell._filterIcon) {
+				let filterIcon;
+				if(this._iconTag && this._iconTag !== "div") {
+					filterIcon = document.createElement(this._iconTag);
+					filterIcon.setAttribute("icon", "filter");
+				} else {
+					filterIcon = document.createElement("div");
+					filterIcon.className = "filter-symbol icon-filter ef-icon";
+				}
+				filterIcon.classList.add("title-filter-icon"); // Icon reference
+				filterIcon.addEventListener("click", this._onIconClicked, false);
+				this._dispatch("iconCreated", {"icon": filterIcon, "colIndex": colIndex, "grid": host});
+				cell.insertFloatingIcon(filterIcon, 10);
+				cell._filterIcon = filterIcon;
+			}
+			if(this._activeIconState) {
+				if(hasFilter){
+					cell.enableClass("active-filter", true);
+				}else{
+					cell.enableClass("active-filter", false);
+				}
+			}
+		} else {
+			if(cell._filterIcon) {
+				cell.removeFloatingIcon(cell._filterIcon);
+				cell._filterIcon = null;
+				if(this._activeIconState) {
+					cell.enableClass("active-filter", false);
+				}
+			}
+		}
+	}
+};
+/** @private */
+RowFilteringPlugin.prototype._updateAllColumnIcons = function() {
+	this._uiTimerId = 0;
+
+	let colCount = this._getColumnCount();
+	for(let i = 0; i < colCount; ++i) {
+		this._updateColumnIcon(i);
+	}
+};
+
+
+/** @private
+* @return {number}
+*/
+RowFilteringPlugin.prototype._getColumnCount = function() {
+	let grid = this._hosts[0];
+	if(grid) {
+		return grid.getColumnCount();
+	}
+	return 0;
+};
+
+/** Update existing filter state by replacing the old one. Note that filtering will be performed asynchronously after executing this method.
+* @public
+* @param {number} colIndex
+* @param {*} ctx Context object that will be passed as the third parameter for the filter logic
+* @return {boolean} Returns true if there is any change
+*/
+RowFilteringPlugin.prototype.setColumnFilterState = function(colIndex, ctx) {
+	let cfo = this._getColumnFilterOption(colIndex);
+	if(cfo) {
+		cfo._context[0] = ctx;
+		this._requestFilterRefresh();
+		return true;
+	}
+	return false;
+};
+/** Get the stored user context from the specified column
+* @public
+* @param {number} colIndex
+* @return {*} Context object that is passed as the third parameter for the filter logic
+*/
+RowFilteringPlugin.prototype.getColumnFilterState = function(colIndex) {
+	let cfo = this._getColumnFilterOption(colIndex);
+	if(cfo) {
+		return cfo._context[0];
+	}
+	return null;
+};
+/** Deprecated in favor of getConfigObject(). Get the stored user context from all columns. The column with no filter will return null value
+* @public
+* @return {!Array} Array of context objects
+* @see {@link RowFilteringPlugin.getConfigObject}
+*/
+RowFilteringPlugin.prototype.getColumnFilterStates = function() {
+	let colCount = this._hosts[0] ? this._hosts[0].getColumnCount() : 0;
+	let states = new Array(colCount);
+	for(let c = 0; c < colCount; ++c) {
+		states[c] = this.getColumnFilterState(c);
+	}
+	return states;
+};
+
+/** @private
+* @return {!Array.<Object>} array of DataView
+*/
+RowFilteringPlugin.prototype._getAvailableDataViews = function() {
+	if(this._dvs.length) {
+		return this._dvs;
+	} else {
+		let len = this._hosts.length;
+		let ary = [];
+		for(let i = 0; i < len; ++i) {
+			let host = this._hosts[i];
+			let dv = host.getDataSource();
+			if(dv) {
+				ary.push(dv);
+			}
+		}
+		return ary;
+	}
+};
+/** @private
+* @param {Object} dv DataView
+* @return {Object} DataTable
+*/
+RowFilteringPlugin.prototype._getDataTable = function(dv) {
+	let dt = dv ? dv.getDataSource() : null;
+	while(dt && dt.getDataSource()) {
+		dt = dt.getDataSource();
+	}
+	return dt;
+};
+
+/** @public
+* @deprecated
+* @ignore
+* @param {string} field A field name for getting raw value from row data
+* @param {Function=} formatter A formatter that takes row data, retrieves data, and modified the data for display.
+* @param {string=} fmtField A field name to be used instead of formatter for getting formatted value
+* @param {Function=} rawDataAccessor Data getter to retrieve raw value
+* @param {Function=} formattedDataAccessor Data getter to retrieve formatted value. This paramter will override formatted and fmtField parameters
+* @param {Array.<Function>=} filterFuncs
+* @param {Object=} selectedItems
+* @return {Object} Object that maps formatted value to array of raw values
+*/
+RowFilteringPlugin.prototype.getUniqueValues = function(field, formatter, fmtField, rawDataAccessor, formattedDataAccessor, filterFuncs, selectedItems) {
+	let dialogConfig = {
+		rawDataAccessor: rawDataAccessor,
+		formattedDataAccessor: formattedDataAccessor
+	};
+	return this._getUniqueValues(field, dialogConfig, formatter, filterFuncs, selectedItems);
+};
+
+/** @private
+* @param {*} formattedVal
+* @param {*} rawVal
+* @returns {string}
+*/
+let _valueToString = function(formattedVal, rawVal) {
+	if(typeof formattedVal === "string") {
+		return formattedVal;
+	}
+	if(formattedVal) {
+		if(typeof formattedVal != "object") {
+			return rawVal + "";
+		} else if(formattedVal instanceof Date) {
+			return formattedVal.toLocaleString("en-GB");
+		} else { // Object type cannot be converted to string
+			return "";
+		}
+	} else if(formattedVal === 0) {
+		return "0";
+	} else if(formattedVal === false) {
+		return "false";
+	}
+	return "";
+};
+/** @private
+* @param {Object} selectedItems
+* @param {string} formattedVal
+* @param {Object} row
+* @param {!Array.<Function>} filterFuncs A selector function that execute on each item to determine the selection
+* @return {boolean}
+*/
+let _collectSelectedItem = function(selectedItems, formattedVal, row, filterFuncs) {
+	if(filterFuncs) {
+		if(!selectedItems[formattedVal]) {
+			for(let i = filterFuncs.length; --i >= 0;) {
+				if(!filterFuncs[i](row)) {
+					return false;
+				}
+			}
+			selectedItems[formattedVal] = true;
+			return true;
+		}
+	}
+	return false;
+};
+/** @private
+* @param {Object} uniqueValues
+* @param {string} formattedVal
+* @param {*} rawVal
+*/
+let _collectUniqueValue = function(uniqueValues, formattedVal, rawVal) {
+	let rawValues = uniqueValues[formattedVal];
+	if(rawValues) {
+		if(rawValues.indexOf(rawVal) < 0) { // Check for unique raw values
+			rawValues.push(rawVal);
+		}
+	} else { // The first unique formatted value detected
+		uniqueValues[formattedVal] = [rawVal];
+	}
+};
+
+/** @private
+* @param {Object} row
+* @param {Array.<Function>} filterFuncs
+* @return {boolean}
+*/
+let isFilteredOutRow = function(row, filterFuncs) {
+	let len = filterFuncs.length;
+	if(len) {
+		for(let i = 0; i < len; i++) {
+			if(!filterFuncs[i](row)) {
+				return true;
+			}
+		}
+	}
+	return false;
+};
+
+/** @private
+* @param {string} field A field name for getting raw value from row data
+* @param {!Object} dialogConfig
+* @param {Function} formatter A formatter that takes row data, retrieves data, and modified the data for display.
+* @param {Array.<Function>} filterFuncs A selector function that execute on each item to determine the selection
+* @param {Object} selectedItems
+* @return {Object} Object that maps formatted value to array of raw values
+*/
+RowFilteringPlugin.prototype._getUniqueValues = function(field, dialogConfig, formatter, filterFuncs, selectedItems) {
+	if(!field) {
+		return null;
+	}
+
+	let rawDataAccessor = (dialogConfig.rawDataAccessor || null);
+	let formattedDataAccessor = (dialogConfig.formattedDataAccessor || null);
+	let userItemList = dialogConfig.itemList;
+
+	let uniqueValues = {};
+	let formattedVal = null;
+	let rawVal = null;
+	let blankAtLeastOne = false;
+	if(!Array.isArray(userItemList)) {
+		userItemList = null;
+		let excludedMap = {};
+		excludedMap[field] = true;
+		let funcs = this._getAllColumnFilters(excludedMap);
+		let showOnlyFilteredItems = dialogConfig.showOnlyFilteredItems;
+		let dvs = this._getAvailableDataViews();
+		let dts = dvs.map(this._getDataTable);
+		let tblCount = dts.length;
+		for(let t = 0; t < tblCount; ++t) {
+			let rows = dts[t].getAllRowData();
+			let rowCount = rows.length;
+			for(let r = 0; r < rowCount; ++r) {
+				let row = rows[r];
+				if(this._rowGetter) {
+					row = this._rowGetter(row);
+				}
+				if(this._rowTransform) {
+					row = this._rowTransform(row);
+				}
+				if(showOnlyFilteredItems && isFilteredOutRow(row, funcs)) {
+					continue;
+				}
+				let fieldVal = row[field];
+				rawVal = fieldVal;
+				if(rawDataAccessor) {
+					rawVal = rawDataAccessor(rawVal);
+				}
+
+				if(!rawVal) { // Only valid values are accepted
+					if(rawVal !== 0 && rawVal !== false) {
+						if(!blankAtLeastOne && BlankValues[rawVal]) {
+							blankAtLeastOne = true;
+							_collectUniqueValue(uniqueValues, BLANKS, rawVal);
+						}
+						continue;
+					}
+				}
+
+				formattedVal = rawVal;
+				if(formattedDataAccessor) {
+					formattedVal = formattedDataAccessor(fieldVal); // The function takes data value
+				} else if(formatter) {
+					formattedVal = formatter(row); // The function takes row data
+				}
+
+				formattedVal = _valueToString(formattedVal, rawVal);
+				if(formattedVal) {
+					_collectSelectedItem(selectedItems, formattedVal, row, filterFuncs);
+					_collectUniqueValue(uniqueValues, formattedVal, rawVal);
+				}
+			}
+		}
+	}
+
+	userItemList = _arrayConcat(userItemList, dialogConfig.additionalItems);
+
+	let dummyRow = {};
+	let userItemCount = userItemList ? userItemList.length : 0;
+	for(let i = 0; i < userItemCount; ++i) {
+		rawVal = dummyRow[field] = userItemList[i];
+		formattedVal = rawVal;
+		if(formattedDataAccessor) {
+			formattedVal = formattedDataAccessor(rawVal);
+		} else if(formatter) {
+			formattedVal = formatter(dummyRow);
+		}
+
+		formattedVal = _valueToString(formattedVal, rawVal);
+		if(formattedVal) {
+			_collectSelectedItem(selectedItems, formattedVal, dummyRow, filterFuncs);
+			_collectUniqueValue(uniqueValues, formattedVal, rawVal);
+		}
+	}
+	return uniqueValues;
+};
+
+
+/** @private
+* @function
+* @returns {Element}
+*/
+RowFilteringPlugin._createDialog = function() {
+	let tag = RowFilteringPlugin._dialogTagName;
+	if(tag == null) {
+		let dialogVersion = ElfUtil.hasComponent("filter-dialog"); // WARNING: this cannot detect version 2 or less
+		if(dialogVersion) {
+			RowFilteringPlugin._dialogTagName = (dialogVersion >= 3) ? "filter-dialog" : "tr-grid-filter-dialog";
+		} else {
+			RowFilteringPlugin._dialogTagName = "";
+		}
+		tag = RowFilteringPlugin._dialogTagName;
+	}
+	return tag ? document.createElement(tag) : null;
+};
+/** Prepare user's array expression to be displayed in Filter Dialog. Convert date string to date object. Format raw value for text input
+* @public
+* @ignore
+* @function
+* @param {Array} exp
+* @param {string} field
+* @param {Function} formatter
+* @returns {Array}
+*/
+RowFilteringPlugin._formatArrayExpression = function(exp, field, formatter) {
+	if(Array.isArray(exp)) {
+		let ary = exp.slice(); // Clone to avoid modifying original data
+		let formattedVal = ary[1];
+		let val = stringToDateObject(formattedVal);
+		if(val !== formattedVal) {
+			ary.rawValue = val;
+			ary.formattedValue = formattedVal;
+		}
+		if(typeof val !== "string" && val != null) {
+			if(field && formatter) {
+				let dummyRow = {};
+				dummyRow[field] = val;
+				formattedVal = formatter(dummyRow);
+			} else {
+				formattedVal = _valueToString(val, val);
+			}
+			if(formattedVal) {
+				ary.rawValue = val;
+				ary.formattedValue = formattedVal;
+				ary[1] = formattedVal;
+			} else {
+				ary[1] = val;
+			}
+
+		}
+		return ary;
+	}
+	return null;
+};
+/** For mocking dialog instance
+* @public
+* @ignore
+* @param {*} dialog
+*/
+RowFilteringPlugin.prototype.setDialog = function(dialog) {
+	this._filterDialog = dialog;
+};
+/** @public
+* @param {number} colIndex
+* @param {RowFilteringPlugin~FilterDialogOptions=} runtimeDialogOptions
+*/
+RowFilteringPlugin.prototype.openDialog = function(colIndex, runtimeDialogOptions) {
+	let stp = this._getPlugin("SortableTitlePlugin");
+
+	if(!this._filterDialog || !this._dialogInitialized) {
+		if(!this._filterDialog) {
+			this._filterDialog = RowFilteringPlugin._createDialog();
+		}
+
+		if(this._filterDialog) {
+			this._dialogInitialized = true;
+			if(!stp) {
+				this._filterDialog.hideSortUI();
+			} else {
+				this._filterDialog.addEventListener("sortChanged", this._onDialogSortChanged);
+			}
+			this._filterDialog.addEventListener("filterChanged", this._onDialogFilterChanged);
+			this._filterDialog.addEventListener("confirm", this._onDialogClosed);
+			this._filterDialog.addEventListener("cancel", this._onDialogClosed);
+		}
+	}
+
+	if(!this._filterDialog) {
+		console.log("Filter dialog does not exist");
+		return;
+	}
+
+	if(this._filterDialog.isShown) {
+		this._filterDialog.hide(); // Hide previously opened dialog
+		if(this._filterDialog._colIndex === colIndex) { // The dialog is already openned
+			return; // Toggle open state
+		}
+	}
+
+	let host = this._hosts[0];
+	if(!host) {
+		return;
+	}
+
+	// Find target cell for positioning filter dialog
+	let tsect = host.getSection("title");
+	if(!tsect) {
+		return;
+	}
+	let rCount = tsect.getRowCount();
+	let cell = tsect.getCell(colIndex, rCount - 1, true); // Get bottom cell
+	if(!cell || !cell.getElement()) {
+		return;
+	}
+
+	// TODO: Handle newly inserted/added columns
+	let field = this._getField(colIndex);
+	if(!field) {
+		return; // The specified column has no field
+	}
+
+	if(this.hasListener("beforeDialogOpened")) {
+		let arg = {
+			colIndex: colIndex,
+			field: field,
+			grid: host
+		};
+		if(runtimeDialogOptions) {
+			arg["dialogOptions"] = runtimeDialogOptions;
+		}
+		this._dispatch("beforeDialogOpened", arg);
+		if(arg["cancel"]) {
+			return;
+		}
+		if(arg["dialogOptions"]) {
+			runtimeDialogOptions = arg["dialogOptions"];
+		}
+	}
+
+	if(typeof runtimeDialogOptions !== "object") {
+		runtimeDialogOptions = null;
+	}
+
+	if(stp) {
+		this._filterDialog.setSortState(stp.getSortOrder(colIndex)); // This is for ELF v3
+	}
+
+	// Setting up dialog configuration
+	let colData = host.getColumnData(colIndex);
+	let formatOptions = colData.formatOptions;
+	let useUTCTime = false;
+	if(formatOptions){
+		if(formatOptions.formatType){
+			useUTCTime = true;
+			if(formatOptions.useUTCTime != null){
+				useUTCTime = formatOptions.useUTCTime;
+			}
+		}
+	}
+
+	let dialogConfig = { // default config
+		sortUI: true,
+		filterUI: true,
+		advancedFilter: true,
+		compactMode: false,
+		fieldDataType: "",
+		dateTimeFormat: "dd-MM-yy",
+		lang: "",
+		rawDataAccessor: null,
+		formattedDataAccessor: null,
+		sortLogic: null,
+		blankValues: false,
+		blankValuesChecked: false,
+		showOnlyFilteredItems: false
+	};
+
+	let columnDialogOptions = null;
+	let colSettings = this._getUserColumnSettings(colIndex); // colData["rowFiltering"]
+	if(colSettings.filterDialogOptions) {
+		columnDialogOptions = colSettings.filterDialogOptions;
+	}
+	if(colSettings.fieldDataType){
+		// TODO: Use data type from Composite Grid (getColumnDataType) or Realtime Grid (getDataType) instead
+		if(!columnDialogOptions) {
+			columnDialogOptions = {};
+		}
+		columnDialogOptions.fieldDataType = colSettings.fieldDataType;
+	}
+
+	RowFilteringPlugin._overrideConfig(dialogConfig, this._dialogOptions);
+	RowFilteringPlugin._overrideConfig(dialogConfig, columnDialogOptions);
+	RowFilteringPlugin._overrideConfig(dialogConfig, runtimeDialogOptions);
+
+	// cfo is required for storing unique entries in the dialog, even though no filter is active
+	// TODO: move rawDataAccessor and other settings to colSettings
+	let cfo = this._initColumnFilterOption(colIndex); // colData["rowFiltering"]["filterOption"]
+	cfo._rawDataAccessor = (dialogConfig.rawDataAccessor || null);
+	cfo._formattedDataAccessor = (dialogConfig.formattedDataAccessor || null);
+	let sortLogic = dialogConfig.sortLogic || null;
+
+	// Populate data for filter dialog based on existing states
+	let formatter = this._getFormatter(colIndex);
+	let condition2D = null;
+	let filterMode = ""; // default
+	let filterFuncs = null;
+	let exp = colSettings.expression;
+	if(exp) {
+		let userInputs = [];
+		if(cfo._filters && cfo._filters.length) {
+			filterFuncs = cfo._filters;
+		}
+		if(Array.isArray(exp)) {
+			if(exp.length) {
+				condition2D = Array.isArray(exp[0]) ? exp.slice() : [exp]; // Guaranteed condition2D to be a 2D array
+				let conditionAry = null;
+				conditionAry = RowFilteringPlugin._formatArrayExpression(condition2D[0], field, formatter);
+				condition2D[0] = conditionAry;
+				if(conditionAry) {
+					_pushRawValue(userInputs, conditionAry.rawValue != null ? conditionAry.rawValue : conditionAry[1]);
+				}
+
+				conditionAry = RowFilteringPlugin._formatArrayExpression(condition2D[1], field, formatter);
+				condition2D[1] = conditionAry;
+				if(conditionAry) {
+					_pushRawValue(userInputs, conditionAry.rawValue != null ? conditionAry.rawValue : conditionAry[1]);
+				}
+
+				filterMode = "advanced";
+			}
+		} else if(typeof exp === "function" || typeof exp === "string" || typeof exp === "object") {
+			if(typeof exp === "object" && !dialogConfig.showOnlyFilteredItems) {
+				for(let expKey in exp) {
+					_pushRawValue(userInputs, expKey, exp[expKey]);
+				}
+			}
+		}
+		dialogConfig.additionalItems = _arrayConcat(dialogConfig.additionalItems, userInputs);
+	}
+
+	let selectedItems = {};
+	let uniqueValues = cfo.uniqueValues = this._getUniqueValues(
+		field,
+		dialogConfig,
+		formatter,
+		filterFuncs,
+		selectedItems
+	);
+
+	if(dialogConfig.blankValues) {
+		let dunmmySelectItem = {};
+		let blkVals = ["", null, undefined, NaN]; // eslint-disable-line
+		let dummyRow = {};
+		for(let i = 0; i < blkVals.length; i++) {
+			let blkVal = blkVals[i];
+			dummyRow[field] = blkVal;
+
+			if(_collectSelectedItem(dunmmySelectItem, BLANKS, dummyRow, filterFuncs)) {
+				dialogConfig.blankValuesChecked = true;
+				break;
+			}
+		}
+		if(!dialogConfig.blankValuesChecked && !uniqueValues[BLANKS]) {
+			dialogConfig.blankValues = false; // doesn't display a blank item when the checkbox for it is unchecked and there's no blank value at least one item.
+		}
+	}
+	delete uniqueValues[BLANKS];
+
+	let keys = Object.keys(uniqueValues);
+	if(sortLogic) {
+		keys.sort(function (a, b) {
+			let rawValueA = uniqueValues[a][0];
+			let rawValueB = uniqueValues[b][0];
+			return sortLogic(rawValueA, rawValueB); // Compare with rawValue
+		});
+	}
+
+	let items = this._toListScheme({
+		dialogConfig: dialogConfig,
+		keys: keys,
+		selectedItems: selectedItems
+	});
+
+	// Adding inputs from conditions to uniqueValues for mapping back from the dialog
+	if(condition2D) {
+		let cond = condition2D[0];
+		if(cond && cond.formattedValue) {
+			if(!uniqueValues[cond.formattedValue]) {
+				uniqueValues[cond.formattedValue] = [cond.rawValue];
+			}
+		}
+		cond = condition2D[1];
+		if(cond && cond.formattedValue) {
+			if(!uniqueValues[cond.formattedValue]) {
+				uniqueValues[cond.formattedValue] = [cond.rawValue];
+			}
+		}
+	}
+	// Initialize dialog
+	if(this._filterDialog.init) { // TODO: support initiailization in v1
+		this._filterDialog.init(dialogConfig);
+	}
+
+	// TODO: Move all settings to configuration object
+	this._filterDialog.useUTCTime = useUTCTime;
+	this._filterDialog.target = cell.getElement();
+	this._filterDialog._colIndex = colIndex;
+	this._filterDialog.data = items; // TODO: Move all settings to configuration object
+	this._filterDialog.filterMode = filterMode;
+	this._filterDialog.conditions = condition2D;
+	this._filterDialog.show();
+};
+/** @private
+* @function
+* @param {Object} config
+* @param {RowFilteringPlugin~FilterDialogOptions=} userConfig
+*/
+RowFilteringPlugin._overrideConfig = function(config, userConfig) {
+	if(!userConfig) {
+		return;
+	}
+
+	let sortUI = userConfig["sortUI"];
+	if(sortUI != null) {
+		config.sortUI = sortUI;
+	}
+
+	let filterUI = userConfig["filterUI"];
+	if(filterUI != null) {
+		config.filterUI = filterUI;
+	}
+
+	let advancedFilter = userConfig["advancedFilter"];
+	if (advancedFilter != null) {
+	  config.advancedFilter = advancedFilter;
+	}
+
+	let dateTimeFormat = userConfig["dateTimeFormat"];
+	if (dateTimeFormat != null) {
+	  config.dateTimeFormat = dateTimeFormat;
+	}
+
+	let compactMode = userConfig["compactMode"];
+	if (compactMode != null) {
+	  config.compactMode = compactMode;
+	}
+
+	let fieldDataType = userConfig["fieldDataType"];
+	if(fieldDataType != null) {
+		config.fieldDataType = fieldDataType;
+	}
+
+	let lang = userConfig["lang"];
+	if(lang != null) {
+		config.lang = lang;
+	}
+
+	let showOnlyFilteredItems = userConfig["showOnlyFilteredItems"];
+	if(showOnlyFilteredItems != null) {
+		config.showOnlyFilteredItems = showOnlyFilteredItems;
+	}
+
+	let rawDataAccessor = userConfig["rawDataAccessor"];
+	if(typeof rawDataAccessor === "function" || rawDataAccessor === null) { // Allow null value
+		config.rawDataAccessor = rawDataAccessor;
+	}
+
+	let formattedDataAccessor = userConfig["formattedDataAccessor"];
+	if(typeof formattedDataAccessor === "function" || formattedDataAccessor === null) { // Allow null value
+		config.formattedDataAccessor = formattedDataAccessor;
+	}
+
+	let sortLogic = userConfig["sortLogic"];
+	if(typeof sortLogic === "function" || sortLogic === null) { // Allow null value
+		config.sortLogic = sortLogic;
+	}
+
+	let groupCriteria = userConfig["groupCriteria"];
+	if(typeof groupCriteria === "function" || groupCriteria === null) { // Allow null value
+		config.groupCriteria = groupCriteria;
+	}
+
+	let groupSortLogic = userConfig["groupSortLogic"];
+	if(typeof groupSortLogic === "function" || groupSortLogic === null) { // Allow null value
+		config.groupSortLogic = groupSortLogic;
+	}
+
+	let itemList = userConfig["itemList"];
+	if(itemList != null) {
+		config.itemList = itemList;
+	}
+
+	let additionalItems = userConfig["additionalItems"];
+	if(additionalItems != null) {
+		config.additionalItems = additionalItems;
+	}
+	let blankValues = userConfig["blankValues"];
+	if(blankValues) {
+		if(typeof blankValues === "string") {
+			config.blankValues = blankValues;
+		} else {
+			config.blankValues = BLANKS;
+		}
+	}
+};
+
+/** @private
+* @param {Object} listObj
+* @return {Array<Object>}
+*/
+RowFilteringPlugin.prototype._toListScheme = function(listObj) {
+	let dialogConfig = listObj.dialogConfig;
+	let keys = listObj.keys;
+	let selectedItems = listObj.selectedItems;
+
+	let groupCriteria = dialogConfig.groupCriteria;
+	let items = keys;
+	let groupMap = {};
+	if(groupCriteria) {
+		for (let idx = 0; idx < items.length; idx++) {
+			let formattedVal = items[idx];
+			let item = {
+				id: idx,
+				label: formattedVal,
+				title: formattedVal, // Backward compatibility
+				nodes: [],
+				checked: selectedItems[formattedVal] ? true : false,
+				group: groupCriteria(formattedVal) || null // no group will be null map
+			};
+			if(!groupMap[item.group]) {
+				groupMap[item.group] = [];
+			}
+			groupMap[item.group].push(item);
+		}
+		let groupOrdered = Object.keys(groupMap);
+		let groupSortLogic = dialogConfig.groupSortLogic;
+		if(groupSortLogic) {
+			groupOrdered = groupOrdered.sort(groupSortLogic);
+		}
+		let sortedGroupItems = [];
+		for (let i = 0; i < groupOrdered.length; i++) {
+			let groupName = groupOrdered[i];
+			let groupAry = groupMap[groupName];
+			let validGroup = groupName != "null" ? true : false;
+			if(validGroup) {
+				sortedGroupItems.push({
+					type: "header",
+					label: groupName
+				});
+			}
+			sortedGroupItems = sortedGroupItems.concat(groupAry);
+			if(validGroup) {
+				sortedGroupItems.push({
+					type: "divider"
+				});
+			}
+		}
+		items = sortedGroupItems;
+	} else {
+		items = keys.map(function(formattedVal, idx) {
+			return {
+				id: idx,
+				label: formattedVal,
+				title: formattedVal, // Backward compatibility
+				nodes: [],
+				checked: selectedItems[formattedVal] ? true : false
+			};
+		});
+	}
+	return items;
+};
+/** @private
+* @param {number} colIndex
+* @return {Function}
+*/
+RowFilteringPlugin.prototype._getFormatter = function(colIndex) {
+	let tfp = this._getPlugin("TextFormattingPlugin");
+	if(tfp) {
+		let formatter = tfp.getFormatter(colIndex);
+		if(formatter) {
+			return formatter.format || null;
+		}
+	}
+	return null;
+};
+/** @private
+* @return {!FilterBuilder}
+*/
+RowFilteringPlugin._getFilterBuilder = function() {
+	if(!RowFilteringPlugin._filterBuilder) {
+		RowFilteringPlugin._filterBuilder = new FilterBuilder();
+	}
+	return RowFilteringPlugin._filterBuilder;
+};
+/** @private
+* @param {Object} e
+*/
+RowFilteringPlugin.prototype._onDialogClosed = function(e) {
+	if(this._hosts.length) {
+		this._hosts[0].focus();
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+RowFilteringPlugin.prototype._onDialogFilterChanged = function(e) {
+	let colIndex = this._filterDialog._colIndex;
+	let cfo = this._getColumnFilterOption(colIndex);
+	let uniqueValues = null;
+	let rawDataAccessor = null;
+	let formattedDataAccessor = null;
+	let ctx = null;
+
+	if(cfo) {
+		// TODO: Move uniqueValues out from column filter option object
+		uniqueValues = cfo.uniqueValues; // Unique values have to be stored before the removal of the filter
+		rawDataAccessor = cfo._rawDataAccessor;
+		formattedDataAccessor = cfo._formattedDataAccessor;
+
+		if(rawDataAccessor || formattedDataAccessor) {
+			ctx = {
+				"rawDataAccessor": rawDataAccessor || null,
+				"formattedDataAccessor": formattedDataAccessor || null
+			};
+		}
+		this.removeColumnFilters(colIndex);
+	} else {
+		uniqueValues = e.uniqueValues || {};
+	}
+
+	// Check inputs from advanced filter UIs
+	let conditions = e.detail.conditions;
+	if(Array.isArray(conditions)) { // Advanced condition filtering. Expecting 2D-Array
+		// Ensure rawValue input for number field data type
+		let condCount = conditions.length;
+		for(let m = 0; m < condCount; ++m) {
+			let cond = conditions[m];
+			let opDef = FilterOperators[cond[0]];
+			// string type has no need for formatted data or raw data. What is in display is the most important
+			if(opDef && opDef.type !== "string") {
+				let inputVal = cond[1]; // inputVal is hardcoded at index 1
+				let rawValues = uniqueValues[inputVal];
+				if(rawValues != null) {
+					cond[1] = rawValues[0];
+				}
+			}
+		}
+
+		if(ctx) {
+			ctx["_autoGenerated"] = true;
+		}
+		this.addColumnFilter(colIndex, conditions, ctx);
+		return;
+	}
+
+	// Check input from free text input
+	let selVal = e.detail.value;
+	let selAry = null;
+	if(selVal) {
+		if(typeof selVal === "string") { // Custom filter mode (free style text).
+			// WARNING: Free style text is no longer available anymore from the newer dialog
+			this.addColumnFilter(colIndex, selVal);
+			return;
+		} else {
+			selAry = /** @type{Array} */(selVal); // Expecting Array of object
+		}
+	}
+
+	let selCount = selAry ? selAry.length : 0;
+	if(!selCount) { return; }
+
+	// The given input is from simple text filter selector
+	// Validate if the input is correct and prepare selected items for building filter
+	let itemMap = {};
+	let selectedItems = {};
+	let atLeastOne = false;
+	for(let i = 0; i < selCount; ++i) {
+		let formattedVal = selAry[i].label || selAry[i].title; // title is defined by the multi-select element
+		// let selIdx = selAry[i].index; // index cannot be used due to filtering
+		if(selAry[i].value === BLANKS) {
+			if(!ctx) {
+				ctx = {};
+			}
+			ctx.blankValues = true;
+			atLeastOne = true;
+			continue;
+		}
+		let rawVals = uniqueValues[formattedVal];
+		if(!rawVals) {
+			continue;
+		}
+		atLeastOne = true;
+		selectedItems[formattedVal] = true;
+
+		let jLen = rawVals.length;
+		for(let j = 0; j < jLen; ++j) {
+			let rawVal = rawVals[j];
+			if(rawVal) {
+				itemMap[rawVal] = (rawVal instanceof Date) ? rawVal.getTime() : rawVal;
+			} else if(rawVal === 0) {
+				itemMap["0"] = true;
+			} else if(rawVal === false) {
+				itemMap["false"] = true;
+			}
+		}
+	}
+	if(atLeastOne) {
+		this.addColumnFilter(colIndex, itemMap, ctx);
+	}
+	this._dispatch("dialogCommitted", {
+		"value": e.detail.value,
+		"fieldDataType": e.detail.fieldDataType,
+		"colIndex": colIndex
+	});
+};
+
+/** @private
+* @param {Object} e
+*/
+RowFilteringPlugin.prototype._onDialogSortChanged = function(e) {
+	let stp = this._getPlugin("SortableTitlePlugin");
+	if(stp) {
+		let colIndex = this._filterDialog._colIndex;
+		let eDetail = e.detail.value ? e.detail.value : e.detail;
+
+		if(stp.getSortOrder(colIndex) === eDetail) {
+			stp.sortColumn(colIndex, "n", { "isUserAction": true });
+		} else {
+			stp.sortColumn(colIndex, eDetail, { "isUserAction": true });
+		}
+		this._dispatch("dialogCommitted", {
+			"sortOrder": e.detail.value,
+			"colIndex": colIndex
+		});
+	}
+};
+/** @private
+* @param {Object} e
+*/
+RowFilteringPlugin.prototype._onColumnAdded = function(e) {
+	if(e["context"]) {
+		let hasFilter = this._setColumnOptions(e["colIndex"], e["context"]);
+
+		if(hasFilter) {
+			this._applyPendingFilter();
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+RowFilteringPlugin.prototype._onColumnRemoved = function(e) {
+	let colData = /** @type{Object} */(e.columnData);
+	if(!colData) { return; }
+
+	let crf = colData["rowFiltering"];
+	let cfo = crf["filterOption"];
+	if(cfo) {
+		let funcIndex = this._columnFilters.indexOf(cfo);
+		if(funcIndex >= 0) {
+			this._columnFilters.splice(funcIndex, 1);
+		}
+
+		this._dispatch("filterChanged", {
+			"filterType": "column",
+			"changeType": "remove",
+			"colIndex": e.colIndex,
+			"field": cfo._field || ""
+		});
+
+		this._requestFilterRefresh();
+	}
+};
+
+/** the filter will automatically hide empty segment when all of its member are filtered out. If there is no active filter, any empty segment will not be hidden. Collapsed segment does not count as having a filter. A segment with no child is treated the same way as an empty segment.
+* @public
+* @param {boolean=} enabled=true
+*/
+RowFilteringPlugin.prototype.enableEmptySegmentFiltering = function (enabled) {
+	let host = this._hosts[0];
+	let dv = host ? host.getDataSource() : null;
+	if(dv && dv.enableEmptySegmentFiltering) {
+		dv.enableEmptySegmentFiltering(enabled);
+	}
+};
+/** the filter will automatically hide empty segment when all of its member are filtered out. If there is no active filter, any empty segment will not be hidden. Collapsed segment does not count as having a filter.
+* @public
+* @param {boolean=} enabled=true
+*/
+RowFilteringPlugin.prototype.enableSeparatorFiltering = function (enabled) {
+	let host = this._hosts[0];
+	let dv = host ? host.getDataSource() : null;
+	if(dv && dv.enableSeparatorFiltering) {
+		dv.enableSeparatorFiltering(enabled);
+	}
+};
+
+/**
+* @public
+* @param {number} colIndex
+* @param {boolean=} shown
+*/
+RowFilteringPlugin.prototype.showColumnFilterIcon = function(colIndex, shown) {
+	this.hideColumnFilterIcon(colIndex, shown == null ? false : !shown);
+};
+/**
+* @public
+* @param {number} colIndex
+* @param {boolean=} hidden
+*/
+RowFilteringPlugin.prototype.hideColumnFilterIcon = function(colIndex, hidden) {
+	hidden = hidden != null ? !!hidden : true;
+	let colSettings = this._getUserColumnSettings(colIndex);
+	if(colSettings.hiddenIcon !== hidden) {
+		let cssVal = hidden ? "none" : "";
+		let icons = this.getColumnFilterIcons(colIndex);
+		for(let i = 0; i < icons.length; i++) {
+			icons[i].style.display = cssVal;
+		}
+
+		let filterInput = this._getPlugin("FilterInputPlugin", this._hosts[0]);
+		if(filterInput && filterInput.disableColumnInput) {
+			filterInput.disableColumnInput(colIndex, hidden);
+		}
+
+		colSettings.hiddenIcon = hidden;
+	}
+};
+
+/** @public
+* @ignore
+* @return {!Object}
+*/
+RowFilteringPlugin.prototype._getEventHandlers = function() {
+	return {
+		"dialogSortChanged": this._onDialogSortChanged,
+		"dialogFilterChanged": this._onDialogFilterChanged,
+		"dialogClosed": this._onDialogClosed
+	};
+};
+
+
+
+export default RowFilteringPlugin;
+export { RowFilteringPlugin, RowFilteringPlugin as RowFiltering, RowFilteringPlugin as RowFilteringExtension };