@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

package/lib/tr-grid-column-stack/es6/ColumnStack.js

@@ -7,6 +7,11 @@ import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 
+/** @typedef {Object} ColumnStackPlugin~Options
+* @description Available options describing `columnStack` object specified in grid's option
+* @property {Array.<string>} fields Fields for stacking. The minimum is 2 fields.
+*/
+
 /** @typedef {Object} ColumnStackPlugin~ColumnOptions
 * @description Extension column options that can be specified on each individual grid's column option.
 * @property {string=} stackId Group ID
@@ -38,10 +43,6 @@ var ColumnStackPlugin = function () {
 
 Ext.inherits(ColumnStackPlugin, GridPlugin);
 
-/** @type {number}
-* @private
-*/
-ColumnStackPlugin._runningId = 0;
 /** @type {!Object.<string, Object>}
 * @private
 */
@@ -50,6 +51,25 @@ ColumnStackPlugin.prototype._stacks;
 * @private
 */
 ColumnStackPlugin.prototype._pendingStacks;
+/** @type {Object}
+* @private
+*/
+ColumnStackPlugin.prototype._columnStack = null;
+
+/** @type {number}
+* @private
+*/
+ColumnStackPlugin._runningId = 0;
+/** @private
+ * @return {string}
+ */
+ColumnStackPlugin.prototype._generateStackId = function() {
+	var sid = "Stack" + ColumnStackPlugin._runningId++;
+	while(this._stacks[sid]) {
+		sid = "Stack" + ColumnStackPlugin._runningId++;
+	}
+	return sid;
+};
 
 /** @override
 * @return {string}
@@ -60,7 +80,7 @@ ColumnStackPlugin.prototype.getName = function () {
 /** @override
 * @return {boolean}
 */
-GridPlugin.prototype.hasMultiTableSupport = function() {
+ColumnStackPlugin.prototype.hasMultiTableSupport = function() {
 	return true;
 };
 /** @public
@@ -112,28 +132,39 @@ ColumnStackPlugin.prototype.unload = function (host) {
 	this._dispose();
 };
 
+/** @private
+* @type {string}
+*/
+ColumnStackPlugin._styles = prettifyCss([
+	".tr-grid .collapsed .cell.grouping .valigner", [
+		"width: 0;"
+	],
+	".tr-grid .collapsed .cell.grouping .floating-panel", [
+		"width: 100%;",
+		"margin: 0;",
+		"justify-content: center;"
+	],
+	".tr-grid .collapsed .cell.grouping .front-panel, " +
+	".tr-grid .collapsed .cell.grouping .floating-panel *:not(.stack-icon)", [
+		"display: none;"
+	],
+	".tr-grid .collapsed .cell.grouping .floating-panel .stack-icon", [
+		"margin-left: 0;"
+	],
+	".stack-icon", [
+		"color: var(--grid-title-filter-icon-color);"
+	],
+	".stack-icon:hover", [
+		"color: var(--grid-title-filter-icon-hover-color);"
+	]
+]);
+
 /** @private
 * @param {Object} grid core grid object
 */
 ColumnStackPlugin._applyThemeColor = function(grid) {
-	if (!ColumnStackPlugin._styles) {
-		ColumnStackPlugin._styles = prettifyCss([
-			".tr-grid .collapsed .cell.grouping .valigner", [
-				"width: 0;"
-			],
-			".tr-grid .collapsed .cell.grouping .floating-panel", [
-				"width: 100%;",
-				"margin: 0;",
-				"justify-content: center;"
-			],
-			".tr-grid .collapsed .cell.grouping .front-panel, " +
-			".tr-grid .collapsed .cell.grouping .floating-panel *:not(.stack-icon)", [
-				"display: none;"
-			],
-			".tr-grid .collapsed .cell.grouping .floating-panel .stack-icon", [
-				"margin-left: 0;"
-			]
-		]);
+	if (!grid._columnStackingStyles) {
+		grid._columnStackingStyles = true;
 		injectCss(ColumnStackPlugin._styles, grid.getElement());
 	}
 };
@@ -147,41 +178,55 @@ ColumnStackPlugin.prototype.config = function (options) {
 	var columns = options["columns"];
 	if(!columns) { return; }
 
-	var stacks = {};
-	var len = columns.length;
-	for(var i = 0; i < len; ++i) {
+	var i, len = columns.length;
+	for(i = 0; i < len; ++i) {
 		this._setColumnStacking(i, {}); // used for further column index getting
-		var column = columns[i];
-		var stackOpt = column["stackId"] || column["stack"];
-		if(typeof stackOpt === "string") {
-			if(!stacks[stackOpt]) {
-				stacks[stackOpt] = {
-					spreading: false,
-					colIndices: []
-				};
-			}
+	}
 
-			stacks[stackOpt].colIndices.push(i);
-		} else if(typeof stackOpt === "object") {
-			if(!stacks[stackOpt["id"]]) {
-				stacks[stackOpt["id"]] = {
-					spreading: stackOpt["spreading"] === true,
-					collapsed: stackOpt["collapsed"] !== false,
-					colIndices: []
-				};
+	var sid, stacks = {};
+	var columnStack = options.columnStack;
+	if(columnStack != null) {
+		if(columnStack.fields && columnStack.fields.length > 1) {
+			this._columnStack = options.columnStack;
+			sid = this._generateStackId();
+			stacks[sid] = {
+				colRefs: columnStack.fields,
+				spreading: columnStack.spreading === true,
+				collapsed: columnStack.collapsed !== false
+			};
+		}
+	} else {
+		var column, stackOpt;
+		for(i = 0; i < len; ++i) {
+			column = columns[i];
+			stackOpt = column["stackId"] || column["stack"];
+			if(typeof stackOpt === "string") {
+				if(!stacks[stackOpt]) {
+					stacks[stackOpt] = {
+						colRefs: [],
+						spreading: false
+					};
+				}
+				stacks[stackOpt].colRefs.push(i);
+			} else if(typeof stackOpt === "object") {
+				if(!stacks[stackOpt["id"]]) {
+					stacks[stackOpt["id"]] = {
+						colRefs: [],
+						spreading: stackOpt["spreading"] === true,
+						collapsed: stackOpt["collapsed"] !== false
+					};
+				}
+				stacks[stackOpt["id"]].colRefs.push(i);
 			}
-			stacks[stackOpt["id"]].colIndices.push(i);
-		} else {
-			continue;
 		}
 	}
 
 	if(this._initializedGrid) {
-		for(var sid in stacks) {
-			this.stackColumns(stacks[sid].colIndices, sid, stacks[sid]);
+		for(sid in stacks) {
+			this.stackColumns(stacks[sid].colRefs, sid, stacks[sid]);
 		}
 	} else {
-		this._pendingStacks = stacks;
+		this._pendingStacks = this._pendingStacks || stacks;
 	}
 };
 
@@ -193,26 +238,30 @@ ColumnStackPlugin.prototype.config = function (options) {
 ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 	var obj = gridOptions || {};
 
-	var columns = obj.columns;
-	if (!columns) {
-		columns = obj.columns = [];
-	}
-
-	var len = this.getColumnCount();
-	for (var i = 0; i < len; ++i) {
-		var column = columns[i];
-		if (!column) {
-			column = columns[i] = {};
+	if (this._columnStack != null) {
+		obj.columnStack = this._columnStack;
+	} else {
+		var columns = obj.columns;
+		if (!columns) {
+			columns = obj.columns = [];
 		}
 
-		var stackOpt = this._getColumnStackOptions(i);
-		if (!stackOpt) continue;
+		var len = this.getColumnCount();
+		for (var i = 0; i < len; ++i) {
+			var column = columns[i];
+			if (!column) {
+				column = columns[i] = {};
+			}
 
-		column.stack = {
-			id: stackOpt.stackId,
-			spreading: stackOpt.spreading,
-			collapsed: stackOpt.collapsed
-		};
+			var stackOpt = this._getColumnStackOptions(i);
+			if (!stackOpt) continue;
+
+			column.stack = {
+				id: stackOpt.stackId,
+				spreading: stackOpt.spreading,
+				collapsed: stackOpt.collapsed
+			};
+		}
 	}
 
 	return obj;
@@ -223,7 +272,8 @@ ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 ColumnStackPlugin.prototype._afterInit = function () {
 	if(this._pendingStacks) {
 		for(var sid in this._pendingStacks) {
-			this.stackColumns(this._pendingStacks[sid].colIndices, sid, this._pendingStacks[sid]);
+			var stackOpt = this._pendingStacks[sid];
+			this.stackColumns(stackOpt.colRefs, sid, stackOpt);
 		}
 		this._pendingStacks = null;
 	}
@@ -285,9 +335,11 @@ ColumnStackPlugin.prototype._getColumnStackOptions = function(colIndex) {
 /** @private
 * @param {number} colIndex
 */
-ColumnStackPlugin.prototype._removeColumnStacking = function(colIndex) {
-	var colData = this._getColumnData(colIndex);
-	colData["stack"] = {};
+ColumnStackPlugin.prototype._removeColumnStackOptions = function(colIndex) {
+	var stacking = this._getColumnStacking(colIndex);
+	if(stacking) {
+		stacking["stackOpt"] = null;
+	}
 };
 /** @private
 * @return {!Array.<number>} Sorted column indices
@@ -408,11 +460,10 @@ ColumnStackPlugin.prototype._updateUI = function() {
 			} else if(stackIcon) {
 				cell.removeFloatingIcon(cell._stackIcon);
 				cell._stackIcon = null;
-				if(spreading) {
-					cell.removeClass("grouping");
-				} else {
-					cell.removeClass("stacking");
-				}
+
+				// Do not know the previous stacking mode so it needs to remove all the classes here.
+				cell.removeClass("grouping");
+				cell.removeClass("stacking");
 			}
 		}
 		if(colData) {
@@ -687,32 +738,33 @@ ColumnStackPlugin.prototype.getStackId = function(colIndex) {
 	return colData ? colData.stackId : "";
 };
 /** @public
-* @param {Array.<number>=} colIndices Selected columns will be used, if it is not given
+* @param {Array.<number|string>=} colRefs Names of fields or column indices. If not specified, selected columns will be used.
 * @param {string=} stackId Must be unique
 * @param {Object=} options
 * @return {boolean} Return true if all of the given columns is stacked together
 */
-ColumnStackPlugin.prototype.stackColumns = function(colIndices, stackId, options) {
-	if(!colIndices) {
-		colIndices = this._getSelectedColumns();
-	} else {
-		colIndices.sort(function(a, b) { return a - b; });
+ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
+	if(!colRefs) {
+		colRefs = this._getSelectedColumns();
 	}
 
-	var i, colIndex, len = colIndices.length;
-	var colCount = this.getColumnCount();
-	var validIndices = [];
-	for (i = 0; i < len; i++) {
-		colIndex = colIndices[i];
-		if(colIndex < colCount) {
-			validIndices.push(colIndex);
+	var needSorting = true;
+	if(colRefs.length) {
+		if(typeof colRefs[0] === "string") {// Do not sort in the case of field stack
+			needSorting = false;
 		}
+		colRefs = this.getColumnIndices(colRefs);
+	}
+
+	if(needSorting) {
+		colRefs.sort(function(a, b) { return a - b; });
 	}
-	len = validIndices.length;
+
+	var len = colRefs.length;
 	if(len <= 1) {
 		return false; // Only two or more columns can be stacked
 	}
-	if(!this.isColumnStackable(validIndices)) {
+	if(!this.isColumnStackable(colRefs)) {
 		return false;
 	}
 	var sid;
@@ -722,26 +774,24 @@ ColumnStackPlugin.prototype.stackColumns = function(colIndices, stackId, options
 		}
 		sid = stackId;
 	} else {
-		sid = "Stack" + ColumnStackPlugin._runningId++;
-		while(this._stacks[sid]) {
-			sid = "Stack" + ColumnStackPlugin._runningId++;
-		}
+		sid = this._generateStackId();
 	}
 
 	options = options || {};
 
-	var activeIndex = validIndices[0];
+	var activeIndex = colRefs[0];
 	// Collecting data
 	var stack = {};
 	stack.stackId = sid;
 	stack.spreading = options.spreading === true;
 	if(stack.spreading) {
-		activeIndex = validIndices[len - 1];
+		activeIndex = colRefs[len - 1];
 	}
 	stack.collapsed = options.collapsed !== false;
 	stack.stackRefs = new Array(len);
+	var i, colIndex;
 	for(i = 0; i < len; ++i) {
-		colIndex = validIndices[i];
+		colIndex = colRefs[i];
 		this._setColumnStackOptions(colIndex, stack);
 		stack.stackRefs[i] = this._getColumnStacking(colIndex);
 
@@ -750,12 +800,15 @@ ColumnStackPlugin.prototype.stackColumns = function(colIndices, stackId, options
 			this._setColumnVisibility(colIndex, false);
 		}
 	}
-	// Make sure that all columns stay packed together
-	this._moveStackedColumns(stack.stackRefs);
 
 	if(stack.spreading) {
+		// Make sure that all columns stay packed together
+		this._moveStackedColumns(stack.stackRefs);
 		stack.activeColumn = stack.stackRefs[stack.stackRefs.length - 1]; // Right most column is the active column
 	} else {
+		// Do not move column here to prevent column header from being unrendered because of swapped column index in header binding.
+		// Stacked columns will be moved in the unstacking method.
+		// TODO: Column title will not be rendered in Realtime Grid in the case of column added event.
 		stack.activeColumn = stack.stackRefs[0]; // Left most column is the active column
 		var csp = this._getPlugin("ColumnSelectionPlugin");
 		if(csp && csp.isEnabled()) {
@@ -764,7 +817,6 @@ ColumnStackPlugin.prototype.stackColumns = function(colIndices, stackId, options
 	}
 	this._stacks[sid] = stack;
 
-
 	var cfp = this._getPlugin("ColumnFilterPlugin");
 	if(cfp) {
 		cfp["refresh"]();
@@ -774,19 +826,64 @@ ColumnStackPlugin.prototype.stackColumns = function(colIndices, stackId, options
 };
 
 /** @public
-* @description Remove all stacking from the grid and replace it with a new one
+* @description Remove all stacking from the grid and replace it with a new one.
+*   The stacked fields are kept persistently in Grid.
+*   While adding columns Grid will try to restore stacking
+*   if there are at least 2 visible columns which are corresponding to the kept fields.
 * @param {Array.<number|string>} colRefs Names of fields or column indices
 * @return {boolean} true if the stack has been modified
 */
 ColumnStackPlugin.prototype.setStack = function(colRefs) {
+	// Keep state
+	var i, colRef, type;
+	var fields = [];
+	if(Array.isArray(colRefs)) {
+		for (i = 0; i < colRefs.length; i++) {
+			colRef = colRefs[i];
+			type = typeof colRef;
+			if(type === "number") {
+				fields.push(this._getField(colRef));
+			} else if (type === "string") {
+				fields.push(colRef);
+			}
+		}
+	}
+
+	if(fields.length > 1) {
+		if(!this._columnStack) {
+			this._columnStack = {
+				spreading: false,
+				collapsed: false
+			};
+		}
+		this._columnStack.fields = fields;
+	} else {
+		this._columnStack = null;
+	}
+
+	// Update UI
+	var sid = "_uniqueStack"; // WARNING : This hardcode for assign uniqe stacking id
+	if(!this._initializedGrid) {
+		if(this._columnStack) {
+			var pendingStacks = {};
+			pendingStacks[sid] = {
+				colRefs: fields,
+				spreading: false,
+				collapsed: false
+			};
+			this._pendingStacks = pendingStacks;
+		}
+		return false;
+	}
+
 	colRefs = this.getColumnIndices(colRefs);
 	if(colRefs.length <= 1) { // When the array is empty or contains only one element, all stacking is removed
 		return this.removeAllStacks();
 	}
 
 	// Check old data stacking
-	var count = 0, i;
-	var sid = "_uniqueStack"; // WARNING : This hardcode for assign uniqe stacking id
+	var count = 0;
+
 	if(this._stacks[sid]) {
 		var stackRefs = this._stacks[sid].stackRefs;
 		if(stackRefs.length === colRefs.length) {
@@ -848,14 +945,14 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 	for(i = 0; i < len; ++i) {
 		colIndex = colIndices[i];
 		if(colIndex < colCount) {
-			var colData = this._getColumnStackOptions(colIndex);
-			if(!colData) {
+			var stackOpt = this._getColumnStackOptions(colIndex);
+			if(!stackOpt) {
 				continue; // Invalid index
 			}
-			if(colData.collapsed === true) {
+			if(stackOpt.collapsed === true) {
 				this.expandGroup(colIndex);
 			}
-			stacks[colData.stackId] = 1; // Exclude duplicate stacks
+			stacks[stackOpt.stackId] = 1; // Exclude duplicate stacks
 		}
 	}
 
@@ -870,8 +967,11 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 		dirty = true;
 
 		var stackRefs = stack.stackRefs;
+		if(stack.spreading !== true) {
+			this._moveStackedColumns(stackRefs);
+		}
 		len = stackRefs.length;
-		if(colData && colData.spreading) {
+		if(stack.spreading) {
 			selFrom = this._getColumnIndex(stack.stackRefs[0]);
 		} else {
 			selFrom = this._getColumnIndex(stack.activeColumn);
@@ -881,7 +981,7 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 		for(i = 0; i < len; ++i) {
 			var stackRef = stackRefs[i];
 			colIndex = this._getColumnIndex(stackRef);
-			this._removeColumnStacking(colIndex);
+			this._removeColumnStackOptions(colIndex);
 			this._setColumnVisibility(colIndex, true);
 		}
 
@@ -913,14 +1013,18 @@ ColumnStackPlugin.prototype.removeAllStacks = function(enableUpdateUI) {
 		dirty = true;
 
 		var stackRefs = stack.stackRefs;
+		if(stack.spreading !== true && enableUpdateUI) {
+			this._moveStackedColumns(stackRefs);
+		}
+
 		var len = stackRefs.length;
 		for(var i = 0; i < len; ++i) {
 			var stackRef = stackRefs[i];
 			var colIndex = this._getColumnIndex(stackRef);
-			if(stack.collapsed) {
+			if(stack.collapsed && stack.spreading) {
 				this.collapseGroup(colIndex, false);
 			}
-			this._removeColumnStacking(colIndex);
+			this._removeColumnStackOptions(colIndex);
 			this._setColumnVisibility(colIndex, true);
 		}
 	}
@@ -1022,8 +1126,13 @@ ColumnStackPlugin.prototype._onColumnRemoved = function (e) {
 			stackOpt.stackRefs.splice(index, 1);
 			if(stackOpt.stackRefs.length < 2) {
 				// delete group
-				var colIndex = this._getColumnIndex(stackOpt.activeColumn);
-				this.unstackColumns([colIndex]);
+				var colIndex = this._getColumnIndex(stackOpt.stackRefs[0]);
+				if(colIndex > -1) {
+					this.unstackColumns([colIndex]);
+				} else {
+					// All stacked columns are removed
+					delete this._stacks[stackOpt.stackId];
+				}
 			} else {
 				if(stackOpt.spreading) {
 					stackOpt.activeColumn = stackOpt.stackRefs[stackOpt.stackRefs.length - 1];
@@ -1162,18 +1271,27 @@ ColumnStackPlugin.prototype._onColumnAdded = function (e) {
 	var colIndex = e.colIndex;
 	this._setColumnStacking(colIndex, {});
 
-	// add to group
-	var leftStackOpt = this._getColumnStackOptions(colIndex - 1);
-	var rightStackOpt = this._getColumnStackOptions(colIndex + 1);
-	if(leftStackOpt && (leftStackOpt === rightStackOpt)) {
-		var leftColStackRef = this._getColumnStacking(colIndex - 1);
-		var stackRef = this._getColumnStacking(colIndex);
-		var index = leftStackOpt.stackRefs.indexOf(leftColStackRef);
-		if(index > -1) {
-			leftStackOpt.stackRefs.splice(index + 1, 0, stackRef);
-			leftStackOpt.activeColumn = leftStackOpt.stackRefs[leftStackOpt.stackRefs.length - 1];
-			this._setColumnStackOptions(colIndex, leftStackOpt);
-			this._updateUI();
+	var columnStack = this._columnStack;
+	if (columnStack) {
+		var colIndices = this.getColumnIndices(columnStack.fields);
+		if (colIndices.length > 1) {
+			this.removeAllStacks(false);
+			this.stackColumns(columnStack.fields, null, columnStack);
+		}
+	} else {
+		// add to group
+		var leftStackOpt = this._getColumnStackOptions(colIndex - 1);
+		var rightStackOpt = this._getColumnStackOptions(colIndex + 1);
+		if(leftStackOpt && (leftStackOpt === rightStackOpt)) {
+			var leftColStackRef = this._getColumnStacking(colIndex - 1);
+			var stackRef = this._getColumnStacking(colIndex);
+			var index = leftStackOpt.stackRefs.indexOf(leftColStackRef);
+			if(index > -1) {
+				leftStackOpt.stackRefs.splice(index + 1, 0, stackRef);
+				leftStackOpt.activeColumn = leftStackOpt.stackRefs[leftStackOpt.stackRefs.length - 1];
+				this._setColumnStackOptions(colIndex, leftStackOpt);
+				this._updateUI();
+			}
 		}
 	}
 };

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.d.ts

@@ -46,7 +46,7 @@ declare class ConditionalColoringPlugin extends GridPlugin {
 
     public getConfigObject(gridOptions?: any): any;
 
-    public setColumnColoring(colIndex: number, columnOptions: ConditionalColoringPlugin.ColumnOptions): void;
+    public setColumnColoring(colIndex: number, columnOptions?: (ConditionalColoringPlugin.ColumnOptions|null)): void;
 
     public setColumnBlinking(colIndex: number, blinkingOptions?: (boolean|ConditionalColoringPlugin.Blinking), field?: string): void;
 

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.js

@@ -320,17 +320,21 @@ ConditionalColoringPlugin.prototype._cacheColumnPreviousValue = function(colInde
 };
 
 /** @public
+* @description To define coloring for columns, conditions or colorText or tickColor need to be specified.
+*   To enable cell blinking the blinking option need to be defined. Coloring options and blinking options
+*   can be applied to a column at the same time. The blinking or coloring abilities will be removed if the correspondent options
+*   are not given. If columnOptions is undefined or null, coloring and blinking will be removed.
 * @param {number} colIndex
-* @param {ConditionalColoringPlugin~ColumnOptions} columnOptions
+* @param {(ConditionalColoringPlugin~ColumnOptions|null)=} columnOptions
 * @example
-* var colDef = {
+* var columnOptions1 = {
 *   "conditions": [{ // Array.<Object> Condition Object Properties
 *     "expression": "[column0] > 0", // string
 *     "backgroundColor": "", // Optional string e.g. #ffffff, black
 *     "color": "" // Optional string e.g. #000000, white
 *   }]
 * };
-* var colDef2 = {
+* var columnOptions2 = {
 *   "field": "string",
 *   "colorText": true // string as Field or boolean for text coloring mode
 * };
@@ -338,19 +342,21 @@ ConditionalColoringPlugin.prototype._cacheColumnPreviousValue = function(colInde
 ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, columnOptions) {
 	// Save column config state
 	var colData = this._newColumnData(colIndex);
+	var blinkingOptions, field;
 	if(columnOptions) {
-		colData['conditions'] = columnOptions['conditions'];
-		colData['colorText'] = columnOptions['colorText'];
-		colData['tickColor'] = columnOptions['tickColor'];
-		colData['blinking'] = columnOptions['blinking'];
+		colData["conditions"] = columnOptions["conditions"];
+		colData["colorText"] = columnOptions["colorText"];
+		colData["tickColor"] = columnOptions["tickColor"];
+		colData["blinking"] = blinkingOptions = columnOptions["blinking"];
+		field = columnOptions["field"];
 	} else {
-		colData['conditions'] = null;
-		colData['colorText'] = null;
-		colData['tickColor'] = null;
-		colData['blinking'] = null;
+		colData["conditions"] = null;
+		colData["colorText"] = null;
+		colData["tickColor"] = null;
+		colData["blinking"] = null;
 	}
 
-	this.setColumnBlinking(colIndex, columnOptions["blinking"], columnOptions["field"]);
+	this.setColumnBlinking(colIndex, blinkingOptions, field);
 
 	var painter = colData["painter"];
 	var prevColoring = colData["coloring"];
@@ -363,6 +369,7 @@ ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, colu
 		if(colorOptions.condColoring) {
 			painter.setConditions(colorOptions.condColoring.conditions);
 		} else if(colorOptions.colorText) {
+			painter.resetColoring(); //Clear conditions before add new color
 			painter.addColorTextWithTheme(colorOptions.colorText.field);
 		}
 
@@ -703,10 +710,14 @@ ConditionalColoringPlugin.prototype.applyColor = function (colIndex, cell, rowDa
 * @param {Object} e
 */
 ConditionalColoringPlugin.prototype._onSectionBinding = function (e) {
+	var dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
+	if(!dataRows) {
+		return; // dataRows could be empty in case of no column is presented
+	}
+
 	var c, r, cell, painter, changedCols, rowDef, rid, changedRow, changedRows;
 	var dataRow, insertedId, colData, blinking, bgBlinking, cachedValues, updatePrev;
 	var section = e["section"];
-	var dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
 	var colCount = section.getColumnCount();
 	var fromR = /** @type{number} */(e["fromRowIndex"]);
 	var toR = /** @type{number} */(e["toRowIndex"]);

package/lib/tr-grid-filter-input/es6/FilterInput.d.ts

@@ -16,11 +16,13 @@ declare namespace FilterInputPlugin {
         disabled?: boolean,
         placeholder?: string,
         type?: string,
-        entries?: any[]
+        entries?: any[],
+        trigger?: string
     };
 
     type Options = {
-        inputCreated?: ((...params: any[]) => any)
+        inputCreated?: ((...params: any[]) => any),
+        trigger?: string
     };
 
 }