@refinitiv-ui/efx-grid 6.0.90 → 6.0.92

package/lib/core/es6/grid/Core.js

@@ -59,7 +59,7 @@ import VirtualizedLayoutGrid from "./VirtualizedLayoutGrid.js";
 * @param {number} b
 * @return {number}
 */
-var ascNumberSorter = function (a, b) {
+let ascNumberSorter = function (a, b) {
 	return a - b;
 };
 
@@ -67,7 +67,7 @@ var ascNumberSorter = function (a, b) {
 * @param {Element=} opt_initializer this can be either element id (string) or DOM element.
 * @extends {ElementWrapper}
 */
-var Core = function (opt_initializer) {
+let Core = function (opt_initializer) {
 	if (!Core._sectionType) { // Initialize static variables
 		Core._sectionType = {};
 		Core._sectionType["title"] = true;
@@ -76,7 +76,7 @@ var Core = function (opt_initializer) {
 		Core._sectionType["footer"] = true;
 	}
 
-	var _t = this;
+	let _t = this;
 
 	// Initialize method binding
 	_t.getColumnId = _t.getColumnId.bind(_t);
@@ -112,7 +112,7 @@ var Core = function (opt_initializer) {
 
 	// Text nodes are unintentionally getting in the tag.
 	if(opt_initializer) { // Any node other than element node is not allowed within the tag.
-		for(var i = opt_initializer.childNodes.length; --i >= 0;) {
+		for(let i = opt_initializer.childNodes.length; --i >= 0;) {
 			if(!Util.isElement(opt_initializer.childNodes[i])) {
 				opt_initializer.removeChild(opt_initializer.childNodes[i]);
 			}
@@ -221,14 +221,14 @@ var Core = function (opt_initializer) {
 	);
 
 	// For debugging in advanced optimization mode
-	var map = Core["map"];
+	let map = Core["map"];
 	if(!map) {
 		map = {};
 		Core["map"] = map;
 	}
-	var elem = _t._element;
+	let elem = _t._element;
 	elem["_control"] = _t;
-	var id = elem.id || elem.name;
+	let id = elem.id || elem.name;
 	if(!id || map[id]) {
 		id = "_grid" + Core._runningGridId;
 	}
@@ -237,7 +237,7 @@ var Core = function (opt_initializer) {
 	Core._runningGridId++;
 
 	// init hiddenInput for retrieve copy and cut event
-	var hiddenInput = document.createElement("input");
+	let hiddenInput = document.createElement("input");
 	hiddenInput.style.position = "absolute";
 	hiddenInput.style.width = "0";
 	hiddenInput.style.height = "0";
@@ -574,14 +574,14 @@ Core.prototype._hasPendingRowChange = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.93";
+	return "5.1.97";
 };
 /** {@link ElementWrapper#dispose}
 * @override
 */
 Core.prototype.dispose = function () {
-	var internalId = this["_id"];
-	var map = Core["map"];
+	let internalId = this["_id"];
+	let map = Core["map"];
 	if (map[internalId]) {
 		map[internalId] = null;
 	} else {
@@ -598,12 +598,12 @@ Core.prototype.dispose = function () {
 	this.unlistenAll();
 	window.removeEventListener("resize", this._onWindowResize, false);
 
-	for (var i = this._columnDefs.length; --i >= 0; ) {
-		var colDef = this._getColumnDef(i);
+	for (let i = this._columnDefs.length; --i >= 0; ) {
+		let colDef = this._getColumnDef(i);
 		colDef["renderingHandler"] = colDef["dataBindingHandler"] = null;
 	}
-	for (var key in this._plugins) {
-		var plugin = this._plugins[key];
+	for (let key in this._plugins) {
+		let plugin = this._plugins[key];
 		if (plugin["unload"]) {
 			plugin["unload"](this);
 		}
@@ -611,7 +611,7 @@ Core.prototype.dispose = function () {
 
 	// Clear all Elements
 	this.removeAllSections(); // Remove all Sections and LayoutGrids
-	var mainScrolbar = this._vscrollbar._mainScrollbar;
+	let mainScrolbar = this._vscrollbar._mainScrollbar;
 	if(mainScrolbar) {
 		mainScrolbar.unlisten("scroll", this._onSyncVScroll);
 		this._vscrollbar._mainScrollbar = null;
@@ -634,7 +634,7 @@ Core.prototype.dispose = function () {
 
 
 	// Clean Top node
-	var elem = this._element;
+	let elem = this._element;
 	if (elem !== null) {
 		if (elem["_control"]) {
 			delete elem["_control"];
@@ -670,7 +670,7 @@ Core.prototype.insertBefore = function (obj) {
 };
 /** @private */
 Core.prototype._onParentChange = function () {
-	var newParent = this.getParent() || this.getElement();
+	let newParent = this.getParent() || this.getElement();
 	if(!this._vscrollbar._mainScrollbar) { // HACK
 		this._vscrollbar.setParent(newParent);
 	}
@@ -684,20 +684,20 @@ Core.prototype._onParentChange = function () {
 * @return {!Object}
 */
 Core.prototype.getConfigObject = function (gridOptions) {
-	var obj = gridOptions || {};
+	let obj = gridOptions || {};
 
-	var columnCount = this.getColumnCount();
+	let columnCount = this.getColumnCount();
 	if (!obj["columns"]) {
 		obj["columns"] = [];
 	}
 
-	for (var colIndex = 0; colIndex < columnCount; colIndex++) {
-		var column = obj["columns"][colIndex];
+	for (let colIndex = 0; colIndex < columnCount; colIndex++) {
+		let column = obj["columns"][colIndex];
 		if (!column) {
 			column = obj["columns"][colIndex] = {};
 		}
 
-		var columnDef = this._getColumnDef(colIndex);
+		let columnDef = this._getColumnDef(colIndex);
 		if(columnDef["userId"]) {
 			column["id"] = columnDef["userId"];
 		}
@@ -735,13 +735,13 @@ Core.prototype.getConfigObject = function (gridOptions) {
 		obj["stepScroll"] = (this._rowScrollingStep === 1) ? true : this._rowScrollingStep;
 	}
 
-	var val = this._vscrollbar.getAutoHide();
+	let val = this._vscrollbar.getAutoHide();
 	if(val !== true) {
 		// TODO: check this._hscrollbar and this._vscrollbar can be difference config
 		obj["autoHideScrollbar"] = val; // this._hscrollbar has the same settings
 	}
 
-	var wheelSpeed = this._vscrollbar.getMouseWheelSpeed();
+	let wheelSpeed = this._vscrollbar.getMouseWheelSpeed();
 	if(wheelSpeed) {
 		obj["linearWheelScrolling"] = wheelSpeed;
 	}
@@ -768,13 +768,13 @@ Core.prototype.getConfigObject = function (gridOptions) {
 		obj["contentRightPadding"] = this._reservedSpace;
 	}
 
-	var conflationRate = this.getDataConflationRate();
+	let conflationRate = this.getDataConflationRate();
 	if (conflationRate) {
 		obj["dataConflationRate"] = conflationRate;
 	}
 
-	for(var key in this._plugins) {
-		var pluginInstance = this._plugins[key];
+	for(let key in this._plugins) {
+		let pluginInstance = this._plugins[key];
 		if(typeof pluginInstance["getConfigObject"] === "function") {
 			pluginInstance["getConfigObject"](obj);
 		}
@@ -793,9 +793,9 @@ Core.prototype.fillParentWidth = function(pct) {
 	// uses getBoundingClientRect() instead of clientWidth to prevents
 	// fraction error occured on Chrome (Windows 10) which make clientWidth
 	// exceeds expected value by 1px and will cause incorrect scrollbar active frag
-	var el = this._element;
-	var px = (el.getBoundingClientRect().width | 0) - el.clientLeft;
-	var changes = this._layoutX.setTrackSize(px - this._reservedSpace);
+	let el = this._element;
+	let px = (el.getBoundingClientRect().width | 0) - el.clientLeft;
+	let changes = this._layoutX.setTrackSize(px - this._reservedSpace);
 	return changes !== null;
 };
 /** {@link ElementWrapper#show}
@@ -824,7 +824,7 @@ Core.prototype.getSectionCount = function() {
 /** @private */
 Core.prototype._updateFrozenTopSections = function () {
 	if (!this._fixFrozenTopSections) {
-		var topCount = this._getTopSectionCount();
+		let topCount = this._getTopSectionCount();
 		this._freezeTopSectionAt(topCount - 1);
 	}
 };
@@ -832,7 +832,7 @@ Core.prototype._updateFrozenTopSections = function () {
 /** @private */
 Core.prototype._updateFrozenBottomSections = function () {
 	if (!this._fixFrozenBottomSection) {
-		var bottomCount = this._getBottomSectionCount();
+		let bottomCount = this._getBottomSectionCount();
 		this._setFrozenFooter(bottomCount);
 	}
 };
@@ -841,11 +841,11 @@ Core.prototype._updateFrozenBottomSections = function () {
 * @return {number}
 */
 Core.prototype._getTopSectionCount = function () {
-	var sectionSettings = this._settings;
-	var length = sectionSettings.length;
-	var count = 0;
-	for (var i = 0; i < length; i++) {
-		var type = sectionSettings[i].getType();
+	let sectionSettings = this._settings;
+	let length = sectionSettings.length;
+	let count = 0;
+	for (let i = 0; i < length; i++) {
+		let type = sectionSettings[i].getType();
 		if (type === "header" || type === "title") {
 			count++;
 		} else {
@@ -859,11 +859,11 @@ Core.prototype._getTopSectionCount = function () {
 * @return {number}
 */
 Core.prototype._getBottomSectionCount = function () {
-	var sectionSettings = this._settings;
-	var length = sectionSettings.length;
-	var count = 0;
-	for (var i = length - 1; i >= 0; i--) {
-		var type = sectionSettings[i].getType();
+	let sectionSettings = this._settings;
+	let length = sectionSettings.length;
+	let count = 0;
+	for (let i = length - 1; i >= 0; i--) {
+		let type = sectionSettings[i].getType();
 		if (type === "footer") {
 			count++;
 		} else {
@@ -889,19 +889,19 @@ Core.prototype.addSection = function (opt_type, opt_sectionName) {
 * @fires Core#sectionAdded
 */
 Core.prototype.addSectionAt = function (at, opt_type, opt_sectionName) {
-	var sectionCount = this._settings.length;
+	let sectionCount = this._settings.length;
 	if (at < 0) { at = 0; }
 	if (at > sectionCount) { at = sectionCount; }
 
-	var sectType = this._toSectionType(opt_type);
-	var isBottomPadding = (opt_sectionName === "bottomPadding");
-	var sectionSettings  = this._newSection(
+	let sectType = this._toSectionType(opt_type);
+	let isBottomPadding = (opt_sectionName === "bottomPadding");
+	let sectionSettings  = this._newSection(
 		isBottomPadding ? "footer" : sectType, // Always use footer as a setup for bottom padding section
 		opt_sectionName
 	);
 	if(!sectionSettings){ return null; }
 
-	var section = sectionSettings.getSection();
+	let section = sectionSettings.getSection();
 	if(isBottomPadding) {
 		sectionSettings.setAutoSyncRowCount(false); // Important
 		this._bottomPaddingSect = section;
@@ -932,13 +932,13 @@ Core.prototype.addSectionAt = function (at, opt_type, opt_sectionName) {
 	this._onSectionCountChanged(true);
 
 	if(this._colVirtualizer.isEnabled()) {
-		var activations = this._getColActivationList();
-		var colCount = this.getColumnCount();
+		let activations = this._getColActivationList();
+		let colCount = this.getColumnCount();
 		sectionSettings.activateColumns(activations, 0, colCount - 1);
 	}
 
 	if (this._hasListener("sectionAdded")) {
-		var e = sectionSettings.extendEventArg();
+		let e = sectionSettings.extendEventArg();
 		this._dispatch("sectionAdded", e);
 	}
 
@@ -949,7 +949,7 @@ Core.prototype.addSectionAt = function (at, opt_type, opt_sectionName) {
 * @return {ILayoutGrid}
 */
 Core.prototype.removeSection = function(sectionRef) {
-	var section = this.getSection(sectionRef);
+	let section = this.getSection(sectionRef);
 	if(section !== null) {
 		return this.removeSectionAt(section.getIndex());
 	}
@@ -960,12 +960,12 @@ Core.prototype.removeSection = function(sectionRef) {
 * @return {ILayoutGrid}
 */
 Core.prototype.removeSectionAt = function (at) {
-	var sectionCount = this._settings.length;
+	let sectionCount = this._settings.length;
 	if (at >= 0 && at < sectionCount) {
-		var sectionSettings = this._settings[at];
-		var removedIndex = sectionSettings.getIndex();
-		var section = sectionSettings.getSection();
-		var sectionType = sectionSettings.getType();
+		let sectionSettings = this._settings[at];
+		let removedIndex = sectionSettings.getIndex();
+		let section = sectionSettings.getSection();
+		let sectionType = sectionSettings.getType();
 
 		section.setRowCount(0); // Row count changed
 		this._settings.splice(at, 1);
@@ -994,9 +994,9 @@ Core.prototype.removeLastSection = function() {
 };
 /** @public */
 Core.prototype.removeAllSections = function () {
-	var len = this._settings.length;
-	for (var i = 0; i < len; ++i) {
-		var sectionSettings = this._settings[i];
+	let len = this._settings.length;
+	for (let i = 0; i < len; ++i) {
+		let sectionSettings = this._settings[i];
 		sectionSettings.dispose();
 	}
 	this._bottomPaddingSect = null;
@@ -1009,7 +1009,7 @@ Core.prototype.removeAllSections = function () {
 * @param {boolean|number} paddingSize=6 Add special section at the bottom. If falsy value is specified, the section is removed.
 */
 Core.prototype.setBottomPaddingSection = function (paddingSize) {
-	var sect = this._bottomPaddingSect;
+	let sect = this._bottomPaddingSect;
 	if(paddingSize) {
 		if(typeof paddingSize === "number") {
 			this._bottomPadding = paddingSize;
@@ -1032,16 +1032,16 @@ Core.prototype.setBottomPaddingSection = function (paddingSize) {
 * @return {boolean} Returns true if there is any change
 */
 Core.prototype._updatePaddingBottomSect = function () {
-	var bps = this._bottomPaddingSect;
+	let bps = this._bottomPaddingSect;
 	if(bps) { // Always move bottom padding sect to the last
-		var sectCount = this._settings.length;
-		var last = sectCount - 1;
+		let sectCount = this._settings.length;
+		let last = sectCount - 1;
 		if(last > 0) {
-			var lastSettings = this._settings[last];
+			let lastSettings = this._settings[last];
 			if(lastSettings.getSection() !== bps) {
-				var bpss = null;
-				for(var i = last; --i >= 0;) {
-					var settings = this._settings[i];
+				let bpss = null;
+				for(let i = last; --i >= 0;) {
+					let settings = this._settings[i];
 					if(settings.getSection() === bps) {
 						bpss = settings;
 						break;
@@ -1058,7 +1058,7 @@ Core.prototype._updatePaddingBottomSect = function () {
 					this._bottomPaddingSect = null; // The settings and section must have been removed
 				}
 			} else {
-				var prevSettings = this._settings[last - 1];
+				let prevSettings = this._settings[last - 1];
 				if(prevSettings) {
 					// Blend styling with previous one
 					lastSettings.setType(prevSettings.getType() === "footer" ? "footer" : "content");
@@ -1074,15 +1074,15 @@ Core.prototype._updatePaddingBottomSect = function () {
 * @param {number} dest INCLUSIVE
 */
 Core.prototype.moveSection = function (from, dest) {
-	var sectionCount = this.getSectionCount();
+	let sectionCount = this.getSectionCount();
 	if (from < 0) { from = 0; }
 	else if (from >= sectionCount) { return; }
 	if (dest < 0) { dest = 0; }
 	else if (dest >= sectionCount) { dest = sectionCount - 1; }
 	if (from === dest) { return; }
 
-	var fromSettings = this._settings[from];
-	var destSettings = this._settings[dest];
+	let fromSettings = this._settings[from];
+	let destSettings = this._settings[dest];
 	Util.moveArrayItem(this._settings, from, dest);
 
 	if (destSettings) {
@@ -1104,7 +1104,7 @@ Core.prototype.moveSection = function (from, dest) {
 * @return {ILayoutGrid}
 */
 Core.prototype.getSection = function (sectionRef) {
-	var settings = this.getSectionSettings(sectionRef);
+	let settings = this.getSectionSettings(sectionRef);
 	return (settings !== null) ? settings.getSection() : null;
 
 };
@@ -1117,14 +1117,14 @@ Core.prototype.getSectionSettings = function (sectionRef) {
 		if(Core._sectionType[/** @type{string} */(sectionRef)]) {
 			return this._getNextSection(1, null, /** @type{string} */(sectionRef));
 		}
-		for(var i = this._settings.length; --i >= 0;) {
+		for(let i = this._settings.length; --i >= 0;) {
 			if(this._settings[i].getId() === sectionRef) {
 				return this._settings[i];
 			}
 		}
 	} else {
 		if(sectionRef != null) {
-			var num = -1;
+			let num = -1;
 			if(sectionRef.getIndex != null) {
 				num = /** @type{number} */(sectionRef.getIndex());
 			} else if(Util.isNumber(sectionRef)) {
@@ -1145,9 +1145,9 @@ Core.prototype.getSectionSettings = function (sectionRef) {
 Core.prototype.getAllSections = function (opt_type) {
 	if(opt_type == null) { return this._getAllSections(); }
 
-	var list = this.getAllSectionSettings(opt_type);
-	var ary = /** @type{!Array.<ILayoutGrid>} */(list);
-	for (var i = ary.length; --i >= 0; ) {
+	let list = this.getAllSectionSettings(opt_type);
+	let ary = /** @type{!Array.<ILayoutGrid>} */(list);
+	for (let i = ary.length; --i >= 0; ) {
 		ary[i] = list[i].getSection();
 	}
 	return ary;
@@ -1161,11 +1161,11 @@ Core.prototype.getAllSectionSettings = function (opt_type) {
 		return this._settings; // WARNING: Return internal private member
 	}
 
-	var len = this._settings.length;
-	var ary = [];
+	let len = this._settings.length;
+	let ary = [];
 	opt_type = this._toSectionType(opt_type);
-	for (var i = 0; i < len; ++i) {
-		var sectionSettings = this._settings[i];
+	for (let i = 0; i < len; ++i) {
+		let sectionSettings = this._settings[i];
 		if(opt_type === sectionSettings.getType()) {
 			ary.push(sectionSettings);
 		}
@@ -1183,13 +1183,13 @@ Core.prototype.getSectionIndex = function(identifier) {
 	}
 
 	if(identifier instanceof MouseEvent) {
-		var mPos = Util.getRelativePosition(/** @type{MouseEvent} */(identifier), this._element);
-		var obj = {};
+		let mPos = Util.getRelativePosition(/** @type{MouseEvent} */(identifier), this._element);
+		let obj = {};
 		this._hitTestY(mPos["y"], obj); // TODO: This will not work with zoom feature
 		return obj["sectionIndex"];
 	}
 
-	var section = this.getSection(/** @type{string} */(identifier));
+	let section = this.getSection(/** @type{string} */(identifier));
 	if(section == null) { return -1; }
 
 	return section.getIndex();
@@ -1199,9 +1199,9 @@ Core.prototype.getSectionIndex = function(identifier) {
 * @return {number} Return zero, if identifier does not exist
 */
 Core.prototype.getSectionTop = function (sectionRef) {
-	var section = this.getSection(sectionRef);
+	let section = this.getSection(sectionRef);
 	if (section == null) { return 0; }
-	var top = this._layoutY.getLaneStart(section.getRowOffset());
+	let top = this._layoutY.getLaneStart(section.getRowOffset());
 
 	if (this._startVScrollbarIndex >= 0 && section.getIndex() >= this._startVScrollbarIndex) {
 		top -= this._vscrollbar.getScrollTop();
@@ -1217,7 +1217,7 @@ Core.prototype.getSectionTop = function (sectionRef) {
 */
 Core.prototype.getPreviousSection = function (identifier, opt_type) {
 	if(identifier == null) { identifier = this._settings.length; }
-	var s = this._getNextSection(-1, identifier, opt_type);
+	let s = this._getNextSection(-1, identifier, opt_type);
 	return (s !== null) ? s.getSection() : null;
 };
 /** @public
@@ -1227,7 +1227,7 @@ Core.prototype.getPreviousSection = function (identifier, opt_type) {
 * @return {ILayoutGrid}
 */
 Core.prototype.getNextSection = function (identifier, opt_type) {
-	var s = this._getNextSection(1, identifier, opt_type);
+	let s = this._getNextSection(1, identifier, opt_type);
 	return (s !== null) ? s.getSection() : null;
 };
 /** @public
@@ -1245,7 +1245,7 @@ Core.prototype.getLastSection = function () {
 * @return {ElementWrapper}
 */
 Core.prototype.getCell = function (sectionRef, colIndex, rowIndex, opt_includeSpan) {
-	var s = this.getSection(sectionRef);
+	let s = this.getSection(sectionRef);
 	return (s) ? s.getCell(colIndex, rowIndex, opt_includeSpan) : null;
 };
 /** Get information about the cell, inclusing column index, row index, and section that the cell resides
@@ -1257,16 +1257,16 @@ Core.prototype.getCell = function (sectionRef, colIndex, rowIndex, opt_includeSp
 * core.getCellInfo({"colIndex": 0, "rowIndex": 0}); // Get cell information about the top left cell in the content section
 * core.getCellInfo(document.createElement("some_element"); // Get cell information for cell that contains the element with id "some_element"
 * core.getCellInfo(mouseEventArg); // Get cell information from the given MouseEvent argument (this is the same as getRelativePosition() method)
-* var cellInfo = core.getCellInfo({"colIndex": 1, "rowIndex": 1});
+* let cellInfo = core.getCellInfo({"colIndex": 1, "rowIndex": 1});
 * cellInfo.colIndex = cellInfo.colIndex + 1; // Get next cell to the right
 * core.getCellInfo(cellInfo);
 */
 Core.prototype.getCellInfo = function (cellRef) {
 	if(!cellRef) { return null; }
-	var colIndex = /** @type{number} */(cellRef["colIndex"]);
-	var rowIndex = /** @type{number} */(cellRef["rowIndex"]);
-	var sectionName = /** @type{string} */(cellRef["sectionName"]);
-	var mouseInfo = null;
+	let colIndex = /** @type{number} */(cellRef["colIndex"]);
+	let rowIndex = /** @type{number} */(cellRef["rowIndex"]);
+	let sectionName = /** @type{string} */(cellRef["sectionName"]);
+	let mouseInfo = null;
 	if(colIndex == null || rowIndex == null) { // Core.MouseInfo Non Mouse Info
 		mouseInfo = this.getRelativePosition(/** @type{ElementWrapper|Element} */(cellRef));
 		if(!mouseInfo["hit"]) {
@@ -1276,10 +1276,10 @@ Core.prototype.getCellInfo = function (cellRef) {
 		if(!sectionName) {
 			sectionName = "content";
 		}
-		var ss = this.getSectionSettings(sectionName);
+		let ss = this.getSectionSettings(sectionName);
 		if(ss) {
-			var s = ss.getSection();
-			var cell = s.getCell(colIndex, rowIndex);
+			let s = ss.getSection();
+			let cell = s.getCell(colIndex, rowIndex);
 			if(cell) {
 				mouseInfo = {};
 				mouseInfo["colIndex"] = colIndex;
@@ -1314,11 +1314,11 @@ Core.prototype.getPrevCellInRow = function (cellRef, step) {
 * @return {Core.MouseInfo}
 */
 Core.prototype._getNextCellInRow = function (cellRef, step) {
-	var mouseInfo = this.getCellInfo(cellRef);
+	let mouseInfo = this.getCellInfo(cellRef);
 	if(mouseInfo) {
-		var colIndex = /** @type{number} */(mouseInfo["colIndex"]) + step;
-		var rowIndex = /** @type{number} */(mouseInfo["rowIndex"]);
-		var section = /** @type{ILayoutGrid} */(mouseInfo["section"]);
+		let colIndex = /** @type{number} */(mouseInfo["colIndex"]) + step;
+		let rowIndex = /** @type{number} */(mouseInfo["rowIndex"]);
+		let section = /** @type{ILayoutGrid} */(mouseInfo["section"]);
 
 		mouseInfo["colIndex"] = colIndex;
 		mouseInfo["cell"] = section.getCell(colIndex, rowIndex);
@@ -1331,13 +1331,13 @@ Core.prototype._getNextCellInRow = function (cellRef, step) {
 * @return {Core.MouseInfo} Information about the next cell from left to right and top to bottom. Returns null if the given parameter is invalid
 */
 Core.prototype.getNextCell = function (cellRef) {
-	var mouseInfo = this.getNextCellInRow(cellRef);
+	let mouseInfo = this.getNextCellInRow(cellRef);
 	if(mouseInfo) {
-		var cell = /** @type{Core.Cell} */(mouseInfo["cell"]);
+		let cell = /** @type{Core.Cell} */(mouseInfo["cell"]);
 		if(!cell) { // End of the row
-			var section = /** @type{ILayoutGrid} */(mouseInfo["section"]);
-			var colIndex = mouseInfo["colIndex"] = 0;
-			var rowIndex = /** @type{number} */(mouseInfo["rowIndex"]);
+			let section = /** @type{ILayoutGrid} */(mouseInfo["section"]);
+			let colIndex = mouseInfo["colIndex"] = 0;
+			let rowIndex = /** @type{number} */(mouseInfo["rowIndex"]);
 
 			mouseInfo["rowIndex"] = ++rowIndex;
 			mouseInfo["cell"] = section.getCell(colIndex, rowIndex);
@@ -1351,13 +1351,13 @@ Core.prototype.getNextCell = function (cellRef) {
 * @return {Core.MouseInfo} Information about the previous cell in the row. Returns null if the given parameter is invalid
 */
 Core.prototype.getPrevCell = function (cellRef) {
-	var mouseInfo = this.getPrevCellInRow(cellRef);
+	let mouseInfo = this.getPrevCellInRow(cellRef);
 	if(mouseInfo) {
-		var cell = /** @type{Core.Cell} */(mouseInfo["cell"]);
+		let cell = /** @type{Core.Cell} */(mouseInfo["cell"]);
 		if(!cell) { // End of the row
-			var section = /** @type{ILayoutGrid} */(mouseInfo["section"]);
-			var colIndex = mouseInfo["colIndex"] = section.getColumnCount() - 1;
-			var rowIndex = /** @type{number} */(mouseInfo["rowIndex"]);
+			let section = /** @type{ILayoutGrid} */(mouseInfo["section"]);
+			let colIndex = mouseInfo["colIndex"] = section.getColumnCount() - 1;
+			let rowIndex = /** @type{number} */(mouseInfo["rowIndex"]);
 
 			mouseInfo["rowIndex"] = --rowIndex;
 			mouseInfo["cell"] = section.getCell(colIndex, rowIndex);
@@ -1385,11 +1385,11 @@ Core.prototype.getColumnCount = function () {
 * @fires Core#afterContentBinding
 */
 Core.prototype.setColumnCount = function(num) {
-	var colCount = this._layoutX.getLaneCount();
+	let colCount = this._layoutX.getLaneCount();
 	if(num >= colCount) {
 		this._layoutX.setLaneCount(num);
-		for (var i = this._settings.length; --i >= 0; ) {
-			var section = this._settings[i].getSection();
+		for (let i = this._settings.length; --i >= 0; ) {
+			let section = this._settings[i].getSection();
 			section.setColumnCount(num); // Column may not be added to the document due to virtualization
 		}
 
@@ -1414,12 +1414,12 @@ Core.prototype.setColumnCount = function(num) {
 * @fires Core#afterContentBinding
 */
 Core.prototype.insertColumn = function (index, jsonObj) {
-	var prevCount = this.getColumnCount();
+	let prevCount = this.getColumnCount();
 	if (!(index < prevCount)) { index = prevCount; }
 
 	this._layoutX.insertLane(index);
-	for (var i = this._settings.length; --i >= 0; ) {
-		var section = this._settings[i].getSection();
+	for (let i = this._settings.length; --i >= 0; ) {
+		let section = this._settings[i].getSection();
 		section.insertColumn(index);
 	}
 
@@ -1437,11 +1437,11 @@ Core.prototype.insertColumn = function (index, jsonObj) {
 * @param {(number|Core.ColumnOptions|Array.<Core.ColumnOptions>)=} cols Column definition object or column count
 */
 Core.prototype.insertColumns = function (at, cols) {
-	var prevCount = this.getColumnCount();
+	let prevCount = this.getColumnCount();
 	if (!(at < prevCount)) { at = prevCount; }
 
-	var count = 0;
-	var colDefs;
+	let count = 0;
+	let colDefs;
 	if (Array.isArray(cols)) {
 		count = cols.length;
 		if(count === 1) {
@@ -1462,18 +1462,18 @@ Core.prototype.insertColumns = function (at, cols) {
 	}
 	if (count <= 0) { return; }
 
-	var prevState = this.freezeLayout();
-	var args = [at, 0].concat(new Array(count));
+	let prevState = this.freezeLayout();
+	let args = [at, 0].concat(new Array(count));
 	Array.prototype.splice.apply(this._columnDefs, args);
 
-	for (var i = 0; i < count; i++) {
-		var index = at + i;
+	for (let i = 0; i < count; i++) {
+		let index = at + i;
 		this._layoutX.insertLane(index);
-		for (var s = this._settings.length; --s >= 0; ) {
-			var section = this._settings[s].getSection();
+		for (let s = this._settings.length; --s >= 0; ) {
+			let section = this._settings[s].getSection();
 			section.insertColumn(index);
 		}
-		var colDef = colDefs && colDefs[i];
+		let colDef = colDefs && colDefs[i];
 		this._deserializeColumn(index, colDef);
 	}
 
@@ -1490,24 +1490,24 @@ Core.prototype.insertColumns = function (at, cols) {
 * @fires Core#columnRemoved
 */
 Core.prototype.removeColumnAt = function (index) {
-	var colCount = this.getColumnCount();
+	let colCount = this.getColumnCount();
 	if(index < 0 || index >= colCount) { return null; }
 
-	var vEnd = -1;
+	let vEnd = -1;
 	if(this._colVirtualizer.isVirtualizable()) {
 		vEnd = this._colVirtualizer.getLastIndexInView();
 	}
 
-	var layoutSettings = this._layoutX.removeLaneAt(index);
-	var sectionCount = this._settings.length;
-	for (var i = 0; i < sectionCount; ++i) {
+	let layoutSettings = this._layoutX.removeLaneAt(index);
+	let sectionCount = this._settings.length;
+	for (let i = 0; i < sectionCount; ++i) {
 		this._settings[i].getSection().removeColumnAt(index);
 	}
 
-	var leftPinnedCount = this._pinnedLeftColumnCount;
-	var rightPinnedCount = this._pinnedRightColumnCount;
+	let leftPinnedCount = this._pinnedLeftColumnCount;
+	let rightPinnedCount = this._pinnedRightColumnCount;
 
-	var colDef = this._columnDefs.splice(index, 1)[0]; // width and styles
+	let colDef = this._columnDefs.splice(index, 1)[0]; // width and styles
 
 	this._onColumnCountChanged();
 	 // TODO: Column count changed may cause scroll pane to changed, and thus _updateScrollbarWidth should be included in the event handler
@@ -1524,7 +1524,7 @@ Core.prototype.removeColumnAt = function (index) {
 	colDef["layout"] = layoutSettings;
 
 	if (this._hasListener("columnRemoved")) {
-		var e = {};
+		let e = {};
 		e["atTheMiddle"] = true;
 		e["colIndex"] = index;
 		e["columns"] = "deprecated";
@@ -1557,8 +1557,8 @@ Core.prototype.removeAllColumns = function () {
 * @return {number}
 */
 Core.prototype.getStationaryColumnIndex = function () {
-	var colCount = this.getColumnCount();
-	for (var i = colCount - 1; i >= 0; i--) {
+	let colCount = this.getColumnCount();
+	for (let i = colCount - 1; i >= 0; i--) {
 		if (this._getColumnDef(i)["stationary"]) {
 			return i;
 		}
@@ -1581,14 +1581,14 @@ Core.prototype.isColumnMoveAllowed = function (fromColIndex, toColIndex) {
 		return false;
 	}
 
-	var stationaryIndex = this.getStationaryColumnIndex();
+	let stationaryIndex = this.getStationaryColumnIndex();
 
 	if (stationaryIndex > -1) {
 		if (toColIndex <= stationaryIndex) {
 			return false;
 		}
 
-		for (var i = 0; i < fromColIndex.length; i++) {
+		for (let i = 0; i < fromColIndex.length; i++) {
 			if (fromColIndex[i] <= stationaryIndex) {
 				return false;
 			}
@@ -1604,7 +1604,7 @@ Core.prototype.isColumnMoveAllowed = function (fromColIndex, toColIndex) {
 * @return {boolean} Return true if the column moving is movable, and false otherwise
 */
 Core.prototype.isColumnMovable = function (colIndex) {
-	var stationaryIndex = this.getStationaryColumnIndex();
+	let stationaryIndex = this.getStationaryColumnIndex();
 
 	if (stationaryIndex > -1) {
 		if (colIndex <= stationaryIndex) {
@@ -1630,12 +1630,12 @@ Core.prototype.moveColumn = function (fromCol, destCol) {
 	}
 
 	// Validate user inputs
-	var i;
-	var len = fromCol.length;
-	var colIndices = [];
-	var colIndex = 0;
-	var colCount = this.getColumnCount();
-	var dict = {};
+	let i;
+	let len = fromCol.length;
+	let colIndices = [];
+	let colIndex = 0;
+	let colCount = this.getColumnCount();
+	let dict = {};
 	for(i = 0; i < len; ++i) {
 		colIndex = fromCol[i];
 		if(colIndex >= 0 && colIndex < colCount) { // Filter out invalid index
@@ -1666,7 +1666,7 @@ Core.prototype.moveColumn = function (fromCol, destCol) {
 	colIndices.sort(ascNumberSorter);
 	if(dict[destCol]) { // Destination falls in the same place as source columns
 		// Check if source columns are in continuous sequence
-		var continuousSequence = true;
+		let continuousSequence = true;
 		colIndex = colIndices[0];
 		for(i = 1; i < len; ++i) {
 			if(++colIndex !== colIndices[i]) {
@@ -1678,11 +1678,11 @@ Core.prototype.moveColumn = function (fromCol, destCol) {
 			return false; // No moving operation is required
 		}
 	}
-	var prevState = this.freezeLayout(true);
+	let prevState = this.freezeLayout(true);
 
 	// Start moving multiple items
-	var rhsCount = 0;
-	var srcIndex, destIndex;
+	let rhsCount = 0;
+	let srcIndex, destIndex;
 	// Perform move operation on the right hand side
 	for(i = 0; i < len; ++i) {
 		srcIndex = colIndices[i];
@@ -1693,7 +1693,7 @@ Core.prototype.moveColumn = function (fromCol, destCol) {
 		}
 	}
 	// Perform move operation on the left hand side
-	var lhsCount = len - rhsCount;
+	let lhsCount = len - rhsCount;
 	destIndex = rhsCount ? destCol - 1 : destCol;
 	for(i = 0; i < lhsCount; ++i) {
 		srcIndex = colIndices[i] - i;
@@ -1710,7 +1710,7 @@ Core.prototype.moveColumn = function (fromCol, destCol) {
 * @fires Core#columnMoved
 */
 Core.prototype._moveColumn = function (fromCol, destCol) {
-	var colCount = this.getColumnCount();
+	let colCount = this.getColumnCount();
 	if (fromCol < 0) { fromCol = 0; }
 	else if (fromCol >= colCount) { fromCol = colCount - 1; }
 	if (destCol < 0) { destCol = 0; }
@@ -1721,24 +1721,24 @@ Core.prototype._moveColumn = function (fromCol, destCol) {
 		return false;
 	}
 
-	var vEnd = -1;
+	let vEnd = -1;
 	if(this._colVirtualizer.isVirtualizable()) {
 		vEnd = this._colVirtualizer.getLastIndexInView();
 	}
 
-	var colId = this.getColumnId(fromCol);
+	let colId = this.getColumnId(fromCol);
 	this._layoutX.moveLane(fromCol, destCol);
-	var sectionCount = this._settings.length;
-	for (var i = 0; i < sectionCount; ++i) {
-		var sectionSettings = this._settings[i];
-		var section = sectionSettings.getSection();
+	let sectionCount = this._settings.length;
+	for (let i = 0; i < sectionCount; ++i) {
+		let sectionSettings = this._settings[i];
+		let section = sectionSettings.getSection();
 		section.moveColumn(fromCol, destCol);
 	}
 
-	var colDef = this._columnDefs[fromCol];
-	var leftPinnedCount = this._countPinnedLeftColumns();
-	var rightPinnedCount = this._countPinnedRightColumns();
-	// var minColumn = (fromCol < destCol) ? fromCol : destCol;
+	let colDef = this._columnDefs[fromCol];
+	let leftPinnedCount = this._countPinnedLeftColumns();
+	let rightPinnedCount = this._countPinnedRightColumns();
+	// let minColumn = (fromCol < destCol) ? fromCol : destCol;
 	Util.moveArrayItem(this._columnDefs, fromCol, destCol);
 
 	if(this._hScrollbarEnabled) {
@@ -1779,7 +1779,7 @@ Core.prototype._moveColumn = function (fromCol, destCol) {
 	// this._syncLayoutToColumns(minColumn, this.getColumnCount());
 
 	if (this._hasListener("columnMoved")) {
-		var e = {};
+		let e = {};
 		e["fromColIndex"] = fromCol;
 		e["toColIndex"] = destCol;
 		e["colId"] = colId; // TODO: Id may not needed
@@ -1814,12 +1814,12 @@ Core.prototype._moveColumn = function (fromCol, destCol) {
 * grid.moveColumnById("sourceColumnId", ""); // move to the last position
 */
 Core.prototype.moveColumnById = function (srcCol, destCol) {
-	var colCount = this.getColumnCount();
-	var srcIndex = this.getColumnIndex(srcCol);
+	let colCount = this.getColumnCount();
+	let srcIndex = this.getColumnIndex(srcCol);
 	if(srcIndex < 0 || srcIndex >= colCount) {
 		return false;
 	}
-	var destIndex = destCol != null ? this.getColumnIndex(destCol) : -1;
+	let destIndex = destCol != null ? this.getColumnIndex(destCol) : -1;
 	if(destIndex < 0) {
 		destIndex = colCount;
 	}
@@ -1846,7 +1846,7 @@ Core.prototype._moveColumnByIndex = function (srcIndex, destIndex) {
 * @return {boolean} Return true if there is any change, and false otherwise
 */
 Core.prototype.reorderColumns = function (colRefs, destCol) {
-	var destId = "";
+	let destId = "";
 	if(typeof destCol === "number") {
 		destId = this.getColumnId(destCol);
 	} else if(destCol) {
@@ -1855,17 +1855,17 @@ Core.prototype.reorderColumns = function (colRefs, destCol) {
 
 	this.startBatch("move");
 
-	var dirty = 0;
+	let dirty = 0;
 	if(Array.isArray(colRefs)) {
-		var srcLen = colRefs.length;
+		let srcLen = colRefs.length;
 		if(srcLen > 1) {
-			var colIds = this.getColumnIds();
-			var colCount = colIds.length;
-			var srcIds = [];
-			var invalidDest = false;
-			var i, srcId, srcIdx;
+			let colIds = this.getColumnIds();
+			let colCount = colIds.length;
+			let srcIds = [];
+			let invalidDest = false;
+			let i, srcId, srcIdx;
 			for(i = 0; i < srcLen; ++i) {
-				var colRef = colRefs[i];
+				let colRef = colRefs[i];
 				if(typeof colRef === "number") {
 					srcIdx = colRef;
 					srcId = colIds[colRef] || "";
@@ -1881,7 +1881,7 @@ Core.prototype.reorderColumns = function (colRefs, destCol) {
 				}
 			}
 
-			var destIdx;
+			let destIdx;
 			srcLen = srcIds.length;
 			if(invalidDest) { // Find the next valid destination where it is not contained in the source columns
 				destIdx = this.getColumnIndex(destId);
@@ -1942,8 +1942,8 @@ Core.prototype.updateColumnLayout = function () {
 Core.prototype._deserializeColumn = function (index, jsonObj) {
 	if (!jsonObj) { return; }
 
-	var layout = jsonObj["layout"] || jsonObj;
-	var val = jsonObj["width"];
+	let layout = jsonObj["layout"] || jsonObj;
+	let val = jsonObj["width"];
 	if (val != null) { layout["size"] = val; }
 	val = jsonObj["scalable"];
 	if (val != null) { layout["scalable"] = val; }
@@ -1955,29 +1955,29 @@ Core.prototype._deserializeColumn = function (index, jsonObj) {
 
 	this._layoutX.deserializeLane(index, layout);
 
-	var name;
-	var styles = jsonObj["styles"];
+	let name;
+	let styles = jsonObj["styles"];
 	for (name in styles) {
 		this.setColumnStyle(index, name, styles[name]);
 	}
-	var classes = jsonObj["classes"];
+	let classes = jsonObj["classes"];
 	for (name in classes) {
 		this.enableColumnClass(index, name, classes[name]);
 	}
 	// TODO: Load specific styles for each column type (e.g. "content", "title", "header")
 
-	var colDef = this._getColumnDef(index);
-	var colId = jsonObj["id"];
+	let colDef = this._getColumnDef(index);
+	let colId = jsonObj["id"];
 	if(colId && typeof colId === "string") {
 		colDef["id"] = colId; // WARNING: We do not guarantee uniqueness of user id
 		colDef["userId"] = colId;
 	}
-	var field = jsonObj["field"];
+	let field = jsonObj["field"];
 	if(field && typeof field === "string") {
 		colDef["field"] = field;
 	}
 
-	var value = jsonObj["dataColumnName"]; // Deprecated
+	let value = jsonObj["dataColumnName"]; // Deprecated
 	if (value != null) {
 		colDef["dataColumnName"] = value;
 	}
@@ -2003,12 +2003,12 @@ Core.prototype._deserializeColumn = function (index, jsonObj) {
 		this.setColumnData(index, value);
 	}
 
-	var formatter = jsonObj["formatter"] || jsonObj["binding"]; // support both composite and real-time grid
+	let formatter = jsonObj["formatter"] || jsonObj["binding"]; // support both composite and real-time grid
 	if(Array.isArray(formatter)) {
 		formatter = formatter[0]; // Support only one formatter in the array
 	}
 	if(formatter && typeof formatter !== "function") {
-		var formatterInitializer = formatter["init"];
+		let formatterInitializer = formatter["init"];
 		if(typeof formatterInitializer === "function") {
 			formatterInitializer(jsonObj, this); // Pass on userJson object and core grid instance
 		}
@@ -2037,7 +2037,7 @@ Core.prototype.addRow = function (opt_num) {
 		this.setColumnCount(1); // WARNING: Auto column adding
 	}
 
-	var section = this.getLastSection();
+	let section = this.getLastSection();
 	if (section == null) {
 		section = this.addSection(); // WARNING: Auto section adding
 	}
@@ -2051,7 +2051,7 @@ Core.prototype.addRow = function (opt_num) {
 * @param {number=} opt_num Default is one row
 */
 Core.prototype.removeRow = function (opt_num) {
-	var section = this.getLastSection();
+	let section = this.getLastSection();
 	if (section == null) { return; }
 
 	if (opt_num == null) { opt_num = 1; }
@@ -2069,7 +2069,7 @@ Core.prototype.getRowCount = function () {
 * @param {number} num
 */
 Core.prototype.setSectionRowCount = function(sectionRef, num) {
-	var section = this.getSection(sectionRef);
+	let section = this.getSection(sectionRef);
 	if (section == null) { return; }
 	section.setRowCount(num);
 };
@@ -2090,8 +2090,8 @@ Core.prototype.getRelativeIndex = Util._deprecatedFunction;
 * @public
 */
 Core.prototype.removeAllRows = function() {
-	var len = this._settings.length;
-	for(var i = 0; i < len; ++i) {
+	let len = this._settings.length;
+	for(let i = 0; i < len; ++i) {
 		this._settings[i].getSection().setRowCount(0);
 		this._sectionStarts[i] = 0;
 	}
@@ -2113,11 +2113,11 @@ Core.prototype.getDefaultRowHeight = function () {
 Core.prototype.setDefaultRowHeight = function (val, opt_includeTitle) {
 	if (this._layoutY.setDefaultLaneSize(val)) {
 		this._rowHeightSync = false;
-		var defaultHeight = this._layoutY.getDefaultLaneSize();
+		let defaultHeight = this._layoutY.getDefaultLaneSize();
 		this._rowHeightException = (opt_includeTitle) ? "" : "title";
-		var sectCount = this._settings.length;
-		for (var i = 0; i < sectCount; ++i) {
-			var sectionSettings = this._settings[i];
+		let sectCount = this._settings.length;
+		for (let i = 0; i < sectCount; ++i) {
+			let sectionSettings = this._settings[i];
 			if (
 				sectionSettings.getType() !== this._rowHeightException &&
 				sectionSettings.getId() !== "bottomPadding"
@@ -2168,7 +2168,7 @@ Core.prototype.setDataSource = function (dataSource) {
 		}
 	}
 
-	var e = {};
+	let e = {};
 	e["prevDataSource"] = this._dataSource;
 	this._dataSource = dataSource || null;
 	e["dataSource"] = this._dataSource;
@@ -2176,8 +2176,8 @@ Core.prototype.setDataSource = function (dataSource) {
 	this._dispatch("dataSourceChanged", e);
 
 	if (this._autoSetDataSource) {
-		var len = this._settings.length;
-		for (var i = 0; i < len; ++i) {
+		let len = this._settings.length;
+		for (let i = 0; i < len; ++i) {
 			this._settings[i].setDataSource(dataSource);
 		}
 	}
@@ -2210,7 +2210,7 @@ Core.prototype.getColumnRenderEvent = Util._deprecatedFunction;
 */
 Core.prototype.getColumnDataBindingEvent = function(c) {
 	console.log("getColumnDataBindingEvent() is deprecated. Use setColumnDataBindingHandler() instead");
-	var t = this;
+	let t = this;
 	return {
 		"listen": function(f) {
 			t.setColumnDataBindingHandler(c, f);
@@ -2235,7 +2235,7 @@ Core.prototype.setColumnStyle = function (colIndex, style, value, opt_type) {
 		console.log("WARNING: the first parameter for setColumnStyle must be column index");
 	}
 
-	var styles;
+	let styles;
 	if (opt_type == null) {
 		styles = this._getNestedColumnDef(colIndex, "styles");
 	} else {
@@ -2244,10 +2244,10 @@ Core.prototype.setColumnStyle = function (colIndex, style, value, opt_type) {
 	}
 	styles[style] = value;
 
-	for (var i = this._settings.length; --i >= 0; ) {
-		var sectionSettings = this._settings[i];
+	for (let i = this._settings.length; --i >= 0; ) {
+		let sectionSettings = this._settings[i];
 		if (opt_type == null || opt_type === sectionSettings.getType()) {
-			var section = sectionSettings.getSection();
+			let section = sectionSettings.getSection();
 			section.setColumnStyle(colIndex, style, value);
 		}
 	}
@@ -2265,7 +2265,7 @@ Core.prototype.enableColumnClass = function (colIndex, clsName, enabled, opt_typ
 		colIndex = 0;
 	}
 
-	var classes;
+	let classes;
 	if (opt_type == null) {
 		classes = this._getNestedColumnDef(colIndex, "classes");
 	} else {
@@ -2273,7 +2273,7 @@ Core.prototype.enableColumnClass = function (colIndex, clsName, enabled, opt_typ
 		classes = this._getNestedColumnDef(colIndex, opt_type, "classes");
 	}
 
-	var dirty = false;
+	let dirty = false;
 	enabled = (enabled !== false);
 	if (enabled) {
 		if(!classes[clsName]) {
@@ -2285,8 +2285,8 @@ Core.prototype.enableColumnClass = function (colIndex, clsName, enabled, opt_typ
 	}
 
 	if(dirty) {
-		for (var i = this._settings.length; --i >= 0; ) {
-			var sectionSettings = this._settings[i];
+		for (let i = this._settings.length; --i >= 0; ) {
+			let sectionSettings = this._settings[i];
 			if (opt_type == null || opt_type === sectionSettings.getType()) {
 				sectionSettings.getSection().enableColumnClass(colIndex, clsName, enabled);
 			}
@@ -2301,7 +2301,7 @@ Core.prototype.enableColumnClass = function (colIndex, clsName, enabled, opt_typ
 * @return {boolean}
 */
 Core.prototype.hasColumnClass = function (colIndex, clsName, opt_type) {
-	var classes;
+	let classes;
 	if (opt_type == null) {
 		classes = this._getNestedColumnDef(colIndex, "classes");
 	} else {
@@ -2316,9 +2316,9 @@ Core.prototype.hasColumnClass = function (colIndex, clsName, opt_type) {
 * @param {string=} alignment Available options are "center"|"right"|"left"|"c"|"r"|"l". Use empty string (falsy value) to reset back to default aliganment.
 */
 Core.prototype.setColumnAlignment = function(colIndex, alignment) {
-	var ch = alignment ? alignment.charAt(0).toLowerCase() : "";
+	let ch = alignment ? alignment.charAt(0).toLowerCase() : "";
 
-	var dirty = 0;
+	let dirty = 0;
 	dirty |= this.enableColumnClass(colIndex, "tr-align-left", ch === "l");
 	dirty |= this.enableColumnClass(colIndex, "tr-align-right", ch === "r");
 	dirty |= this.enableColumnClass(colIndex, "tr-align-center", ch === "c");
@@ -2351,13 +2351,13 @@ Core.prototype.getColumnAlignment = function(colIndex) {
 * @return {number}
 */
 Core.prototype.getColumnLeft = function (colIndex) {
-	var colDef = this._columnDefs[colIndex];
+	let colDef = this._columnDefs[colIndex];
 	if(colDef && colDef["rightPinned"]) {
-		var gridWidth = this.getElement().clientWidth;
-		var contentWidth = this._layoutX.getTrackSize();
-		var colLeft = contentWidth < gridWidth ? contentWidth : gridWidth;
-		var lastIndex = this.getColumnCount() - 1;
-		for(var i = lastIndex; i >= colIndex; --i) {
+		let gridWidth = this.getElement().clientWidth;
+		let contentWidth = this._layoutX.getTrackSize();
+		let colLeft = contentWidth < gridWidth ? contentWidth : gridWidth;
+		let lastIndex = this.getColumnCount() - 1;
+		for(let i = lastIndex; i >= colIndex; --i) {
 			colLeft -= this._layoutX.getLaneSize(i);
 		}
 		return colLeft;
@@ -2398,17 +2398,17 @@ Core.prototype._calculateColumnWidths = function (indices, widths) {
 		return widths;
 	}
 
-	var i, newWidth = 0, settingCols = {};
-	var len = indices.length;
-	var calWidths = new Array(len);
+	let i, newWidth = 0, settingCols = {};
+	let len = indices.length;
+	let calWidths = new Array(len);
 	for (i = 0; i < len; i++) {
 		settingCols[indices[i]] = true;
 		calWidths[i] = widths[i];
 		newWidth += widths[i];
 	}
-	var fixedSize = 0, scalableCount = 0;
-	var colCount = this.getColumnCount();
-	var layoutX = this._layoutX;
+	let fixedSize = 0, scalableCount = 0;
+	let colCount = this.getColumnCount();
+	let layoutX = this._layoutX;
 
 	for(i = 0; i < colCount; i++) {
 		if (settingCols[i]) { continue; }
@@ -2421,8 +2421,8 @@ Core.prototype._calculateColumnWidths = function (indices, widths) {
 			}
 		}
 	}
-	var gridSize = this.getContentWidth();
-	var excess = newWidth + fixedSize - gridSize;
+	let gridSize = this.getContentWidth();
+	let excess = newWidth + fixedSize - gridSize;
 
 	if (scalableCount < 1 || excess > 0) {
 		layoutX.resetLaneToDefaultSize();
@@ -2459,8 +2459,8 @@ Core.prototype._calculateColumnWidths = function (indices, widths) {
 * core.setColumnWidth(1, 100, true); // The second column will have a percentage width where 100 is the weight comparing with other percentage column
 */
 Core.prototype.setColumnWidth = function (colIndex, px, opt_scalable) {
-	var calWidths = this._calculateColumnWidths([colIndex], [px]);
-	var dirty = this._setColumnWidth(colIndex, calWidths[0], opt_scalable);
+	let calWidths = this._calculateColumnWidths([colIndex], [px]);
+	let dirty = this._setColumnWidth(colIndex, calWidths[0], opt_scalable);
 	if (dirty) {
 		this._syncLayoutToColumns(colIndex, colIndex + 1);
 	}
@@ -2477,18 +2477,18 @@ Core.prototype.setColumnWidth = function (colIndex, px, opt_scalable) {
 * core.setColumnWidths([1, 200, 1, 150], [true, false, true]); // The first column make column scale, seconds make column pixel, third make column scale and four make column pixel
 */
 Core.prototype.setColumnWidths = function (columnWidths, opt_proportion) {
-	var dirty = 0;
-	var indices = [], widths = [], propotions = [], i;
+	let dirty = 0;
+	let indices = [], widths = [], propotions = [], i;
 	for(i = columnWidths.length; --i >= 0;) {
-		var px = columnWidths[i];
+		let px = columnWidths[i];
 		if(px != null) {
 			indices.push(i);
 			widths.push(px);
 		}
-		var proportionMode = Array.isArray(opt_proportion) ? opt_proportion[i] : opt_proportion;
+		let proportionMode = Array.isArray(opt_proportion) ? opt_proportion[i] : opt_proportion;
 		propotions.push(proportionMode);
 	}
-	var calWidths = this._calculateColumnWidths(indices, widths);
+	let calWidths = this._calculateColumnWidths(indices, widths);
 	for(i = 0; i < calWidths.length; i++) {
 		dirty |= this._setColumnWidth(indices[i], calWidths[i], propotions[i] );
 	}
@@ -2517,7 +2517,7 @@ Core.prototype.isColumnVisible = function (colIndex) {
 * @see {@link Core#showAllColumns}
 */
 Core.prototype.hideColumn = function (colIndex, hidden) {
-	var visibility = hidden === false;
+	let visibility = hidden === false;
 	this.setColumnVisibility(colIndex, visibility, 0);
 };
 /** Hide multiple columns at once, improving the performance. Note that the hidden columns continue to exist and occupy the index. So there is no index shifted after this function call.
@@ -2530,12 +2530,12 @@ Core.prototype.hideColumn = function (colIndex, hidden) {
 * @see {@link Core#showAllColumns}
 */
 Core.prototype.hideColumns = function (colIndices, hidden) {
-	var len = Array.isArray(colIndices) ? colIndices.length : 0;
-	var changeIndices = [];
-	var colCount = this.getColumnCount();
+	let len = Array.isArray(colIndices) ? colIndices.length : 0;
+	let changeIndices = [];
+	let colCount = this.getColumnCount();
 	hidden = hidden !== false;
-	for (var i = 0; i < len; ++i) {
-		var colIndex = colIndices[i];
+	for (let i = 0; i < len; ++i) {
+		let colIndex = colIndices[i];
 		if (colIndex >= 0 && colIndex < colCount) {
 			if (this._layoutX.hideLane(colIndex, hidden, 0)) {
 				changeIndices.push(colIndex);
@@ -2547,7 +2547,7 @@ Core.prototype.hideColumns = function (colIndices, hidden) {
 		this.requestRowRefresh();
 
 		if (this._hasListener("columnVisibilityChanged")) {
-			var e = {};
+			let e = {};
 			e["colIndices"] = changeIndices;
 			e["hidden"] = hidden;
 			this._dispatch("columnVisibilityChanged", e);
@@ -2561,9 +2561,9 @@ Core.prototype.hideColumns = function (colIndices, hidden) {
 * @see {@link Core#hideColumns}
 */
 Core.prototype.showAllColumns = function () {
-	var changeIndices = [];
-	var colCount = this.getColumnCount();
-	for (var c = 0; c < colCount; ++c) {
+	let changeIndices = [];
+	let colCount = this.getColumnCount();
+	for (let c = 0; c < colCount; ++c) {
 		if (this._layoutX.hideLane(c, false, 0)) {
 			changeIndices.push(c);
 		}
@@ -2573,7 +2573,7 @@ Core.prototype.showAllColumns = function () {
 		this.requestRowRefresh();
 
 		if (this._hasListener("columnVisibilityChanged")) {
-			var e = {};
+			let e = {};
 			e["colIndices"] = changeIndices;
 			e["hidden"] = false;
 			this._dispatch("columnVisibilityChanged", e);
@@ -2604,11 +2604,11 @@ Core.prototype.setMinimumColumnWidth = function (colIndex, width) {
 * @return {boolean} True if there is any change
 */
 Core.prototype.setMinimumColumnWidths = function (minWidths, proportion) {
-	var dirty = 0;
-	var first = NaN;
-	var last = NaN;
-	for (var c = minWidths.length; --c >= 0; ) {
-		var minWidth = minWidths[c];
+	let dirty = 0;
+	let first = NaN;
+	let last = NaN;
+	for (let c = minWidths.length; --c >= 0; ) {
+		let minWidth = minWidths[c];
 		if (minWidth != null) {
 			if(!last) { last = c; }
 			first = c;
@@ -2634,7 +2634,7 @@ Core.prototype.getColumnScalability = function (colIndex) {
 * @fires Core#widthChanged
 */
 Core.prototype.setColumnScalability = function (val, opt_scalable) {
-	var dirty = false;
+	let dirty = false;
 	if (Util.isNumber(val)) {
 		opt_scalable = (opt_scalable !== false);
 		dirty = this._layoutX.setLaneScalability(/** @type{number} */(val), opt_scalable);
@@ -2656,7 +2656,7 @@ Core.prototype.setDefaultColumnScalable = function (scalable) {
 * @return {boolean}
 */
 Core.prototype.resetColumnWidths = function () {
-	var dirty = this._layoutX.resetLaneToDefaultSize();
+	let dirty = this._layoutX.resetLaneToDefaultSize();
 	if (dirty) {
   	this._syncLayoutToColumns(0, this.getColumnCount());
 	}
@@ -2725,7 +2725,7 @@ Core.prototype.setAlwaysRenderColumn = function(colIndex, alwaysRender) {
 * @return {!boolean}
 */
 Core.prototype._isAlwaysRenderColumn = function (colIndex) {
-	var colData = this.getColumnData(colIndex);
+	let colData = this.getColumnData(colIndex);
 	return colData["alwaysRender"] === true;
 };
 
@@ -2754,10 +2754,10 @@ Core.prototype.setFitContentWidth = function (bool) {
 * core.loadPlugin(new InCellEditingExtension());
 */
 Core.prototype.loadPlugin = function (pluginRef, opt_options) {
-	var pluginInstance = null;
+	let pluginInstance = null;
 	if (typeof pluginRef === "string") {
-		var trNamespace = window["tr"];
-		var gridNamespace = trNamespace ? trNamespace["grid"] : null;
+		let trNamespace = window["tr"];
+		let gridNamespace = trNamespace ? trNamespace["grid"] : null;
 		if(!gridNamespace) {
 			return null;
 		}
@@ -2776,12 +2776,12 @@ Core.prototype.loadPlugin = function (pluginRef, opt_options) {
 		return null;
 	}
 
-	var pluginName = pluginInstance["getName"]();
+	let pluginName = pluginInstance["getName"]();
 	if(!pluginName) {
 		return null;
 	}
 
-	var prevInstance = this._plugins[pluginName];
+	let prevInstance = this._plugins[pluginName];
 	if (prevInstance) {
 		if(prevInstance === pluginInstance) {
 			return prevInstance; // The same instance is loaded twice
@@ -2802,9 +2802,9 @@ Core.prototype.loadPlugin = function (pluginRef, opt_options) {
 * @return {*|null}
 */
 Core.prototype.unloadPlugin = function (pluginRef) {
-	var pluginInstance;
+	let pluginInstance;
 	if (pluginRef) {
-		var pluginName = "";
+		let pluginName = "";
 		if (typeof pluginRef === "string") {
 			pluginName = pluginRef;
 		} else if (pluginRef["getName"]) {
@@ -2833,7 +2833,7 @@ Core.prototype.unloadPlugin = function (pluginRef) {
 * @return {*|null} plugin Return null if the specified plugin has not been loaded
 */
 Core.prototype.getPlugin = function (pluginName) {
-	var p = this._plugins[pluginName];
+	let p = this._plugins[pluginName];
 	if (!p) {
 		p = this._plugins[pluginName + "Plugin"];
 	}
@@ -2844,8 +2844,8 @@ Core.prototype.getPlugin = function (pluginName) {
 * @return {!Array}
 */
 Core.prototype.getPlugins = function () {
-	var list = [];
-	for (var key in this._plugins) {
+	let list = [];
+	for (let key in this._plugins) {
 		list.push(this._plugins[key]);
 	}
 	return list;
@@ -2855,8 +2855,8 @@ Core.prototype.getPlugins = function () {
 * @return {!Array.<string>}
 */
 Core.prototype.getPluginList = function () {
-	var list = [];
-	for (var key in this._plugins) {
+	let list = [];
+	for (let key in this._plugins) {
 		list.push(key);
 	}
 	return list;
@@ -2887,7 +2887,7 @@ Core.prototype.resetSectionFreezing = function () {
 */
 Core.prototype._freezeTopSectionAt = function (opt_frozenSection) {
 	if (typeof opt_frozenSection == "number") {
-		var newIndex = opt_frozenSection + 1;
+		let newIndex = opt_frozenSection + 1;
 		if (newIndex === this._startVScrollbarIndex) return; // same position then do nothing
 		this._startVScrollbarIndex = newIndex;
 	} else {
@@ -2941,11 +2941,11 @@ Core.prototype.getFooterCount = function () {
 * core.freezeColumn(0, 2); // Grid's horizontal scrollbar will affect only the middle part
 */
 Core.prototype.freezeColumn = function (frozenColIndex, numRightColumn) {
-	var i, colDef;
-	var colCount = this.getColumnCount();
-	var leftPinnedCount = 0;
-	var rightPinnedCount = 0;
-	var dirty = false;
+	let i, colDef;
+	let colCount = this.getColumnCount();
+	let leftPinnedCount = 0;
+	let rightPinnedCount = 0;
+	let dirty = false;
 	if (frozenColIndex || frozenColIndex === 0) {
 		this._hScrollbarEnabled = true;
 		leftPinnedCount = (frozenColIndex >= 0) ? frozenColIndex + 1 : 0;
@@ -2989,10 +2989,10 @@ Core.prototype.freezeColumn = function (frozenColIndex, numRightColumn) {
 * @return {number} Array of number of left pinned column count and right pinned column count
 */
 Core.prototype._countPinnedLeftColumns = function () {
-	var leftPinnedCount = 0;
+	let leftPinnedCount = 0;
 	if(this._hScrollbarEnabled) {
-		for (var i = this._columnDefs.length; --i >= 0;) {
-			var colDef = this._columnDefs[i];
+		for (let i = this._columnDefs.length; --i >= 0;) {
+			let colDef = this._columnDefs[i];
 			if(colDef) {
 				if(colDef["leftPinned"]) {
 					leftPinnedCount = i + 1; // Use the first right most pinned column
@@ -3008,12 +3008,12 @@ Core.prototype._countPinnedLeftColumns = function () {
 * @return {number} numRightColumn Number of columns on the right side to be fixed/pinned on the right side
 */
 Core.prototype._countPinnedRightColumns = function () {
-	var rightPinnedCount = 0;
+	let rightPinnedCount = 0;
 	if(this._hScrollbarEnabled) {
-		var colCount = this._columnDefs.length;
-		var i;
+		let colCount = this._columnDefs.length;
+		let i;
 		for(i = 0; i < colCount; ++i) {
-			var colDef = this._columnDefs[i];
+			let colDef = this._columnDefs[i];
 			if(colDef && colDef["rightPinned"]) {
 				break;
 			}
@@ -3100,11 +3100,11 @@ Core.prototype.updateScrollbars = function(updateHeight, updateWidth) {
 */
 Core.prototype.freezeLayout = function (opt_bool) {
 	opt_bool = opt_bool !== false;
-	var prevState = this._frozenLayout;
+	let prevState = this._frozenLayout;
 	if (prevState !== opt_bool) {
 		this._frozenLayout = opt_bool;
 
-		var stp = this.getPlugin("SortableTitlePlugin");
+		let stp = this.getPlugin("SortableTitlePlugin");
 		if(this._frozenLayout) {
 			if(stp) {
 				stp.freezeIndicator(true);
@@ -3122,8 +3122,8 @@ Core.prototype.freezeLayout = function (opt_bool) {
 		}
 
 		this._rowHeightSync = false;
-		var s, section;
-		var sectionCount = this._settings.length;
+		let s, section;
+		let sectionCount = this._settings.length;
 		for (s = 0; s < sectionCount; s++) {
 			section = this._settings[s].getSection();
 			section.setFrozenLayout(this._frozenLayout);
@@ -3135,7 +3135,7 @@ Core.prototype.freezeLayout = function (opt_bool) {
 			this._disableEvent("widthChanged", false);
 			this._dispatch("widthChanged", {});
 
-			var viewChanged = this._syncRowHeights();
+			let viewChanged = this._syncRowHeights();
 			if(!viewChanged) { // Always update virtualizer
 				this._rowVirtualizer.update(true); // Force section activation
 			}
@@ -3220,8 +3220,8 @@ Core.prototype.toggleContentVerticalLines = function(forcedVal) {
 * @return {Array.<string>}
 */
 Core.prototype.getDataColumnMap = function () {
-	var dataMap = [];
-	for (var i = this.getColumnCount(); --i >= 0; ) {
+	let dataMap = [];
+	for (let i = this.getColumnCount(); --i >= 0; ) {
 		dataMap[i] = this.getDataColumnName(i);
 	}
 	return dataMap;
@@ -3231,7 +3231,7 @@ Core.prototype.getDataColumnMap = function () {
 * @param {Array.<string>=} opt_dataMap index in the array will be matched with the display column
 */
 Core.prototype.setDataColumnMap = function (opt_dataMap) {
-	var i, colDef;
+	let i, colDef;
 	if (opt_dataMap) {
 		for (i = opt_dataMap.length; --i >= 0; ) {
 			colDef = this._getColumnDef(i);
@@ -3251,8 +3251,8 @@ Core.prototype.setDataColumnMap = function (opt_dataMap) {
 * @return {string}
 */
 Core.prototype.getDataColumnName = function (colIndex) {
-	var colDef = this._getColumnDef(colIndex);
-	var dataColumnName = colDef["dataColumnName"];
+	let colDef = this._getColumnDef(colIndex);
+	let dataColumnName = colDef["dataColumnName"];
 	return dataColumnName || "";
 };
 /** @public
@@ -3319,8 +3319,8 @@ Core.prototype.enableRowHighlighting = function (opt_enabled) {
 
 	if (this._rowHighlighting !== opt_enabled) {
 		this._rowHighlighting = opt_enabled;
-		var contentSections = this.getAllSections("content");
-		for (var i = contentSections.length; --i >= 0; ) {
+		let contentSections = this.getAllSections("content");
+		for (let i = contentSections.length; --i >= 0; ) {
 			contentSections[i].enableRowHighlighting(this._rowHighlighting);
 		}
 	}
@@ -3332,9 +3332,9 @@ Core.prototype.enableRowHighlighting = function (opt_enabled) {
 * @return {Element}
 */
 Core.prototype._getTarget = function (obj) {
-	var targetEl = /** @type{Element} */(obj["target"]);
+	let targetEl = /** @type{Element} */(obj["target"]);
 	if(targetEl) { // The Given object is an Event object
-		var path = null;
+		let path = null;
 		if(!this._element.contains(targetEl)) {
 			if(obj["composedPath"]) { // Handle the case where grid is used in the Shadow Dom
 				path = /** @type{Array.<Element>} */(obj["composedPath"]());
@@ -3367,8 +3367,8 @@ Core.prototype.getRelativePosition = function (obj, context) {
 		return {};
 	}
 
-	var ret_obj = context || {};
-	var targetEl = this._getTarget(obj);
+	let ret_obj = context || {};
+	let targetEl = this._getTarget(obj);
 
 	// Calculate object's x and y coordinates that are relative to the top left of this grid
 	if(obj["target"]) { // The Given object is an Event object
@@ -3390,18 +3390,18 @@ Core.prototype.getRelativePosition = function (obj, context) {
 	ret_obj["zoomFactor"] = this._zoomFactor;
 
 	// Find cell element
-	var cellElement = Util.closestElement(targetEl, "cell");
+	let cellElement = Util.closestElement(targetEl, "cell");
 	if(!cellElement) {
 		return ret_obj;
 	}
 	ret_obj["cellElement"] = cellElement;
 
 	// Find column element
-	var colElement = Util.closestElement(cellElement, "column");
+	let colElement = Util.closestElement(cellElement, "column");
 	ret_obj["columnElement"] = colElement;
 
 	// Find section element
-	var sectionElement = null;
+	let sectionElement = null;
 	if (colElement) {
 		// Column element may not be in the document (the column could be hidden)
 		sectionElement = Util.closestElement(colElement, "tr-lg");
@@ -3415,15 +3415,15 @@ Core.prototype.getRelativePosition = function (obj, context) {
 	}
 	ret_obj["sectionName"] = sectionElement["id"] || Util.closestElement(sectionElement, "tr-vlg")["id"];
 
-	var sectionSettings = this.getSectionSettings(ret_obj["sectionName"]);
+	let sectionSettings = this.getSectionSettings(ret_obj["sectionName"]);
 	if (!sectionSettings) {
 		return ret_obj; // Cannot find a section from the given id
 	}
 	sectionSettings.extendEventArg(ret_obj);
 
 	// Find column index
-	var section = sectionSettings.getSection();
-	var colIndex = section.getColumnIndex(colElement || cellElement);
+	let section = sectionSettings.getSection();
+	let colIndex = section.getColumnIndex(colElement || cellElement);
 	if (colIndex < 0) {
 		return ret_obj; // The given columnElement does not resolve in any column index
 	}
@@ -3487,7 +3487,7 @@ Core.prototype.scrollToColumn = function (colIndex, leftOfView) {
 		return false;
 	}
 
-	var colCount = this._layoutX.getLaneCount();
+	let colCount = this._layoutX.getLaneCount();
 	if (colIndex <= 0) {
 		colIndex = 0;
 	} else if (colIndex >= colCount) {
@@ -3497,26 +3497,26 @@ Core.prototype.scrollToColumn = function (colIndex, leftOfView) {
 		return false;
 	}
 
-	var widthOffset = this._hScrollbarEnabled ? this._layoutX.getLaneStart(this._pinnedLeftColumnCount) : 0;
-	var scrollLeft = this._hscrollbar.getScrollLeft();
-	var viewLeft = scrollLeft + widthOffset;
-	var viewWidth = this._hscrollbar.getWidth();
-	var viewTopIndex = this._layoutX.hitTest(viewLeft);
-	var laneLeft = this._layoutX.getLaneStart(colIndex);
-	var laneSize = this._layoutX.getLaneSize(colIndex);
+	let widthOffset = this._hScrollbarEnabled ? this._layoutX.getLaneStart(this._pinnedLeftColumnCount) : 0;
+	let scrollLeft = this._hscrollbar.getScrollLeft();
+	let viewLeft = scrollLeft + widthOffset;
+	let viewWidth = this._hscrollbar.getWidth();
+	let viewTopIndex = this._layoutX.hitTest(viewLeft);
+	let laneLeft = this._layoutX.getLaneStart(colIndex);
+	let laneSize = this._layoutX.getLaneSize(colIndex);
 
 	if (leftOfView || laneSize >= viewWidth || colIndex <= viewTopIndex) {
-		var toLeftOfView = laneLeft - widthOffset;
+		let toLeftOfView = laneLeft - widthOffset;
 		if(scrollLeft !== toLeftOfView) {
 			this._hscrollbar.setScrollLeft(toLeftOfView);
 			return true;
 		}
 	} else {
-		var viewRight = viewLeft + viewWidth;
-		var viewRightIndex = this._layoutX.hitTest(viewRight - 0.1);
+		let viewRight = viewLeft + viewWidth;
+		let viewRightIndex = this._layoutX.hitTest(viewRight - 0.1);
 		if (colIndex >= viewRightIndex) {
-			var laneRight = laneLeft + laneSize;
-			var toEndOfView = scrollLeft + laneRight - viewRight; // Fit end of column into the view
+			let laneRight = laneLeft + laneSize;
+			let toEndOfView = scrollLeft + laneRight - viewRight; // Fit end of column into the view
 
 			this._hscrollbar.setScrollLeft(toEndOfView);
 			return true;
@@ -3567,13 +3567,13 @@ Core.prototype.getYScrollVal = function (sectionRef, rowIndex, topOfView) {
 	if(!this._updateScrollbar(this._vscrollbar)) {
 		return null;
 	}
-	var section = null;
+	let section = null;
 	if(sectionRef) {
 		section = this.getSection(sectionRef);
 	}
 
-	var rowCount = this._layoutY.getLaneCount();
-	var rowIndexOffset = (section) ? section.getRowOffset() : this._sectionStarts[this._startVScrollbarIndex];
+	let rowCount = this._layoutY.getLaneCount();
+	let rowIndexOffset = (section) ? section.getRowOffset() : this._sectionStarts[this._startVScrollbarIndex];
 
 	if(rowIndexOffset) {
 		rowIndex += rowIndexOffset;
@@ -3581,12 +3581,12 @@ Core.prototype.getYScrollVal = function (sectionRef, rowIndex, topOfView) {
 	if (rowIndex <= 0) { rowIndex = 0; }
 	else if (rowIndex >= rowCount) { rowIndex = rowCount - 1; }
 
-	var heightOffset = this._layoutY.getLaneStart(rowIndexOffset);
-	var scrollTop = this._vscrollbar.getScrollTop();
-	var viewTop = scrollTop + heightOffset;
-	var viewTopIndex = section ? section.getFirstIndexInView() : this._layoutY.hitTest(viewTop); // TODO: Make it work in zooming mode
+	let heightOffset = this._layoutY.getLaneStart(rowIndexOffset);
+	let scrollTop = this._vscrollbar.getScrollTop();
+	let viewTop = scrollTop + heightOffset;
+	let viewTopIndex = section ? section.getFirstIndexInView() : this._layoutY.hitTest(viewTop); // TODO: Make it work in zooming mode
 
-	var scrollIndex = -1;
+	let scrollIndex = -1;
 	if (topOfView) {
 		scrollIndex = rowIndex;
 	} else {
@@ -3596,11 +3596,11 @@ Core.prototype.getYScrollVal = function (sectionRef, rowIndex, topOfView) {
 				scrollIndex = 0;
 			}
 		} else { // Scroll down
-			var viewHeight = this._vscrollbar.getHeight();
-			var viewBottom = viewTop + viewHeight;
-			var viewBottomIndex = section ? section.getLastIndexInView() : this._layoutY.hitTest(viewBottom - 0.1);
+			let viewHeight = this._vscrollbar.getHeight();
+			let viewBottom = viewTop + viewHeight;
+			let viewBottomIndex = section ? section.getLastIndexInView() : this._layoutY.hitTest(viewBottom - 0.1);
 			if (rowIndex >= viewBottomIndex) {
-				var viewIndexSize = viewBottomIndex - viewTopIndex;
+				let viewIndexSize = viewBottomIndex - viewTopIndex;
 				scrollIndex = rowIndex - viewIndexSize + 3;
 				if(scrollIndex < 0) {
 					scrollIndex = 0;
@@ -3618,7 +3618,7 @@ Core.prototype.getYScrollVal = function (sectionRef, rowIndex, topOfView) {
 * @param {boolean=} topOfView=false. If true, Make to specified row at the top of the view.
 */
 Core.prototype.scrollToRow = function (sectionRef, rowIndex, topOfView) {
-	var scrollVal = this.getYScrollVal(sectionRef, rowIndex, topOfView);
+	let scrollVal = this.getYScrollVal(sectionRef, rowIndex, topOfView);
 	if(scrollVal !== null) {
 		this._vscrollbar.setScrollTop(scrollVal);
 	}
@@ -3631,29 +3631,29 @@ Core.prototype.getVScrollView = function () {
 		return null;
 	}
 
-	var rowCount = this._layoutY.getLaneCount();
+	let rowCount = this._layoutY.getLaneCount();
 	if (rowCount === 0) { return null; }
 
-	var rowIndexOffset = this._sectionStarts[this._startVScrollbarIndex];
-	var heightOffset = this._layoutY.getLaneStart(rowIndexOffset);
-	var viewTop = this._vscrollbar.getScrollTop() + heightOffset;
-	var viewHeight = this._vscrollbar.getHeight();
-	var viewBottom = viewTop + viewHeight;
-	var topRowIndex = this._layoutY.hitTest(viewTop);
-	var bottomRowIndex = this._layoutY.hitTest(viewBottom - 0.1);
+	let rowIndexOffset = this._sectionStarts[this._startVScrollbarIndex];
+	let heightOffset = this._layoutY.getLaneStart(rowIndexOffset);
+	let viewTop = this._vscrollbar.getScrollTop() + heightOffset;
+	let viewHeight = this._vscrollbar.getHeight();
+	let viewBottom = viewTop + viewHeight;
+	let topRowIndex = this._layoutY.hitTest(viewTop);
+	let bottomRowIndex = this._layoutY.hitTest(viewBottom - 0.1);
 
-	var laneTop = this._layoutY.getLaneStart(topRowIndex);
-	var laneBottom = this._layoutY.getLaneEnd(bottomRowIndex);
+	let laneTop = this._layoutY.getLaneStart(topRowIndex);
+	let laneBottom = this._layoutY.getLaneEnd(bottomRowIndex);
 
-	var prevAnchor = viewTop - viewHeight;
-	var prevPage = (prevAnchor <= heightOffset) ? rowIndexOffset : this._layoutY.hitTest(prevAnchor) + 1;
-	var nextAnchor = viewBottom + viewHeight;
-	var trackSize = this._layoutY.getTrackSize();
-	var nextPage = (nextAnchor >= trackSize) ? rowCount - 1 : this._layoutY.hitTest(nextAnchor - 0.1) - 1;
+	let prevAnchor = viewTop - viewHeight;
+	let prevPage = (prevAnchor <= heightOffset) ? rowIndexOffset : this._layoutY.hitTest(prevAnchor) + 1;
+	let nextAnchor = viewBottom + viewHeight;
+	let trackSize = this._layoutY.getTrackSize();
+	let nextPage = (nextAnchor >= trackSize) ? rowCount - 1 : this._layoutY.hitTest(nextAnchor - 0.1) - 1;
 
 	topRowIndex -= rowIndexOffset;
 	bottomRowIndex -= rowIndexOffset;
-	var obj = {};
+	let obj = {};
 	obj["viewTop"] = viewTop - heightOffset;
 	obj["viewBottom"] = viewBottom - heightOffset;
 	obj["topRowIndex"] = topRowIndex;
@@ -3756,9 +3756,9 @@ Core.prototype.isRowVirtualizationEnabled = function () {
 Core.prototype.enableColumnVirtualization = function (opt_enabled) {
 	this._colVirtualizer.enable(opt_enabled);
 
-	var colVir = this._colVirtualizer.isEnabled();
-	for (var i = this._settings.length; --i >= 0; ) {
-		var sectionSettings = this._settings[i];
+	let colVir = this._colVirtualizer.isEnabled();
+	for (let i = this._settings.length; --i >= 0; ) {
+		let sectionSettings = this._settings[i];
 		sectionSettings.enableColumnVirtualization(colVir);
 	}
 };
@@ -3795,7 +3795,7 @@ Core.prototype.synchronizeVScrollbar = function (subGrid) {
 	subGrid.unlisten("mousemove", subGrid._onMouseMove);
 	subGrid.listen("mousemove", this._onMouseMove);
 
-	var vscrollbar = subGrid.getVScrollbar();
+	let vscrollbar = subGrid.getVScrollbar();
 	vscrollbar._mainScrollbar = this._vscrollbar; // HACK
 
 	vscrollbar.setStyle("visibility", "hidden");
@@ -3815,7 +3815,7 @@ Core.prototype.synchronizeHScrollbar = function (subGrid) {
 	subGrid.unlisten("mousemove", subGrid._onMouseMove);
 	subGrid.listen("mousemove", this._onMouseMove);
 
-	var hscrollbar = subGrid.getHScrollbar();
+	let hscrollbar = subGrid.getHScrollbar();
 	hscrollbar._mainScrollbar = this._hscrollbar; // HACK
 
 	hscrollbar.setStyle("visibility", "hidden");
@@ -3841,7 +3841,7 @@ Core.prototype.synchronizeHScrollbar = function (subGrid) {
 * @fires Core#afterContentBinding
 */
 Core.prototype.updateRowData = function (sectionRef, fromRowIndex, lastRowIndex, userParam) {
-	var ss = this.getSectionSettings(sectionRef || "content");
+	let ss = this.getSectionSettings(sectionRef || "content");
 	if (ss) {
 		ss.updateRowData(fromRowIndex, lastRowIndex, userParam);
 	}
@@ -3850,8 +3850,8 @@ Core.prototype.updateRowData = function (sectionRef, fromRowIndex, lastRowIndex,
 * @public
 */
 Core.prototype.rerender = function () {
-	var sectionCount = this._settings.length;
-	for (var s = 0; s < sectionCount; s++) { // for each section
+	let sectionCount = this._settings.length;
+	for (let s = 0; s < sectionCount; s++) { // for each section
 		this._settings[s].rerender();
 	}
 };
@@ -3882,7 +3882,7 @@ Core.prototype.deactivateRendering = function(disabled) {
 	if (disabled == this._noBinding) return;
 
 	this._noBinding = disabled;
-	var contentSection = this.getSectionSettings("content");
+	let contentSection = this.getSectionSettings("content");
 	if (!contentSection) return;
 
 	contentSection.disableDataBinding(disabled);
@@ -3912,10 +3912,10 @@ Core.prototype.disableLazyRendering = function(opt_bool) {
 * @return {*} Returns undefined if not success
 */
 Core.prototype.getData = function (sectionRef, colRef, rowRef) {
-	var sectionSettings = this.getSectionSettings(sectionRef);
+	let sectionSettings = this.getSectionSettings(sectionRef);
 	if (!sectionSettings) { return null; }
 
-	var colName = this._toDataColumnName(colRef);
+	let colName = this._toDataColumnName(colRef);
 
 	return sectionSettings.getData(colName, rowRef);
 };
@@ -3927,9 +3927,9 @@ Core.prototype.getData = function (sectionRef, colRef, rowRef) {
 * @return {boolean} True for successful data setting
 */
 Core.prototype.setData = function (sectionRef, colRef, rowRef, data) {
-	var sectionSettings = this.getSectionSettings(sectionRef);
+	let sectionSettings = this.getSectionSettings(sectionRef);
 	if (sectionSettings && sectionSettings.isDataBindable()) {
-		var colName = this._toDataColumnName(colRef);
+		let colName = this._toDataColumnName(colRef);
 		return sectionSettings.setData(colName, rowRef, data);
 	}
 	return false;
@@ -3941,7 +3941,7 @@ Core.prototype.setData = function (sectionRef, colRef, rowRef, data) {
 * @return {boolean} True for successful data setting
 */
 Core.prototype.removeRowData = function (sectionRef, rowRef) {
-	var sectionSettings = this.getSectionSettings(sectionRef);
+	let sectionSettings = this.getSectionSettings(sectionRef);
 	if (sectionSettings && sectionSettings.isDataBindable()) {
 		return sectionSettings.removeRowData(rowRef);
 	}
@@ -3953,8 +3953,8 @@ Core.prototype.setHidingMethod = function (method) {
 	if(!method) { method = ""; }
 	if(this._hidingMethod !== method) {
 		this._hidingMethod = method;
-		var sections = this.getAllSections();
-		for(var i = sections.length; --i >= 0;) {
+		let sections = this.getAllSections();
+		for(let i = sections.length; --i >= 0;) {
 			sections[i].setHidingMethod(method);
 		}
 	}
@@ -3982,7 +3982,7 @@ Core.prototype.setColumnVisibility = function (colIndex, bool, flag) {
 			this.requestRowRefresh();
 		}
 		if (this._hasListener("columnVisibilityChanged")) {
-			var e = {};
+			let e = {};
 			e["colIndex"] = colIndex;
 			e["hidden"] = !bool;
 			this._dispatch("columnVisibilityChanged", e);
@@ -4009,7 +4009,7 @@ Core.prototype.getColumnVisibility = function (colIndex, flag) {
 Core.prototype.reserveRightSpace = function (size) {
 	if(this._reservedSpace !== size) {
 		this._reservedSpace = size;
-		for(var i = this._settings.length; --i >= 0;) {
+		for(let i = this._settings.length; --i >= 0;) {
 			this._settings[i].getSection().reserveRightSpace(size);
 		}
 		this._onColumnCountChanged(); // Activate horizontal scrollbar and column virtualization
@@ -4036,11 +4036,11 @@ Core.prototype.getHiddenInput = function () {
 * @see {@link http://help.dottoro.com/ljqmdirr.php}
 */
 Core.prototype.focus = function () {
-	var elem = this._hiddenInput;
-	var activeElem = document.activeElement;
+	let elem = this._hiddenInput;
+	let activeElem = document.activeElement;
 	if(elem && elem !== activeElem) {
-		var x = window.pageXOffset;
-		var y = window.pageYOffset;
+		let x = window.pageXOffset;
+		let y = window.pageYOffset;
 		if(elem["setActive"]) { // Non-standard IE specific method
 			try { // MON-909
 				elem["setActive"]();
@@ -4121,7 +4121,7 @@ Core.prototype.hasHiddenRow = function () {
  * @param {Array=} columns
  */
 Core.prototype.initSimpleTable = function (columns) {
-	var colCount = 0;
+	let colCount = 0;
 	if(!columns && !this.getColumnCount()) {
 		columns = ["Default"]; // Row cannot be added unless there is at least 1 column
 	}
@@ -4132,20 +4132,20 @@ Core.prototype.initSimpleTable = function (columns) {
 		this.setDataColumnMap(columns);
 	}
 
-	var titleSect = this.addSection("title");
+	let titleSect = this.addSection("title");
 	titleSect.addRow(1);
 
 	if(!this._renderingHandler) { // Render title if there is no default rendering
-		for(var c = 0; c < colCount; ++c) {
+		for(let c = 0; c < colCount; ++c) {
 			titleSect.setCellContent(c, 0, columns[c]);
 		}
 	}
 
 	this.addSection("content");
-	var titleSectionSetting = this.getSectionSettings("title");
+	let titleSectionSetting = this.getSectionSettings("title");
 	titleSectionSetting.disableDataBinding();
 
-	var contentSectionSetting = this.getSectionSettings("content");
+	let contentSectionSetting = this.getSectionSettings("content");
 	contentSectionSetting.setAutoSyncRowCount(true);
 	contentSectionSetting.setParent(titleSectionSetting);
 
@@ -4165,7 +4165,7 @@ Core._defaultDataBinding = function(e) {
 * @param {boolean=} selected
 */
 Core.prototype.selectColumn = function (colIndex, selected) {
-	for (var i = this._settings.length; --i >= 0; ) {
+	for (let i = this._settings.length; --i >= 0; ) {
 		this._settings[i].getSection().selectColumn(colIndex, selected);
 	}
 	this._updateColumnBounds();
@@ -4175,7 +4175,7 @@ Core.prototype.selectColumn = function (colIndex, selected) {
 * @return {boolean}
 */
 Core.prototype.isSelectedColumn = function (colIndex) {
-	var first = this._settings[0] || null;
+	let first = this._settings[0] || null;
 	if(first) {
 		return first.getSection().isSelectedColumn(colIndex);
 	}
@@ -4189,17 +4189,17 @@ Core.prototype._updateColumnBounds = function () {
 		return;
 	}
 
-	var sectCount = this._settings.length;
+	let sectCount = this._settings.length;
 	if(!sectCount) {
 		return;
 	}
 
 	// Collecting column selection and selection ranges
-	var selRanges = [];
-	var pair = null;
-	var colCount = this.getColumnCount();
-	var selIndices = [];
-	var i;
+	let selRanges = [];
+	let pair = null;
+	let colCount = this.getColumnCount();
+	let selIndices = [];
+	let i;
 	for(i = 0; i < colCount; i++) {
 		if(this.isSelectedColumn(i)) {
 			selIndices.push(i);
@@ -4218,22 +4218,22 @@ Core.prototype._updateColumnBounds = function () {
 		pair = null;
 	}
 
-	var arg = {
+	let arg = {
 		"selectedColumns": selIndices,
 		"selectionRanges": selRanges
 	};
 	this._dispatch("beforeColumnBoundUpdate", arg);
 
 	// Calculate position from ranges
-	var rangeCount = selRanges.length;
-	var posAry = [];
-	var noBorderAry = [];
-	var topSectionSettings = this._settings[0];
-	var section = topSectionSettings.getSection();
+	let rangeCount = selRanges.length;
+	let posAry = [];
+	let noBorderAry = [];
+	let topSectionSettings = this._settings[0];
+	let section = topSectionSettings.getSection();
 	for(i = 0; i < rangeCount; ++i) {
 		pair = selRanges[i];
-		var positions = [0, 0];
-		var noBorders = [false, false];
+		let positions = [0, 0];
+		let noBorders = [false, false];
 		section.calculateColumnBounds(pair[0], pair[1], positions, noBorders);
 		if(positions[0] < positions[1]) {
 			posAry.push(positions);
@@ -4242,8 +4242,8 @@ Core.prototype._updateColumnBounds = function () {
 	}
 
 	// Render column bounds
-	var topPx = 0;
-	var topBoundIdx = -1;
+	let topPx = 0;
+	let topBoundIdx = -1;
 	if(arg["topBoundRowIndex"] != null) {
 		topBoundIdx = +arg["topBoundRowIndex"];
 	}
@@ -4259,13 +4259,13 @@ Core.prototype._updateColumnBounds = function () {
 /* @private
 */
 Core.prototype._updateColumnSeparators = function() {
-	var sectCount = this._settings.length;
+	let sectCount = this._settings.length;
 	if(!sectCount) {
 		return;
 	}
 
-	for(var i = 0; i < sectCount; i++) {
-		var section = this._settings[i].getSection();
+	for(let i = 0; i < sectCount; i++) {
+		let section = this._settings[i].getSection();
 		if (section) {
 			section.updateColumnSeparators();
 		}
@@ -4278,23 +4278,23 @@ Core.prototype._updateColumnSeparators = function() {
 * @return {Object}
 */
 Core.prototype.getColumnRect = function (startColIndex, endColIndex) {
-	var gridWidth = this.getElement().clientWidth;
-	var scrollViewSize = gridWidth;
-	var hscrollbar = this._hscrollbar;
+	let gridWidth = this.getElement().clientWidth;
+	let scrollViewSize = gridWidth;
+	let hscrollbar = this._hscrollbar;
 	if (hscrollbar.isActive()) {
 		scrollViewSize = hscrollbar.getTrackSize();
 	}
 
-	var left = 0;
-	var width = 0;
+	let left = 0;
+	let width = 0;
 	if (this._settings.length) {
-		var section = this._settings[0].getSection();
-		var positions = [0, 0];
+		let section = this._settings[0].getSection();
+		let positions = [0, 0];
 		section.calculateColumnBounds(startColIndex, endColIndex, positions, []);
 		left = positions[0];
 		width = positions[1] - left;
 	}
-	var rect = {
+	let rect = {
 		top: 0, // TODO: Support column grouping
 		left: left,
 		width: width,
@@ -4313,27 +4313,27 @@ Core.prototype.getColumnRect = function (startColIndex, endColIndex) {
 * @return {Object}
 */
 Core.prototype.getRowRect = function (startRowIndex, endRowIndex) {
-	var contentWidth = this._layoutX.getTrackSize();
-	var gridElem = this.getElement();
-	var gridWidth = gridElem.clientWidth;
+	let contentWidth = this._layoutX.getTrackSize();
+	let gridElem = this.getElement();
+	let gridWidth = gridElem.clientWidth;
 	contentWidth = contentWidth < gridWidth ? contentWidth : gridWidth;
 
-	var section = this.getSection("content");
-	var rowOffset = section ? section.getRowOffset() : 1;
-	var layoutY = this._layoutY;
-	var sectionOffsetPx = layoutY.getLaneStart(rowOffset);
+	let section = this.getSection("content");
+	let rowOffset = section ? section.getRowOffset() : 1;
+	let layoutY = this._layoutY;
+	let sectionOffsetPx = layoutY.getLaneStart(rowOffset);
 
-	var scrollTop = 0;
-	var scrollViewSize = section.getHeight();
-	var vscrollbar = this._vscrollbar;
+	let scrollTop = 0;
+	let scrollViewSize = section.getHeight();
+	let vscrollbar = this._vscrollbar;
 	if (vscrollbar.isActive()) {
 		scrollTop = vscrollbar.getScrollTop();
 		scrollViewSize = vscrollbar.getTrackSize();
 	}
-	var scrollViewBottom = scrollViewSize + sectionOffsetPx;
+	let scrollViewBottom = scrollViewSize + sectionOffsetPx;
 
-	var topPx = layoutY.getLaneStart(startRowIndex + rowOffset) - scrollTop;
-	var bottomPx = layoutY.getLaneEnd(endRowIndex + rowOffset) - scrollTop;
+	let topPx = layoutY.getLaneStart(startRowIndex + rowOffset) - scrollTop;
+	let bottomPx = layoutY.getLaneEnd(endRowIndex + rowOffset) - scrollTop;
 	if (topPx < sectionOffsetPx) {
 		topPx = sectionOffsetPx;
 	} else if (topPx > scrollViewBottom) {
@@ -4349,7 +4349,7 @@ Core.prototype.getRowRect = function (startRowIndex, endRowIndex) {
 	topPx -= sectionOffsetPx;
 	bottomPx -= sectionOffsetPx;
 
-	var rect = {
+	let rect = {
 		top: topPx,
 		left: 0,
 		width: contentWidth,
@@ -4368,15 +4368,15 @@ Core.prototype.normalizeConfig = function (configObj) {
 	if(!configObj) {
 		configObj = {};
 	}
-	var columns = configObj["columns"];
-	var colCount = columns ? columns.length : 0;
-	var i, column;
+	let columns = configObj["columns"];
+	let colCount = columns ? columns.length : 0;
+	let i, column;
 
-	var freezingIndex = configObj["columnFreezing"];
+	let freezingIndex = configObj["columnFreezing"];
 	if(freezingIndex == null) {
 		freezingIndex = configObj["freezeColumn"];
 	}
-	var pinnedRightColumns = configObj["pinnedRightColumns"] || configObj["frozenRightColumns"];
+	let pinnedRightColumns = configObj["pinnedRightColumns"] || configObj["frozenRightColumns"];
 	if (pinnedRightColumns) {
 		delete configObj["pinnedRightColumns"];
 		delete configObj["frozenRightColumns"];
@@ -4421,7 +4421,7 @@ Core.prototype.setColumnGrouping = function (groupDefs) {
 */
 Core.prototype.getColumnGroupParentId = function (colRef) {
 	if(this._groupDefs) {
-		var colId = (typeof colRef === "number") ? this.getColumnId(colRef) : colRef;
+		let colId = (typeof colRef === "number") ? this.getColumnId(colRef) : colRef;
 		return this._groupDefs.getParentId(colId);
 	}
 	return "";
@@ -4433,7 +4433,7 @@ Core.prototype.getColumnGroupParentId = function (colRef) {
 */
 Core.prototype.getColumnGroupChildIds = function (groupId) {
 	if(this._groupDefs) {
-		var ary = this._groupDefs.getLeafDescendants(groupId);
+		let ary = this._groupDefs.getLeafDescendants(groupId);
 		if(ary && ary.length > 0) {
 			return ary;
 		}
@@ -4451,16 +4451,16 @@ Core.prototype.getColumnGroupChildIds = function (groupId) {
 * core.getValidColumnList(["c1","c2","c5"],{ "c2":true, "c5":true }); // Get list of valid columns from specific mapping
 */
 Core.prototype.getValidColumnList = function (colIds, columnMap) {
-	var colList = [];
+	let colList = [];
 	if(!colIds){
 		return colList;
 	}
 	if(!columnMap){
 		columnMap = this.createColumnMap(colIds);
 	}
-	var colCount = this.getColumnCount();
-	for(var c = 0; c < colCount; ++c) {
-		var id = this._getColumnDef(c)["id"];
+	let colCount = this.getColumnCount();
+	for(let c = 0; c < colCount; ++c) {
+		let id = this._getColumnDef(c)["id"];
 		if(columnMap[id] != null){
 			colList.push({"index": c, "id": id});
 		}
@@ -4477,10 +4477,10 @@ Core.prototype.createColumnMap = function (colRefs) {
 	if(!colRefs){
 		colRefs = this.getColumnIds();
 	}
-	var mappingObj = {};
-	var count = colRefs.length;
-	for(var i = 0; i < count; i++){
-		var colId = colRefs[i];
+	let mappingObj = {};
+	let count = colRefs.length;
+	for(let i = 0; i < count; i++){
+		let colId = colRefs[i];
 		if(typeof colId ===  "number"){
 			colId = this.getColumnId(colId);
 		}
@@ -4539,7 +4539,7 @@ Core.prototype.stopBatch = function (batchType) {
 * @param {!Object} eventArg
 */
 Core.prototype._dispatchColumnEvent = function (type, eventArg) {
-	var batches = this._batches;
+	let batches = this._batches;
 	if(batches){
 		eventArg["batches"] = batches;
 	}
@@ -4568,9 +4568,9 @@ Core.prototype._dispatchRowPositionChanged = function () {
 * @return {!Array.<ILayoutGrid>}
 */
 Core.prototype._getAllSections = function () {
-	var sections = [];
-	var sectionCount = this._settings.length;
-	for (var i = 0; i < sectionCount; i++) {
+	let sections = [];
+	let sectionCount = this._settings.length;
+	for (let i = 0; i < sectionCount; i++) {
 		sections.push(this._settings[i].getSection());
 	}
 	return sections;
@@ -4582,13 +4582,13 @@ Core.prototype._getAllSections = function () {
 * @return {SectionSettings}
 */
 Core.prototype._getNextSection = function (increment, identifier, opt_type) {
-	var nextAt = this.getSectionIndex(identifier) + increment;
+	let nextAt = this.getSectionIndex(identifier) + increment;
 	if(opt_type == null) { return this.getSectionSettings(nextAt); }
 
 	opt_type = this._toSectionType(opt_type);
-	var count = this._settings.length;
+	let count = this._settings.length;
 	while (nextAt >= 0 && nextAt < count) {
-		var sectionSettings = this._settings[nextAt];
+		let sectionSettings = this._settings[nextAt];
 		if (opt_type === sectionSettings.getType()) {
 			return /**@type{SectionSettings}*/(sectionSettings);
 		}
@@ -4605,7 +4605,7 @@ Core.prototype._toSectionType = function (val) {
 	if(Core._sectionType[/** @type{string} */(val)]) { return /** @type{string} */(val); }
 
 	if (Util.isString(val)) {
-		var lowerCaseStr = val.charAt(0).toLowerCase();
+		let lowerCaseStr = val.charAt(0).toLowerCase();
 		switch (lowerCaseStr) {
 		case "t": return "title";
 		case "h": return "header";
@@ -4624,7 +4624,7 @@ Core.prototype._toSectionType = function (val) {
 */
 Core.prototype._newSection = function (opt_type, sectionName) {
 	if(sectionName) {
-		for(var i = this._settings.length; --i >= 0;) {
+		for(let i = this._settings.length; --i >= 0;) {
 			if (this._settings[i].getId() === sectionName) { // check if section name isn't already used
 				return null;
 			}
@@ -4632,20 +4632,20 @@ Core.prototype._newSection = function (opt_type, sectionName) {
 	}
 
 	opt_type = this._toSectionType(opt_type);
-	var sectionOpt = {
+	let sectionOpt = {
 		"horizontalScrollbar": this._hscrollbar
 	};
-	var section = (opt_type === "content") ? new VirtualizedLayoutGrid(sectionOpt) : new LayoutGrid(sectionOpt);
+	let section = (opt_type === "content") ? new VirtualizedLayoutGrid(sectionOpt) : new LayoutGrid(sectionOpt);
 	section._setContext(this);
 
-	var sectionSettings = new SectionSettings(section);
+	let sectionSettings = new SectionSettings(section);
 	sectionSettings.setId(sectionName);
 	sectionSettings.setType(opt_type);
 
 	sectionSettings.listen("dataChanged", this._onSectionDataChanged);
 	sectionSettings.listen("rowAvailable", this._onRowAvailable);
 
-	var rowHighlighting = (opt_type === "content") ? this._rowHighlighting : false;
+	let rowHighlighting = (opt_type === "content") ? this._rowHighlighting : false;
 	section.enableRowHighlighting(rowHighlighting);
 	section.enableShading(false); // No alternate shading
 	section.setHidingMethod(this._hidingMethod);
@@ -4669,12 +4669,12 @@ Core.prototype._newSection = function (opt_type, sectionName) {
 * @param {ILayoutGrid} section
 */
 Core.prototype._putToLast = function(section) {
-	var sectionCount = this._settings.length;
+	let sectionCount = this._settings.length;
 	if (sectionCount === 0) {
 		section.setParent(this._element, true);
 	} else {
-		var lastGrid = this.getLastSection();
-		var nextSibling = lastGrid.getElement().nextSibling;
+		let lastGrid = this.getLastSection();
+		let nextSibling = lastGrid.getElement().nextSibling;
 		if (nextSibling !== null) {
 			section.insertBefore(nextSibling);
 		} else {
@@ -4688,19 +4688,19 @@ Core.prototype._putToLast = function(section) {
 * @param {string} sectionType
 */
 Core.prototype._syncStyleToSectionColumns = function (section, sectionType) {
-	var name;
-	for (var i = this._columnDefs.length; --i >= 0; ) {
-		var colDef = this._getColumnDef(i);
-		var styles = colDef["styles"];
+	let name;
+	for (let i = this._columnDefs.length; --i >= 0; ) {
+		let colDef = this._getColumnDef(i);
+		let styles = colDef["styles"];
 		for (name in styles) {
 			section.setColumnStyle(i, name, styles[name]);
 		}
-		var classes = colDef["classes"];
+		let classes = colDef["classes"];
 		for (name in classes) {
 			section.enableColumnClass(i, name, true);
 		}
 
-		var sectionDef = colDef[sectionType];
+		let sectionDef = colDef[sectionType];
 		if(sectionDef) {
 			styles = sectionDef["styles"];
 			for (name in styles) {
@@ -4717,8 +4717,8 @@ Core.prototype._syncStyleToSectionColumns = function (section, sectionType) {
 * @return {boolean}
 */
 Core.prototype._syncRowHeights = function () {
-	var sectionCount = this._settings.length;
-	for (var s = 0; s < sectionCount; ++s) {
+	let sectionCount = this._settings.length;
+	for (let s = 0; s < sectionCount; ++s) {
 		this._syncSectionRowHeights(this._settings[s].getSection());
 	}
 	if (!this._frozenLayout) {
@@ -4743,25 +4743,25 @@ Core.prototype._syncSectionRowHeights = function (section) {
 * @return {boolean} True if there is any changed
 */
 Core.prototype._setColumnWidth = function (colIndex, px, opt_scalable) {
-	var dirty = false;
-	var layoutX = this._layoutX;
+	let dirty = false;
+	let layoutX = this._layoutX;
 	if(opt_scalable != null) {
 		dirty = layoutX.setLaneScalability(colIndex, opt_scalable ? true : false);
 	} else {
-		var scalable = layoutX.getLaneScalability(colIndex);
+		let scalable = layoutX.getLaneScalability(colIndex);
 		if(this._preserveProportion) {
 			if(scalable) {
 				//calculate the proportion
-				var colCount = this.getColumnCount();
-				var totalWeight = 0, totalWidth = 0;
-				for (var j = 0; j < colCount; ++j) {
+				let colCount = this.getColumnCount();
+				let totalWeight = 0, totalWidth = 0;
+				for (let j = 0; j < colCount; ++j) {
 					if(!layoutX.getLaneScalability(j)) { continue; }
-					var colWidth = layoutX.getLaneSize(j);
-					var colWeight = layoutX.getCustomLaneSize(j);
+					let colWidth = layoutX.getLaneSize(j);
+					let colWeight = layoutX.getCustomLaneSize(j);
 					totalWeight += colWeight;
 					totalWidth += colWidth;
 				}
-				var oldWeight = layoutX.getCustomLaneSize(colIndex);
+				let oldWeight = layoutX.getCustomLaneSize(colIndex);
 				px = ((px * totalWeight) - (px * oldWeight)) / (totalWidth - px);
 				if(!px || px < 0) {
 					px = totalWeight; // In case of new width exceeds total available width, set new weight as total weight
@@ -4782,7 +4782,7 @@ Core.prototype._setColumnWidth = function (colIndex, px, opt_scalable) {
 * @param {*=} ctx
 */
 Core.prototype._dispatchColumnAddedEvent = function (at, count, atTheMiddle, ctx) {
-	var e = {};
+	let e = {};
 	if (this._hasListener("columnAdded")) {
 		e["atTheMiddle"] = atTheMiddle;
 		if(count === 1) {
@@ -4790,8 +4790,8 @@ Core.prototype._dispatchColumnAddedEvent = function (at, count, atTheMiddle, ctx
 			e["context"] = ctx;
 			this._dispatchColumnEvent("columnAdded", e);
 		} else {
-			var ary = Array.isArray(ctx) ? ctx : [];
-			for (var i = 0; i < count; ++i) {
+			let ary = Array.isArray(ctx) ? ctx : [];
+			for (let i = 0; i < count; ++i) {
 				e["colIndex"] = at + i;
 				e["context"] = ary[i];
 				this._dispatchColumnEvent("columnAdded", e);
@@ -4827,7 +4827,7 @@ Core.prototype._dispatchColumnRenderEvent = function (e, fromC, toC, fromS, toS,
 	e["fromColIndex"] = fromC;
 	e["toColIndex"] = toC;
 
-	var s;
+	let s;
 	if (this._hasListener("preSectionRender")) {
 		for (s = fromS; s < toS; ++s) {
 			this._settings[s].extendRenderEventArg(e, fromR, toR);
@@ -4836,20 +4836,20 @@ Core.prototype._dispatchColumnRenderEvent = function (e, fromC, toC, fromS, toS,
 	}
 
 	// Dispatch column render event
-	for (var c = fromC; c < toC; ++c) { // For each column
-		var handler = this.getColumnRenderingHandler(c) || this._renderingHandler;
+	for (let c = fromC; c < toC; ++c) { // For each column
+		let handler = this.getColumnRenderingHandler(c) || this._renderingHandler;
 		if (handler) {
 			e["colIndex"] = c;
 			e["dataColumnName"] = this.getDataColumnName(c);
 
 			for (s = fromS; s < toS; ++s) { // For each section
-				var sectionSettings = this._settings[s];
+				let sectionSettings = this._settings[s];
 				sectionSettings.extendRenderEventArg(e, fromR, toR);
 
-				var section = sectionSettings.getSection();
-				var startR = e["fromRowIndex"];
-				var destR = e["toRowIndex"];
-				for (var r = startR; r < destR; ++r) { // For each row
+				let section = sectionSettings.getSection();
+				let startR = e["fromRowIndex"];
+				let destR = e["toRowIndex"];
+				for (let r = startR; r < destR; ++r) { // For each row
 					e["rowIndex"] = r;
 					e["cell"] = section["getCell"](c, r, false); // Accessing cell by using bracket allows extenal object to mock Section
 					handler(e);
@@ -4880,23 +4880,23 @@ Core.prototype._dispatchRowExpansionBinding = function (e) {
 		return;
 	}
 
-	var dataView = /** @type{DataView} */(e["dataSource"]);
+	let dataView = /** @type{DataView} */(e["dataSource"]);
 	if (!dataView || !dataView.getDataSource()) {
 		return;
 	}
 
-	var fromR = /** @type{number} */(e["fromRowIndex"]);
-	var toR = /** @type{number} */(e["toRowIndex"]);
-	var rids = dataView.getVisibleRowIds(true);
-	var section = /** @type{ILayoutGrid} */(e["section"]);
+	let fromR = /** @type{number} */(e["fromRowIndex"]);
+	let toR = /** @type{number} */(e["toRowIndex"]);
+	let rids = dataView.getVisibleRowIds(true);
+	let section = /** @type{ILayoutGrid} */(e["section"]);
 
 	e["rowData"] = null;
 	e["cell"] = null;
-	var lastRowIndexChanged = false;
-	for (var r = toR - 1; r >= fromR; --r) {
-		var rowId = dataView.getRowId(r);
+	let lastRowIndexChanged = false;
+	for (let r = toR - 1; r >= fromR; --r) {
+		let rowId = dataView.getRowId(r);
 		if(!lastRowIndexChanged) {
-			var reCount = dataView.getRowExpansionCount(rowId);
+			let reCount = dataView.getRowExpansionCount(rowId);
 			if(reCount > 0){
 				r = r + reCount + 1; // include parent row
 				lastRowIndexChanged = true;
@@ -4904,8 +4904,8 @@ Core.prototype._dispatchRowExpansionBinding = function (e) {
 			}
 		}
 
-		var ctxRow = section.getContextRow(r);
-		var parentId = dataView.getExpansionParentByRowId(rowId);
+		let ctxRow = section.getContextRow(r);
+		let parentId = dataView.getExpansionParentByRowId(rowId);
 		if(parentId) { // dispatch to render row expansion
 			e["originalRowData"] = dataView.getRowData(parentId);
 			e["originalRowId"] = parentId;
@@ -4930,28 +4930,28 @@ Core.prototype._dispatchRowExpansionBinding = function (e) {
 * @param {number} num
 */
 Core.prototype._removeColumn = function (num) {  // TODO: change the logic to use removeColumnAt
-	var colCount = this._layoutX.getLaneCount();
+	let colCount = this._layoutX.getLaneCount();
 	if (num > colCount) { num = colCount; }
 	if (num <= 0) { return; }
 
-	var newCount = colCount - num;
+	let newCount = colCount - num;
 	this._layoutX.setLaneCount(newCount);
 
-	for (var s = this._settings.length; --s >= 0; ) {
-		var section = this._settings[s].getSection();
+	for (let s = this._settings.length; --s >= 0; ) {
+		let section = this._settings[s].getSection();
 		section.setColumnCount(newCount);
 	}
 
-	var removedCols = this._columnDefs.slice(newCount); // Shallow cloning
+	let removedCols = this._columnDefs.slice(newCount); // Shallow cloning
 	this._columnDefs.length = newCount;
 
 	this._onColumnCountChanged();
 	this._syncLayoutToColumns(newCount, 0, true); // Virtualizer's view bound will not be affected from column
 
 	if (this._hasListener("columnRemoved")) {
-		var e = {};
-		for (var c = colCount; --c >= newCount; ) {
-			var colDef = removedCols[c - newCount];
+		let e = {};
+		for (let c = colCount; --c >= newCount; ) {
+			let colDef = removedCols[c - newCount];
 			e["colIndex"] = c;
 			e["columnData"] = colDef ? colDef["columnData"] : null;
 			this._dispatchColumnEvent("columnRemoved", e);
@@ -4967,18 +4967,18 @@ Core.prototype._removeColumn = function (num) {  // TODO: change the logic to us
 Core.prototype._onSectionDataChanged = function (e) {
 	if(this._dispatchingDataChanged) { return; } // Prevent infinite loop
 
-	var colCount = this._layoutX.getLaneCount();
+	let colCount = this._layoutX.getLaneCount();
 	this._dispatchingDataChanged = colCount ? true : false;
 	if(!colCount) {
 		return;
 	}
 
-	var fromR = /** @type{number} */(e["fromRowIndex"]);
-	var toR = /** @type{number} */(e["toRowIndex"]);
-	var section = /** @type{ILayoutGrid} */(e["section"]);
-	var dataView = /** @type{DataView} */(e["dataSource"]);
-	var hasDataView = (dataView && dataView.getDataSource()) ? 1 : 0;
-	var rids, rowDataCollection;
+	let fromR = /** @type{number} */(e["fromRowIndex"]);
+	let toR = /** @type{number} */(e["toRowIndex"]);
+	let section = /** @type{ILayoutGrid} */(e["section"]);
+	let dataView = /** @type{DataView} */(e["dataSource"]);
+	let hasDataView = (dataView && dataView.getDataSource()) ? 1 : 0;
+	let rids, rowDataCollection;
 
 	section._startBindingSession(true);
 
@@ -4988,24 +4988,24 @@ Core.prototype._onSectionDataChanged = function (e) {
 		e["dataRows"] = rowDataCollection;
 	}
 
-	var isContentSection = e["sectionType"] === "content";
+	let isContentSection = e["sectionType"] === "content";
 	if(isContentSection){
 		this._dispatch("beforeContentBinding", e);
 	}
 	this._dispatch("preSectionDataBinding", e);
 
-	var dataMap = this.getDataColumnMap();
-	for (var c = 0; c < colCount; ++c) {
+	let dataMap = this.getDataColumnMap();
+	for (let c = 0; c < colCount; ++c) {
 		if(section["isColumnActive"](c) && (this.isColumnVisible(c) || this._isAlwaysRenderColumn(c))) {
-			var handler = this.getColumnDataBindingHandler(c) || this._dataBindingHandler;
+			let handler = this.getColumnDataBindingHandler(c) || this._dataBindingHandler;
 			if (handler) {
-				var cid = dataMap[c];
+				let cid = dataMap[c];
 				e["dataColumnName"] = cid;
 				e["colIndex"] = c;
 
-				for (var r = fromR; r < toR; ++r) {
+				for (let r = fromR; r < toR; ++r) {
 					if(hasDataView) {
-						var rowData = rowDataCollection[r];
+						let rowData = rowDataCollection[r];
 
 						e["rowData"] = rowData;
 						e["rowId"] = rids[r];
@@ -5063,7 +5063,7 @@ Core.prototype._onVScroll = function (e) {
 * @param {Object} e
 */
 Core.prototype._onHScroll = function (e) {
-	var scrollVal = this._hscrollbar.getScrollLeft();
+	let scrollVal = this._hscrollbar.getScrollLeft();
 	this._colVirtualizer.setViewOffset(scrollVal); // Trigger virtualization event
 	this._updateColumnBounds();
 	this._dispatchColumnPositionChanged();
@@ -5090,14 +5090,14 @@ Core.prototype._onVScrollDisabled = function () {
 * @param {Object} e
 */
 Core.prototype._onRowInViewChanged = function (e) { // Triggered from virtualizer
-	var fi = e["firstIndex"];
-	var ei = e["lastIndex"] + 1; // End index
-	var sectionCount = this._settings.length;
-	var updateRange = [0, 0];
-
-	for (var s = 0; s < sectionCount; ++s) { // For each section
-		var sectionSettings = this._settings[s];
-		var section = sectionSettings.getSection();
+	let fi = e["firstIndex"];
+	let ei = e["lastIndex"] + 1; // End index
+	let sectionCount = this._settings.length;
+	let updateRange = [0, 0];
+
+	for (let s = 0; s < sectionCount; ++s) { // For each section
+		let sectionSettings = this._settings[s];
+		let section = sectionSettings.getSection();
 		if(section && !section.getFrozenLayout()) { // Section may have been disposed or frozen
 			section.activateRows(fi, ei, updateRange);
 			this.updateRowData(sectionSettings,
@@ -5114,18 +5114,18 @@ Core.prototype._onColInViewChanged = function (e) {
 	if(!this.getColumnCount()) {
 		return; // No column for activation and no cell to be rendered
 	}
-	var pfi = e["prevFirstIndex"];
-	var pli = e["prevLastIndex"]; // INCLUSIVE
-	var fi = e["firstIndex"];
-	var li = e["lastIndex"]; // INCLUSIVE
+	let pfi = e["prevFirstIndex"];
+	let pli = e["prevLastIndex"]; // INCLUSIVE
+	let fi = e["firstIndex"];
+	let li = e["lastIndex"]; // INCLUSIVE
 
-	var first = pfi < fi ? pfi : fi;
-	var last = pli > li ? pli : li; // INCLUSIVE
+	let first = pfi < fi ? pfi : fi;
+	let last = pli > li ? pli : li; // INCLUSIVE
 
 	this._activateColumns(fi, li, first, last);
-	var sectionCount = this.getSectionCount();
-	for (var s = 0; s < sectionCount; ++s) { // For each section
-		var sectionSettings = this._settings[s];
+	let sectionCount = this.getSectionCount();
+	for (let s = 0; s < sectionCount; ++s) { // For each section
+		let sectionSettings = this._settings[s];
 		this.updateRowData(sectionSettings); // It will be render all rows in view
 	}
 };
@@ -5144,10 +5144,10 @@ Core.prototype._activateColumns = function(fi, li, first, last) {
 		last = this.getColumnCount() - 1;
 	}
 
-	var activations = this._getColActivationList(fi, li, first, last);
-	var sectionCount = this.getSectionCount();
-	for(var s = sectionCount; --s >= 0;) {
-		var sectionSettings = this._settings[s];
+	let activations = this._getColActivationList(fi, li, first, last);
+	let sectionCount = this.getSectionCount();
+	for(let s = sectionCount; --s >= 0;) {
+		let sectionSettings = this._settings[s];
 		sectionSettings.activateColumns(activations, first, last);
 	}
 };
@@ -5161,7 +5161,7 @@ Core.prototype._activateColumns = function(fi, li, first, last) {
 Core.prototype._getColActivationList = function (fi, li, first, last) {
 	if (first == null) { first = 0; }
 
-	var colCount = this.getColumnCount();
+	let colCount = this.getColumnCount();
 	if (last == null) { last = colCount - 1; }
 
 	if (fi == null) {
@@ -5172,10 +5172,10 @@ Core.prototype._getColActivationList = function (fi, li, first, last) {
 		li = this._colVirtualizer.getLastIndexInView();
 	}
 
-	var leftPinnedIndex = this.getHScrollStartIndex();
-	var rightPinnedIndex = this.getFirstPinnedRightIndex();
-	var activations = new Array(last + 1);
-	for (var c = first; c <= last; ++c) {
+	let leftPinnedIndex = this.getHScrollStartIndex();
+	let rightPinnedIndex = this.getFirstPinnedRightIndex();
+	let activations = new Array(last + 1);
+	for (let c = first; c <= last; ++c) {
 		activations[c] = (c < leftPinnedIndex) ||
 			(c >= fi && c <= li) ||
 			(c >= rightPinnedIndex);
@@ -5189,7 +5189,7 @@ Core.prototype._getColActivationList = function (fi, li, first, last) {
 */
 Core.prototype._getColumnDef = function (colIndex) {
 	if (colIndex >= 0) {
-		var def = this._columnDefs[colIndex];
+		let def = this._columnDefs[colIndex];
 		if (!def) {
 			def = this._columnDefs[colIndex] = {
 				"id": "" + Core._runningColumnId++, // Unique identifier
@@ -5210,9 +5210,9 @@ Core.prototype._getColumnDef = function (colIndex) {
 * @return {!Object}
 */
 Core.prototype._getNestedColumnDef = function (colIndex, firstLvl, secondLvl) {
-	var def = this._getColumnDef(colIndex);
+	let def = this._getColumnDef(colIndex);
 	if(firstLvl) {
-		var parentDef = def;
+		let parentDef = def;
 		def = parentDef[firstLvl];
 		if(!def) {
 			def = parentDef[firstLvl] = {};
@@ -5250,9 +5250,9 @@ Core.prototype._getColumnId = Core.prototype.getColumnId;
 * @return {!Array.<string>} Return all column ids from existing column
 */
 Core.prototype.getColumnIds = function () {
-	var colCount = this.getColumnCount();
-	var ary = new Array(colCount);
-	for(var c = 0; c < colCount; ++c) {
+	let colCount = this.getColumnCount();
+	let ary = new Array(colCount);
+	for(let c = 0; c < colCount; ++c) {
 		ary[c] = this._getColumnDef(c)["id"] || "";
 	}
 	return ary;
@@ -5279,9 +5279,9 @@ Core.prototype.getColumnField = function (colIndex) {
 * @return {!Array.<string>} Return all column fields from existing columns
 */
 Core.prototype.getColumnFields = function () {
-	var colCount = this.getColumnCount();
-	var ary = new Array(colCount);
-	for(var c = 0; c < colCount; ++c) {
+	let colCount = this.getColumnCount();
+	let ary = new Array(colCount);
+	for(let c = 0; c < colCount; ++c) {
 		ary[c] = this._getColumnDef(c)["field"] || "";
 	}
 	return ary;
@@ -5296,10 +5296,10 @@ Core.prototype.getColumnIndex = function (colRef) {
 	if(typeof colRef === "number") {
 		return colRef;
 	} else if(colRef) {
-		var str = colRef;
-		var colCount = this.getColumnCount();
-		for(var c = 0; c < colCount; ++c) {
-			var colDef = this._getColumnDef(c);
+		let str = colRef;
+		let colCount = this.getColumnCount();
+		for(let c = 0; c < colCount; ++c) {
+			let colDef = this._getColumnDef(c);
 			if(str === colDef["id"] || str === colDef["field"]) {
 				return c;
 			}
@@ -5313,13 +5313,13 @@ Core.prototype.getColumnIndex = function (colRef) {
 * @return {!Array.<number>} Return negative value if there is no match
 */
 Core.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 check for duplication
 		}
@@ -5332,11 +5332,11 @@ Core.prototype.getColumnIndices = function (colRefs) {
 * @return {!Object.<string, number>}
 */
 Core.prototype.getColumnIndexMap = function () {
-	var colCount = this.getColumnCount();
-	var obj = {};
-	var str = "";
-	for(var c = 0; c < colCount; ++c) {
-		var colDef = this._getColumnDef(c);
+	let colCount = this.getColumnCount();
+	let obj = {};
+	let str = "";
+	for(let c = 0; c < colCount; ++c) {
+		let colDef = this._getColumnDef(c);
 
 		str = colDef["field"];
 		if(str) {
@@ -5365,11 +5365,11 @@ Core.prototype._onMouseMove = function () {
 /** @private */
 Core.prototype._onGridClicked = function () {
 	// research for dragging
-	var selection = window.getSelection();
+	let selection = window.getSelection();
 	if(selection.toString()){
 		return;
 	}
-	var activeElem = document.activeElement;
+	let activeElem = document.activeElement;
 	if(!this._element.contains(activeElem)){
 		this.focus();
 	}
@@ -5381,13 +5381,13 @@ Core.prototype._onGridClicked = function () {
 Core.prototype._onRowHightlighted = function (e) {
 	if (!this._hasListener("rowHighlighted")) { return; }
 
-	var section = e["sender"];
-	var settings = this.getSectionSettings(section.getId());
+	let section = e["sender"];
+	let settings = this.getSectionSettings(section.getId());
 	if (settings == null) { return; }
 
 	settings.extendEventArg(e);
 
-	var dataSource = settings.getDataSource();
+	let dataSource = settings.getDataSource();
 	if (dataSource !== null) {
 		e["rowId"] = dataSource.getRowId(/** @type{number} */(e["rowIndex"]));
 		e["dataRow"] = dataSource.getRowData(e["rowId"]);
@@ -5401,12 +5401,12 @@ Core.prototype._onRowCountChanged = function (e) {
 	if(this._disposed) {
 		return; // There is no need to do anything after grid is disposed
 	}
-	var section = /** @type {ILayoutGrid} */(e["sender"]);
-	var prevRowCount = e["prevCount"];
-	var newRowCount = e["rowCount"];
-	var sectionIndex = section.getIndex();
-	var offset = this._updateSectionIndices(sectionIndex);
-	var i = 0;
+	let section = /** @type {ILayoutGrid} */(e["sender"]);
+	let prevRowCount = e["prevCount"];
+	let newRowCount = e["rowCount"];
+	let sectionIndex = section.getIndex();
+	let offset = this._updateSectionIndices(sectionIndex);
+	let i = 0;
 
 	if(prevRowCount > newRowCount) { // case row removed
 		this._layoutY.removeLaneAt(offset, prevRowCount - newRowCount);
@@ -5414,8 +5414,8 @@ Core.prototype._onRowCountChanged = function (e) {
 			this._syncSectionRowHeights(section);
 		}
 	} else { // case row added
-		var defaultHeight = this._layoutY.getDefaultLaneSize();
-		var customHeight = section.getDefaultRowHeight();
+		let defaultHeight = this._layoutY.getDefaultLaneSize();
+		let customHeight = section.getDefaultRowHeight();
 
 		this._layoutY.insertLane(offset + prevRowCount, newRowCount - prevRowCount);
 		if (customHeight !== defaultHeight) {
@@ -5425,10 +5425,10 @@ Core.prototype._onRowCountChanged = function (e) {
 		}
 	}
 
-	var noBinding = e["noBinding"];
-	var paneChanged = (sectionIndex <= this._startVScrollbarIndex) || (sectionIndex >= this._getFooterStartIndex());
-	var forceUpdate = this._frozenFooterCount > 0 ? true : false; // Prevent from footer section flashing
-	var viewChanged = this._updateScrollbarHeight(paneChanged, forceUpdate, noBinding); // Virtualization is triggered
+	let noBinding = e["noBinding"];
+	let paneChanged = (sectionIndex <= this._startVScrollbarIndex) || (sectionIndex >= this._getFooterStartIndex());
+	let forceUpdate = this._frozenFooterCount > 0 ? true : false; // Prevent from footer section flashing
+	let viewChanged = this._updateScrollbarHeight(paneChanged, forceUpdate, noBinding); // Virtualization is triggered
 	if(noBinding){
 		this._hasPendingRowChange = true;
 	}
@@ -5464,25 +5464,25 @@ Core.prototype._onRowHeightChanged = function (e) {
 		return;
 	}
 
-	var evts = this._rowHeightConflator.popAllData();
+	let evts = this._rowHeightConflator.popAllData();
 
-	var len = evts.length;
-	var minSectionIndex = NaN;
+	let len = evts.length;
+	let minSectionIndex = NaN;
 
 	// TODO: Set row height one by one is not good
-	for(var j = 0; j < len; ++j) {
-		var evt = evts[j];
-		var section = /** @type {ILayoutGrid} */(evt["section"]);
+	for(let j = 0; j < len; ++j) {
+		let evt = evts[j];
+		let section = /** @type {ILayoutGrid} */(evt["section"]);
 		if(!this._containsSection(section)) {
 			continue; // The section is no longer contained in this grid
 		}
 
-		var sectIndex = section.getIndex();
-		var relIndex = evt["rowIndex"];
-		var rowIndex = this.getRowIndex(sectIndex, relIndex);
+		let sectIndex = section.getIndex();
+		let relIndex = evt["rowIndex"];
+		let rowIndex = this.getRowIndex(sectIndex, relIndex);
 
-		var changeLength = evt["changeLength"];
-		for (var i = 0; i < changeLength; ++i) {
+		let changeLength = evt["changeLength"];
+		for (let i = 0; i < changeLength; ++i) {
 			if(this._layoutY.setLaneSize(rowIndex + i, section.getRowHeight(relIndex + i))) {
 				if(!(sectIndex >= minSectionIndex)) {
 					minSectionIndex = sectIndex;
@@ -5512,7 +5512,7 @@ Core.prototype._onRowHeightChanged = function (e) {
 * @returns {boolean}
 */
 Core.prototype._containsSection = function (s) {
-	for(var i = this._settings.length; --i >= 0;) {
+	for(let i = this._settings.length; --i >= 0;) {
 		if(this._settings[i].getSection() === s) {
 			return true;
 		}
@@ -5527,7 +5527,7 @@ Core.prototype._onRowAvailable = function (e) {
 	if(this._hasPendingRowChange){
 		return;
 	}
-	var sectionIndex = /** @type{number} */(e["sectionIndex"]);
+	let sectionIndex = /** @type{number} */(e["sectionIndex"]);
 	this._dispatchColumnRenderEvent(e,
 		0, this.getColumnCount(),
 		sectionIndex, sectionIndex + 1,
@@ -5541,7 +5541,7 @@ Core.prototype._onSectionCountChanged = function (opt_suppressLayout) {
 	if(this._frozenLayout) { return; }
 
 	if (this._tempFrozenSectionRef) {
-		var startVScrollbarSection = this.getNextSection(this._tempFrozenSectionRef);
+		let startVScrollbarSection = this.getNextSection(this._tempFrozenSectionRef);
 		if (startVScrollbarSection !== null) {
 			this._startVScrollbarIndex = startVScrollbarSection.getIndex();
 			this._tempFrozenSectionRef = "";
@@ -5568,8 +5568,8 @@ Core.prototype._onColumnCountChanged = function () {
 	if(this._frozenLayout || this._disposed) { return; }
 
 	// TODO: Optimize these methods during initialization
-	var pinnedLeft = this._countPinnedLeftColumns();
-	var pinnedRight = this._countPinnedRightColumns();
+	let pinnedLeft = this._countPinnedLeftColumns();
+	let pinnedRight = this._countPinnedRightColumns();
 
 	this._updateColumnBounds();
 	this._updateColumnSeparators();
@@ -5639,12 +5639,12 @@ Core.prototype._getSectionSize = function (startIndex, count) {
 	if(count == null) {
 		count = this.getSectionCount() - startIndex;
 	}
-	var startPos = this._layoutY.getLaneStart(
+	let startPos = this._layoutY.getLaneStart(
 		this._sectionStarts[startIndex]
 	);
 
-	var endIndex = startIndex + count;
-	var endPos = count > 0 ? this._layoutY.getLaneStart(
+	let endIndex = startIndex + count;
+	let endPos = count > 0 ? this._layoutY.getLaneStart(
 		this._sectionStarts[endIndex]
 	) : 0;
 	return endPos - startPos;
@@ -5661,9 +5661,9 @@ Core.prototype._updateScrollbarHeight = function (paneChanged, contentChanged, n
 		return false;
 	}
 
-	var forceUpdateLayout = contentChanged;
-	var recalculation = paneChanged && this._startVScrollbarIndex >= 0;
-	var hasRowHeightChanged = this._rowHeightConflator.isConflating();
+	let forceUpdateLayout = contentChanged;
+	let recalculation = paneChanged && this._startVScrollbarIndex >= 0;
+	let hasRowHeightChanged = this._rowHeightConflator.isConflating();
 	if(hasRowHeightChanged) {
 		this._rowHeightConflator._needScrollbarUpdate = true;
 
@@ -5674,13 +5674,13 @@ Core.prototype._updateScrollbarHeight = function (paneChanged, contentChanged, n
 
 	if (recalculation && !hasRowHeightChanged) {
 		// Scroll Frame
-		var gridElem = this.getElement();
+		let gridElem = this.getElement();
 		if(!gridElem) {
 			return false;
 		}
 
-		var gridParent = this.getParent();
-		var scrollFrame = this._vscrollbar.getParent();
+		let gridParent = this.getParent();
+		let scrollFrame = this._vscrollbar.getParent();
 		if(scrollFrame) {
 			if(scrollFrame !== gridParent) { // If vscrollbar is attached to an external element
 				// Assume that there is always a horizontal scrollbar host underneath
@@ -5693,8 +5693,8 @@ Core.prototype._updateScrollbarHeight = function (paneChanged, contentChanged, n
 			this._vscrollbar.setParent(scrollFrame);
 		}
 
-		var sectionStart = this._getVScrollStart();
-		var footerSize = this._getFooterSize();
+		let sectionStart = this._getVScrollStart();
+		let footerSize = this._getFooterSize();
 
 		if(scrollFrame !== gridElem) {
 			sectionStart += gridElem.clientTop;
@@ -5702,7 +5702,7 @@ Core.prototype._updateScrollbarHeight = function (paneChanged, contentChanged, n
 
 		// Scroll Track and Pane
 		this._vscrollbar.resetPaneSize(); // scrollFrame could have a dynamic height that rely on pane's content.
-		var containerHeight = scrollFrame.clientHeight - (sectionStart + footerSize) * this._zoomFactor;
+		let containerHeight = scrollFrame.clientHeight - (sectionStart + footerSize) * this._zoomFactor;
 
 		// Pane size needs to be bigger when zooming out to keep the same view size
 		this._vscrollbar.setTop(sectionStart * this._zoomFactor);
@@ -5711,8 +5711,8 @@ Core.prototype._updateScrollbarHeight = function (paneChanged, contentChanged, n
 		// This calculation is for finding a appropriate dynamic buffer size
 		// because in the large content number, buffer need to be bigger.
 		// TODO: move buffer calculation to virtualizer
-		var defaultSize = this._layoutY.getDefaultLaneSize();
-		var viewSize = defaultSize * 12; // Display at least 12 rows
+		let defaultSize = this._layoutY.getDefaultLaneSize();
+		let viewSize = defaultSize * 12; // Display at least 12 rows
 
 		if (containerHeight > viewSize) {
 			viewSize = (Math.ceil(containerHeight / defaultSize) + 4) * defaultSize;
@@ -5726,7 +5726,7 @@ Core.prototype._updateScrollbarHeight = function (paneChanged, contentChanged, n
 		this._rowVirtualizer.validateVirtualization(); // Content height may be changed
 	}
 
-	var viewChanged = false;
+	let viewChanged = false;
 	if(!noBinding) {
 		viewChanged = this._rowVirtualizer.update(); // May fire onRowInViewChanged
 	}
@@ -5746,27 +5746,27 @@ Core.prototype._updateScrollbarWidth = function (paneChanged, contentChanged) {
 
 	if (paneChanged && this._hScrollbarEnabled) {
 		// Scroll Frame
-		var gridElem = this.getElement();
-		var scrollFrame = this._hscrollbar.getParent();
+		let gridElem = this.getElement();
+		let scrollFrame = this._hscrollbar.getParent();
 		if (!scrollFrame) {
 			scrollFrame = this.getParent() || gridElem;
 			this._hscrollbar.setParent(scrollFrame);
 		}
 
 		// Frozen Area
-		var leftFrozenArea = this._layoutX.getLaneStart(this._pinnedLeftColumnCount);
+		let leftFrozenArea = this._layoutX.getLaneStart(this._pinnedLeftColumnCount);
 
-		var colCount = this._layoutX.getLaneCount();
-		var rightFrozenArea = 0;
-		var rightPinnedCount = this._countPinnedRightColumns(); // TODO: Check if we need to do a recount here
+		let colCount = this._layoutX.getLaneCount();
+		let rightFrozenArea = 0;
+		let rightPinnedCount = this._countPinnedRightColumns(); // TODO: Check if we need to do a recount here
 		if (rightPinnedCount) {
 			rightFrozenArea = this._layoutX.getLaneStart(colCount) -
 				this._layoutX.getLaneStart(colCount - rightPinnedCount);
 		}
 
 		// Scroll Track and Pane
-		var gridClientWidth = (scrollFrame !== gridElem) ? gridElem.clientLeft : 0;
-		var containerWidth = scrollFrame.clientWidth -
+		let gridClientWidth = (scrollFrame !== gridElem) ? gridElem.clientLeft : 0;
+		let containerWidth = scrollFrame.clientWidth -
 				(leftFrozenArea + gridClientWidth + rightFrozenArea) * this._zoomFactor;
 
 		if (rightPinnedCount > 0) {
@@ -5777,8 +5777,8 @@ Core.prototype._updateScrollbarWidth = function (paneChanged, contentChanged) {
 		this._hscrollbar.setLeft((leftFrozenArea + gridClientWidth) * this._zoomFactor);
 		this._hscrollbar.setTrackSize(containerWidth, containerWidth / this._zoomFactor);
 
-		var defaultSize = this._layoutX.getDefaultLaneSize();
-		var viewSize = defaultSize * 4; // Display at least 4 column
+		let defaultSize = this._layoutX.getDefaultLaneSize();
+		let viewSize = defaultSize * 4; // Display at least 4 column
 		if (containerWidth > viewSize) {
 			viewSize = containerWidth;
 		}
@@ -5800,18 +5800,18 @@ Core.prototype._updateScrollbarWidth = function (paneChanged, contentChanged) {
 * @return {boolean}
 */
 Core.prototype._hitTestY = function (relativeY, returnedObj) {
-	var sectionSettings;
+	let sectionSettings;
 	if (returnedObj["sectionSettings"]) {
 		sectionSettings = returnedObj["sectionSettings"];
 	} else {
-		var rowIndex;
+		let rowIndex;
 		if (returnedObj["rowIndex"] == 'number') {
 			rowIndex = returnedObj['rowIndex'];
 		} else {
 			rowIndex = this._layoutY.hitTest(relativeY);
 		}
-		var validRowIndex = (rowIndex >= 0) ? rowIndex : ~rowIndex; // TODO: Check if this is necessary
-		var sectionIndex = Util.upperBound(this._sectionStarts, validRowIndex) - 1;
+		let validRowIndex = (rowIndex >= 0) ? rowIndex : ~rowIndex; // TODO: Check if this is necessary
+		let sectionIndex = Util.upperBound(this._sectionStarts, validRowIndex) - 1;
 		returnedObj["sectionIndex"] = sectionIndex;
 		sectionSettings = this._settings[sectionIndex];
 		if(!sectionSettings) { // Cannot find SectionSettings
@@ -5820,7 +5820,7 @@ Core.prototype._hitTestY = function (relativeY, returnedObj) {
 		sectionSettings.extendEventArg(returnedObj);
 	}
 
-	var section = sectionSettings.getSection();
+	let section = sectionSettings.getSection();
 	if(returnedObj["colIndex"] != null && returnedObj["cellElement"]) {
 		returnedObj["rowIndex"] = section.getCellIndex(returnedObj["colIndex"], returnedObj["cellElement"]);
 	} else {
@@ -5838,26 +5838,26 @@ Core.prototype._hitTestY = function (relativeY, returnedObj) {
 */
 Core.prototype._syncLayoutToColumns = function (from, to, opt_forceDispatching) {
 	if (this._frozenLayout) { return; }
-	var colCount = this._layoutX.getLaneCount();
-	var forceUpdate = this.fillParentWidth(100); // Resize all columns if there is a scaling column
+	let colCount = this._layoutX.getLaneCount();
+	let forceUpdate = this.fillParentWidth(100); // Resize all columns if there is a scaling column
 	if (forceUpdate || (from == null) || (to == null)) {
 		from = 0;
 		to = colCount;
 		forceUpdate = true;
 	}
 
-	var sectCount = this._settings.length;
+	let sectCount = this._settings.length;
 	if (sectCount <= 0) { return; }
 
-	var dirty = false;
+	let dirty = false;
 	if(from < to) {
-		for (var i = 0; i < sectCount; ++i) {
+		for (let i = 0; i < sectCount; ++i) {
 			dirty = this._syncLayoutToSectionColumns(this._settings[i].getSection(), from, to) || dirty;
 		}
 	}
 
 	// TODO: Check if "to" should be greater than or equal to first pinnied right index
-	var paneChanged = forceUpdate || (from < this.getHScrollStartIndex()) || (to > this.getFirstPinnedRightIndex());
+	let paneChanged = forceUpdate || (from < this.getHScrollStartIndex()) || (to > this.getFirstPinnedRightIndex());
 	this._updateScrollbarWidth(paneChanged, true /* contentChanged */);
 	this._updateColumnBounds();
 	this._updateColumnSeparators();
@@ -5881,8 +5881,8 @@ Core.prototype._syncLayoutToSectionColumns = function (section, opt_from, opt_to
 	if (opt_from == null) { opt_from = 0; }
 	if (opt_to == null) { opt_to = this._layoutX.getLaneCount(); }
 
-	var dirty = 0;
-	for (var i = opt_from; i < opt_to; ++i) {
+	let dirty = 0;
+	for (let i = opt_from; i < opt_to; ++i) {
 		dirty |= section._setColumnWidth(i, this._layoutX.getLaneSize(i));
 	}
 	if(dirty && !this._frozenLayout) {
@@ -5915,14 +5915,14 @@ Core.prototype._updateSectionIndices = function (from) {
 	if (from < 0) { from = 0; }
 
 	// Adjust Index offsets for hittest
-	var sectionCount = this._settings.length;
-	var first = this._settings[0] || null;
+	let sectionCount = this._settings.length;
+	let first = this._settings[0] || null;
 	if (first !== this._firstSettings) {
 		if (this._firstSettings) { this._firstSettings.getSection().removeClass("first"); }
 		this._firstSettings = first;
 		if (this._firstSettings) { this._firstSettings.getSection().addClass("first"); }
 	}
-	var last = this._settings[sectionCount - 1] || null;
+	let last = this._settings[sectionCount - 1] || null;
 	if (last !== this._lastSettings) {
 		if (this._lastSettings) { this._lastSettings.getSection().removeClass("last"); }
 		this._lastSettings = last;
@@ -5931,8 +5931,8 @@ Core.prototype._updateSectionIndices = function (from) {
 
 	this._sectionStarts.length = sectionCount + 1;
 	this._sectionStarts[0] = 0;
-	for (var i = from; i < sectionCount; ++i) {
-		var section = this._settings[i].getSection();
+	for (let i = from; i < sectionCount; ++i) {
+		let section = this._settings[i].getSection();
 		section.setIndex(i);
 		section.setRowOffset(this._sectionStarts[i]);
 		this._sectionStarts[i + 1] = this._sectionStarts[i] + section.getRowCount();
@@ -5943,7 +5943,7 @@ Core.prototype._updateSectionIndices = function (from) {
 
 /** @private */
 Core.prototype._updateLayout = function () {
-	var element =  this.getElement();
+	let element =  this.getElement();
 	if(this._disposed || !element.offsetParent) { return; }
 
 	this._syncLayoutToColumns(); // Update only if need
@@ -5951,9 +5951,9 @@ Core.prototype._updateLayout = function () {
 	this._updateScrollbarHeight(true, true);
 	this._updateScrollbarWidth(true, true); // WARNING this may be redundant with _syncLayoutToColumns
 
-	var sectionCount = this.getSectionCount();
-	for (var s = 0; s < sectionCount; ++s) {
-		var section = this._settings[s].getSection();
+	let sectionCount = this.getSectionCount();
+	for (let s = 0; s < sectionCount; ++s) {
+		let section = this._settings[s].getSection();
 		section.updateLayout(); // Notify section about forced recalculation of the layout
 	}
 	this._updateColumnSeparators();