@refinitiv-ui/efx-grid 6.0.86 → 6.0.88

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

@@ -179,13 +179,13 @@ import { ElementWrapper } from "../../core/es6/grid/components/ElementWrapper.js
 * @private
 * @const
 */
-var SUB_ID = "SUB_ID";
+const SUB_ID = "SUB_ID";
 
 /** @private
 * @param {RowDefinition} rowDef
 * @return {Object}
 */
-var toRowData = function(rowDef) {
+let toRowData = function(rowDef) {
 	return rowDef ? rowDef.getRowData() : null;
 };
 
@@ -193,7 +193,7 @@ var toRowData = function(rowDef) {
 * @const
 * @type {Object.<string, number>}
 */
-var _unclonableFields = {
+let _unclonableFields = {
 	"ROW_DEF": 1,
 	"SUB_ID": 1
 };
@@ -201,10 +201,10 @@ var _unclonableFields = {
 * @param {RowDefinition} fromRowDef
 * @param {RowDefinition} toRowDef
 */
-var cloneRowData = function(fromRowDef, toRowDef) {
-	var from = toRowData(fromRowDef);
-	var to = toRowData(toRowDef);
-	for(var key in from) {
+let cloneRowData = function(fromRowDef, toRowDef) {
+	let from = toRowData(fromRowDef);
+	let to = toRowData(toRowDef);
+	for(let key in from) {
 		if(!_unclonableFields[key]) {
 			to[key] = from[key];
 		}
@@ -215,7 +215,7 @@ var cloneRowData = function(fromRowDef, toRowDef) {
 * @param {RowDefinition} rowDef
 * @return {boolean}
 */
-var excludeAutoGenerated = function (rowDef) {
+let excludeAutoGenerated = function (rowDef) {
 	return !rowDef.isAutoGenerated();
 };
 
@@ -223,7 +223,7 @@ var excludeAutoGenerated = function (rowDef) {
 * @param {Object} colConfig column config
 * @return {boolean}
 */
-var _byNonAutoGeneratedColumn = function (colConfig) {
+let _byNonAutoGeneratedColumn = function (colConfig) {
 	return !colConfig.autoGenerated;
 };
 /** @private
@@ -233,7 +233,7 @@ var _byNonAutoGeneratedColumn = function (colConfig) {
 * @param {string} fieldName
 * @return {number} The outcome of the value comparison
 */
-var compareNumber = function(rowDefA, rowDefB, sortOrder, fieldName) { // edit name
+let compareNumber = function(rowDefA, rowDefB, sortOrder, fieldName) { // edit name
 	return (rowDefA.getData(fieldName) - rowDefB.getData(fieldName)) * sortOrder; // for numeric comparison
 };
 
@@ -244,14 +244,14 @@ var compareNumber = function(rowDefA, rowDefB, sortOrder, fieldName) { // edit n
 * @param {string} sortOrder
 * @return {number} The outcome of the value comparison
 */
-var _sortChildrenOfChain =  function (rowDefA, rowDefB, sortOrder) {
-	var parentA = rowDefA.getParent();
+let _sortChildrenOfChain =  function (rowDefA, rowDefB, sortOrder) {
+	let parentA = rowDefA.getParent();
 
 	if (!parentA) {
 	  return 0;
 	}
 
-	var parentB = rowDefB.getParent();
+	let parentB = rowDefB.getParent();
 
 	if (!parentB) {
 	  return 0;
@@ -261,13 +261,13 @@ var _sortChildrenOfChain =  function (rowDefA, rowDefB, sortOrder) {
 	  return 0;
 	}
 
-	var a = rowDefA.getData('CHILD_ORDER');
+	let a = rowDefA.getData('CHILD_ORDER');
 
 	if (a == null) {
 	  return 0;
 	}
 
-	var b = rowDefB.getData('CHILD_ORDER');
+	let b = rowDefB.getData('CHILD_ORDER');
 
 	if (b == null) {
 	  return 0;
@@ -280,7 +280,7 @@ var _sortChildrenOfChain =  function (rowDefA, rowDefB, sortOrder) {
 * @param {ColumnDefinition} colDef
 * @return {string}
 */
-var _getName = function(colDef) {
+let _getName = function(colDef) {
 	if(colDef) {
 		return colDef.getName();
 	}
@@ -291,7 +291,7 @@ var _getName = function(colDef) {
 * @param {string} str
 * @return {boolean}
 */
-var _hasFieldOrId = function(colDef, str) {
+let _hasFieldOrId = function(colDef, str) {
 	return (colDef.getField() === str) || (colDef.getId() === str);
 };
 
@@ -301,7 +301,7 @@ var _hasFieldOrId = function(colDef, str) {
  * @param {Object} obj2
  * @returns {boolean} If the id property of two objects is equal, the return will be true, otherwise it will be false.
  */
-var _hasMatchingId = function(obj1, obj2) {
+let _hasMatchingId = function(obj1, obj2) {
 	if(!obj1 || !obj2 || !obj1.id || !obj2.id) { // Handle nullable, if the object or id have null, it's means difference value
 		return false;
 	}
@@ -313,8 +313,8 @@ var _hasMatchingId = function(obj1, obj2) {
 * @param {(Element|null)=} placeholder
 * @param {Grid~GridOptions=} config
 */
-var Grid = function(placeholder, config) {
-	var t = this; // This is to primarily reduce file size
+let Grid = function(placeholder, config) {
+	let t = this; // This is to primarily reduce file size
 
 	t._onDataChanged = t._onDataChanged.bind(t);
 	t._onQuote2PostUpdate = t._onQuote2PostUpdate.bind(t);
@@ -372,7 +372,7 @@ var Grid = function(placeholder, config) {
 			t._dt = t._dv.getDataTable();
 			t._mainGrid = config["grid"];
 
-			var core = t._mainGrid.getCoreGrid();
+			let core = t._mainGrid.getCoreGrid();
 			t._stp = core.getPlugin("SortableTitlePlugin");
 		}
 		if(config["SortableTitle"]) { // Exception for built-in plugin
@@ -667,7 +667,7 @@ Grid.prototype.initSubscription = function() {
 		return;
 	}
 
-	var jet, q, s;
+	let jet, q, s;
 	jet = window["JET"]; // Assume that JET is already exist.
 	if (this._RTK) {
 		q = this._RTK.Quotes;
@@ -691,10 +691,10 @@ Grid.prototype.initSubscription = function() {
 
 	// TODO: Subscriptions should be registered per row.
 	// However, chain subscription cannot be integrated with DataConnector in this current implementation.
-	var rowDefs = this._getAllRowDefinitions();
-	var len = rowDefs.length;
-	for(var i = 0; i < len; ++i) {
-		var rowDef = rowDefs[i];
+	let rowDefs = this._getAllRowDefinitions();
+	let len = rowDefs.length;
+	for(let i = 0; i < len; ++i) {
+		let rowDef = rowDefs[i];
 		if(rowDef) {
 			rowDef.subscribeForUpdates();
 		}
@@ -713,7 +713,7 @@ Grid.prototype.updateLayout = function() {
 */
 Grid.prototype._updateRowData = function(rowIndex) {
 	if(rowIndex >= 0) {
-		var rowId = this._dv.getRowId(rowIndex);
+		let rowId = this._dv.getRowId(rowIndex);
 		if(rowId) {
 			this._dt.setRowData(rowId, {});
 		}
@@ -730,7 +730,7 @@ Grid.prototype.updateRowData = Grid.prototype._updateRowData;
 /** @private
  */
 Grid.prototype._addGridSections = function () {
-	var title = this._grid.addSection("title");
+	let title = this._grid.addSection("title");
 	if(this._topSection == false){
 		title.setRowCount(0);
 	} else {
@@ -738,10 +738,10 @@ Grid.prototype._addGridSections = function () {
 	}
 	this._grid.addSection("content");
 
-	var titleSettings = this._grid.getSectionSettings("title");
+	let titleSettings = this._grid.getSectionSettings("title");
 	titleSettings.disableDataBinding();
 
-	var contentSettings = this._grid.getSectionSettings("content");
+	let contentSettings = this._grid.getSectionSettings("content");
 	contentSettings.setAutoSyncRowCount(true);
 	contentSettings.setParent(titleSettings);
 };
@@ -750,13 +750,13 @@ Grid.prototype._addGridSections = function () {
 * @return {*} Return Section instance
  */
 Grid.prototype.addHeaderSection = function (sectionName) {
-	var titleSects = this._grid.getAllSections("title");
+	let titleSects = this._grid.getAllSections("title");
 
-	var headerSect = this._grid.addSectionAt(titleSects.length, "title", sectionName);
+	let headerSect = this._grid.addSectionAt(titleSects.length, "title", sectionName);
 	if(headerSect) {
 		headerSect.setRowCount(1);
 
-		var headerSettings = this._grid.getSectionSettings(headerSect);
+		let headerSettings = this._grid.getSectionSettings(headerSect);
 		headerSettings.disableDataBinding();
 	}
 
@@ -767,11 +767,11 @@ Grid.prototype.addHeaderSection = function (sectionName) {
 * @return {*} Return Section instance
 */
 Grid.prototype.addFooterSection = function (sectionName) {
-	var footerSect = this._grid.addSection("footer", sectionName);
+	let footerSect = this._grid.addSection("footer", sectionName);
 	if(footerSect) {
 		footerSect.setRowCount(1);
 
-		var footerSettings = this._grid.getSectionSettings(footerSect);
+		let footerSettings = this._grid.getSectionSettings(footerSect);
 		footerSettings.disableDataBinding();
 	}
 
@@ -790,7 +790,7 @@ Grid.prototype.setParent = function (elem) {
 */
 Grid.prototype.insertBefore = function (elem) {
 	if(elem) {
-		var pn = elem.parentNode;
+		let pn = elem.parentNode;
 		if(pn) {
 			pn.insertBefore(this._topNode, elem);
 			this.updateLayout();
@@ -826,15 +826,15 @@ Grid.prototype.getCoreGrid = function () {
 Grid.prototype.initialize = function(gridOption) {
 	if (!gridOption) { return; }
 	// TODO: clear all data before re-initialization
-	var t = this; // For minimizing file size
+	let t = this; // For minimizing file size
 	t._initializing = true;
-	var grid = t._grid; // core grid
+	let grid = t._grid; // core grid
 	grid.resetInternalState();
 	gridOption = grid.normalizeConfig(gridOption);
 
-	var exts = gridOption["plugins"] || gridOption["extensions"];
+	let exts = gridOption["plugins"] || gridOption["extensions"];
 
-	var cols = /** @type{Array} */(gridOption["fields"] || gridOption["columns"]);
+	let cols = /** @type{Array} */(gridOption["fields"] || gridOption["columns"]);
 	if (gridOption["defaultColumnOptions"]) {
 		t._defaultColumnOptions = gridOption["defaultColumnOptions"];
 		t._defaultColumnSetup(t._defaultColumnOptions, cols);
@@ -884,23 +884,23 @@ Grid.prototype.initialize = function(gridOption) {
 		t._fnEngine.addEventListener("dataRequired", t._onFormulaDataRequired);
 	}
 
-	var borders = gridOption["borders"];
+	let borders = gridOption["borders"];
 	if (borders != null) {
 		grid.toggleBorders(borders);
 	}
-	var gridlines = gridOption["gridlines"];
+	let gridlines = gridOption["gridlines"];
 	if (gridlines != null) {
 		grid.toggleGridlines(gridlines);
 	}
-	var vLines = gridOption["verticalLines"];
+	let vLines = gridOption["verticalLines"];
 	if (vLines != null) {
 		grid.toggleVerticalLines(vLines);
 	}
-	var cvLines = gridOption["contentVerticalLines"];
+	let cvLines = gridOption["contentVerticalLines"];
 	if (cvLines != null) {
 		grid.toggleContentVerticalLines(cvLines);
 	}
-	var hLines = gridOption["horizontalLines"];
+	let hLines = gridOption["horizontalLines"];
 	if (hLines != null) {
 		grid.toggleHorizontalLines(hLines);
 	}
@@ -909,28 +909,28 @@ Grid.prototype.initialize = function(gridOption) {
 		t._dv.setPageSize(+gridOption["pageSize"]);
 	}
 
-	var rowHeight = +gridOption["rowHeight"];
+	let rowHeight = +gridOption["rowHeight"];
 	if(rowHeight) { // Non empty or zero
 		grid.setDefaultRowHeight(rowHeight);
 	}
-	var hRowHeight = +gridOption["headerRowHeight"];
+	let hRowHeight = +gridOption["headerRowHeight"];
 	if(hRowHeight) { // Non empty or zero
 		grid.getSection("title").setDefaultRowHeight(hRowHeight);
 	}
 
-	var val = gridOption["autoLayoutUpdate"];
+	let val = gridOption["autoLayoutUpdate"];
 	if(!t._autoLayoutTimer && val) {
 		if(val !== "0" && val !== "false") { // HACK: Temporarily support incorrect data type
 			t._autoLayoutTimer = setInterval(t._onAutoLayoutUpdate.bind(t), 2000);
 		}
 	}
 
-	var bool = gridOption["rowHighlighting"];
+	let bool = gridOption["rowHighlighting"];
 	if(bool != null) {
 		grid.enableRowHighlighting(!!bool);
 	}
 
-	var rowExpansionBinding = gridOption["rowExpansionBinding"];
+	let rowExpansionBinding = gridOption["rowExpansionBinding"];
 	if(typeof rowExpansionBinding === "function") {
 		grid.listen("rowExpansionBinding", t._onRowExpansionBinding); // TODO: Support multi-table feature
 		t.listen("rowExpansionBinding", rowExpansionBinding);
@@ -957,7 +957,7 @@ Grid.prototype.initialize = function(gridOption) {
 	if(gridOption["scrollbarParent"] != null) {
 		t._setScrollbarParent(gridOption["scrollbarParent"]);
 	}
-	var pollingInterval = gridOption["adcPollingInterval"];
+	let pollingInterval = gridOption["adcPollingInterval"];
 	if(pollingInterval != null) {
 		t._pollingInterval = pollingInterval ? +pollingInterval : 0;
 	}
@@ -965,7 +965,7 @@ Grid.prototype.initialize = function(gridOption) {
 	// Column operations
 	t.setColumns(cols);
 
-	var rowVir = true;
+	let rowVir = true;
 	if (gridOption["rowVirtualRendering"] != null) {
 		rowVir = gridOption["rowVirtualRendering"];
 	}
@@ -974,7 +974,7 @@ Grid.prototype.initialize = function(gridOption) {
 	}
 	grid.enableRowVirtualization(!!rowVir);
 
-	var colVir = false;
+	let colVir = false;
 	if (gridOption["columnVirtualRendering"] != null) {
 		colVir = gridOption["columnVirtualRendering"];
 	}
@@ -983,7 +983,7 @@ Grid.prototype.initialize = function(gridOption) {
 	}
 	grid.enableColumnVirtualization(!!colVir);
 
-	var scrollbar = gridOption["scrollbar"] != null ? gridOption["scrollbar"] : true;
+	let scrollbar = gridOption["scrollbar"] != null ? gridOption["scrollbar"] : true;
 	if (scrollbar) {
 		t._topNode.style.overflow = "hidden"; // TODO: Move this to CSS Class
 	} else {
@@ -991,16 +991,16 @@ Grid.prototype.initialize = function(gridOption) {
 		t._topNode.style.overflow = "";
 	}
 
-	var topFreezingCount = gridOption["topFreezingCount"];
+	let topFreezingCount = gridOption["topFreezingCount"];
 	if (typeof topFreezingCount === "number") {
 		topFreezingCount = (topFreezingCount > 0) ? topFreezingCount : 0;
-		var sectionIndex = topFreezingCount - 1;
+		let sectionIndex = topFreezingCount - 1;
 		grid.freezeSection(sectionIndex);
 	} else if (topFreezingCount === false) {
 		grid.freezeSection(null);
 	}
 
-	var bottomFreezingCount = gridOption["bottomFreezingCount"];
+	let bottomFreezingCount = gridOption["bottomFreezingCount"];
 	if (typeof bottomFreezingCount === "number") {
 		bottomFreezingCount = (bottomFreezingCount > 0) ? bottomFreezingCount : 0;
 		grid.freezeFooter(bottomFreezingCount);
@@ -1011,11 +1011,11 @@ Grid.prototype.initialize = function(gridOption) {
 	// Plugins
 	gridOption[ROW_DEF] = true; // Enable ROW_DEF mode
 	if (Array.isArray(exts)) {
-		for (var i = 0; i < exts.length; ++i) {
-			var ext = exts[i];
-			var extInstance = null;
+		for (let i = 0; i < exts.length; ++i) {
+			let ext = exts[i];
+			let extInstance = null;
 			if (ext) {
-				var extName = ext["name"];
+				let extName = ext["name"];
 				if(extName) {
 					extInstance = grid.loadPlugin(extName, ext); // pass plugin object as an argument for initialization
 				} else {
@@ -1023,7 +1023,7 @@ Grid.prototype.initialize = function(gridOption) {
 				}
 			}
 			if (extInstance && extInstance["setGridWrapper"]) {
-				var hasApi = (typeof extInstance["getGridApi"] === "function") ? extInstance["getGridApi"]() : false;
+				let hasApi = (typeof extInstance["getGridApi"] === "function") ? extInstance["getGridApi"]() : false;
 				if(!hasApi) {
 					extInstance["setGridWrapper"]("realTimeGrid", t);
 				}
@@ -1032,7 +1032,7 @@ Grid.prototype.initialize = function(gridOption) {
 		t._initializing = false;
 	}
 
-	var lang = gridOption["lang"];
+	let lang = gridOption["lang"];
 	if(lang != null) {
 		t._lang = lang;
 		t._dateTimeUtil.setLocale(lang);
@@ -1042,18 +1042,18 @@ Grid.prototype.initialize = function(gridOption) {
 	if(gridOption["childDataField"] != null) {
 		this._childDataField = RowDefinition._childDataField = gridOption["childDataField"];
 	}
-	var rows = gridOption["rows"];
+	let rows = gridOption["rows"];
 	if(!rows) {
 		rows = gridOption["rics"] || null; // Make "rics" an alias to "rows"
 	}
-	var bodies = /** @type{Array} */(gridOption["bodies"]);
+	let bodies = /** @type{Array} */(gridOption["bodies"]);
 	if(!bodies) {
 		bodies = [];
 		if(gridOption["body"]) {
 			bodies.push(gridOption["body"]);
 		}
 		if(rows) {
-			for(var m = 0; m < rows.length; m++) {
+			for(let m = 0; m < rows.length; m++) {
 				if(typeof rows[m] === "string") {
 					rows[m] = { "ric": rows[m] };
 				}
@@ -1063,13 +1063,13 @@ Grid.prototype.initialize = function(gridOption) {
 	}
 
 	// Merge rows with static data rows
-	var staticRows = gridOption["staticDataRows"] || gridOption["dataModel"];
+	let staticRows = gridOption["staticDataRows"] || gridOption["dataModel"];
 	if(rows && staticRows) {
-		var ary = staticRows["data"] ? staticRows["data"] : staticRows;
-		var fields = staticRows["fields"] || t.getColumnFields();
-		var values, data;
-		var len = rows.length;
-		for(var n = 0; n < len; n++) {
+		let ary = staticRows["data"] ? staticRows["data"] : staticRows;
+		let fields = staticRows["fields"] || t.getColumnFields();
+		let values, data;
+		let len = rows.length;
+		for(let n = 0; n < len; n++) {
 			if(rows[n]["values"]) { // merge row's values, values can be object or array
 				values = arrayToObject(rows[n]["values"], fields);
 				data = arrayToObject(ary[n], fields);
@@ -1086,7 +1086,7 @@ Grid.prototype.initialize = function(gridOption) {
 		}
 	}
 
-	for(var j = 0; j < bodies.length; ++j) {
+	for(let j = 0; j < bodies.length; ++j) {
 		t.insertRows(bodies[j]["rows"]);
 		// break; // TODO: The first version supports only 1 grid
 	}
@@ -1097,7 +1097,7 @@ Grid.prototype.initialize = function(gridOption) {
 		grid.setBottomPaddingSection(gridOption.contentBottomPadding);
 	}
 
-	var contentRightPadding = gridOption.contentRightPadding;
+	let contentRightPadding = gridOption.contentRightPadding;
 	if(contentRightPadding) {
 		if (typeof contentRightPadding !== "number") {
 			contentRightPadding = 6;
@@ -1108,13 +1108,13 @@ Grid.prototype.initialize = function(gridOption) {
 
 	// Let everything init first
 	// then set conflationRate to grid for better perfomance on rapidly updating
-	var dataConflationRate = gridOption['dataConflationRate'];
+	let dataConflationRate = gridOption['dataConflationRate'];
 	if (dataConflationRate != null) {
 		grid.setDataConflationRate(dataConflationRate);
 	}
 
 	// Tell all plugins that the initialization phase has ended
-	var extObjects = grid.getPluginList().map(grid.getPlugin.bind(grid));
+	let extObjects = grid.getPluginList().map(grid.getPlugin.bind(grid));
 	t._processExtension(extObjects, "afterInit");
 };
 
@@ -1123,14 +1123,14 @@ Grid.prototype.initialize = function(gridOption) {
 * @return {!Object}
 */
 Grid.prototype.getConfigObject = function (gridOptions) {
-	var obj = gridOptions || {};
+	let obj = gridOptions || {};
 
-	var columns = obj.columns;
+	let columns = obj.columns;
 	if(!columns) {
 		columns = obj.columns = [];
 	}
 
-	var grid = this._grid;
+	let grid = this._grid;
 	if(grid.getConfigObject) {
 		grid.getConfigObject(obj);
 	}
@@ -1157,17 +1157,17 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	}
 
 
-	var i, len, prevTimeSeriesField;
+	let i, len, prevTimeSeriesField;
 	len = this.getColumnCount();
 	for (i = 0; i < len; ++i) {
-		var column = columns[i];
+		let column = columns[i];
 		if(!column) {
 			column = columns[i] = {};
 		}
-		var colDef = this.getColumnDefinition(i);
+		let colDef = this.getColumnDefinition(i);
 		// TODO: Update width and scalability changed by the extensions
 		colDef.getConfigObject(column);
-		var parentField = FieldDefinition.getFieldProperty(colDef.getField(), "timeSeriesParent");
+		let parentField = FieldDefinition.getFieldProperty(colDef.getField(), "timeSeriesParent");
 		if(parentField && !prevTimeSeriesField) { // Assume first column of time series child to convert to time series parent
 			prevTimeSeriesField = parentField;
 			column.field = parentField;
@@ -1185,7 +1185,7 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 		obj["scrollbar"] = false;
 	}
 
-	var val = this._dv.getPageSize();
+	let val = this._dv.getPageSize();
 	if(val > 0) {
 		obj["pageSize"] = val;
 	}
@@ -1238,9 +1238,9 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	}
 
 	// get all rows config
-	var rowDefs = this.getAllRowDefinitions();
-	var rows = obj["rows"] = [];
-	var rowDef, rowConfig;
+	let rowDefs = this.getAllRowDefinitions();
+	let rows = obj["rows"] = [];
+	let rowDef, rowConfig;
 	len = rowDefs.length;
 	for (i = 0; i < len; i++) {
 		rowDef = rowDefs[i];
@@ -1249,9 +1249,9 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	}
 
 	// get row config from extensions
-	var extensions = grid.getPlugins();
-	var pluginInstance, row;
-	for(var key in extensions) {
+	let extensions = grid.getPlugins();
+	let pluginInstance, row;
+	for(let key in extensions) {
 		pluginInstance = extensions[key];
 		if(typeof pluginInstance["getRowConfigObject"] === "function") {
 			len = rows.length;
@@ -1303,11 +1303,11 @@ Grid.prototype.setLocale = function(lang) {
 * @param {Array.<Object>} userColumns
 */
 Grid.prototype._defaultColumnSetup = function (defaultCol, userColumns) {
-	var c = userColumns.length;
-	for (var i = 0; i < c; i++) {
-		var column = userColumns[i];
+	let c = userColumns.length;
+	for (let i = 0; i < c; i++) {
+		let column = userColumns[i];
 		if (typeof column === 'object') {
-			for (var key in defaultCol) {
+			for (let key in defaultCol) {
 				if (column[key] == null) {
 					column[key] = defaultCol[key];
 				}
@@ -1325,7 +1325,7 @@ Grid.prototype._defaultColumnSetup = function (defaultCol, userColumns) {
 */
 Grid.prototype._processExtension = function (exts, field, params) {
 	if(Array.isArray(exts)) {
-		for (var i = 0; i < exts.length; i++) {
+		for (let i = 0; i < exts.length; i++) {
 			if (exts[i][field]) {
 				exts[i][field].apply(exts[i], params);
 			}
@@ -1337,15 +1337,15 @@ Grid.prototype._processExtension = function (exts, field, params) {
 * @param {Object} e
 */
 Grid.prototype._onRicAdded = function(e) {
-	var addedRics = e.addedRics;
+	let addedRics = e.addedRics;
 	this._snapshot.addFields(e.fields);
-	var len = addedRics.length;
-	for (var i = 0; i < len; ++i) {
-		var ric = addedRics[i];
-		var rowDefs = this._connector.getRowDefByRic(ric);
-		var jLen = rowDefs ? rowDefs.length : 0;
-		for (var j = 0; j < jLen; ++j) {
-			var rowDef = rowDefs[j];
+	let len = addedRics.length;
+	for (let i = 0; i < len; ++i) {
+		let ric = addedRics[i];
+		let rowDefs = this._connector.getRowDefByRic(ric);
+		let jLen = rowDefs ? rowDefs.length : 0;
+		for (let j = 0; j < jLen; ++j) {
+			let rowDef = rowDefs[j];
 			if (rowDef.getSymbol() === ric) {
 				this._snapshot.addRic(ric); // ADC
 			}
@@ -1366,18 +1366,18 @@ Grid.prototype._onRicRemoved = function(e) {
 * @param {Object} e
 */
 Grid.prototype._onFieldAdded = function(e) {
-	var rowDefs = e.rowDefs;
-	var addedFields = e.addedFields;
+	let rowDefs = e.rowDefs;
+	let addedFields = e.addedFields;
 
 	// ADC
-	for (var i in rowDefs) {
+	for (let i in rowDefs) {
 		this._snapshot.addRic(rowDefs[i].getSymbol());
 	}
 	this._snapshot.addFields(addedFields);
 
 	// JET
 	if (this._subs) {
-		var realtimeFields = addedFields.filter(FieldDefinition.isRealTimeField);
+		let realtimeFields = addedFields.filter(FieldDefinition.isRealTimeField);
 		if(realtimeFields.length > 0) {
 			this._subs["addFields"](realtimeFields);
 		}
@@ -1389,7 +1389,7 @@ Grid.prototype._onFieldAdded = function(e) {
 * @param {Object} e
 */
 Grid.prototype._onFieldRemoved = function(e) {
-	var removedFields = e.removedFields;
+	let removedFields = e.removedFields;
 
 	// TODO: ADC fields have an interval load. Currently, we only keep the field but do not delete it.
 	// JET
@@ -1405,19 +1405,19 @@ Grid.prototype._onFieldRemoved = function(e) {
 * @param {number=} idx
 */
 Grid.prototype.insertColumn = function (columnOption, idx) {
-	var colCount = this.getColumnCount();
+	let colCount = this.getColumnCount();
 	if(idx == null || idx > colCount) {
 		idx = colCount;
 	}
 
 	// no need to merge defaultColumn during initialize process
 	// because columnOption already mutate by initialize function
-	var configObj = (this._initializing) ? {} : cloneObject(this._defaultColumnOptions);
+	let configObj = (this._initializing) ? {} : cloneObject(this._defaultColumnOptions);
 
 	if (typeof columnOption === "string") {
 		configObj["field"] = columnOption;
 	} else { // columnOption is assumed to be an object
-		for (var key in columnOption) {
+		for (let key in columnOption) {
 			configObj[key] = columnOption[key];
 		}
 	}
@@ -1426,7 +1426,7 @@ Grid.prototype.insertColumn = function (columnOption, idx) {
 		configObj["formulaEngine"] = this._fnEngine; // Adding extra option
 	}
 
-	var colDef = new ColumnDefinition(configObj, this);
+	let colDef = new ColumnDefinition(configObj, this);
 	configObj[COL_DEF] = colDef;
 
 	// WARNING: width is processed twice by tr-grid and rt-grid
@@ -1439,18 +1439,18 @@ Grid.prototype.insertColumn = function (columnOption, idx) {
 * @param {Object} e snapshort change event object
 */
 Grid.prototype._updateTimeSeriesFields = function (e) {
-	var childField;
-	var snapShotData = e.data;
-	var childFields = {};
-	for (var ric in snapShotData) {
+	let childField;
+	let snapShotData = e.data;
+	let childFields = {};
+	for (let ric in snapShotData) {
 		// childFields = snapShotData[ric];
 		for (childField in snapShotData[ric]) {
 			childFields[childField] = true; // Merge child fields to parent (Don't truth each ric it will be have some empty data)
 		}
 		this.setRicData(ric, snapShotData[ric]); // update cell data if exist
 	}
-	var parentField, field, colIndex, parentColDef, childColIndex;
-	var parentMap = {}; // map parent time series field and their first child
+	let parentField, field, colIndex, parentColDef, childColIndex;
+	let parentMap = {}; // map parent time series field and their first child
 	for (field in childFields) { // Warning: data change can be differ time series child field
 		parentField = e.childrenFieldToParent[field];
 		if(!parentMap[parentField]) {
@@ -1461,10 +1461,10 @@ Grid.prototype._updateTimeSeriesFields = function (e) {
 	}
 
 	for (parentField in parentMap) { // WARNING: one dataChanged event can be multiple fields
-		var childrenField = parentMap[parentField];
+		let childrenField = parentMap[parentField];
 		colIndex = this.getColumnIndex(parentField);
 		parentColDef = this._getColumnDefinition(colIndex);
-		var i, len;
+		let i, len;
 		len = childrenField.length;
 		for (i = 0; i < len; i++) {
 			childField = childrenField[i];
@@ -1490,8 +1490,8 @@ Grid.prototype._populateTimeSeriesChildren = function (colDef) {
 		return;
 	}
 
-	var colDefs  = this._timeSeriesChildConflator.popAllData();
-	var i, j, len, childField, idx;
+	let colDefs  = this._timeSeriesChildConflator.popAllData();
+	let i, j, len, childField, idx;
 
 	for (i = 0; i < colDefs.length; i++) {
 		colDef = colDefs[i];
@@ -1500,8 +1500,8 @@ Grid.prototype._populateTimeSeriesChildren = function (colDef) {
 		if(!colDef) {
 			continue;
 		}
-		var parentField = colDef.getField();
-		var childFields = FieldDefinition.getTimeSeriesChildren(parentField);
+		let parentField = colDef.getField();
+		let childFields = FieldDefinition.getTimeSeriesChildren(parentField);
 		if(!childFields) { // not found time series field
 			return;
 		}
@@ -1526,7 +1526,7 @@ Grid.prototype._populateTimeSeriesChildren = function (colDef) {
 * @param {number} idx index of insertion column
 */
 Grid.prototype._cloneTimeSeriesColumn = function (parentColDef, childField, idx) {
-	var parentConfig, columnOption;
+	let parentConfig, columnOption;
 	parentConfig = parentColDef.getConfigObject();
 	columnOption = cloneObject(parentConfig);
 	columnOption["field"] = childField.replace("TR.", ""); // We need to remove the 'TR' prefix from the field to avoid confusion with time series fields.
@@ -1543,15 +1543,15 @@ Grid.prototype._cloneTimeSeriesColumn = function (parentColDef, childField, idx)
 * @param {Grid~ColumnReference} colRef
 */
 Grid.prototype.replaceColumn = function (columnOption, colRef) {
-	var colIndex = this.getColumnIndex(colRef);
+	let colIndex = this.getColumnIndex(colRef);
 	if(colIndex < 0) {
 		return;
 	}
-	var colConfig = {};
-	var core = this._grid;
-	var columnDef = core._getColumnDef(colIndex);
+	let colConfig = {};
+	let core = this._grid;
+	let columnDef = core._getColumnDef(colIndex);
 
-	var value = core.getColumnScalability(colIndex);
+	let value = core.getColumnScalability(colIndex);
 	colConfig["scalable"] = value;
 
 	value = core.getColumnCustomLaneSize(colIndex);
@@ -1585,7 +1585,7 @@ Grid.prototype.replaceColumn = function (columnOption, colRef) {
 	if(typeof columnOption === "string") {
 		colConfig["field"] = columnOption;
 	} else { // type object from user
-		for (var key in columnOption) {
+		for (let key in columnOption) {
 			colConfig[key] = columnOption[key];
 		}
 	}
@@ -1598,7 +1598,7 @@ Grid.prototype.replaceColumn = function (columnOption, colRef) {
 		colConfig["width"] = 1;
 	}
 
-	var colDef = this.getColumnDefinition(colIndex);
+	let colDef = this.getColumnDefinition(colIndex);
 	if(colDef && colConfig.id == null) {
 		colConfig.id =  colDef.getId(); // retain ID
 	}
@@ -1616,7 +1616,7 @@ Grid.prototype.replaceColumn = function (columnOption, colRef) {
  */
 Grid.prototype._onFieldLoadedSuccess = function (field, colDef, response) {
 	if (response && response.id) {
-		var fieldDef = response;
+		let fieldDef = response;
 		if (colDef && colDef.getField() === field) {
 			if (colDef.isDefaultName() && fieldDef.name) {
 				colDef.setName(fieldDef.name);
@@ -1642,7 +1642,7 @@ Grid.prototype._onFieldLoadedError = function (err) {
 Grid.prototype._onFieldLoaded = function (field, referrer) {
 	// For time series, we need to wait until the field is loadedm, then we can insert a child from the field data.
 	if(FieldDefinition.isTimeSeries(field)) {
-		var colDef = this.getColumnDefinitionById(referrer); // The 'referrer' is a column ID that was just added
+		let colDef = this.getColumnDefinitionById(referrer); // The 'referrer' is a column ID that was just added
 		this._populateTimeSeriesChildren(colDef);
 	}
 	this._connector.addFields(field, referrer);
@@ -1679,14 +1679,14 @@ Grid.prototype.getFieldInfo = function(field) {
 * @param {string} field
 * @return {Promise}
 * @example
-* var gridConfig = {
+* let gridConfig = {
 *   synapse: { // define synapse configuration
 *     apiKey: "xxx",
 *     contextApp: "xxx",
 *     auth: "xxx" (optional)
 *   }
 * };
-* var promise = grid.loadFieldInfo("CF_LAST");
+* let promise = grid.loadFieldInfo("CF_LAST");
 */
 Grid.prototype.loadFieldInfo = function(field) {
 	return FieldDefinition.loadFieldInfo(field);
@@ -1699,7 +1699,7 @@ Grid.prototype.loadFieldInfo = function(field) {
 */
 Grid.prototype._shouldLoadFieldInfo = function (field) {
 
-	var val = this._RTK || window["JET"]; // Fastest checking can be performed by checking the first condition.
+	let val = this._RTK || window["JET"]; // Fastest checking can be performed by checking the first condition.
 	if(!val) {
 		return false;
 	}
@@ -1726,17 +1726,17 @@ Grid.prototype._shouldLoadFieldInfo = function (field) {
 * @param {Array.<Object>} columns Array of column options
 */
 Grid.prototype.setColumns = function(columns) {
-	var grid = this._grid;
-	var colCount = (columns) ? columns.length : 0;
+	let grid = this._grid;
+	let colCount = (columns) ? columns.length : 0;
 
 	grid.startBatch("reset");
 	this.removeAllColumns();
 	if(colCount > 0) {
-		var prevState = false;
+		let prevState = false;
 		if(colCount > 1) {
 			prevState = grid.freezeLayout(true); // Insert multiple columns can be a huge time consuming
 		}
-		for(var i = 0; i < colCount; ++i) {
+		for(let i = 0; i < colCount; ++i) {
 			this.insertColumn(columns[i], i);
 		}
 		if(colCount > 1) {
@@ -1753,20 +1753,20 @@ Grid.prototype.setColumns = function(columns) {
 * @param {boolean=} byId=false, if enable it, this method will only check for differences in the 'id' property
 */
 Grid.prototype.restoreColumns = function(columns, byId) {
-	var grid = this._grid;
+	let grid = this._grid;
 	grid.startBatch("reset");
-	var configObj = this.getConfigObject();
-	var previousColumns = configObj.columns;
+	let configObj = this.getConfigObject();
+	let previousColumns = configObj.columns;
 
-	var preColLen = previousColumns.length;
-	var newColLen = columns.length;
+	let preColLen = previousColumns.length;
+	let newColLen = columns.length;
 
-	var compareLogic = byId ? _hasMatchingId : deepEqual;
-	var removingFields = [];
-	var keepingColumns = [];
-	var columnOrdering = [];
+	let compareLogic = byId ? _hasMatchingId : deepEqual;
+	let removingFields = [];
+	let keepingColumns = [];
+	let columnOrdering = [];
 
-	var i, j, found;
+	let i, j, found;
 	// Slow, time complexity BigO(n ^ 2)
 	for (i = 0; i < preColLen; i++) {
 		found = false;
@@ -1784,8 +1784,8 @@ Grid.prototype.restoreColumns = function(columns, byId) {
 
 	this.removeColumns(removingFields);
 
-	var keepingLen = keepingColumns.length;
-	var prevState = false;
+	let keepingLen = keepingColumns.length;
+	let prevState = false;
 	if(newColLen > 1) {
 		prevState = this._grid.freezeLayout(true); // Insert multiple columns can be a huge time consuming
 	}
@@ -1794,7 +1794,7 @@ Grid.prototype.restoreColumns = function(columns, byId) {
 		for (j = 0; j < keepingLen; j++) { // loop only keeping column
 			if(compareLogic(columns[i], keepingColumns[j])) {
 				found = true;
-				var colIndex = this.getColumnIndex(columns[i].id || columns[i].field); // We cannot use 'i' (colIndex) in this case, as it will sort the columns. Instead, we need to obtain a new column index from the field.
+				let colIndex = this.getColumnIndex(columns[i].id || columns[i].field); // We cannot use 'i' (colIndex) in this case, as it will sort the columns. Instead, we need to obtain a new column index from the field.
 				columnOrdering.push(this.getColumnId(colIndex));
 				break;
 			}
@@ -1825,27 +1825,27 @@ Grid.prototype.setFields = Grid.prototype.setColumns;
 * @param {Object} e
 */
 Grid.prototype._onColumnAdded = function(e) {
-	var colDef = /** @type{ColumnDefinition} */(e.context[COL_DEF]);
+	let colDef = /** @type{ColumnDefinition} */(e.context[COL_DEF]);
 	delete e.context[COL_DEF];
-	var idx = e.colIndex;
+	let idx = e.colIndex;
 
-	var coreColDef = this._grid._getColumnDef(idx);
+	let coreColDef = this._grid._getColumnDef(idx);
 	colDef._setCoreColumnDef(coreColDef); // For column id and field
 
-	var colData = this._grid.getColumnData(idx);
+	let colData = this._grid.getColumnData(idx);
 	if(!colData) { // Save column inside grid
 		colData = this._grid.setColumnData(idx, {});
 	}
 	colData[COL_DEF] = colDef;
-	var userModel = colDef.getUserModel();
+	let userModel = colDef.getUserModel();
 	// binding
 	this._grid.setColumnDataBindingHandler(idx, colDef.getRenderer());
 	// width and scalable
-	var value = userModel["width"];
+	let value = userModel["width"];
 	// eslint-disable-next-line no-undefined
 	if(value !== undefined) {
 		value = +value;
-		var scalable;
+		let scalable;
 		if(userModel["scalable"] != null) {
 			scalable = userModel["scalable"] ? true : false;
 		} else {
@@ -1881,16 +1881,16 @@ Grid.prototype._onColumnAdded = function(e) {
 	}
 
 	// className
-	var i, classes = colDef.getClasses();
+	let i, classes = colDef.getClasses();
 	for(i = 0; i < classes.length; i++) {
 		this._grid.enableColumnClass(idx, classes[i]);
 	}
-	var colField = colDef.getField();
+	let colField = colDef.getField();
 	this._grid.setDataColumnName(idx, ROW_DEF); // This make ColumnDefinition renderer work
-	var fields = colDef.getAllFields();
-	var referrer = colDef.getId();
-	var len = fields.length;
-	var field, dataType, prom, onLoaded;
+	let fields = colDef.getAllFields();
+	let referrer = colDef.getId();
+	let len = fields.length;
+	let field, dataType, prom, onLoaded;
 	for(i = 0; i < len; i++) {
 		field = fields[i];
 		if(this._shouldLoadFieldInfo(field)) {
@@ -1928,12 +1928,12 @@ Grid.prototype._onColumnAdded = function(e) {
 * @see {@link Grid#removeAllColumns}
 */
 Grid.prototype.removeColumn = function(colRef) {
-	var colIndex = this.getColumnIndex(colRef);
+	let colIndex = this.getColumnIndex(colRef);
 	if(colIndex < 0) {
 		return;
 	}
 
-	var colDef = this.getColumnDefinition(colIndex);
+	let colDef = this.getColumnDefinition(colIndex);
 
 	if(!colDef.isRealTimeField()) {
 		if(this._dc) {
@@ -1954,8 +1954,8 @@ Grid.prototype.removeColumn = function(colRef) {
 * @see {@link Grid#removeAllColumns}
 */
 Grid.prototype.removeColumns = function(colRefs) {
-	var indices = this.getColumnIndices(colRefs);
-	var len = indices.length;
+	let indices = this.getColumnIndices(colRefs);
+	let len = indices.length;
 	if(len <= 1) {
 		if(len === 1) {
 			this.removeColumn(indices[0]);
@@ -1964,12 +1964,12 @@ Grid.prototype.removeColumns = function(colRefs) {
 	}
 	indices.sort(Grid._descendingOrder); // Removal must be done from the back
 
-	var staticFields = []; // For clearing any data stored in our cache
-	var prevState = this._grid.freezeLayout(); // To prevent multiple UI updates
+	let staticFields = []; // For clearing any data stored in our cache
+	let prevState = this._grid.freezeLayout(); // To prevent multiple UI updates
 
-	for(var i = 0; i < len; ++i) {
-		var colIndex = indices[i];
-		var colDef = this.getColumnDefinition(colIndex);
+	for(let i = 0; i < len; ++i) {
+		let colIndex = indices[i];
+		let colDef = this.getColumnDefinition(colIndex);
 		if(!colDef.isRealTimeField()) {
 			staticFields.push(colDef.getField());
 		}
@@ -1991,7 +1991,7 @@ Grid.prototype.removeColumns = function(colRefs) {
 * @see {@link Grid#removeColumns}
 */
 Grid.prototype.removeAllColumns = function() {
-	var colCount = this.getColumnCount();
+	let colCount = this.getColumnCount();
 	if(colCount <= 0) {
 		return;
 	}
@@ -1999,10 +1999,10 @@ Grid.prototype.removeAllColumns = function() {
 	if(!this._sharedSorter) {
 		this.clearSort();
 	}
-	for(var i = colCount; --i >= 0;) {
+	for(let i = colCount; --i >= 0;) {
 		// WARNING: This may affect plugins event listeners
 		this._grid.setColumnDataBindingHandler(i, null);
-		var colDef = this.getColumnDefinition(i);
+		let colDef = this.getColumnDefinition(i);
 		colDef.dispose();
 	}
 	// TODO: Remove fields that are related to the column (e.g. fields for coloring)
@@ -2062,7 +2062,7 @@ Grid.prototype.reorderColumns = function (colRefs, destCol) {
 * @see {@link Grid#showAllColumns}
 */
 Grid.prototype.hideColumn = function(colRef, hidden) {
-	var colIndex = this.getColumnIndex(colRef);
+	let colIndex = this.getColumnIndex(colRef);
 	if(colIndex < 0) { // not found
 		return;
 	}
@@ -2107,9 +2107,9 @@ Grid.prototype.addDataFields = function(fieldRef, referrer) {
 		return false;
 	}
 
-	var fields = Array.isArray(fieldRef) ? fieldRef : [fieldRef];
-	var len = fields.length;
-	var i, field, dataType, prom, onLoaded;
+	let fields = Array.isArray(fieldRef) ? fieldRef : [fieldRef];
+	let len = fields.length;
+	let i, field, dataType, prom, onLoaded;
 	for(i = 0; i < len; i++) {
 		field = fields[i];
 		if(this._shouldLoadFieldInfo(field)) {
@@ -2166,7 +2166,7 @@ Grid.prototype.sortColumn = function(colRef, opt_order) {
 		return;
 	}
 
-	var colIndex = this.getColumnIndex(colRef);
+	let colIndex = this.getColumnIndex(colRef);
 	if(colIndex < 0) {
 		this._stp.sortColumn(this.getSortedColumnIndex(), "n"); // reset current sorting
 	} else {
@@ -2178,7 +2178,7 @@ Grid.prototype.sortColumn = function(colRef, opt_order) {
 * @param {string} str
 */
 Grid.prototype.setColumnName = function(colIndex, str) {
-	var colDef = this.getColumnDefinition(colIndex);
+	let colDef = this.getColumnDefinition(colIndex);
 	if(colDef) {
 		colDef.setName(str);
 		this.updateColumnTitle();
@@ -2189,7 +2189,7 @@ Grid.prototype.setColumnName = function(colIndex, str) {
 * @param {Function=} func
 */
 Grid.prototype.setColumnRenderer = function(colRef, func) {
-	var colIndex = this.getColumnIndex(colRef);
+	let colIndex = this.getColumnIndex(colRef);
 	this.setColumnFormatter(colIndex, func);
 };
 
@@ -2199,10 +2199,10 @@ Grid.prototype.setColumnRenderer = function(colRef, func) {
 * @param {Function=} func If not specified the renderer which corresponded id from mapping will be picked up
 */
 Grid.prototype.activateColumnRenderer = function(colRef, id, func) {
-	var colIndex = this.getColumnIndex(colRef);
+	let colIndex = this.getColumnIndex(colRef);
 	if (colIndex == null) { return; }
 
-	var colDef = this.getColumnDefinition(colIndex);
+	let colDef = this.getColumnDefinition(colIndex);
 	if(!colDef) { return; }
 
 	colDef.activateRenderer(id, func);
@@ -2219,12 +2219,12 @@ Grid.prototype.activateColumnRenderer = function(colRef, id, func) {
 Grid.prototype.setColumnFormatter = function (colIndex, formatter) {
 	if (colIndex == null) { return; }
 
-	var colDef = this.getColumnDefinition(colIndex);
+	let colDef = this.getColumnDefinition(colIndex);
 	if(!colDef) {
 		return;
 	}
 
-	var func = null;
+	let func = null;
 	if (formatter) {
 		if(typeof formatter === "object") {
 			if(typeof formatter.init === "function") { // Initialize predefined formatter
@@ -2241,8 +2241,8 @@ Grid.prototype.setColumnFormatter = function (colIndex, formatter) {
 	}
 
 	if(func !== colDef.getRenderer()) {
-		var section = this._grid.getSection("content");
-		var col = /** @type {Column} */section.getColumn(colIndex);
+		let section = this._grid.getSection("content");
+		let col = /** @type {Column} */section.getColumn(colIndex);
 		if (col) {
 			col.clearContent();
 		}
@@ -2261,12 +2261,12 @@ Grid.prototype.setColumnFormatter = function (colIndex, formatter) {
 * @param {ColumnDefinition~SortLogic=} func
 */
 Grid.prototype.setColumnSorter = function(colRef, func) {
-	var colIndex = this.getColumnIndex(colRef);
-	var colDef = this.getColumnDefinition(colIndex);
+	let colIndex = this.getColumnIndex(colRef);
+	let colDef = this.getColumnDefinition(colIndex);
 	if(colDef) {
 		colDef.setSorter(func);
 
-		var sortedColumn = this.getSortedColumnIndex(); // TODO: Support multi-column sorting
+		let sortedColumn = this.getSortedColumnIndex(); // TODO: Support multi-column sorting
 		if(sortedColumn === colIndex) {
 			this._stp.refresh();
 		}
@@ -2279,8 +2279,8 @@ Grid.prototype.setColumnSorter = function(colRef, func) {
 * @param {RowDefinition} rowDef
 */
 Grid.prototype._initDuplicateRicData = function(rowDef) {
-	var ric = rowDef.getSymbol();
-	var rowDefs = this._connector.getRowDefByRic(ric);
+	let ric = rowDef.getSymbol();
+	let rowDefs = this._connector.getRowDefByRic(ric);
 	if(rowDefs && rowDefs.length) {
 		cloneRowData(rowDefs[0], rowDef);
 	}
@@ -2290,7 +2290,7 @@ Grid.prototype._initDuplicateRicData = function(rowDef) {
 * @param {Grid~RowReference=} rowRef Reference (i.e. row index, row id, or row definition) of the insert position
 * @returns {RowDefinition}
 * @example
-* var grid = new rt.Grid(grid_div, options);
+* let grid = new rt.Grid(grid_div, options);
 * grid.insertRow({"ric": "RIC"}, 0); // A new row is added at the top
 */
 Grid.prototype.insertRow = function(rowOption, rowRef) {
@@ -2307,7 +2307,7 @@ Grid.prototype.insertRow = function(rowOption, rowRef) {
 			}
 		}
 	}
-	var rowDef = new RowDefinition(rowOption);
+	let rowDef = new RowDefinition(rowOption);
 	rowDef.setDataSource(this._dc); // This could also subscribe chain index/ric to JET/RTK
 	this._initDuplicateRicData(rowDef);
 
@@ -2323,7 +2323,7 @@ Grid.prototype.insertRow = function(rowOption, rowRef) {
 * @param {Grid~RowReference=} rowRef Reference (i.e. row index, row id, or row definition) of the insert position
 * @param {Array.<string>=} opt_fields
 * @example
-* var grid = new rt.Grid(grid_div, options);
+* let grid = new rt.Grid(grid_div, options);
 * grid.insertRows([
 *  {ric: "RIC"},
 *  {values: {"field1": 0, "field2": 1}},
@@ -2340,12 +2340,12 @@ Grid.prototype.insertRows = function(rowOptions, rowRef, opt_fields) {
 		return;
 	}
 
-	var prevState = this._dt.freeze(); // Avoid sorting for each inserted row
-	var fields = opt_fields || this.getColumnFields();
-	var rowId = this._getRowId(rowRef);
-	var len = rowOptions.length;
-	for(var r = 0; r < len; ++r) {
-		var rowOption = rowOptions[r];
+	let prevState = this._dt.freeze(); // Avoid sorting for each inserted row
+	let fields = opt_fields || this.getColumnFields();
+	let rowId = this._getRowId(rowRef);
+	let len = rowOptions.length;
+	for(let r = 0; r < len; ++r) {
+		let rowOption = rowOptions[r];
 		if(rowOption) {
 			if(typeof rowOption === "string") {
 				rowOption = { "ric": rowOption };
@@ -2363,7 +2363,7 @@ Grid.prototype.insertRows = function(rowOptions, rowRef, opt_fields) {
 * @see {@link Grid#logDV}
 * @see {@link Grid#logDT}
 * @example
-* var grid = new rt.Grid(grid_div, options);
+* let grid = new rt.Grid(grid_div, options);
 * grid.addStaticDataRows([
 *  [10, "a", true],
 *  [20, "b", false],
@@ -2384,7 +2384,7 @@ Grid.prototype.addStaticDataRows = function(dataRows, fields) {
 	}
 
 	if(!Array.isArray(dataRows)) {
-		var userObj = dataRows;
+		let userObj = dataRows;
 		dataRows = null;
 		if(userObj) {
 			if(userObj.fields && !fields) {
@@ -2448,13 +2448,15 @@ Grid.prototype.updateDataSet = function(records, rowIdentifier) {
 	}
 
 	// Map new data index
-	var recordCount = records.length;
-	var fieldSorting = "ROW_ORDER"; // TODO: Should be config by options
-	var oldDataMap = {};
-	var rowDef, id, record, i;
-	var rowDefs = this.getAllRowDefinitions(); // Include the filter/hidden rows
-	var rowDefCount = rowDefs.length;
+	let recordCount = records.length;
+	let fieldSorting = "ROW_ORDER"; // TODO: Should be config by options
+	let oldDataMap = {};
+	let rowDef, id, record, i;
+	let rowDefs = this.getAllRowDefinitions(); // Include the filter/hidden rows
+	let rowDefCount = rowDefs.length;
+	let prevState = false;
 	if(rowIdentifier) {
+		prevState = this._dt.freeze();
 		for (i = 0; i < rowDefCount; i++) {
 			rowDef = rowDefs[i];
 			if(rowDef) {
@@ -2467,8 +2469,8 @@ Grid.prototype.updateDataSet = function(records, rowIdentifier) {
 			}
 		}
 
-		var idMap = {};
-		var newDataMap = {};
+		let idMap = {};
+		let newDataMap = {};
 		for (i = recordCount - 1; i >= 0; i--) {
 			record = records[i];
 			id = record[rowIdentifier];
@@ -2486,13 +2488,17 @@ Grid.prototype.updateDataSet = function(records, rowIdentifier) {
 			}
 		}
 		// Check Remove previous data
-		for (var rowIdentifierName in oldDataMap) {
+		for (let rowIdentifierName in oldDataMap) {
 			if (oldDataMap[rowIdentifierName] && !newDataMap[rowIdentifierName]) {
 				this.removeRow(oldDataMap[rowIdentifierName]); // Slow
 			}
 		}
 		this._dt.sortOnce(ROW_DEF, "a", compareNumber, fieldSorting);
+		this._dt.freeze(prevState);
 	} else {
+		if(recordCount - rowDefCount > 1 || rowDefCount - recordCount > 1) {
+			prevState = this._dt.freeze();
+		}
 		for (i = 0; i < rowDefCount; i++) {
 			record = records[i];
 			if(record) {
@@ -2511,6 +2517,9 @@ Grid.prototype.updateDataSet = function(records, rowIdentifier) {
 				rowDef.setRowData(record);
 			}
 		}
+		if(recordCount - rowDefCount > 1 || rowDefCount - recordCount > 1) {
+			this._dt.freeze(prevState);
+		}
 	}
 };
 /** @private
@@ -2530,7 +2539,7 @@ Grid.prototype.removeRow = function(rowRef) {
 	if(this._mainGrid) {
 		return this._mainGrid.removeRow(this._getRowId(rowRef));
 	}
-	var rowDef = this._getRowDefinitionByRef(rowRef);
+	let rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		if(!rowDef.isAutoGenerated()) { // Users cannot remove auto-generated row by themselves
 			this._removeRow(rowDef);
@@ -2546,7 +2555,7 @@ Grid.prototype.removeRow = function(rowRef) {
 * @see {@link Grid#removeAllRows}
 */
 Grid.prototype.removeRows = function(rowRefs) {
-	var rowDef;
+	let rowDef;
 	if(!Array.isArray(rowRefs)) {
 		rowDef = this.removeRow(rowRefs);
 		return rowDef ? [rowDef] : [];
@@ -2555,9 +2564,9 @@ Grid.prototype.removeRows = function(rowRefs) {
 		return this._mainGrid.removeRows(rowRefs.map(this._getRowId));
 	}
 
-	var i;
-	var rowDefs = [];
-	var len = rowRefs.length;
+	let i;
+	let rowDefs = [];
+	let len = rowRefs.length;
 
 	// Verify user input
 	for(i = 0; i < len; ++i) {
@@ -2570,7 +2579,7 @@ Grid.prototype.removeRows = function(rowRefs) {
 	}
 	len = rowDefs.length;
 
-	var prevState = false;
+	let prevState = false;
 	if(len > 1) {
 		prevState = this._dt.freeze(); // Prevent multiple changes that trigger sorting and filtering
 	}
@@ -2595,7 +2604,7 @@ Grid.prototype.removeAllRows = function() {
 	if(!this._dt.getRowCount()) {
 		return;
 	}
-	var rowDefs = this._getAllRowDefinitions();
+	let rowDefs = this._getAllRowDefinitions();
 
 	if(!this._sharedDataSource) {
 		this._dc.clearAllData();
@@ -2623,14 +2632,14 @@ Grid.prototype._removeRow = function(rowDef) {
 	}
 	this._dispatch("beforeRowRemoved", {});
 
-	var connector = this._connector;
-	var dt = this._dt;
-	var childRowDefs = rowDef.getDescendants(); // TODO: Support nested child
+	let connector = this._connector;
+	let dt = this._dt;
+	let childRowDefs = rowDef.getDescendants(); // TODO: Support nested child
 	if(childRowDefs) { // Remove all children first
-		for(var i = 0; i < childRowDefs.length; i++) {
+		for(let i = 0; i < childRowDefs.length; i++) {
 			connector.removeRic(childRowDefs[i]);
 		}
-		var rowIds = childRowDefs.map(RowDefinition.toRowId);
+		let rowIds = childRowDefs.map(RowDefinition.toRowId);
 		dt.removeRows(rowIds);
 	}
 	connector.removeRic(rowDef);
@@ -2643,8 +2652,8 @@ Grid.prototype._removeRow = function(rowDef) {
 * @param {boolean=} hidden if false, show instead of hide
 */
 Grid.prototype.hideRow = function(rowRef, hidden) {
-	var rid = this._getRowId(rowRef);
-	var grid = this._mainGrid || this._grid;
+	let rid = this._getRowId(rowRef);
+	let grid = this._mainGrid || this._grid;
 	grid.hideRow(rid, hidden);
 };
 
@@ -2657,8 +2666,8 @@ Grid.prototype.hideRows = function (rowRefs, hidden) {
 	if (!Array.isArray(rowRefs)) {
 		rowRefs = [rowRefs];
 	}
-	var rids = rowRefs.map(this._getRowId);
-	var grid = this._mainGrid || this._grid;
+	let rids = rowRefs.map(this._getRowId);
+	let grid = this._mainGrid || this._grid;
 	grid.hideRows(rids, hidden);
 };
 /**
@@ -2696,19 +2705,19 @@ Grid.prototype.setRic = function(rowRef, str, options) {
 		this._mainGrid.setRic(this._toRowId(rowRef), str, options);
 		return;
 	}
-	var rowDef = this._getRowDefinitionByRef(rowRef);
+	let rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		options = options || {};
 		options["ric"] = str;
-		var extractedOptions = RowDefinition.extractRowOptions(options);
-		var oldRic = rowDef.getSymbol();
+		let extractedOptions = RowDefinition.extractRowOptions(options);
+		let oldRic = rowDef.getSymbol();
 		if(rowDef.setContent(str, extractedOptions)) { // The given string may not be a RIC
 			this._connector.removeRic(rowDef, oldRic);
 			this._initDuplicateRicData(rowDef);
 			this._connector.addRic(rowDef);
 		}
 
-		var values = options["values"];
+		let values = options["values"];
 		if(values != null) {
 			rowDef.setStaticRowData(values, options["fields"]);
 		}
@@ -2724,7 +2733,7 @@ Grid.prototype.setRic = function(rowRef, str, options) {
  * @param {Grid~RowReference} rowRef
  */
 Grid.prototype.unlinkChain = function(rowRef) {
-	var rowDef = this._getRowDefinitionByRef(rowRef);
+	let rowDef = this._getRowDefinitionByRef(rowRef);
 	if(!rowDef) {
 		return;
 	}
@@ -2763,7 +2772,7 @@ Grid.prototype._onRowExpansionBinding = function(e) {
 	}
 
 	if(e["originalRowId"]) {
-		var rowIndex = this._dv.getRowIndex(e["originalRowId"]);
+		let rowIndex = this._dv.getRowIndex(e["originalRowId"]);
 		e["originalRowDef"] = this._getRowDefinitionByIndex(rowIndex);
 		e["originalRowData"] = e["originalRowDef"].getRowData();
 	} else {
@@ -2817,7 +2826,7 @@ Grid.prototype.getColumnCount = function() {
 * @return {string}
 */
 Grid.prototype.getColumnDataType = function(colIndex) {
-	var colDef = this.getColumnDefinition(colIndex);
+	let colDef = this.getColumnDefinition(colIndex);
 	if (colDef) {
 		return colDef.getDataType();
 	}
@@ -2828,7 +2837,7 @@ Grid.prototype.getColumnDataType = function(colIndex) {
 * @return {ColumnDefinition}
 */
 Grid.prototype.getColumnDefinition = function(colIndex) {
-	var colData = this._grid.getColumnData(colIndex);
+	let colData = this._grid.getColumnData(colIndex);
 	if(colData) {
 		return /** @type{ColumnDefinition} */(colData[COL_DEF]) || null;
 	}
@@ -2838,9 +2847,9 @@ Grid.prototype.getColumnDefinition = function(colIndex) {
 * @return {!Array.<ColumnDefinition>}
 */
 Grid.prototype.getColumnDefinitions = function() {
-	var colCount = this.getColumnCount();
-	var colDefs = new Array(colCount);
-	for(var i = 0; i < colCount; i++) {
+	let colCount = this.getColumnCount();
+	let colDefs = new Array(colCount);
+	for(let i = 0; i < colCount; i++) {
 		colDefs[i] = this.getColumnDefinition(i);
 	}
 	return colDefs;
@@ -2862,10 +2871,10 @@ Grid.prototype.getColumnDefinitionById = function(colId) {
 * @return {ColumnDefinition}
 */
 Grid.prototype.getColumnDefinitionsById = function(colIds) {
-	var colCount = Array.isArray(colIds) ? colIds.length : 0;
+	let colCount = Array.isArray(colIds) ? colIds.length : 0;
 	if(colCount > 0) {
-		var i, colId;
-		var colDefs = new Array(colCount);
+		let i, colId;
+		let colDefs = new Array(colCount);
 		for(i = 0; i < colCount; i++) {
 			colId = colIds[i];
 			colDefs[i] = this.getColumnDefinitionById(colId);
@@ -2885,9 +2894,9 @@ Grid.prototype._getColumnDefinition = function(colRef) {
 	} else if(typeof colRef === "number") {
 		return this.getColumnDefinition(colRef);
 	} else if(typeof colRef === "string") {
-		var colCount = this.getColumnCount();
-		for(var i = 0; i < colCount; ++i) {
-			var colDef = this.getColumnDefinition(i);
+		let colCount = this.getColumnCount();
+		for(let i = 0; i < colCount; ++i) {
+			let colDef = this.getColumnDefinition(i);
 			if(_hasFieldOrId(colDef, colRef)) {
 				return colDef; // Return the first found column
 			}
@@ -2900,7 +2909,7 @@ Grid.prototype._getColumnDefinition = function(colRef) {
 * @return {string}
 */
 Grid.prototype.getRowType = function(rowRef) {
-	var rowDef = this.getRowDefinition(rowRef);
+	let rowDef = this.getRowDefinition(rowRef);
 	return rowDef ? rowDef.getType() : "";
 };
 /** Get RowDefinition object by either number or row id
@@ -2992,15 +3001,15 @@ Grid.prototype.getMultipleRowData = function(obj) {
 	if(typeof obj === "number") {
 		return [this.getRowData(obj)];
 	}
-	var rowDefs = null;
+	let rowDefs = null;
 	if(Array.isArray(obj)) {
-		var rowRefs = obj;
-		var rowCount = rowRefs.length;
-		var rows = new Array(rowCount);
+		let rowRefs = obj;
+		let rowCount = rowRefs.length;
+		let rows = new Array(rowCount);
 		rowDefs = this.getRowDefinitions();
 
-		for(var r = 0; r < rowCount; ++r) {
-			var rowRef = rowRefs[r];
+		for(let r = 0; r < rowCount; ++r) {
+			let rowRef = rowRefs[r];
 			if(typeof rowRef === "number") {
 				rows[r] = toRowData(rowDefs[rowRef]);
 			} else if(rowRef && rowRef.getRowData) {
@@ -3023,10 +3032,10 @@ Grid.prototype.getMultipleRowData = function(obj) {
 * @param {Object} values {"FIELD1": value1, "FIELD2": value2, ...} Use null to remove current row data (not row in the view).
 */
 Grid.prototype.setRicData = function(ric, values) {
-	var rowDefs = this._connector.getRowDefByRic(ric);
-	var rowCount = rowDefs ? rowDefs.length : 0;
-	for (var i = 0; i < rowCount; ++i) {
-		var rowDef = rowDefs[i];
+	let rowDefs = this._connector.getRowDefByRic(ric);
+	let rowCount = rowDefs ? rowDefs.length : 0;
+	for (let i = 0; i < rowCount; ++i) {
+		let rowDef = rowDefs[i];
 		if (rowDef && rowDef.getSymbol() === ric) {
 			rowDef.setRowData(values); // TODO: Need conflator to improve performance
 		}
@@ -3038,7 +3047,7 @@ Grid.prototype.setRicData = function(ric, values) {
 * @param {Object} values {"FIELD1": value1, "FIELD2": value2, ...} Use null to remove current row data (not row in the view).
 */
 Grid.prototype.setRowData = function(rowRef, values) {
-	var rowDef = this._getRowDefinitionByRef(rowRef);
+	let rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		rowDef.setRowData(values);
 	}
@@ -3050,7 +3059,7 @@ Grid.prototype.setRowData = function(rowRef, values) {
 * @param {Object} values
 */
 Grid.prototype.setStaticRowData = function(rowRef, values) {
-	var rowDef = this._getRowDefinitionByRef(rowRef);
+	let rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		rowDef.setStaticRowData(values);
 	}
@@ -3063,7 +3072,7 @@ Grid.prototype.setStaticRowData = function(rowRef, values) {
 * @param {*} value
 */
 Grid.prototype.setStaticData = function(rowRef, field, value) {
-	var rowDef = this._getRowDefinitionByRef(rowRef);
+	let rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		rowDef.setStaticData(field, value);
 	}
@@ -3091,9 +3100,9 @@ Grid.prototype._getRowId = function(rowRef) {
 Grid.prototype.getColumnIndex = function(colRef) {
 	if(colRef) {
 		if(colRef instanceof ColumnDefinition) {
-			var colCount = this.getColumnCount();
-			for(var i = 0; i < colCount; ++i) {
-				var colDef = this.getColumnDefinition(i);
+			let colCount = this.getColumnCount();
+			for(let i = 0; i < colCount; ++i) {
+				let colDef = this.getColumnDefinition(i);
 				if(colDef === colRef) {
 					return i;
 				}
@@ -3109,13 +3118,13 @@ Grid.prototype.getColumnIndex = function(colRef) {
 * @return {!Array.<number>}
 */
 Grid.prototype.getColumnIndices = function(colRefs) {
-	var ary = [];
-	var colCount = this.getColumnCount();
-	var inputAry = Array.isArray(colRefs) ? colRefs : [colRefs];
-	var len = inputAry.length;
+	let ary = [];
+	let colCount = this.getColumnCount();
+	let inputAry = Array.isArray(colRefs) ? colRefs : [colRefs];
+	let len = inputAry.length;
 	// Verify user input
-	for(var i = 0; i < len; ++i) {
-		var colIndex = this.getColumnIndex(inputAry[i]);
+	for(let i = 0; i < len; ++i) {
+		let colIndex = this.getColumnIndex(inputAry[i]);
 		if(colIndex >= 0 && colIndex < colCount) {
 			ary.push(colIndex); // WARNING: We have not checked for duplication
 		}
@@ -3190,11 +3199,11 @@ Grid.prototype.freezeColumn = function(colIndex, pinnedRightColumns) {
 */
 Grid.prototype.pinColumn = function(colRef, side) {
 	if(Array.isArray(colRef)) {
-		var ary = colRef;
-		var len = ary.length;
+		let ary = colRef;
+		let len = ary.length;
 
-		var dirty = 0;
-		for(var i = 0; i < len; ++i) {
+		let dirty = 0;
+		for(let i = 0; i < len; ++i) {
 			dirty |= this._pinColumn(ary[i], side);
 		}
 		return dirty ? true : false;
@@ -3207,18 +3216,18 @@ Grid.prototype.pinColumn = function(colRef, side) {
 * @return {boolean}
 */
 Grid.prototype._pinColumn = function(colRef, side) {
-	var colIndex = this.getColumnIndex(colRef);
-	var colCount = this.getColumnCount();
+	let colIndex = this.getColumnIndex(colRef);
+	let colCount = this.getColumnCount();
 	if(colIndex < 0 || colIndex > colCount) {
 		return false;
 	}
 
-	var leftPinnedCount = this._grid.getPinnedLeftColumnCount();
-	var rightPinnedCount = this._grid.getPinnedRightColumnCount();
-	var stationaryIdx = this._grid.getStationaryColumnIndex();
+	let leftPinnedCount = this._grid.getPinnedLeftColumnCount();
+	let rightPinnedCount = this._grid.getPinnedRightColumnCount();
+	let stationaryIdx = this._grid.getStationaryColumnIndex();
 
 	if(side && side.toLowerCase() === "right") {
-		var rightPinnedIndex = this._grid.getFirstPinnedRightIndex();
+		let rightPinnedIndex = this._grid.getFirstPinnedRightIndex();
 		if(colIndex >= rightPinnedIndex) {
 			return false; // The column is already pinned area
 		}
@@ -3257,11 +3266,11 @@ Grid.prototype._pinColumn = function(colRef, side) {
 */
 Grid.prototype.unpinColumn = function(colRef, dest) {
 	if(Array.isArray(colRef)) {
-		var ary = colRef;
-		var len = ary.length;
+		let ary = colRef;
+		let len = ary.length;
 
-		var dirty = 0;
-		for(var i = len; --i >= 0;) { // WARNING: unpinning is done in reversed order
+		let dirty = 0;
+		for(let i = len; --i >= 0;) { // WARNING: unpinning is done in reversed order
 			dirty |= this._unpinColumn(ary[i], dest);
 		}
 		return dirty ? true : false;
@@ -3274,29 +3283,29 @@ Grid.prototype.unpinColumn = function(colRef, dest) {
 * @return {boolean}
 */
 Grid.prototype._unpinColumn = function(colRef, dest) {
-	var colIndex = this.getColumnIndex(colRef);
+	let colIndex = this.getColumnIndex(colRef);
 	if(colIndex < 0) {
 		return false;
 	}
 
-	var leftPinnedCount = this._grid.getPinnedLeftColumnCount();
-	var rightPinnedCount = this._grid.getPinnedRightColumnCount();
-	var colCount = this.getColumnCount();
-	var firstRightPinnedIndex = colCount - rightPinnedCount;
+	let leftPinnedCount = this._grid.getPinnedLeftColumnCount();
+	let rightPinnedCount = this._grid.getPinnedRightColumnCount();
+	let colCount = this.getColumnCount();
+	let firstRightPinnedIndex = colCount - rightPinnedCount;
 
 	if(colIndex >= leftPinnedCount && colIndex < firstRightPinnedIndex) {
 		return false;
 	}
 
-	var srcId = null;
-	var destId = null;
+	let srcId = null;
+	let destId = null;
 	if(dest != null) {
-		var destIdx = this.getColumnIndex(dest);
+		let destIdx = this.getColumnIndex(dest);
 		destId = this.getColumnId(destIdx);
 		srcId = this.getColumnId(colIndex);
 	}
 
-	var stationaryIdx = this._grid.getStationaryColumnIndex();
+	let stationaryIdx = this._grid.getStationaryColumnIndex();
 
 	if(colIndex < leftPinnedCount) {
 		if(colIndex > stationaryIdx) {
@@ -3325,8 +3334,8 @@ Grid.prototype._unpinColumn = function(colRef, dest) {
 * @return {boolean}
 */
 Grid.prototype.unpinAllColumns = function() {
-	var leftPinnedCount = this._grid.getPinnedLeftColumnCount();
-	var rightPinnedCount = this._grid.getPinnedRightColumnCount();
+	let leftPinnedCount = this._grid.getPinnedLeftColumnCount();
+	let rightPinnedCount = this._grid.getPinnedRightColumnCount();
 	if(!leftPinnedCount && !rightPinnedCount) {
 		return false;
 	}
@@ -3342,8 +3351,8 @@ Grid.prototype._onColumnHeaderBinding = function(e) {
 		return; // WARNING: Assume that only the first title section is owned by the grid. Anything else is assumed to be generated by plugins
 	}
 
-	var c = e["fromColIndex"];
-	var toC = e["toColIndex"];
+	let c = e["fromColIndex"];
+	let toC = e["toColIndex"];
 	while(c < toC) {
 		this._renderColumnHeader(c++, e);
 	}
@@ -3353,22 +3362,22 @@ Grid.prototype._onColumnHeaderBinding = function(e) {
 * @param {Object} arg
 */
 Grid.prototype._renderColumnHeader = function(colIndex, arg) {
-	var colDef = this.getColumnDefinition(colIndex);
+	let colDef = this.getColumnDefinition(colIndex);
 	if(!colDef) {
 		return;
 	}
-	var customRenderer = colDef.getHeaderRenderer();
-	var tSection = arg.section;
-	var rowCount = tSection.getRowCount();
+	let customRenderer = colDef.getHeaderRenderer();
+	let tSection = arg.section;
+	let rowCount = tSection.getRowCount();
 	arg["colIndex"] = colIndex;
 	arg["columnDef"] = colDef;
 
-	var colName = colDef.getName();
-	var colTooltip = colDef.getTooltip();
-	var headerAlignment = colDef.getHeaderAlignment();
+	let colName = colDef.getName();
+	let colTooltip = colDef.getTooltip();
+	let headerAlignment = colDef.getHeaderAlignment();
 
-	for(var r = 0; r < rowCount; ++r) {
-		var tCell = tSection.getCell(colIndex, r, false);
+	for(let r = 0; r < rowCount; ++r) {
+		let tCell = tSection.getCell(colIndex, r, false);
 		// Default behaviors
 		tCell.setContent(colName);
 		tCell.setTooltip(colTooltip);
@@ -3387,7 +3396,7 @@ Grid.prototype.updateColumnTitle = function() {
 	if(this._columnTitleConflator.conflate()) {
 		return;
 	}
-	var tss = this._grid.getSectionSettings("title"); // WARNING: Assume that only the first title section is owned by the grid
+	let tss = this._grid.getSectionSettings("title"); // WARNING: Assume that only the first title section is owned by the grid
 	if(tss) {
 		tss.rerender();
 	}
@@ -3433,17 +3442,17 @@ Grid.prototype._onQuote2PostUpdate = function (e) {
 * @param {!Object} e
 */
 Grid.prototype._onDataChanged = function(e) {
-	var rowData = e["rowData"]; // Use rowData to retrieve corresponding subscription object
+	let rowData = e["rowData"]; // Use rowData to retrieve corresponding subscription object
 	if (!rowData) {
 		return; // This must be a global change
 	}
-	var rowDef = rowData[ROW_DEF];
+	let rowDef = rowData[ROW_DEF];
 
 	if(rowDef) {
-		var rowId = rowDef.getRowId();
+		let rowId = rowDef.getRowId();
 		if(rowId) {
 			// e["rid"] could be from JET/RTK (rowId + ric) or static data update (rowId)
-			var curRowData = this._dc.getRowData(e["rid"]);
+			let curRowData = this._dc.getRowData(e["rid"]);
 			if (curRowData) {
 				if(rowDef.addUpdate(e)) { // This is the only place that update array can grow. It is used for blinking data.
 					this._dt._hasNewUpdates = true; // Mark data table for cleaning it up later
@@ -3458,9 +3467,9 @@ Grid.prototype._onDataChanged = function(e) {
 	}
 
 	// The new data update has no row definition, meaning that we have found a new constituent from a chain.
-	var subId = rowData[SUB_ID]; // The constituent will share the same sub id as its parent
+	let subId = rowData[SUB_ID]; // The constituent will share the same sub id as its parent
 	if(subId) {
-		var parentDef = this._getRowDefinitionById(subId);
+		let parentDef = this._getRowDefinitionById(subId);
 		if(parentDef && parentDef.getRic() !== rowData["RIC"]) { // TODO: Check for delayed ric
 			if(!this._chainMembers) {
 				this._chainMembers = {};
@@ -3480,21 +3489,21 @@ Grid.prototype._addMemberOfChain = function(rowData) {
 		return;
 	}
 
-	var rows = this._chainConflator.popAllData(); // This must have no duplication
-	var len = rows ? rows.length : 0;
-	var i;
+	let rows = this._chainConflator.popAllData(); // This must have no duplication
+	let len = rows ? rows.length : 0;
+	let i;
 
-	var prevState = false;
+	let prevState = false;
 	if(len > 1) {
 		prevState = this._dt.freeze(); // Avoid sorting for each insertion
 	}
-	var childDefs = [];
+	let childDefs = [];
 	for(i = 0; i < len; ++i) {
 		rowData = /** @type{!Object} */(rows[i]);
-		var subId = rowData[SUB_ID];
-		var parentDef = this._getRowDefinitionById(subId);
+		let subId = rowData[SUB_ID];
+		let parentDef = this._getRowDefinitionById(subId);
 		if(parentDef) {
-			var childDef = parentDef.addConstituent(/** @type{string} */(rowData["RIC"]), this._dt);
+			let childDef = parentDef.addConstituent(/** @type{string} */(rowData["RIC"]), this._dt);
 			if(childDef) {
 				childDefs.push(childDef);
 			} // else { // childDef has already been added
@@ -3502,7 +3511,7 @@ Grid.prototype._addMemberOfChain = function(rowData) {
 	}
 	this._chainMembers = null; // Clear all waiting chain members
 
-	var childCount = childDefs.length;
+	let childCount = childDefs.length;
 	if(childCount) {
 		for(i = childCount; --i >= 0;) {
 			this._connector.addRic(childDefs[i]); // TODO: JET/RTK should not re-subscribe this
@@ -3530,19 +3539,19 @@ Grid.prototype._updateStreamingData = function() {
 * @param {Object} e
 */
 Grid.prototype._onPreDataSorting = function (e) {
-	var objs = this._stp.getSortedColumns();
+	let objs = this._stp.getSortedColumns();
 
 	this._sorter.reset();
 	if(Array.isArray(objs)) {
-		var sortCount = objs.length;
-		for(var i = 0; i < sortCount; ++i) {
-			var obj = objs[i];
-			var field = obj["field"] || "";
-			var colIndex = obj["colIndex"];
-			var colDef = (colIndex >= 0) ? this.getColumnDefinition(colIndex) : null;
-
-			var rowSorting = false;
-			var sortLogic = null;
+		let sortCount = objs.length;
+		for(let i = 0; i < sortCount; ++i) {
+			let obj = objs[i];
+			let field = obj["field"] || "";
+			let colIndex = obj["colIndex"];
+			let colDef = (colIndex >= 0) ? this.getColumnDefinition(colIndex) : null;
+
+			let rowSorting = false;
+			let sortLogic = null;
 			if(colDef) {
 				field = colDef.getField(); // WARNING: Field and logic could be out of sync
 				rowSorting = colDef.isRowSorting();
@@ -3588,10 +3597,10 @@ Grid.prototype._clearDataUpdates = function() {
 	if(!this._dt || !this._dt._hasNewUpdates) {
 		return;
 	}
-	var rowIds = this._dt.getAllRowIds(true); // Use shallow copy for speed
-	for(var i = rowIds.length; --i >= 0;) {
-		var rowData = this._dt.getRowData(rowIds[i]);
-		var rowDef = rowData[ROW_DEF];
+	let rowIds = this._dt.getAllRowIds(true); // Use shallow copy for speed
+	for(let i = rowIds.length; --i >= 0;) {
+		let rowData = this._dt.getRowData(rowIds[i]);
+		let rowDef = rowData[ROW_DEF];
 		rowDef.resetUpdates();
 	}
 };
@@ -3639,7 +3648,7 @@ Grid.prototype.getPageCount = function() {
  * @param {Grid~RowReference} rowRef
  */
 Grid.prototype.toggleChain = function(rowRef) {
-	var rowDef = this._getRowDefinitionByRef(rowRef);
+	let rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		rowDef.toggleChain();
 	}
@@ -3651,7 +3660,7 @@ Grid.prototype.toggleChain = function(rowRef) {
  * @return {boolean}
  */
 Grid.prototype.setClassification = function(rowRef, fields) {
-	var rowDef = this._getRowDefinitionByRef(rowRef);
+	let rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		return this._dt.setSegmentClassification(rowDef.getRowId(), fields);
 	}
@@ -3676,7 +3685,7 @@ Grid.prototype.contains = function(elem) {
  * @return {boolean}
  */
 Grid.prototype.isFocused = function() {
-	var activeElement = document.activeElement;
+	let activeElement = document.activeElement;
 	if(!activeElement || !activeElement.shadowRoot) {
 		// active element is not in the shadow DOM. try using contains method to check
 		return this.contains(activeElement);
@@ -3743,17 +3752,17 @@ Grid.prototype._onFormulaDataRequired = function(e) {
 * @param {Object} e
 */
 Grid.prototype._onDataComposed = function(e) {
-	var values = e["changes"];
+	let values = e["changes"];
 	if(!values) {
 		return; // Cannot do data composition if there is no change in data
 	}
 
-	var rowData = e["rowData"];
+	let rowData = e["rowData"];
 	if(!rowData) {
 		return; // Row could already be removed or global change event is sent
 	}
 
-	var rowDef = rowData[ROW_DEF];
+	let rowDef = rowData[ROW_DEF];
 	if(!rowDef) {
 		return;
 	}
@@ -3762,7 +3771,7 @@ Grid.prototype._onDataComposed = function(e) {
 	}
 
 	if(this._autoDateConversion) { // auto data conversion
-		var field, value, dataType, colDef;
+		let field, value, dataType, colDef;
 		for(field in values) {
 			colDef = this._getColumnDefinition(field);
 			if(colDef) {
@@ -3792,16 +3801,16 @@ Grid.prototype._onDataComposed = function(e) {
 * @param {Object} e
 */
 Grid.prototype._onSubSegmentChanged = function(e) {
-	var insertionList = /** @type{Array.<Segment>} */(e["insertionList"]);
-	var removalList = /** @type{Array.<string>} */(e["removalList"]);
-	var removedRows = /** @type{Object} */(e["removedRows"]);
+	let insertionList = /** @type{Array.<Segment>} */(e["insertionList"]);
+	let removalList = /** @type{Array.<string>} */(e["removalList"]);
+	let removedRows = /** @type{Object} */(e["removedRows"]);
 
-	var i;
-	var removalCount = removalList.length;
-	var rowDef = null;
+	let i;
+	let removalCount = removalList.length;
+	let rowDef = null;
 	for(i = 0; i < removalCount; i++) {
-		var rid = removalList[i];
-		var removedRow = removedRows[rid];
+		let rid = removalList[i];
+		let removedRow = removedRows[rid];
 		if(removedRow) {
 			rowDef = removedRow[ROW_DEF];
 			if(rowDef) {
@@ -3811,11 +3820,11 @@ Grid.prototype._onSubSegmentChanged = function(e) {
 		}
 	}
 
-	var insertionCount = insertionList.length;
+	let insertionCount = insertionList.length;
 	for(i = 0; i < insertionCount; i++) {
-		var segment = insertionList[i];
-		// var parentId = segment.getParentId();
-		var segmentId = segment.getId();
+		let segment = insertionList[i];
+		// let parentId = segment.getParentId();
+		let segmentId = segment.getId();
 		rowDef = new RowDefinition({
 			"segmentId": segmentId
 		});
@@ -3835,10 +3844,10 @@ Grid.prototype._recalculateFormulas = function(e) {
 	if(e && e["rid"]) {
 		this._fnEngine.calculate(/** @type{Object.<string, *>} */ (e["rowData"]), /** @type{Object.<string, *>} */ (e["changes"]));
 	} else {
-		var rows = this._dc ? this._dc.getAllRowData() : null; // Slow
+		let rows = this._dc ? this._dc.getAllRowData() : null; // Slow
 
-		var rowCount = rows ? rows.length : 0;
-		for(var r = 0; r < rowCount; ++r) { // WARNING: This is very slow
+		let rowCount = rows ? rows.length : 0;
+		for(let r = 0; r < rowCount; ++r) { // WARNING: This is very slow
 			this._fnEngine.calculate(rows[r]);
 		}
 	}
@@ -3850,11 +3859,11 @@ Grid.prototype._recalculateFormulas = function(e) {
 Grid.prototype._snapshotFillerDataChanged = function (e) {
 	if (!this._dt) return;
 
-	var data = e.data;
+	let data = e.data;
 	if(e.timeSeries) {
 		this._updateTimeSeriesFields(e); // Increase or decrease time series field
 	} else {
-		for (var ric in data) {
+		for (let ric in data) {
 			this.setRicData(ric, data[ric]);
 		}
 	}
@@ -3869,7 +3878,7 @@ Grid.prototype._snapshotFillerDataChanged = function (e) {
 Grid.prototype._startPolling = function () {
 	if(this._pollingEnabled && this._pollingInterval) {
 		if(this._lastPollingRequest && !this._pollingTimerId) {
-			var now = new Date();
+			let now = new Date();
 			this._lastPollingRequest = now.getTime();
 			this._pollingTimerId = setTimeout(this._onPollingInterval, this._pollingInterval);
 		}
@@ -3891,9 +3900,9 @@ Grid.prototype.activateADCPolling = function (activated) {
 	if(activated !== false) {
 		this._pollingEnabled = true;
 		// Make immediate request after re-activation if it has been a long time
-		var now = new Date();
+		let now = new Date();
 		if(this._lastPollingRequest) {
-			var diff = now.getTime() - this._lastPollingRequest;
+			let diff = now.getTime() - this._lastPollingRequest;
 			if(diff > this._pollingInterval) {
 				this.refreshADCData();
 			}
@@ -3908,7 +3917,7 @@ Grid.prototype.activateADCPolling = function (activated) {
 * @return {boolean} Return true, if a request has been made
 */
 Grid.prototype.refreshADCData = function () {
-	var dirty = this._snapshot.addFields(this._connector.getAllFields());
+	let dirty = this._snapshot.addFields(this._connector.getAllFields());
 	if(dirty) {
 		dirty = this._snapshot.addRics(this._connector.getAllRics());
 		if(dirty) {
@@ -3922,9 +3931,9 @@ Grid.prototype.refreshADCData = function () {
 /** @private
 */
 Grid.prototype._onAutoLayoutUpdate = function() {
-	var elem = this._topNode;
+	let elem = this._topNode;
 
-	var cw = elem.clientWidth;
+	let cw = elem.clientWidth;
 	if(cw !== this._clientWidth) {
 		this._clientWidth = cw;
 		this.updateLayout();
@@ -3936,7 +3945,7 @@ Grid.prototype._onAutoLayoutUpdate = function() {
  * @param {Object=} opt_options { "colNames": Array.<string>, "rowCount": number, "startIndex": number, "getter": function(Object, string):* }
  */
 Grid.prototype.logDT = function(opt_options) {
-	var rowDefs = this._getAllRowDefinitions();
+	let rowDefs = this._getAllRowDefinitions();
 	this._logData(rowDefs, opt_options);
 };
 /** @description Log DataView to console. By default, this will log only fields specified in the column definition. To see other column data use "colNames" options
@@ -3954,7 +3963,7 @@ Grid.prototype.logDT = function(opt_options) {
 grid.logDV({"rowCount": 10}); // Showing 10 records
  */
 Grid.prototype.logDV = function(opt_options) {
-	var rowDefs = this.getRowDefinitions();
+	let rowDefs = this.getRowDefinitions();
 	this._logData(rowDefs, opt_options);
 };
 /** Log the collection of data to console
@@ -3970,7 +3979,7 @@ Grid.prototype._logData = function(rowDefs, options) {
 		// TODO: Get all required fields and eliminate duplicate fields
 		options["colNames"] = this.getColumnFields();
 	}
-	var tbl = DataCache.constructTable(rowDefs.map(toRowData), options);
+	let tbl = DataCache.constructTable(rowDefs.map(toRowData), options);
 
 	console.table(tbl); // eslint-disable-line
 };
@@ -3982,17 +3991,17 @@ Grid.prototype._logData = function(rowDefs, options) {
 * @returns {RowDefinition}
 */
 Grid.prototype.replaceRow = function(rowRef, rowOption) {
-	var rowId = this._getRowId(rowRef);
-	var rowDef = this._getRowDefinitionByRef(rowRef);
+	let rowId = this._getRowId(rowRef);
+	let rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef.isAutoGenerated()) { // Users cannot replace auto-generated
 		return  null;
 	}
-	var configObj = rowDef.getConfigObject();
+	let configObj = rowDef.getConfigObject();
 
 	if(deepEqual(configObj, rowOption)){
 		return null;
 	} else {
-		var insertedRow = this.insertRow(rowOption, rowId);
+		let insertedRow = this.insertRow(rowOption, rowId);
 		this.removeRow(rowId);
 		return insertedRow;
 	}