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

package/lib/rt-grid/es6/ColumnDefinition.js

@@ -0,0 +1,1203 @@
+/* eslint-disable */
+import FieldDefinition from "./FieldDefinition.js";
+import PredefinedFormula from "./PredefinedFormula.js";
+import Formula from "../../tr-grid-util/es6/formula/Formula.js";
+import Engine from "../../tr-grid-util/es6/formula/Engine.js";
+/* eslint-enable */
+
+/** @callback ColumnDefinition~SortLogic
+* @param {*} valA Data or RowDefinition object, depending on rowSorting flag, used for comparison
+* @param {*} valB Data or RowDefinition object, depending on rowSorting flag, used for comparison
+* @param {number} order Order code. 1 means ascending order and -1 means descending order
+* @param {Object} ctx Context Object of the current sorting operation
+*/
+
+/** @typedef {Object} ColumnDefinition~Options
+* @description ColumnDefinition options
+* @property {string=} field="" Field for real-time, ADC, formula sources
+* @property {string=} dataType="" data type eg. string, datetime, number
+* @property {string=} formulaReference=""
+* @property {Array.<string>=} require=null Extra fields required by this column will be requested for real-time data.
+* @property {string=} name="" Label of the column
+* @property {boolean=} notRealTimeField=false If enabled, the `field` will not be requested for real-time data. By enabling this, `rowSorting` will also be disabled, if not specified.
+* @property {(boolean|string|null)=} tooltip=null Show tooltip in header section
+* @property {Function=} headerBinding=null Method for custom header rendering.
+* @property {Function=} headerRenderer=null Alias to `headerBinding`
+* @property {Function=} binding=null Method for custom rendering. It will be executed on each data update and scrolling
+* @property {Function=} renderer=null Alias to `binding`
+* @property {ColumnDefinition~SortLogic=} sortLogic=null
+* @property {ColumnDefinition~SortLogic=} sortingLogic=null Alias to `sortLogic`
+* @property {ColumnDefinition~SortLogic=} sorter=null Alias to `sortLogic`
+* @property {boolean=} rowSorting=null If set to true, RowDefinition object will be used for sorting comparison. If set to false, data from the given `field` will be used for sorting comparison.
+* @property {boolean=} sortable=true If disabled, the column cannot be sorted by user click
+* @property {string=} sort="" Deprecated Alias to `sortOrder`
+* @property {string=} sortOrder="" The column can be sorted in ascending and descending order by specifying the order "a", "d". This option will sort the column when it is initialized or inserted at runtime.
+* @property {Object=} styles=null Key/value pair Object specifying CSS styles
+* @property {number=} width=NaN If specified, column will have a fixed width in pixel
+* @property {number=} minWidth=NaN If specified, column will have a minimum width in pixel
+* @property {boolean=} scalable=true Column scalability forces column to be scaled and filled the grid. `width` property will be used as a weight/ratio
+* @property {string=} className=""
+* @property {string=} class="" Alias to `className`
+* @property {string=} textAlign="" Text alignment for content and column header. Available values are: left|center|right
+* @property {string=} alignment="" Alias to `textAlign`
+* @property {string=} headerAlignment="" Text alignment for column header. This will override `textAlign` option for column header.
+* @property {string=} titleAlignment="" Alias to `headerAlignment`
+* @property {boolean=} hidden=false
+* @property {string=} id A unique identifier for the column
+* @property {boolean=} textSelect=false If enabled, user can select text in this column
+* @property {boolean=} keepModel If enabled, initial column's options will be kept
+* @property {boolean=} stationary=false If enabled, the column order cannot be changed (i.e., this column and any column to its left cannot be moved)
+* @property {boolean=} leftPinned=false If enabled, the column will not be part of the scrollable area and is pinned to the left side
+* @property {boolean=} rightPinned=false If enabled, the column will not be part of the scrollable area and is pinned to the right side
+* @property {Object=} info=null For storing any additional information to the column
+* @property {boolean=} focusable=false If enabled, the column will be used to find focusable element when pressing tab key
+* @property {string=} backgroundColor CSS color value
+*/
+
+/** mapping of field type to javascript type
+* @type {Object.<string, string>}
+* @private
+*/
+const TYPE_MAPPING = {
+	STRING: "string",
+	BOOLEAN: "boolean",
+	NUMBER: "number",
+
+	DATE: "datetime",
+	DATETIME: "datetime",
+	TIME: "datetime",
+
+	ENUMERATED: "string",
+	ALPHANUMERIC: "string",
+	PERCENT: "string",
+
+	PRICE: "number",
+	DOUBLE: "number",
+	MONEY: "number",
+
+	INTEGER: "number",
+	FLOAT: "number",
+	SCORE: "number"
+};
+
+/** @type {string}
+* @public
+* @const
+*/
+const COL_DEF = "COL_DEF";
+
+/** @private
+* @param {string} str
+* @return {string}
+*/
+let _toAlignment = function(str) {
+	if(str) {
+		let ch = str.charAt(0).toLowerCase();
+		if(ch === "l") {
+			return "left";
+		}
+		if(ch === "r") {
+			return "right";
+		}
+		if(ch === "c") {
+			return "center";
+		}
+	}
+	return "";
+};
+
+/** @constructor
+* @param {ColumnDefinition~Options=} columnOption
+* @param {*=} hostGrid
+*/
+let ColumnDefinition = function(columnOption, hostGrid) {
+	this._defaultRenderer = this._defaultRenderer.bind(this);
+	this._customRenderer = this._customRenderer.bind(this);
+
+	this._internalRenderer = this._defaultRenderer;
+	this._internalSorter = this._defaultSorter;
+
+	this._eventArg = {"colDef": this}; // WARNING: Circular reference
+	if(hostGrid) {
+		this._updateContext("grid", hostGrid);
+		this._updateContext("core", hostGrid["getCoreGrid"]()); // TODO: Handle multiple core grids
+	}
+
+	this._classes = [];
+	this._requiredFields = [];
+	this._children = [];
+
+	if(columnOption) {
+		if(columnOption["parent"]) { // WARNING: This assume time series child, when have a parent
+			this._initializeTimeSeriesChild(columnOption);
+		} else {
+			this.initialize(columnOption);
+		}
+	}
+
+};
+//#region Private Members
+/** This is used as a cache for better performance. The actual field is stored in the core
+* @type {string}
+* @private
+*/
+ColumnDefinition.prototype._field = "";
+/** @type {string}
+* @private
+*/
+ColumnDefinition.prototype._dataType = "";
+/** @type {string}
+* @private
+*/
+ColumnDefinition.prototype._name = "";
+/** @type {boolean}
+* @private
+*/
+ColumnDefinition.prototype._defaultName = true;
+/** @type {boolean}
+* @private
+*/
+ColumnDefinition.prototype._defaultField = true;
+/** @type {string|null}
+* @private
+*/
+ColumnDefinition.prototype._tooltip = null;
+/** @type {!Array.<string>}
+* @private
+*/
+ColumnDefinition.prototype._requiredFields;
+/** @type {Function}
+* @private
+*/
+ColumnDefinition.prototype._headerRenderer = null;
+/** @type {string}
+* @private
+*/
+ColumnDefinition.prototype._headerAlignment = "";
+/** @type {!Function}
+* @private
+*/
+ColumnDefinition.prototype._internalRenderer;
+/** @type {Array.<Function>}
+* @private
+*/
+ColumnDefinition.prototype._userRenderers = null;
+/** @type {Function}
+* @private
+*/
+ColumnDefinition.prototype._activatedRenderer = null;
+/** @type {Object.<string, Function>}
+* @private
+*/
+ColumnDefinition.prototype._rendererMap = null;
+/** @type {Function}
+* @private
+*/
+ColumnDefinition.prototype._userSorter = null;
+/** @type {boolean}
+* @private
+*/
+ColumnDefinition.prototype._sortable = true;
+
+/** @type {!Object}
+* @private
+*/
+ColumnDefinition.prototype._eventArg;
+/** @type {boolean}
+* @private
+*/
+ColumnDefinition.prototype._autoGenerated = false;
+
+/** @type {!Array.<string>}
+* @private
+*/
+ColumnDefinition.prototype._classes;
+
+/** @type {Engine}
+* @private
+*/
+ColumnDefinition.prototype._fnEngine = null;
+/** @type {Formula}
+* @private
+*/
+ColumnDefinition.prototype._formula = null;
+/** @type {string}
+* @private
+*/
+ColumnDefinition.prototype._formulaRef = "";
+/** @type {string}
+ * @deprecated
+* @private
+*/
+ColumnDefinition.prototype._initialOrder = "";
+/** @type {boolean|null}
+* @private
+*/
+ColumnDefinition.prototype._rowSorting = null;
+/** @type {boolean}
+* @private
+*/
+ColumnDefinition.prototype._textSelect = false;
+
+/** @type {Object}
+* @private
+*/
+ColumnDefinition.prototype._userModel = null;
+
+/** @type {Grid~ColumnDefinition}
+* @private
+*/
+ColumnDefinition.prototype._parent = null;
+/** @type {Array<ColumnDefinition>}
+* @private
+*/
+ColumnDefinition.prototype._children = null;
+/** @type {Object}
+* @private
+*/
+ColumnDefinition.prototype._info = null;
+/** @type {Object}
+* @private
+*/
+ColumnDefinition.prototype._coreColDef = null;
+/** @type {boolean}
+* @private
+*/
+ColumnDefinition.prototype._focusable = false;
+//#endregion Private Members
+
+
+/** @public
+*/
+ColumnDefinition.prototype.dispose = function() {
+	this._eventArg = {}; // Clear all references
+	this._coreColDef = null;
+	this._activatedRenderer = this._rendererMap = null;
+	this.setRenderer(null); // this._userRenderers are removed
+	this.setSorter(null);
+	this._userModel = null;
+	this._parent = null;
+	this._children = null;
+	// TODO: Remove any related reference from this._fnEngine
+};
+
+/** @private
+* @param {ColumnDefinition~Options|string=} columnOption
+*/
+ColumnDefinition.prototype._initializeTimeSeriesChild = function(columnOption) {
+	this._autoGenerated = true;
+	let parentDef = /** @type{ColumnDefinition} */(columnOption["parent"]);
+	this._setParent(parentDef);
+	this.initialize(columnOption);
+};
+/** @public
+* @param {ColumnDefinition~Options=} columnOption
+*/
+ColumnDefinition.prototype.initialize = function(columnOption) {
+	if(!columnOption) {
+		return;
+	}
+
+	let i, len, key, val;
+	//#region Apply pre-defined option
+	let field = columnOption["field"]; // Field could be null or undefined here
+	let defaultOption = FieldDefinition.get(field);
+	if(defaultOption && defaultOption !== columnOption) { // The column match the default field list
+		// WARNING: This changes reference of the user object. Any new property added won't affect anything outside of this method
+		let userOption = columnOption;
+		columnOption = {}; // Create a new object for cloning process
+
+		for(key in defaultOption) {
+			columnOption[key] = defaultOption[key];
+		}
+
+		for(key in userOption) {
+			columnOption[key] = userOption[key]; // User option will override default option with the same key
+		}
+	}
+	//#endregion Apply pre-defined option
+
+	val = columnOption["formulaEngine"];
+	if(val && val["addFormula"]) {
+		this._fnEngine = /** @type{Engine} */(val);
+	}
+	val = columnOption["formulaReference"];
+	if(val) {
+		this._formulaRef = val + "";
+	}
+
+	val = columnOption["require"] || columnOption["requiredFields"];
+	if(val != null) { // Empty string is allowed
+		if(typeof val === "string") {
+			this._requiredFields = val.split(" ");
+		} else if(Array.isArray(val)) {
+			this._requiredFields = val.slice();
+		}
+	}
+
+	this._setField(field, columnOption); // Perform some field manipulation
+
+	val = columnOption["name"];
+	if(val == null) {
+		val = columnOption["title"]; // For backward compatability
+	}
+	if(val != null) { // Name can be empty string
+		this._name = (typeof val === "string") ? val : (val + "");
+		this._defaultName = false;
+	}
+
+	val = columnOption["dataType"];
+	if(val != null) {
+		this._dataType = val;
+	}
+
+	val = columnOption["notRealTimeField"];
+	if(val != null) {
+		FieldDefinition.setFieldProperty(field, "IsRealtimeField", !val);
+	}
+
+	val = columnOption["tooltip"];
+	if(val != null) { // Tooltip can be empty string
+		this._tooltip = val;
+	}
+
+	val = columnOption["headerAlignment"] || columnOption["titleAlignment"];
+	if(val != null) {
+		this._headerAlignment = _toAlignment(val);
+	}
+
+	val = columnOption["headerBinding"] || columnOption["headerRenderer"];
+	// eslint-disable-next-line no-undefined
+	if(val !== undefined) { // null is allowed for headerBinding
+		this._headerRenderer = val;
+	}
+
+	val = columnOption["binding"] || columnOption["renderer"];
+	if(!val) {
+		val = columnOption["formatter"]; // Migrate from Composite Grid
+	}
+	// eslint-disable-next-line no-undefined
+	if(val !== undefined) { // null is allowed for renderer
+		if(val instanceof Array) {
+			len = val.length;
+			for(i = 0; i < len; ++i) {
+				this.addRenderer(/** @type{Function} */(val[i]));
+			}
+		} else if(val) {
+			if(typeof val === "function") {
+				this.setRenderer(val);
+			} else if(val["binding"]) {
+				this.setRenderer(val["binding"]);
+			}
+		} else {
+			this.setRenderer(null);
+		}
+	}
+
+	val = columnOption["rowSorting"];
+	if(val != null) {
+		this._rowSorting = val ? true : false;
+	}
+
+	val = columnOption["sortLogic"] || columnOption["sortingLogic"] || columnOption["sorter"];
+	// eslint-disable-next-line no-undefined
+	if(val !== undefined) { // null is allowed for sorter
+		this.setSorter(/** @type{Function} */(val));
+	}
+
+	// Deprecate
+	val = columnOption["sortable"];
+	if(val != null) {
+		this._sortable = val ? true : false;
+	}
+
+	val = columnOption["focusable"];
+	if(val != null) {
+		this._focusable = val ? true : false;
+	}
+
+	val = columnOption["className"] || columnOption["class"];
+	if(typeof val === "string") {
+		this._classes = val.split(" ");
+	}
+
+	// Deprecate
+	val = columnOption["sortOrder"] || columnOption["sort"];
+	if(val) {
+		this._initialOrder = val;
+	}
+
+	val = columnOption["textSelect"];
+	if(val) {
+		this._textSelect = val;
+	}
+
+	val = columnOption["info"];
+	if(val) {
+		this._info = val;
+	}
+
+	this._userModel = columnOption; // WARNING: This may not actually the user object
+};
+
+/** @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getId = function() {
+	if(this._coreColDef) {
+		return this._coreColDef["id"] || "";
+	}
+	return "";
+};
+/** @public
+* @return {!Array.<string>}
+*/
+ColumnDefinition.prototype.getRequireFields = function() {
+	// TODO: Validate the fields
+	return this._requiredFields;
+};
+/** @public
+* @function
+* @return {!Array.<string>}
+*/
+ColumnDefinition.prototype.getRequiredFields = ColumnDefinition.prototype.getRequireFields;
+/** @public
+* @return {!Function}
+*/
+ColumnDefinition.prototype.getRenderer = function() {
+	return this._internalRenderer;
+};
+/** @public
+* @return {Function}
+*/
+ColumnDefinition.prototype.getHeaderRenderer = function() {
+	return this._headerRenderer;
+};
+
+/** @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getName = function() {
+	if(this._defaultName) {
+		if(this._defaultField) {
+			return "Column " + this.getId();
+		}
+		return this.getField();
+	}
+	return this._name;
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isDefaultName = function() {
+	return this._defaultName;
+};
+/** @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getFieldDefinition = function () {
+	return FieldDefinition.get(this.getField());
+};
+/** get realtime field data type
+* @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getFieldDataType = function () {
+	let fieldDef = this.getFieldDefinition();
+	if(fieldDef && fieldDef.fieldDataType) {
+		return fieldDef.fieldDataType;
+	}
+	return "";
+};
+/** get data type
+* @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getDataType = function () {
+	if(this._dataType) return this._dataType;
+
+	let fieldDataType = this.getFieldDataType();
+	if(fieldDataType) {
+		return TYPE_MAPPING[fieldDataType.toUpperCase()];
+	}
+	return "";
+};
+/** set data type
+* @public
+* @param {string} dataType
+*/
+ColumnDefinition.prototype.setDataType = function (dataType) {
+	let val = TYPE_MAPPING[dataType.toUpperCase()];
+	if(val) {
+		dataType = val;
+	}
+	this._dataType = dataType;
+};
+/** get data type
+* @public
+* @param {string} field
+* @return {string}
+*/
+ColumnDefinition.getDataType = function(field) {
+	let fieldDef = FieldDefinition.get(field);
+	if(fieldDef) {
+		let fieldDataType = fieldDef.fieldDataType ? fieldDef.fieldDataType.toUpperCase() : null;
+		return TYPE_MAPPING[fieldDataType] ? TYPE_MAPPING[fieldDataType] : "";
+	}
+	return "";
+};
+/** @public
+* @ignore
+* @return {boolean|string|null}
+*/
+ColumnDefinition.prototype.getTooltipValue = function() {
+	return this._tooltip;
+};
+/** @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getTooltip = function() {
+	if(this._tooltip != null) {
+		if(typeof this._tooltip === "string") {
+			return this._tooltip; // There is a custom tooltip
+		} else if(!this._tooltip) {
+			return "";
+		}
+	}
+
+	let name = this.getName();
+	if(name) {
+		return name;
+	}
+
+	let field = this.getField();
+	if(field) {
+		return field;
+	}
+
+	return "";
+};
+/** @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getField = function() {
+	if(this._coreColDef) {
+		return this._coreColDef["field"] || "";
+	}
+	return "";
+};
+/** @public
+* @return {!Array.<string>}
+*/
+ColumnDefinition.prototype.getAllFields = function() {
+	let field = this.getField();
+	if(field) {
+		return this._requiredFields.concat(field);
+	}
+	return this._requiredFields.slice();
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isRealTimeField = function() {
+	return FieldDefinition.isRealTimeField(this.getField() || this._field);
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isTimeSeries = function() {
+	return FieldDefinition.isTimeSeries(this.getField());
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isTimeSeriesChild = function() {
+	return FieldDefinition.isTimeSeriesChild(this.getField());
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isFormulaField = function() {
+	return this._formula ? true : false;
+};
+/** @public
+* @param {string} field
+* @return {boolean}
+*/
+ColumnDefinition.isFormulaField = function(field) {
+	return FieldDefinition.isFormula(field);
+};
+/** @public
+* @param {string} field
+* @return {boolean}
+*/
+ColumnDefinition.isAdcField = function(field) {
+	return FieldDefinition.isAdc(field);
+};
+/** @public
+* @param {string} field
+* @return {boolean}
+*/
+ColumnDefinition.isRealTimeField = function(field) {
+	return FieldDefinition.isRealTimeField(field);
+};
+/** @public
+* @function
+* @param {Array.<string>} fields To be used by Array.reduce method
+* @param {ColumnDefinition} colDef
+* @return {!Array.<string>}
+*/
+ColumnDefinition.getRealTimeFields = function(fields, colDef) {
+	if(colDef.isRealTimeField()) {
+		fields.push(colDef.getField());
+	}
+
+	// TODO: Exclude any formula references from requesting real-time field
+	let reqFields = colDef.getRequiredFields();
+	let len = reqFields.length;
+	for(let i = 0; i < len; ++i) {
+		let field = reqFields[i];
+		if(ColumnDefinition.isRealTimeField(field)) {
+			fields.push(field);
+		}
+	}
+	return fields;
+};
+/** @public
+ * @deprecated
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isSortable = function() {
+	return this._sortable;
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isScalable = function() {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	return core.getColumnScalability(colIndex);
+};
+/** Deprecated, this function will be return initial sort order of this column, The current sort state may be different from initial sort state.
+* @public
+* @deprecated
+* @return {string}
+*/
+ColumnDefinition.prototype.getInitialSortOrder = function() {
+	// WARNING: This state is different from `sortOrder`, it is the state when grid is initialized.
+	return this._initialOrder;
+};
+/** @public
+* @return {number}
+*/
+ColumnDefinition.prototype.getWidth = function() {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	return core.getColumnWidth(colIndex);
+};
+/** @public
+* @return {number}
+*/
+ColumnDefinition.prototype.getMinWidth = function() {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	return core.getMinimumColumnWidth(colIndex);
+};
+/** @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getTextAlign = function() {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	return core.getColumnAlignment(colIndex);
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isFieldEmpty = function() {
+	return !this.getField();
+};
+
+/** @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getHeaderAlignment = function() {
+	return this._headerAlignment || "";
+};
+/** @public
+* @return {!Array.<string>}
+*/
+ColumnDefinition.prototype.getClasses = function() {
+	return this._classes;
+};
+/** @public
+* @param {Object=} colOptions
+* @return {!Object}
+*/
+ColumnDefinition.prototype.getConfigObject = function(colOptions) {
+	let obj = colOptions || {};
+
+	if(this._info){
+		obj["info"] = this._info;
+	}
+
+	if(obj["field"] == null) {
+		if(!this._defaultField) {
+			let field = this.getField();
+			if(field) {
+				obj["field"] = field;
+			}
+		}
+	}
+
+	let value = this.getDataType();
+	if(value) {
+		obj["dataType"] = value;
+	}
+
+	if(this._formulaRef) {
+		obj["formulaReference"] = this._formulaRef;
+	}
+
+	if(this._requiredFields && this._requiredFields.length) {
+		obj["require"] = this._requiredFields;
+	}
+
+	if(!this._defaultName) {
+		obj["name"] = this.getName();
+	}
+
+	// The 'IsRealtimeField' property will only be set if the user sets 'notRealTimeField' in the column options. It will be returned if the user has this option enabled, otherwise it will not be returned
+	value = FieldDefinition.getFieldProperty(this.getField(), "IsRealtimeField") === false;
+	if(value) {
+		obj["notRealTimeField"] = value;
+	}
+
+	if(this._tooltip != null) {
+		obj["tooltip"] = this._tooltip;
+	}
+
+	if(this._rowSorting != null) {
+		obj["rowSorting"] = this._rowSorting;
+	}
+
+	if(!this._sortable) {
+		obj["sortable"] = false;
+	}
+
+	let classes = this._classes;
+	if(classes && classes.length > 0) {
+		obj["className"] = classes.join(" ");
+	}
+
+	if(this._textSelect) {
+		obj["textSelect"] = this._textSelect;
+	}
+
+	if(this._headerAlignment) {
+		obj["headerAlignment"] = this._headerAlignment;
+	}
+
+	if(this._autoGenerated) {
+		obj["autoGenerated"] = this._autoGenerated;
+	}
+
+	if(this._focusable) {
+		obj["focusable"] = true;
+	}
+
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+
+	// The scalable, width and minWidth cannot be shifted into core as getConfigObject is accessible from colDef.
+	let scalable = core.getColumnScalability(colIndex);
+	let width = core.getColumnCustomLaneSize(colIndex);
+
+	if (scalable !== true || width !== 1) {
+		obj["scalable"] = scalable;
+		obj["width"] = width;
+	}
+
+	value = core.getMinimumColumnWidth(colIndex);
+	if(value > 0) {
+		obj["minWidth"] = value;
+	}
+
+	// If "hidden" property already available from core/extensions, don't override this property
+	if(obj["hidden"] == null) {
+		if(!core.getColumnVisibility(colIndex, 0)) {
+			obj["hidden"] = true;
+		}
+	}
+
+	value = core.getColumnAlignment(colIndex);
+	if(value !== "default") {
+		obj["textAlign"] = value;
+	}
+
+	return obj;
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isHidden = function() {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	return !core.isColumnVisible(colIndex);
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isTextSelect = function () {
+	return this._textSelect;
+};
+/** @public
+* @param {boolean=} bool
+*/
+ColumnDefinition.prototype.hide = function(bool) {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	core.hideColumn(colIndex, bool !== false);
+};
+/** This will clear all previously stored renderers and set a new one.
+* @public
+* @param {Function} func
+*/
+ColumnDefinition.prototype.setHeaderRenderer = function(func) {
+	this._headerRenderer = func;
+};
+/** This will clear all previously stored renderers and set a new one.
+* @public
+* @param {Function} func
+*/
+ColumnDefinition.prototype.setRenderer = function(func) {
+	if(typeof func === "function") {
+		this._internalRenderer = this._customRenderer;
+		if(this._activatedRenderer !== func) {
+			if(this._userRenderers) {
+				this._userRenderers.length = 0;
+			} else {
+				this._userRenderers = [];
+			}
+			this._userRenderers.push(func);
+		}
+	} else {
+		this._internalRenderer = this._defaultRenderer;
+		this._userRenderers = null;
+	}
+};
+
+
+/** @public
+* @return {ColumnDefinition}
+*/
+ColumnDefinition.prototype.getParent = function() {
+	return this._parent;
+};
+/**
+* @private
+* @param {ColumnDefinition} parentDef
+* @return {boolean}=true if have any change
+*/
+ColumnDefinition.prototype._setParent = function(parentDef) {
+	if(this._parent === parentDef || parentDef === this) { // The same parent is given
+		return false;
+	}
+
+	if(parentDef) {
+		this._parent = parentDef;
+		this._parent._addChild(this); // sync child and parent
+	}
+	return false;
+};
+/**
+* @public
+* @return {Array.<ColumnDefinition>}
+*/
+ColumnDefinition.prototype.getChildren = function() {
+	return this._children;
+};
+/**
+* @private
+* @param {ColumnDefinition} colDef Child column definition
+*/
+ColumnDefinition.prototype._addChild = function(colDef) {
+	if(this === colDef || this._children.indexOf(colDef) > -1) {
+		return;
+	}
+	this._children.push(colDef);
+};
+
+/** Add more renderer to the existing list
+* @public
+* @param {Function} func
+*/
+ColumnDefinition.prototype.addRenderer = function(func) {
+	if(func) {
+		if(this._userRenderers) {
+			this._userRenderers.push(func);
+		} else {
+			this.setRenderer(func);
+		}
+	}
+};
+/** Make the given renderer the first priority, overriding any existing renderer. The method still maintain existing renderers for restoring back to original state.
+* @public
+* @param {string=} id ID for renderer mapping. If not specified the default renderer will be picked up
+* @param {Function=} func If not specified the renderer which corresponded id from mapping will be picked up. If false is given, the corresponding id will be cleared.
+* @return {boolean} Current activation state after the call
+*/
+ColumnDefinition.prototype.activateRenderer = function(id, func) {
+	let renderer = null;
+	if (id != null) {
+		let rendererMap = this._rendererMap;
+		if (!rendererMap) {
+			rendererMap = this._rendererMap = {};
+		}
+
+		if (typeof func === "function") {
+			renderer = rendererMap[id] = func;
+		} else if(func == null) { // Use cached method if null or undefined value is given
+			renderer = rendererMap[id];
+		} else if(!func) { // Empty string, zero, or false value
+			renderer = rendererMap[id] = null;
+		}
+	}
+
+	this._activatedRenderer = renderer || null;
+	if(!renderer) { // Restore back existing user renderers if there is no activated renderer
+		renderer = this._userRenderers ? this._userRenderers[0] : null;
+	}
+	this.setRenderer(renderer);
+	return this._activatedRenderer ? true : false;
+};
+
+/** @public
+* @return {Function}
+*/
+ColumnDefinition.prototype.getSorter = function() {
+	return this._userSorter;
+};
+/** @public
+* @param {ColumnDefinition~SortLogic=} func
+*/
+ColumnDefinition.prototype.setSorter = function(func) {
+	this._userSorter = (typeof func === "function") ? func : null;
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isRowSorting = function() {
+	if(this._rowSorting == null) {
+		return !FieldDefinition.getFieldProperty(this.getField(), "IsRealtimeField");
+	}
+	return this._rowSorting ? true : false;
+};
+
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isAutoGenerated = function() {
+	return this._autoGenerated;
+};
+
+/** To allow user change column name in run-time (language change or localization)
+* @public
+* @param {string} str
+*/
+ColumnDefinition.prototype.setName = function(str) {
+	this._name = str;
+	this._defaultName = false;
+};
+
+/** @private
+* @param {string|null=} field
+* @param {ColumnDefinition~Options=} columnOption
+*/
+ColumnDefinition.prototype._setField = function(field, columnOption) {
+	this._defaultField = (field == null); // undefined or null
+	if(!field) {
+		field = "";
+	}
+	field = field.trim();
+
+	let formulaStr = columnOption ? columnOption["formula"] : "";
+	if(this._fnEngine) {
+		let uppercasedF = field.toUpperCase(); // For comparison only
+		let predefinedF = formulaStr || PredefinedFormula.get(uppercasedF);
+		if(predefinedF || ColumnDefinition.isFormulaField(field)) {
+			field = Formula.toUpperCase(field);
+			this._formula = this._fnEngine.addFormula(predefinedF || field); // Always a success
+			if(predefinedF) {
+				this._formula.setAlias(field); // This field is used for retrieving data for dependent fields
+				this._fnEngine.addReference(this._formula, field); // Add reference name for dependencies calculation
+			}
+
+			this._retrieveNestedFields(this._formula.getFieldNames());
+		}
+		if(this._formulaRef) { // Allow user input to be used as a shorthand of the field
+			// WARNING: Formula Reference must be unique, or else it will be changed
+			this._formulaRef = this._fnEngine.addReference(this._formula || field, this._formulaRef);
+		}
+	}
+
+	this._field = field; // WARNING: This could be out of sync with core. It is used as a cache for better performance
+
+	// We need to cache time series in field definition for improve performance of checking methond
+	FieldDefinition.setFieldProperty(field, "timeSeries", FieldDefinition.isTimeSeries(field) ? true : false);
+
+	let parentColDef = columnOption["parent"];
+	if(columnOption && parentColDef) {
+		FieldDefinition.setFieldProperty(field, "timeSeriesParent", parentColDef.getField());
+	}
+
+	this._updateContext("field", field);
+	if(this.isRealTimeField()) { // Only realtime field will have a formatted field
+		this._updateContext("formattedField", field + "_FORMATTED");
+	}
+};
+/** @private
+* @param {Array.<string>} fields
+*/
+ColumnDefinition.prototype._retrieveNestedFields = function(fields) {
+	if(!fields) {
+		return;
+	}
+	for(let i = fields.length; --i >= 0;) {
+		let field = fields[i];
+		let uppercasedF = field.toUpperCase();
+		let predefinedF = PredefinedFormula.get(uppercasedF);
+		if(predefinedF) { // Predefined formula
+			let f = this._fnEngine.getFormula(field); // Get formula by reference name
+			if(f) {
+				f.addFormulaCount(); // Add reference count
+			} else {
+				f = this._fnEngine.addFormula(predefinedF);
+				f.setAlias(field); // This field is used for retrieving data for dependent fields
+				this._fnEngine.addReference(f, field); // Add reference name for dependencies calculation
+			}
+			this._retrieveNestedFields(f.getFieldNames()); // Recursion
+		} else { // Any field that is not a predefined formula will be sent for requesting real-time data
+			this._requiredFields.push(field); // TODO: Exclude column reference
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+ColumnDefinition.prototype._defaultRenderer = function(e) {
+	let rowDef = /** @type{RowDefinition} */(e["dataValue"]);
+	e["cell"].setContent(rowDef ? rowDef.getData(this._field) : null);
+};
+/** @private
+* @param {Object} e
+*/
+ColumnDefinition.prototype._customRenderer = function(e) {
+	let rowDef = /** @type{RowDefinition} */(e["dataValue"]);
+
+	let arg = this._eventArg; // Reuse the same object
+	if(rowDef) {
+		let rowData = rowDef.getRowData();
+		arg["rowDef"] = rowDef;
+		arg["rowData"] = rowData;
+		arg["rowIndex"] = e["rowIndex"];
+		if(rowData) {
+			arg["data"] = rowData[this._field];
+		} else {
+			arg["data"] = null;
+		}
+	} else {
+		arg["data"] = null;
+	}
+	arg["colIndex"] = e["colIndex"];
+	arg["cell"] = e["cell"];
+	arg["section"] = e["section"];
+
+	if(this._activatedRenderer) {
+		this._activatedRenderer(arg);
+	} else {
+		let urs = this._userRenderers;
+		let len = urs.length;
+		for(let i = 0; i < len; ++i) {
+			urs[i](arg);
+		}
+	}
+};
+
+/** @private
+* @param {string} propName
+* @param {*} val
+*/
+ColumnDefinition.prototype._updateContext = function(propName, val) {
+	this._eventArg[propName] = val;
+};
+
+/** @public
+* @return {Object}
+*/
+ColumnDefinition.prototype.getUserModel = function() {
+	return this._userModel;
+};
+
+/** @public
+*/
+ColumnDefinition.prototype.clearUserModel = function() {
+	this._userModel = null;
+};
+
+/** @public
+* @param {Object} obj
+*/
+ColumnDefinition.prototype.setColumnInfo = function(obj) {
+	this._info = obj;
+};
+
+/** @public
+* @return {Object}
+*/
+ColumnDefinition.prototype.getColumnInfo = function() {
+	return this._info;
+};
+
+/** @public
+* @ignore
+* @param {Object} obj
+*/
+ColumnDefinition.prototype._setCoreColumnDef = function(obj) {
+	this._coreColDef = obj || null;
+};
+
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isFocusable = function() {
+	return this._focusable;
+};
+/** @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getBackgroundColor = function() {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	return core.getColumnBackgroundColor(colIndex);
+};
+/** @public
+* @param {string} color
+*/
+ColumnDefinition.prototype.setBackgroundColor = function(color) {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	core.setColumnBackgroundColor(colIndex, color);
+};
+
+export {ColumnDefinition, COL_DEF};
+export default ColumnDefinition;