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

package/lib/tr-grid-filter-input/es6/FilterInput.js

@@ -0,0 +1,928 @@
+import { Ext } from '../../tr-grid-util/es6/Ext.js';
+import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
+import { ElfUtil } from '../../tr-grid-util/es6/ElfUtil.js';
+import { ElfDate } from '../../tr-grid-util/es6/ElfDate.js';
+import { CoralItems } from '../../tr-grid-util/es6/CoralItems.js';
+/** @typedef {Object} FilterInputPlugin~GridColumn
+* @description FilterInputPlugin options available in each individual grid's column
+* @property {FilterInputPlugin~ColumnOptions=} filterInput=null
+*/
+
+/** @typedef {(Object|boolean)} FilterInputPlugin~ColumnOptions
+* @description FilterInputPlugin options available in "filterInput" property on grid's column
+* @property {Function=} defaultLogic=null Logic for filtering
+* @property {Function=} filterLogic=null Alias to `defaultLogic`
+* @property {boolean=} disabled=false Disable UI
+* @property {string=} placeholder="" Placeholder text inside the input
+* @property {string=} type="text" Type of UI. Available types are "number", "select", "dropdown", "date"
+* @property {Array=} entries Entries of dropdown filters when type is "select"
+*/
+
+/** @typedef {Object} FilterInputPlugin~Options
+* @description FilterInputPlugin options available in main grid configuration under `filterInput` property
+* @property {Function=} inputCreated=null Handler executed after filter input is created
+*/
+
+/** @callback {Function} FilterInputPlugin~FilterLogic
+* @description Logic used to filter in/out on each row
+* @property {Object} e Object contains all related information provided by the extension
+* @property {string=} e.inputText Text for filter
+* @property {Element} e.input Input element
+* @property {string} e.field Field of the column being filtered
+* @property {Object} rowData Row Data of the filtered row
+*/
+
+/** @event FilterInputPlugin#inputCreated
+* @description `inputCreated` fired on each creation of filter input
+* @type {Object}
+* @property {Element} input Input element
+* @property {Element} cell
+* @property {number} colIndex
+* @property {number|null} colId
+* @property {number} rowIndex
+* @property {Object} grid core grid object
+* @property {Object} section Section(ILayoutGrid) contains all of the filter inputs
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+* @param {FilterInputPlugin~Options=} options
+*/
+
+var FilterInputPlugin = function FilterInputPlugin(options) {
+  this._onInputChanged = this._onInputChanged.bind(this);
+  this._onOpenedChanged = this._onOpenedChanged.bind(this);
+  this._onDateChanged = this._onDateChanged.bind(this);
+  this._onPostDataSourceChanged = this._onPostDataSourceChanged.bind(this);
+  this._onColumnAdded = this._onColumnAdded.bind(this);
+  this._onRowFilteringRetrieved = this._onRowFilteringRetrieved.bind(this);
+  this._onRowFilteringFailed = this._onRowFilteringFailed.bind(this);
+  this._onColumnFilterFailed = this._onColumnFilterFailed.bind(this);
+  this.refresh = this.refresh.bind(this);
+  this._updateUIs = this._updateUIs.bind(this);
+  this._hosts = [];
+
+  if (options) {
+    this.config({
+      "filterInput": options
+    });
+  }
+};
+
+Ext.inherits(FilterInputPlugin, GridPlugin);
+/** Filter Processor used to perform actual filtering (This extension provides only UIs).
+* @type {*}
+* @private
+*/
+
+FilterInputPlugin.prototype._filterProc = null;
+/** @type {Object}
+* @private
+*/
+
+FilterInputPlugin.prototype._gridConfig = null;
+/** Array of grid sections
+* @type {Array.<Object>}
+* @private
+*/
+
+FilterInputPlugin.prototype._inputSects = null;
+/** @type {number}
+* @private
+*/
+
+FilterInputPlugin.prototype._refreshTimer = 0;
+/** @type {number}
+* @private
+*/
+
+FilterInputPlugin.prototype._uiTimer = 0;
+/** @type {boolean}
+* @private
+*/
+
+FilterInputPlugin.prototype._freezeInputValue = false;
+/** @public
+* @return {string}
+*/
+
+FilterInputPlugin.prototype.getName = function () {
+  return "FilterInputPlugin"; // Read Only
+};
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+
+
+FilterInputPlugin.prototype.initialize = function (host, options) {
+  if (this._hosts.indexOf(host) >= 0) {
+    return;
+  }
+
+  this._hosts.push(host);
+
+  host.listen("postDataSourceChanged", this._onPostDataSourceChanged);
+  host.listen("columnAdded", this._onColumnAdded);
+  this.config(options); // In case of lazy loading
+
+  var title = host.getSection("title");
+
+  if (title) {
+    this._onPostDataSourceChanged();
+  }
+};
+/** @public
+* @param {Object} host core grid object
+*/
+
+
+FilterInputPlugin.prototype.unload = function (host) {
+  var at = this._hosts.indexOf(host);
+
+  if (at < 0) {
+    return;
+  }
+
+  host.unlisten("postDataSourceChanged", this._onPostDataSourceChanged);
+
+  this._hosts.splice(at, 1);
+
+  if (this._inputSects && at < this._inputSects.length) {
+    this._inputSects.splice(at, 1);
+  }
+
+  if (!this._hosts.length) {
+    this._compositeGrid = this._realTimeGrid = this._filterBuilder = null;
+    this._filterProc = this._gridConfig = this._inputSects = null;
+
+    if (this._refreshTimer) {
+      clearTimeout(this._refreshTimer);
+      this._refreshTimer = 0;
+    }
+
+    if (this._uiTimer) {
+      clearTimeout(this._uiTimer);
+      this._uiTimer = 0;
+    }
+  }
+};
+/** Prevent built-in config
+* @public
+* @ignore
+* @param {string} optionName
+* @param {Object} options
+* @return {*}
+*/
+
+
+FilterInputPlugin.prototype.beforeProcessOption = function (optionName, options) {
+  if (optionName === 'filterRow' || optionName === 'FilterRow') {
+    return false; // eslint-disable-line
+  }
+
+  return; // eslint-disable-line
+};
+/** @private
+* @param {string} optionName
+* @param {Object} options
+*/
+
+
+FilterInputPlugin.prototype._afterInit = function () {
+  this._requestPlugin(this._hosts[0], "RowFilteringPlugin", this._gridConfig).then(this._onRowFilteringRetrieved)["catch"](this._onRowFilteringFailed);
+};
+/** @public
+* @param {Object=} options
+*/
+
+
+FilterInputPlugin.prototype.config = function (options) {
+  if (!options) {
+    return;
+  }
+
+  this._gridConfig = options; // For loading dependency
+
+  this.addListener(options["filterInput"], "inputCreated");
+  var columns = options["columns"];
+  var len = columns ? columns.length : 0;
+
+  for (var c = 0; c < len; ++c) {
+    this._retrieveColumnOption(c, columns[c]);
+  }
+};
+/** Get a current state of grid and extension config
+ * @public
+ * @param {Object=} out_obj
+ * @returns {!Object}
+ */
+
+
+FilterInputPlugin.prototype.getConfigObject = function (out_obj) {
+  var obj = out_obj || {};
+  var columns = obj.columns;
+
+  if (!columns) {
+    columns = obj.columns = [];
+  }
+
+  var len = this.getColumnCount();
+
+  for (var i = 0; i < len; ++i) {
+    var col = columns[i];
+
+    if (!col) {
+      col = columns[i] = {};
+    }
+
+    var filterInput = col.filterInput = {};
+
+    var opt = this._getExtColumnOption(i);
+
+    if (!opt) {
+      continue;
+    }
+
+    if (opt.disabled != null) {
+      filterInput.disabled = opt.disabled;
+    }
+
+    if (opt.placeholder != null) {
+      filterInput.placeholder = opt.placeholder;
+    }
+
+    if (opt.type != null) {
+      filterInput.type = opt.type;
+    }
+
+    if (opt.entries != null) {
+      filterInput.entries = opt.entries;
+    }
+  }
+
+  return obj;
+};
+/** @private
+* @param {*} proc Filter Processor
+*/
+
+
+FilterInputPlugin.prototype._onRowFilteringRetrieved = function (proc) {
+  this._gridConfig = null;
+
+  if (proc) {
+    this._filterProc = proc;
+    this.refresh();
+  }
+};
+/** @private
+* @param {*} proc Filter Processor
+* @returns {*}
+*/
+
+
+FilterInputPlugin.prototype._onRowFilteringFailed = function () {
+  return this._requestPlugin(this._hosts[0], "ColumnFilterPlugin", this._gridConfig).then(this._onRowFilteringRetrieved)["catch"](this._onColumnFilterFailed); // Gracefully resolve if we fail this time
+};
+/** @private */
+
+
+FilterInputPlugin.prototype._onColumnFilterFailed = function () {
+  this._gridConfig = null;
+};
+/** @private
+* @param {Object=} e
+*/
+
+
+FilterInputPlugin.prototype._onColumnAdded = function (e) {
+  if (e.context && e.colIndex != null) {
+    this._retrieveColumnOption(e.colIndex, e.context);
+  }
+
+  this._requestUIUpdate();
+};
+/** @private */
+
+
+FilterInputPlugin.prototype._requestUIUpdate = function () {
+  if (!this._uiTimer) {
+    // HACK: To wait for other plugins receive columnAdded and avoid removing the wrong column filter
+    this._uiTimer = setTimeout(this._updateUIs, 50);
+  }
+};
+/** @private */
+
+
+FilterInputPlugin.prototype._updateUIs = function () {
+  this._uiTimer = 0;
+
+  if (this._inputSects) {
+    var len = this._inputSects.length;
+
+    for (var i = 0; i < len; ++i) {
+      this._createColumnInputs(this._inputSects[i], this._hosts[i]);
+    }
+  }
+};
+/** @private
+* @param {Object=} e
+*/
+
+
+FilterInputPlugin.prototype._onPostDataSourceChanged = function (e) {
+  if (this._inputSects) {
+    // TODO: Handle multiple hosts
+    return;
+  }
+
+  var len = this._hosts.length;
+
+  if (!len) {
+    return;
+  }
+
+  this._inputSects = [];
+  var rowHeight = window.getComputedStyle(this._hosts[0].getElement()).getPropertyValue('--grid-row-height'); // TODO: This should be retrieved from core grid
+
+  if (rowHeight) {
+    rowHeight = parseInt(rowHeight, 10);
+  }
+
+  var host;
+
+  for (var i = 0; i < len; ++i) {
+    host = this._hosts[i];
+    var titles = host.getAllSections("title");
+    var lastTitle = titles[titles.length - 1];
+    var at = lastTitle ? lastTitle.getIndex() + 1 : 0;
+    var section = this._inputSects[i] = host.addSectionAt(at, "title", "filterInputs");
+
+    if (rowHeight) {
+      section.setDefaultRowHeight(rowHeight);
+    }
+
+    section.enableClass("filter-inputs");
+    section.addRow(1);
+  }
+
+  if (!host.getVScrollStartIndex || host.getVScrollStartIndex() >= 0) {
+    host.freezeSection(at);
+  }
+
+  this._requestUIUpdate();
+};
+/** @private
+* @param {Object=} e
+*/
+
+
+FilterInputPlugin.prototype._onDateChanged = function (e) {
+  var host = this.getRelativeGrid(e);
+
+  if (host) {
+    var pos = host.getRelativePosition(e);
+    var colIndex = pos.colIndex;
+    var dateObj = ElfDate.getDate(e.detail); // TODO: Date object should be used for filtering instead of string
+
+    var dateStr = dateObj ? dateObj.toDateString().substr(4) : "";
+    this.filterColumn(colIndex, dateStr);
+  }
+};
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {Object} host core grid object
+*/
+
+
+FilterInputPlugin.prototype._createColumnInputs = function (section, host) {
+  var colCount = section.getColumnCount();
+
+  for (var c = 0; c < colCount; ++c) {
+    var cell = section.getCell(c, 0);
+    var elem = cell.getContent();
+
+    if (elem) {
+      continue;
+    }
+
+    cell.enableClass("no-sort"); // Prevent sorting
+
+    var colOpt = this._newExtColumnOption(c);
+
+    if (colOpt["disabled"]) {
+      continue;
+    }
+
+    elem = this._createFilterUI(colOpt);
+    cell.setContent(elem);
+    var arg = colOpt._filterArguments = {};
+    arg.input = elem;
+    arg.field = this._getField(c);
+    arg.cell = cell;
+    arg.grid = host;
+    var inputArgs = {
+      "input": elem,
+      "cell": cell,
+      "colIndex": c,
+      "rowIndex": 0,
+      "grid": host,
+      "section": section
+    };
+
+    if (this._compositeGrid) {
+      inputArgs['colId'] = this._compositeGrid.getColumnId(c);
+    }
+
+    this._dispatch("inputCreated", inputArgs);
+  }
+};
+/** @type {Object.<string, string>=}
+* @private
+*/
+
+
+FilterInputPlugin._uiMap = {
+  number: "ef-input",
+  select: "ef-select",
+  dropdown: "ef-select",
+  date: "ef-datetime-picker"
+};
+/** @private
+* @param {Object} colOpt
+* @return {!Element}
+*/
+
+FilterInputPlugin.prototype._createFilterUI = function (colOpt) {
+  var elemType = colOpt.type;
+  var uiTag = FilterInputPlugin._uiMap[elemType] || "input";
+
+  if (uiTag == "ef-input") {
+    if (ElfUtil.hasComponent("ef-number-field")) {
+      uiTag = "ef-number-field";
+    }
+  } else if (uiTag == "input") {
+    if (ElfUtil.hasComponent("ef-search-field")) {
+      uiTag = "ef-search-field";
+    }
+  }
+
+  var elem = document.createElement(uiTag);
+  elem.className = "filter-input";
+  elem.style.width = "100%";
+  elem.style.margin = "0";
+  var placeholder = colOpt["placeholder"];
+
+  if (placeholder) {
+    elem.setAttribute("placeholder", placeholder);
+  } // Prevent trigering other actions when a user interacts with filter input
+
+
+  elem.addEventListener("keydown", FilterInputPlugin._stopPropagation, false);
+  elem.addEventListener("click", FilterInputPlugin._stopPropagation, false);
+
+  switch (uiTag) {
+    case "ef-input":
+      elem.setAttribute("type", "number");
+      elem.addEventListener("value-changed", this._onInputChanged, false);
+      break;
+
+    case "ef-number-field":
+      elem.addEventListener("value-changed", this._onInputChanged, false);
+      break;
+
+    case "ef-select":
+      elem.data = CoralItems.create(colOpt.entries);
+      elem.addEventListener("value-changed", this._onInputChanged, false);
+      elem.addEventListener("opened-changed", this._onOpenedChanged, false);
+      break;
+
+    case "ef-datetime-picker":
+      elem.addEventListener("value-changed", this._onDateChanged, false);
+      break;
+
+    case "ef-search-field":
+      elem.addEventListener("search", this._onInputChanged, false);
+      elem.addEventListener("value-changed", this._onInputChanged, false);
+      break;
+
+    default:
+      elem.setAttribute("type", "search");
+      elem.addEventListener("search", this._onInputChanged, false);
+      elem.addEventListener("keyup", this._onInputChanged, false);
+      break;
+  }
+
+  return elem;
+};
+/** @private
+* @param {number} colIndex
+* @return {Object}
+*/
+
+
+FilterInputPlugin.prototype._getExtColumnOption = function (colIndex) {
+  return this._getColumnOption(colIndex, "filterInputOption") || null;
+};
+/** @private
+* @param {number} colIndex
+* @return {!Object}
+*/
+
+
+FilterInputPlugin.prototype._newExtColumnOption = function (colIndex) {
+  var colData = this._newColumnData(colIndex);
+
+  var option = colData["filterInputOption"];
+
+  if (!option) {
+    option = colData["filterInputOption"] = {};
+    option._comparingLogic = FilterInputPlugin._containingFilter;
+  }
+
+  return option;
+};
+/** @private
+* @param {number} colIndex
+* @param {Object} colDef
+*/
+
+
+FilterInputPlugin.prototype._retrieveColumnOption = function (colIndex, colDef) {
+  var filterOption = colDef ? colDef["filterInput"] : null;
+
+  if (filterOption != null) {
+    var option = this._newExtColumnOption(colIndex);
+
+    if (filterOption) {
+      var defaultLogic = filterOption["filterLogic"] || filterOption["defaultLogic"];
+
+      if (defaultLogic != null) {
+        if (typeof defaultLogic === "function") {
+          option._comparingLogic = defaultLogic;
+        } else if (!defaultLogic) {
+          option._comparingLogic = null;
+        }
+      }
+
+      var disabled = filterOption["disabled"];
+
+      if (disabled != null) {
+        option["disabled"] = disabled ? true : false;
+      }
+
+      var placeholder = filterOption["placeholder"];
+
+      if (typeof placeholder == "string") {
+        option["placeholder"] = placeholder;
+      }
+
+      var type = filterOption["type"];
+
+      if (typeof type == "string") {
+        option["type"] = type;
+      }
+
+      var entries = filterOption["entries"];
+
+      if (Array.isArray(entries)) {
+        // Add Clear filter option
+        entries.push({
+          label: 'No Filter',
+          value: 'No Filter'
+        });
+        option["entries"] = entries;
+      }
+    } else {
+      option["disabled"] = true;
+    }
+  } else if (this._getExtColumnOption(colIndex)) {
+    // Reset everything to default
+    this._getColumnData(colIndex)["filterInputOption"] = null;
+  }
+};
+/** @public
+* @ignore
+* @param {number} colIndex
+* @param {string} text
+*/
+
+
+FilterInputPlugin.prototype.updateUI = function (colIndex, text) {
+  if (this._freezeInputValue) return;
+  var input = this.getColumnInput(colIndex);
+
+  if (input) {
+    input.value = text;
+  }
+
+  this._updateColumnOption(colIndex, text);
+};
+/** @private
+* @param {number} colIndex
+* @param {string} text
+* @return {Object} Column option
+*/
+
+
+FilterInputPlugin.prototype._updateColumnOption = function (colIndex, text) {
+  var option = this._getExtColumnOption(colIndex);
+
+  if (!option) {
+    return null;
+  }
+
+  var inputText = "";
+
+  if (text || text === 0) {
+    inputText = typeof text !== "string" ? text + "" : text;
+  }
+
+  var arg = option._filterArguments;
+
+  if (arg) {
+    arg.inputText = option.inputText = inputText;
+    arg.lowerCasedText = inputText.toLowerCase();
+    arg.colIndex = colIndex;
+  }
+
+  return option;
+};
+/** @public
+* @param {number} colIndex
+* @return {Element} Input element
+*/
+
+
+FilterInputPlugin.prototype.getColumnInput = function (colIndex) {
+  if (this._inputSects) {
+    var sect = this._inputSects[0]; // TODO: Handle multi-grids
+
+    var cell = sect.getCell(colIndex, 0);
+
+    if (cell && cell.getElement()) {
+      return cell.getContent();
+    }
+  }
+
+  return null;
+};
+/** Clear input UI and remove all filters from the specified column
+* @public
+* @param {(null|number)=} colIndex=null clear filter input at specific colIndex, if null then all input will be clear.
+*/
+
+
+FilterInputPlugin.prototype.removeColumnFilters = function (colIndex) {
+  var sect = this._inputSects && this._inputSects[0]; // TODO: Handle multi-grids
+
+  if (sect) {
+    if (colIndex != null) {
+      this.updateUI(colIndex, '');
+    } else {
+      var count = this.getColumnCount();
+
+      for (var index = 0; index < count; index++) {
+        this.updateUI(index, '');
+      }
+    }
+  }
+
+  this._freezeInputValue = true;
+
+  this._filterProc.removeColumnFilters(colIndex);
+
+  this._freezeInputValue = false;
+};
+/** Alias to {@link FilterInputPlugin#removeColumnFilters} Clear input UI and remove all filters from the specified column
+* @public
+* @function
+* @param {(null|number)=} colIndex=null clear filter input at specific colIndex, if null then all input will be clear.
+*/
+
+
+FilterInputPlugin.prototype.removeColumnFilter = FilterInputPlugin.prototype.removeColumnFilters;
+/** Force filtering for every column
+* @public
+* @param {number=} delayMs=0 Set delay in millisecond to avoid repeatedly filtering
+*/
+
+FilterInputPlugin.prototype.refresh = function (delayMs) {
+  if (delayMs) {
+    if (!this._refreshTimer) {
+      this._refreshTimer = setTimeout(this.refresh, delayMs);
+    }
+
+    return;
+  }
+
+  this._refreshTimer = 0;
+
+  if (this._filterProc) {
+    this._filterProc.refresh();
+  }
+};
+/** Change filter logic or context
+* @public
+* @param {number} colIndex
+* @param {Function} func
+* @param {*=} ctx Context object that will be provided as the first parameter of the filter function
+*/
+
+
+FilterInputPlugin.prototype.setFilterLogic = function (colIndex, func, ctx) {
+  if (colIndex < 0) {
+    return;
+  }
+
+  var option = this._newExtColumnOption(colIndex);
+
+  var inputText = option.inputText;
+
+  if (func) {
+    if (ctx != null) {
+      option._filterArguments = ctx; // WARNING: This replaces all existing argument
+    }
+  } else {
+    func = null;
+  }
+
+  option._comparingLogic = func;
+
+  if (inputText) {
+    this.filterColumn(colIndex, inputText);
+  }
+};
+/** Force filtering for a single column by changing filtering text
+* @public
+* @param {number} colIndex
+* @param {string} text
+*/
+
+
+FilterInputPlugin.prototype.filterColumn = function (colIndex, text) {
+  var option = this._updateColumnOption(colIndex, text);
+
+  if (!option) {
+    return;
+  } // This is because we need to toggle the icon
+
+
+  this._setColumnFilter(colIndex, option);
+};
+/** @private
+* @param {number} colIndex
+* @param {Object} filterOptions
+*/
+
+
+FilterInputPlugin.prototype._setColumnFilter = function (colIndex, filterOptions) {
+  var proc = this._filterProc;
+
+  if (proc) {
+    this._freezeInputValue = true;
+
+    if (proc.hasColumnFilter()) {
+      // TODO: There should be a way to get column filters
+      proc.removeColumnFilters(colIndex); // TODO: this is slow
+    }
+
+    if (filterOptions._comparingLogic && filterOptions.inputText) {
+      var columnFilter = filterOptions._columnFilter;
+
+      if (!columnFilter) {
+        columnFilter = this._realTimeGrid ? FilterInputPlugin._rtCompareRow : FilterInputPlugin._compareRow;
+        columnFilter = filterOptions._columnFilter = columnFilter.bind(null, filterOptions);
+      }
+
+      proc.addColumnFilter(colIndex, columnFilter);
+    }
+
+    this._freezeInputValue = false;
+  }
+};
+/** @private
+* @param {Object=} e
+*/
+
+
+FilterInputPlugin.prototype._onInputChanged = function (e) {
+  FilterInputPlugin._stopPropagation(e);
+
+  var host = this.getRelativeGrid(e);
+
+  if (!host) {
+    return;
+  }
+
+  var pos = host.getRelativePosition(e);
+  var colIndex = pos.colIndex;
+  var input =
+  /** @type{Element} */
+  e.currentTarget; // If selected No Filter option - remove select filter
+
+  if (input.value === "No Filter" && input.tagName.indexOf("SELECT") >= 0) {
+    input.value = null;
+  }
+
+  this.filterColumn(colIndex, input.value);
+};
+/** @private
+* @param {Object=} e
+* @description WORKAROUND:: set pointer events none to ef-select when options popup opened.
+* this will make ef-select can close popup when click at ef-select
+*/
+
+
+FilterInputPlugin.prototype._onOpenedChanged = function (e) {
+  if (e.detail.value) {
+    //open
+    e.currentTarget.style.setProperty('pointer-events', 'none');
+  } else {
+    //close
+    e.currentTarget.style.removeProperty('pointer-events');
+  }
+};
+/** @private
+* @param {Object=} e
+*/
+
+
+FilterInputPlugin._stopPropagation = function (e) {
+  if (e) {
+    e.stopPropagation();
+  }
+};
+/** @private
+* @function
+* @param {Object} filterOptions
+* @param {Object} rowData
+* @param {string|number} rid
+* @return {boolean}
+*/
+
+
+FilterInputPlugin._compareRow = function (filterOptions, rowData, rid) {
+  return filterOptions._comparingLogic(filterOptions._filterArguments, rowData);
+};
+/** @private
+* @function
+* @param {Object} filterOptions
+* @param {Object} rowData
+* @param {string|number} rid
+* @return {boolean}
+*/
+
+
+FilterInputPlugin._rtCompareRow = function (filterOptions, rowData, rid) {
+  return filterOptions._comparingLogic(filterOptions._filterArguments, rowData["ROW_DEF"].getRowData());
+};
+/** Default Filter Logic
+* @private
+* @function
+* @param {Object} e Filter argument
+* @param {Object} rowData
+* @return {boolean}
+*/
+
+
+FilterInputPlugin._containingFilter = function (e, rowData) {
+  var str = e.lowerCasedText || e.inputText;
+  var eventType = e.input && e.input.type;
+
+  if (str) {
+    var data = rowData[e.field];
+
+    if (data != null) {
+      var dataStr;
+
+      if (typeof data != "string") {
+        if (data instanceof Date) {
+          dataStr = data.toDateString().toLowerCase();
+        } else {
+          dataStr = data + "";
+        }
+      } else if (data) {
+        dataStr = data.toLowerCase();
+      }
+
+      if (dataStr) {
+        if (eventType === "number") {
+          // Custom check if type is number
+          return Number(dataStr) === Number(str);
+        } else {
+          // Normal check if type is not a number
+          return dataStr.indexOf(str) >= 0;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  return true;
+};
+
+export default FilterInputPlugin;
+export { FilterInputPlugin, FilterInputPlugin as FilterInput, FilterInputPlugin as FilterInputExtension };