@refinitiv-ui/efx-grid 6.0.111 → 6.0.112

package/lib/filter-dialog/lib/checkbox-list.d.ts

@@ -6,6 +6,19 @@ import "@refinitiv-ui/elements/item";
 import "@refinitiv-ui/elements/checkbox";
 import translation from "./locale/translation.js";
 
+declare namespace CheckboxList {
+
+    type itemState = {
+        type?: string|null,
+        label?: string|null,
+        checked?: boolean|null,
+        index?: number|null,
+        elem?: Element|null,
+        value?: (string|boolean)|null
+    };
+
+}
+
 declare class CheckboxList extends BasicElement {
 
     constructor();

package/lib/filter-dialog/lib/checkbox-list.js

@@ -5,6 +5,15 @@ import "@refinitiv-ui/elements/item";
 import "@refinitiv-ui/elements/checkbox";
 import translation from "./locale/translation.js";
 
+/**
+ * @typedef {Object} CheckboxList~itemState
+ * @property {string=} type
+ * @property {string=} label
+ * @property {boolean=} checked
+ * @property {number=} index
+ * @property {Element=} elem
+ * @property {(string|boolean)=} value
+*/
 /** @type {number}
 * @private
 * @constant
@@ -28,15 +37,18 @@ const _toLabelText = function(val) {
 * @function
 * @param {*} val
 * @param {number} idx
-* @return {!Object}
+* @return {CheckboxList~itemState}
 */
 const _toItemStates = function(val, idx) {
+	let textLabel = _toLabelText(val);
 	return {
-		label: _toLabelText(val),
+		type: val.type,
+		label: textLabel,
+		title: textLabel,
 		checked: (val && val.checked) ? true : false,
 		index: idx,
 		elem: null,
-		value: val.value
+		value: val.value || textLabel
 	};
 };
 /** @private
@@ -77,9 +89,13 @@ const _updateElement = function(elem, txt, checked) {
 * @param {string} str
 * @param {number} idx
 * @param {string} ctx
+* @param {string} type
 * @returns {boolean}
 */
-const _caseInsensitiveFilter = function(str, idx, ctx) {
+const _caseInsensitiveFilter = function(str, idx, ctx, type) {
+	if(type === "header" || type === "divider") {
+		return true;
+	}
 	return str.toLowerCase().indexOf(ctx) >= 0;
 };
 
@@ -108,6 +124,7 @@ class CheckboxList extends BasicElement {
 		this._states = []; // Item states before filtering
 		this._cachedItems = []; // To avoid repeatedly creating the same item element
 		this._items = []; // Actual existing elements (filtered items)
+		this._filterStates = []; // Existing item (after filtered)
 		this._inputFilter = null;
 	}
 
@@ -131,8 +148,8 @@ class CheckboxList extends BasicElement {
 	}
 
 	render() {
-		var lang = this._translation[this.lang] ? this.lang : "en";
-		var t =  this._translation[lang];
+		let lang = this._translation[this.lang] ? this.lang : "en";
+		let t =  this._translation[lang];
 		return html`
 			<div class='root'>
 				<div>
@@ -146,10 +163,10 @@ class CheckboxList extends BasicElement {
 
 	firstUpdated(changedProps) {
 		// Prepare list item template. TODO: This should be static variable
-		var checkBox = document.createElement("ef-checkbox");
-		var label = document.createElement("div");
+		let checkBox = document.createElement("ef-checkbox");
+		let label = document.createElement("div");
 		label.classList.add("item-label");
-		var itemContainer = document.createElement("div");
+		let itemContainer = document.createElement("div");
 		itemContainer.classList.add("item-container");
 		itemContainer.appendChild(checkBox);
 		itemContainer.appendChild(label);
@@ -157,7 +174,7 @@ class CheckboxList extends BasicElement {
 		this._templateItemEl.appendChild(itemContainer);
 
 		// Elements has been rendered. Cache element references for better performance
-		var root = this.shadowRoot;
+		let root = this.shadowRoot;
 		this._containerEl = root.getElementById("container");
 
 		this._selectAllBtn = root.getElementById("select_all");
@@ -169,8 +186,8 @@ class CheckboxList extends BasicElement {
 
 	updated(changedProps) {
 		if (changedProps.has("data")) {
-			var dataList = this.data;
-			var len = dataList ? dataList.length : 0;
+			let dataList = this.data;
+			let len = dataList ? dataList.length : 0;
 			if (this._cachedItems.length < len) {
 				this._cachedItems.length = len;
 			}
@@ -186,15 +203,15 @@ class CheckboxList extends BasicElement {
 	* @return {!Element}
 	*/
 	_toItemElement(state) {
-		var elem = state.elem;
+		let elem = state.elem;
 		if(!elem) {
-			var idx = state.index;
+			let idx = state.index;
 			elem = this._cachedItems[idx];
 			if(!elem) {
 				elem = this._cachedItems[idx] = this._templateItemEl.cloneNode(true);
 				elem.addEventListener("click", this._onItemClicked);
 
-				var itemContainer = elem.firstChild; // div.item-container
+				let itemContainer = elem.firstChild; // div.item-container
 				elem._checkbox = itemContainer.firstChild; // ef-checkbox
 				elem._label = itemContainer.lastChild; // label
 			}
@@ -213,15 +230,30 @@ class CheckboxList extends BasicElement {
 		}
 
 		// TODO: Optimize appending and removing items by finding appropriate item number
-		var container = this._containerEl;
+		let container = this._containerEl;
 		while(container.lastChild) {
 			container.removeChild(container.lastChild);
 		}
 
-		var ary = this._items;
-		var len = ary.length;
-		for(var i = 0; i < len; ++i) {
-			container.appendChild(ary[i]);
+		let ary = this._items;
+		let filterStates = this._filterStates;
+		let len = ary.length;
+		for(let i = 0; i < len; ++i) {
+			let item = ary[i];
+			let state = filterStates[i];
+			item.type = "";
+			let itemContainer = item.firstChild;
+			if(!itemContainer.contains(item._checkbox)){
+				itemContainer.insertBefore(item._checkbox, item._label);
+			}
+			let type = state.type;
+			if(type) {
+				if(type === "header") {
+					itemContainer.removeChild(item._checkbox);
+				}
+				item.type = type;
+			}
+			container.appendChild(item);
 		}
 		this._updateSelectAllState();
 	}
@@ -249,9 +281,9 @@ class CheckboxList extends BasicElement {
 			return;
 		}
 
-		var states = this._states;
-		var len = states.length;
-		for(var i = 0; i < len; ++i) {
+		let states = this._states;
+		let len = states.length;
+		for(let i = 0; i < len; ++i) {
 			_assignItemState(states[i], this.data[i]);
 		}
 
@@ -263,14 +295,15 @@ class CheckboxList extends BasicElement {
 	* @return {!Array<object>}
 	*/
 	getSelectedItems() {
-		var items = [];
-		var states = this._states;
-		var len = states.length;
-		for(var i = 0; i < len; ++i) {
-			var state = states[i];
+		let items = [];
+		let states = this._states;
+		let len = states.length;
+		for(let i = 0; i < len; ++i) {
+			let state = states[i];
 			if(_getCheckedState(state)) {
 				items.push({
 					title: state.label,
+					label: state.label,
 					index: i,
 					value: state.value
 				});
@@ -285,9 +318,9 @@ class CheckboxList extends BasicElement {
 	*/
 	selectAll(selected) {
 		selected = selected !== false;
-		var ary = this._items;
-		var len = ary.length;
-		for(var i = 0; i < len; ++i) {
+		let ary = this._items;
+		let len = ary.length;
+		for(let i = 0; i < len; ++i) {
 			ary[i]._checkbox.checked = selected;
 		}
 		this._updateSelectAllState(selected);
@@ -308,7 +341,7 @@ class CheckboxList extends BasicElement {
 		if(!inputFilter) {
 			inputFilter = null;
 		}
-		var dirty = (typeof inputFilter === "function");
+		let dirty = (typeof inputFilter === "function");
 		if(this._inputFilter !== inputFilter) {
 			this._inputFilter = inputFilter || null;
 			dirty = true;
@@ -323,14 +356,14 @@ class CheckboxList extends BasicElement {
 	* @private
 	*/
 	_filterItems() {
-		var states = this._states;
-		var len = states ? states.length : 0;
+		let states = this._states;
+		let len = states ? states.length : 0;
 		if(!len) {
 			this._items.length = 0;
 			return; // No new copy is generated
 		}
 
-		var inputFilter = this._inputFilter;
+		let inputFilter = this._inputFilter;
 		if(inputFilter) {
 			if(typeof inputFilter === "function") {
 				this._filterMethod = inputFilter;
@@ -349,6 +382,7 @@ class CheckboxList extends BasicElement {
 			states = states.slice(0, ITEM_LIMIT);
 		}
 
+		this._filterStates = states;
 		this._items = states.map(this._toItemElement);
 	}
 	/**
@@ -358,7 +392,7 @@ class CheckboxList extends BasicElement {
 	* @return {boolean}
 	*/
 	_byLabelText(state, idx) {
-		return this._filterMethod(state.label, idx, this._filterCtx);
+		return this._filterMethod(state.label, idx, this._filterCtx, state.type);
 	}
 
 	/**
@@ -367,7 +401,7 @@ class CheckboxList extends BasicElement {
 	*/
 	_onItemClicked(e) {
 		if(e.target.tagName !== "EF-CHECKBOX") { // checkbox may already toggle its state
-			var itemEl = e.currentTarget;
+			let itemEl = e.currentTarget;
 			itemEl._checkbox.checked = !itemEl._checkbox.checked;
 		}
 		this._updateSelectAllState();
@@ -383,10 +417,10 @@ class CheckboxList extends BasicElement {
 		}
 
 		if(selected == null) {
-			var ary = this._items;
-			var len = ary.length;
+			let ary = this._items;
+			let len = ary.length;
 			selected = len ? false : true;
-			for (var i = 0; i < len; i++) {
+			for (let i = 0; i < len; i++) {
 				if (ary[i]._checkbox.checked) {
 					selected = true;
 					break;

package/lib/filter-dialog/lib/filter-dialog.d.ts

@@ -36,6 +36,11 @@ declare namespace FilterDialog {
         sortChanged?: ((...params: any[]) => any)|null
     };
 
+    type ComboBoxItem = {
+        label: string,
+        value: string
+    };
+
 }
 
 declare class FilterDialog extends BasicElement {

package/lib/filter-dialog/lib/filter-dialog.js

@@ -34,6 +34,11 @@ import "./checkbox-list.js";
  * @property {Function=} sortChanged Sort changed handler
 */
 
+/**
+ * @typedef {Object} FilterDialog~ComboBoxItem
+ * @property {string} label text of item
+ * @property {string} value value of item when item is selected
+*/
 
 /** @type {string}
 * @private
@@ -111,9 +116,9 @@ const NUMBER_FILTERS = [
 /** @private
 * @function
 * @param {Array.<String>} options
-* @returns {Object}
+* @returns {FilterDialog~ComboBoxItem}
 */
-var arrayToComboBoxItem = function(options) {
+let arrayToComboBoxItem = function(options) {
 	return {
 		label: options[1],
 		value: options[0]
@@ -124,7 +129,7 @@ var arrayToComboBoxItem = function(options) {
 * @param {Array.<Array>} conditions
 * @returns {Array.<Object>}
 */
-var createComboBoxData = function(conditions) {
+let createComboBoxData = function(conditions) {
 	return conditions.map(arrayToComboBoxItem);
 };
 
@@ -199,7 +204,7 @@ class FilterDialog extends BasicElement {
 		}
 
 		if(changedProperties.has("config")) {
-			var options = this.config;
+			let options = this.config;
 			if(options) {
 				if (options.data) {
 					this.data = options.data;
@@ -287,8 +292,8 @@ class FilterDialog extends BasicElement {
 	* @return {*}
 	*/
 	render() {
-		var lang = this._translation[this._lang] ? this._lang : "en";
-		var t =  this._translation[lang];
+		let lang = this._translation[this._lang] ? this._lang : "en";
+		let t =  this._translation[lang];
 		return html`
 			<ef-panel id="root_panel" spacing with-shadow with-border>
 				<div id="filterDialogContent" class="filter-dialog dialog-theme-wrapper">
@@ -420,9 +425,9 @@ class FilterDialog extends BasicElement {
 	*/
 	updated(changedProps) {
 		// Update Sort UI
-		var isHiddenSortUIChanged = changedProps.has("hiddenSortUI");
-		var isHiddenFilterUIChanged = changedProps.has("hiddenFilterUI");
-		var isHiddenAdvancedFilterChanged = changedProps.has("hiddenAdvancedFilter");
+		let isHiddenSortUIChanged = changedProps.has("hiddenSortUI");
+		let isHiddenFilterUIChanged = changedProps.has("hiddenFilterUI");
+		let isHiddenAdvancedFilterChanged = changedProps.has("hiddenAdvancedFilter");
 		if (isHiddenSortUIChanged) {
 			let pn = this._sortUI.parentNode;
 			if (this.hiddenSortUI) {
@@ -458,7 +463,7 @@ class FilterDialog extends BasicElement {
 		}
 
 		if (isHiddenSortUIChanged || isHiddenFilterUIChanged) {
-			var isHide = this.hiddenSortUI || this.hiddenFilterUI;
+			let isHide = this.hiddenSortUI || this.hiddenFilterUI;
 			this._separator.classList.toggle("hide", isHide);
 		}
 		if(isHiddenAdvancedFilterChanged) {
@@ -490,7 +495,7 @@ class FilterDialog extends BasicElement {
 		this._cancelBtn.focus(); // Keep focus on cancel button when open dialog
 		this._updateDialogHeight(); // position of the popup element will always be updated
 
-		var popupElem = this._popup.getElement();
+		let popupElem = this._popup.getElement();
 		if(popupElem) {// After all changes, ensure that visibility is reset back
 			popupElem.style.visibility = "";
 		}
@@ -508,7 +513,7 @@ class FilterDialog extends BasicElement {
 	* @public
 	*/
 	show() {
-		var popupElem = this._popup.getElement();
+		let popupElem = this._popup.getElement();
 		if(popupElem) {// To prevent blinking due to size and position change
 			popupElem.style.visibility = "hidden";
 		}
@@ -664,9 +669,9 @@ class FilterDialog extends BasicElement {
 		if (this._isAdvancedFilterMode()) {
 			// Retrieve filter conditions from UI;
 			let oper1, oper2, val1, val2, connector;
-			var dateTimeType = toDateTimeType(this.fieldDataType);
-			var fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
-			var useUTCTime = false;
+			let dateTimeType = toDateTimeType(this.fieldDataType);
+			let fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
+			let useUTCTime = false;
 			if (fdt === DATE_TIME) {
 				useUTCTime = this.useUTCTime;
 				oper1 = this._dateTimeComboBoxes[0].value;
@@ -699,7 +704,7 @@ class FilterDialog extends BasicElement {
 
 				// Perform automatic data type conversion for only number field data type
 				if (fdt === "number") {
-					var num = NaN;
+					let num = NaN;
 					if (val1) {
 						num = Number(val1);
 						if(num === num) { // Convert to number only when number is valid
@@ -715,7 +720,7 @@ class FilterDialog extends BasicElement {
 					}
 				}
 			}
-			var ary2D = [];
+			let ary2D = [];
 
 			if(this._isValidCondition(oper1, val1)) {
 				ary2D.push([oper1, val1]);
@@ -757,9 +762,9 @@ class FilterDialog extends BasicElement {
 	* @private
 	*/
 	_clearAdvanceFilterUI() {
-		var defaultVal = "";
-		var dateTimeType = toDateTimeType(this.fieldDataType);
-		var fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
+		let defaultVal = "";
+		let dateTimeType = toDateTimeType(this.fieldDataType);
+		let fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
 		if (fdt === DATE_TIME) {
 			defaultVal = "DT";
 			this._clearValue(this._dateTimeComboBoxes[0], defaultVal);
@@ -785,9 +790,9 @@ class FilterDialog extends BasicElement {
 	*/
 	_updateGeneralComboBoxes() {
 		if(this._initialized) {
-			var filterItems;
-			var dateTimeType = toDateTimeType(this.fieldDataType);
-			var fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
+			let filterItems;
+			let dateTimeType = toDateTimeType(this.fieldDataType);
+			let fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
 			if(fdt === "number") {
 				filterItems = NUMBER_FILTERS;
 			} else if(fdt === "string" || fdt === "text") {
@@ -798,7 +803,7 @@ class FilterDialog extends BasicElement {
 			if(this._blankValues) {
 				filterItems = filterItems.concat(BLANK_FILTERS);
 			}
-			var translated = this._translateFilters(filterItems);
+			let translated = this._translateFilters(filterItems);
 			this._generalComboBoxes[0].data = createComboBoxData(translated);
 			this._generalComboBoxes[2].data = createComboBoxData(translated);
 		}
@@ -828,7 +833,7 @@ class FilterDialog extends BasicElement {
 			// So wee need to remove free-text and re-set again
 			// to track bug https://jira.refinitiv.com/browse/ELF-1694
 			// TODO:: need to remove WORKAROUND after ELF-1694 fixed
-			var hasFreeTextMode = elem.getAttribute("free-text") != null;
+			let hasFreeTextMode = elem.getAttribute("free-text") != null;
 			if (hasFreeTextMode) {
 				elem.removeAttribute("free-text");
 			}
@@ -874,10 +879,10 @@ class FilterDialog extends BasicElement {
 		}
 
 		const con1 = userConditions[0];
-		var validCon1 = false;
-		var conOp1 = "";
-		var conVal1 = "";
-		var connector = "";
+		let validCon1 = false;
+		let conOp1 = "";
+		let conVal1 = "";
+		let connector = "";
 		if(Array.isArray(con1)) {
 			conOp1 = con1[0];
 			if(con1.length && con1[0]) {
@@ -892,9 +897,9 @@ class FilterDialog extends BasicElement {
 		}
 
 		const con2 = userConditions[1];
-		var validCon2 = false;
-		var conOp2 = "";
-		var conVal2 = "";
+		let validCon2 = false;
+		let conOp2 = "";
+		let conVal2 = "";
 		if(validCon1 && Array.isArray(con2)) {
 			conOp2 = con2[0];
 			if(con2.length && conOp2) {
@@ -907,7 +912,7 @@ class FilterDialog extends BasicElement {
 			}
 		}
 
-		var firstRadioState = true;
+		let firstRadioState = true;
 		if(validCon1 && validCon2) {
 			firstRadioState = connector !== "OR";
 		}
@@ -966,7 +971,7 @@ class FilterDialog extends BasicElement {
 		const dialogCoverage = position.y + dialogHeight;
 		const heightDiff = dialogCoverage - windowHeight;
 
-		var heightChange = false;
+		let heightChange = false;
 		if(heightDiff > 0) {
 			heightChange = true;
 			const isAdvancedFilter = this._isAdvancedFilterMode();
@@ -1007,7 +1012,7 @@ class FilterDialog extends BasicElement {
 	* @private
 	*/
 	_addBlankItem() {
-		var ary = this._dataToArray(this.data);
+		let ary = this._dataToArray(this.data);
 		if(this._blankValues) {
 			let blankItem = {
 				id: "_blank",
@@ -1026,16 +1031,22 @@ class FilterDialog extends BasicElement {
 	* @private
 	*/
 	_updateValueSelector() {
-		var ary = this._dataToArray(this.data);
+		let ary = this._dataToArray(this.data);
 		this._dataSelector.data = ary; // Preserve original referencing
 		// Value selector for Filter by Condition
 		if(ary.length > ITEM_LIMIT) {
 			ary = ary.slice(0, ITEM_LIMIT); // Prevent combo box from over population
 		}
 		// Advance items
-		var advanceItems = ary.map(this._toComboBoxItem);
+		let advanceItems = [];
+		for (let i = 0; i < ary.length; i++) {
+			let item = ary[i];
+			if(!item.type) {
+				advanceItems.push(this._toComboBoxItem(item));
+			}
+		}
 		if(this._blankValues) {
-			var basicItems = advanceItems.slice(1);
+			let basicItems = advanceItems.slice(1);
 			this._generalComboBoxes[1].data = basicItems;
 			this._generalComboBoxes[3].data = basicItems;
 		} else {
@@ -1046,10 +1057,10 @@ class FilterDialog extends BasicElement {
 	/**
 	* @private
 	* @param {*} obj
-	* @returns {Object}
+	* @returns {FilterDialog~ComboBoxItem}
 	*/
 	_toComboBoxItem(obj) {
-		let itemVal = (typeof obj === "string") ? obj : obj.title || "";
+		let itemVal = (typeof obj === "string") ? obj : (obj.label || obj.title) || "";
 		return {
 			"label": itemVal,
 			"value": itemVal
@@ -1076,7 +1087,7 @@ class FilterDialog extends BasicElement {
 	* @return {Date}
 	*/
 	_getDateObject(dateString) {
-		var date = new Date(dateString);
+		let date = new Date(dateString);
 		if(date && this.useUTCTime == false){
 			date.setTime(date.getTime() + (date.getTimezoneOffset() * 60000)); // convert to local time
 		}
@@ -1088,7 +1099,7 @@ class FilterDialog extends BasicElement {
 	* @return {Object}
 	*/
 	_getTranslation() {
-		var lang = this._translation[this._lang] ? this._lang : "en";
+		let lang = this._translation[this._lang] ? this._lang : "en";
 		return this._translation[lang];
 	}
 
@@ -1099,10 +1110,10 @@ class FilterDialog extends BasicElement {
 	*/
 	_translateFilters(filters) {
 		let trans = this._getTranslation();
-		var len = filters.length;
-		var items = [];
-		var item;
-		for (var i = 0; i < len; i++) {
+		let len = filters.length;
+		let items = [];
+		let item;
+		for (let i = 0; i < len; i++) {
 			item = filters[i];
 			items.push([item[0], trans[item[1]]]);
 		}

package/lib/grid/index.js

@@ -1,3 +1,3 @@
 import {Grid} from "./lib/efx-grid.js";
 export {Grid}
-window.EFX_GRID = { version: "6.0.111" };
+window.EFX_GRID = { version: "6.0.112" };

package/lib/tr-grid-row-filtering/es6/RowFiltering.d.ts

@@ -32,12 +32,20 @@ declare namespace RowFilteringPlugin {
         rawDataAccessor?: ((...params: any[]) => any)|null,
         formattedDataAccessor?: ((...params: any[]) => any)|null,
         sortLogic?: ((...params: any[]) => any)|null,
+        groupCriteria?: ((...params: any[]) => any)|null,
+        groupSortLogic?: ((...params: any[]) => any)|null,
         itemList?: any[]|null,
         additionalItems?: any[]|null,
         compactMode?: boolean|null,
         blankValues?: (boolean|string)|null
     };
 
+    type FilterEntry = {
+        type?: string|null,
+        label: string,
+        checked: boolean
+    };
+
     type Options = {
         emptySegmentFiltering?: boolean|null,
         separatorFiltering?: boolean|null,

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

@@ -86,12 +86,21 @@ The expression can take various forms:<br>
 * @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 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
 */
 
+/** @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.
@@ -1922,13 +1931,10 @@ RowFilteringPlugin.prototype.openDialog = function(colIndex, runtimeDialogOption
 		});
 	}
 
-	let items = keys.map(function(formattedVal, idx) {
-		return {
-			id: idx,
-			title: formattedVal,
-			nodes: [],
-			checked: selectedItems[formattedVal] ? true : false
-		};
+	let items = this._toListScheme({
+		dialogConfig: dialogConfig,
+		keys: keys,
+		selectedItems: selectedItems
 	});
 
 	// Adding inputs from conditions to uniqueValues for mapping back from the dialog
@@ -1946,7 +1952,6 @@ RowFilteringPlugin.prototype.openDialog = function(colIndex, runtimeDialogOption
 			}
 		}
 	}
-
 	// Initialize dialog
 	if(this._filterDialog.init) { // TODO: support initiailization in v1
 		this._filterDialog.init(dialogConfig);
@@ -2016,6 +2021,16 @@ RowFilteringPlugin._overrideConfig = function(config, userConfig) {
 		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;
@@ -2034,6 +2049,72 @@ RowFilteringPlugin._overrideConfig = function(config, userConfig) {
 		}
 	}
 };
+
+/** @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}
@@ -2144,7 +2225,7 @@ RowFilteringPlugin.prototype._onDialogFilterChanged = function(e) {
 	let selectedItems = {};
 	let atLeastOne = false;
 	for(let i = 0; i < selCount; ++i) {
-		let formattedVal = selAry[i].title; // title is defined by the multi-select element
+		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) {

package/lib/versions.json

@@ -24,7 +24,7 @@
 	"tr-grid-percent-bar": "1.0.24",
 	"tr-grid-range-bar": "2.0.8",
 	"tr-grid-row-dragging": "1.0.35",
-	"tr-grid-row-filtering": "1.0.78",
+	"tr-grid-row-filtering": "1.0.79",
 	"tr-grid-row-grouping": "1.0.88",
 	"tr-grid-row-selection": "1.0.30",
 	"tr-grid-rowcoloring": "1.0.25",
@@ -32,6 +32,6 @@
 	"tr-grid-titlewrap": "1.0.22",
 	"@grid/formatters": "1.0.55",
 	"@grid/column-selection-dialog": "4.0.57",
-	"@grid/filter-dialog": "4.0.65",
+	"@grid/filter-dialog": "4.0.66",
 	"@grid/column-format-dialog": "4.0.45"
 }

package/package.json

@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.111"
+	"version": "6.0.112"
 }