@refinitiv-ui/efx-grid 6.0.93 → 6.0.94

package/lib/tr-grid-row-grouping/es6/RowGrouping.js

@@ -126,8 +126,8 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @extends {GridPlugin}
 * @param {RowGroupingPlugin~Options=} options Extension's configuration object
 */
-var RowGroupingPlugin = function (options) {
-	var t = this;
+let RowGroupingPlugin = function (options) {
+	let t = this;
 	t._onColumnIndexChanged = t._onColumnIndexChanged.bind(t);
 	t._getRowsForContentAsHeader = t._getRowsForContentAsHeader.bind(t);
 	t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
@@ -298,7 +298,7 @@ RowGroupingPlugin.prototype._criteriaGetter = null;
 * @return {Array.<string>}
 */
 RowGroupingPlugin._defaultCriteriaGetter = function (field, dvRowData) {
-	var val = dvRowData[field];
+	let val = dvRowData[field];
 	return RowGroupingPlugin._toArrayOfString(val);
 };
 /** @private
@@ -308,8 +308,8 @@ RowGroupingPlugin._defaultCriteriaGetter = function (field, dvRowData) {
 * @return {Array.<string>}
 */
 RowGroupingPlugin._rowDefCriteriaGetter = function (field, dvRowData) {
-	var rowData = /** @type{Object} */(dvRowData.ROW_DEF.getRowData());
-	var val = rowData[field];
+	let rowData = /** @type{Object} */(dvRowData.ROW_DEF.getRowData());
+	let val = rowData[field];
 	return RowGroupingPlugin._toArrayOfString(val);
 };
 /** @private
@@ -332,8 +332,8 @@ RowGroupingPlugin._toArrayOfString = function (data) {
 */
 RowGroupingPlugin.prototype._findCheckboxColumnIndexFromConfig = function (columns) {
 	if (!Array.isArray(columns)) return -1;
-	var index = -1, c = columns.length;
-	for (var i = 0; i < c; i++) {
+	let index = -1, c = columns.length;
+	for (let i = 0; i < c; i++) {
 		if (columns[i].checkboxColumn) {
 			index = i;
 			break;
@@ -408,7 +408,7 @@ RowGroupingPlugin.prototype.initialize = function (host, options) {
 
 	this.config(options);
 
-	var enabled = this._colorTag != null ? this._colorTag : ElfUtil.isHaloTheme();
+	let enabled = this._colorTag != null ? this._colorTag : ElfUtil.isHaloTheme();
 	RowPainter.disableColorTag(host, enabled === false);
 
 	if (this._predefinedColors != null) {
@@ -424,7 +424,7 @@ RowGroupingPlugin.prototype.initialize = function (host, options) {
 * @param {Object=} host core grid object
 */
 RowGroupingPlugin.prototype.unload = function (host) {
-	var at = this._hosts.indexOf(host);
+	let at = this._hosts.indexOf(host);
 	if (at < 0) {
 		return;
 	}
@@ -457,7 +457,7 @@ RowGroupingPlugin.prototype.unload = function (host) {
 RowGroupingPlugin.prototype.config = function (options) {
 	if (!options) { return; }
 
-	var option = options.rowGrouping;
+	let option = options.rowGrouping;
 	if (option) {
 		if (option.autoGroupRemoval != null) {
 			this._autoGroupRemoval = !!option.autoGroupRemoval;
@@ -499,11 +499,11 @@ RowGroupingPlugin.prototype.config = function (options) {
 			option.groupFooterBinding = option.footerBinding;
 		}
 		if (option.hiddenArrow != null) {
-			var hiddenOption = option.hiddenArrow;
+			let hiddenOption = option.hiddenArrow;
 			if (Array.isArray(hiddenOption)) {
-				var len = hiddenOption.length;
+				let len = hiddenOption.length;
 				this._hiddenArrow = {};
-				for (var i = 0; i < len; i++) {
+				for (let i = 0; i < len; i++) {
 					this._hiddenArrow[hiddenOption[i]] = true;
 				}
 			} else if (typeof hiddenOption === "number") {
@@ -519,7 +519,7 @@ RowGroupingPlugin.prototype.config = function (options) {
 		if (option.clickableCell != null) {
 			this._clickableCell = !!option.clickableCell;
 		}
-		var indentSize = option.indentSize;
+		let indentSize = option.indentSize;
 		if (indentSize != null) {
 			if (typeof indentSize === "boolean") {
 				if (indentSize) {
@@ -529,7 +529,7 @@ RowGroupingPlugin.prototype.config = function (options) {
 				} // TODO: Handle default case
 			} else if (typeof indentSize === "number") {
 				this._indentSizes = new Array(5);
-				for (var j = 0; j < 5; j++) {
+				for (let j = 0; j < 5; j++) {
 					this._indentSizes[j] = indentSize * j;
 				}
 			} else if (Array.isArray(indentSize)) {
@@ -578,7 +578,7 @@ RowGroupingPlugin.prototype.config = function (options) {
 	});
 
 	if (this._fixedDisplayColumn < 0) {
-		var checkboxColumnIndex = this._findCheckboxColumnIndexFromConfig(options.columns);
+		let checkboxColumnIndex = this._findCheckboxColumnIndexFromConfig(options.columns);
 		if (checkboxColumnIndex >= 0) { // has checkbox column
 			/** 27/04/21
 			 * NOTE:: checkbox column could be
@@ -604,9 +604,9 @@ RowGroupingPlugin.prototype.config = function (options) {
 * @return {!Object}
 */
 RowGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
-	var obj = gridOptions || {};
+	let obj = gridOptions || {};
 
-	var extOptions = obj.rowGrouping;
+	let extOptions = obj.rowGrouping;
 	if(!extOptions) {
 		extOptions = obj.rowGrouping = {};
 	}
@@ -619,7 +619,7 @@ RowGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 	if(this._predefinedGroups) {
 		extOptions.predefinedGroups = this._predefinedGroups;
 	}
-	var criterion = this._criteria.filter(isNonFunction);
+	let criterion = this._criteria.filter(isNonFunction);
 	if(criterion.length) {
 		extOptions.groupBy = criterion;
 	}
@@ -637,8 +637,8 @@ RowGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 		if(this._hiddenArrow === true) {
 			extOptions.hiddenArrow = true;
 		} else {
-			var hiddenArrows = extOptions.hiddenArrow = [];
-			for(var key in this._hiddenArrow) {
+			let hiddenArrows = extOptions.hiddenArrow = [];
+			for(let key in this._hiddenArrow) {
 				hiddenArrows.push(+key);
 			}
 		}
@@ -668,7 +668,7 @@ RowGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions.predefinedColors = this._predefinedColors;
 	}
 
-	var defaultCollapse = this.getDefaultCollapse();
+	let defaultCollapse = this.getDefaultCollapse();
 	if(defaultCollapse != null) {
 		extOptions.defaultCollapse = defaultCollapse;
 	}
@@ -687,12 +687,12 @@ RowGroupingPlugin.prototype.getColumnMenu = function (colIndex, config) {
 		config = {};
 	}
 
-	var menus = config.menus;
+	let menus = config.menus;
 	if (!menus) {
 		menus = config.menus = [];
 	}
 
-	var menu = menus[0];
+	let menu = menus[0];
 	if (!menu) {
 		menu = menus[0] = {
 			menuItems: []
@@ -700,9 +700,9 @@ RowGroupingPlugin.prototype.getColumnMenu = function (colIndex, config) {
 	}
 
 	// Menu items for this extension
-	var field = this._getField(colIndex);
-	var isGrouping = this.hasGroupingCriteria();
-	var extMenuItems = [{
+	let field = this._getField(colIndex);
+	let isGrouping = this.hasGroupingCriteria();
+	let extMenuItems = [{
 		indexScore: 200,
 		label: "Group",
 		group: "FREQUENTLY_USED",
@@ -751,10 +751,10 @@ RowGroupingPlugin.prototype.getColumnMenu = function (colIndex, config) {
 * @param {Object} predefinedColors Predefined color object map
 */
 RowGroupingPlugin.prototype._injectStyles = function(predefinedColors) {
-	var prefix = ".tr-grid." + RowGroupingPlugin._controlClass + " .tr-lg .cell";
-	var css = [];
-	var value;
-	for (var className in predefinedColors) {
+	let prefix = ".tr-grid." + RowGroupingPlugin._controlClass + " .tr-lg .cell";
+	let css = [];
+	let value;
+	for (let className in predefinedColors) {
 		css.push(prefix + "." + className + "::before");
 		value = predefinedColors[className]["backgroundColor"];
 		if (value) {
@@ -762,7 +762,7 @@ RowGroupingPlugin.prototype._injectStyles = function(predefinedColors) {
 		}
 	}
 
-	var host = this._hosts[0];
+	let host = this._hosts[0];
 
 	if (this._styleTag) {
 		if (this._styleTag.parentNode) {
@@ -777,7 +777,7 @@ RowGroupingPlugin.prototype._injectStyles = function(predefinedColors) {
 * @param {Object} e
 */
 RowGroupingPlugin.prototype._onItemGroupColumnClicked = function (e) {
-	var field = this._getField(e.currentTarget.value.colIndex);
+	let field = this._getField(e.currentTarget.value.colIndex);
 	this._addGroup(field);
 	this._hideColumnMenu();
 };
@@ -786,7 +786,7 @@ RowGroupingPlugin.prototype._onItemGroupColumnClicked = function (e) {
 * @param {Object} e
 */
 RowGroupingPlugin.prototype._onItemUnGroupColumnClicked = function (e) {
-	var field = this._getField(e.currentTarget.value.colIndex);
+	let field = this._getField(e.currentTarget.value.colIndex);
 	this._ungroup(field);
 	this._hideColumnMenu();
 };
@@ -810,8 +810,8 @@ RowGroupingPlugin.prototype._onItemCollapseAllClicked = function (e) {
 /** @private
 */
 RowGroupingPlugin.prototype._hideColumnMenu = function () {
-	var host = this._hosts[0];
-	var columnMenuExt = host.getPlugin('ColumnMenuPlugin');
+	let host = this._hosts[0];
+	let columnMenuExt = host.getPlugin('ColumnMenuPlugin');
 	if (columnMenuExt) columnMenuExt.hide();
 };
 
@@ -819,8 +819,8 @@ RowGroupingPlugin.prototype._hideColumnMenu = function () {
 * @param {string} field
 */
 RowGroupingPlugin.prototype._addGroup = function (field) {
-	var criteria = this.getGroupingCriteria();
-	var index = criteria.indexOf(field);
+	let criteria = this.getGroupingCriteria();
+	let index = criteria.indexOf(field);
 	if (index < 0) {
 		criteria.push(field);
 	}
@@ -832,8 +832,8 @@ RowGroupingPlugin.prototype._addGroup = function (field) {
 * @param {string} field
 */
 RowGroupingPlugin.prototype._ungroup = function (field) {
-	var criteria = this.getGroupingCriteria();
-	var index = criteria.indexOf(field);
+	let criteria = this.getGroupingCriteria();
+	let index = criteria.indexOf(field);
 	if (index >= 0) {
 		criteria.splice(index, 1);
 	}
@@ -900,7 +900,7 @@ RowGroupingPlugin.prototype._applyGrouping = function () {
 		return;
 	}
 
-	var dv = this.getDataView();
+	let dv = this.getDataView();
 	if (!dv) {
 		return;
 	}
@@ -936,7 +936,7 @@ RowGroupingPlugin.prototype._applyGrouping = function () {
 * @return {Object} DataView instance
 */
 RowGroupingPlugin.prototype.getDataView = function () {
-	var host = this._hosts[0];
+	let host = this._hosts[0];
 	if (host) {
 		return host.getDataSource();
 	}
@@ -949,10 +949,10 @@ RowGroupingPlugin.prototype.getDataView = function () {
 * The two first parameters passed to the function are group value that separates group. <br>
 * The two last parameters passed to the function are data views of corresponding group.
 * @example
-* var compare = function(grpA, grpB, dataViewA, dataViewB) {
+* let compare = function(grpA, grpB, dataViewA, dataViewB) {
 *   return (grpA <= grpB) ? -1 : 1;
 * }
-* var dstp = new RowGroupingExtension();
+* let dstp = new RowGroupingExtension();
 * dstp.setGroupSortingLogic(compare);
 */
 RowGroupingPlugin.prototype.setGroupSortingLogic = function (sortFunction) {
@@ -986,7 +986,7 @@ RowGroupingPlugin.prototype.setPredefinedGroups = function (predefinedGroups) {
 	}
 	this._predefinedGroups = predefinedGroups;
 
-	var dv = this.getDataView();
+	let dv = this.getDataView();
 	if (dv) {
 		dv.setPredefinedGroups(this._predefinedGroups);
 	}
@@ -1006,7 +1006,7 @@ RowGroupingPlugin.prototype.setPredefinedColors = function(predefinedColors) {
 * @param {boolean} collapse Predefined color object map
 */
 RowGroupingPlugin.prototype.setDefaultCollapse = function(collapse) {
-	var dv = this.getDataView();
+	let dv = this.getDataView();
 	if (dv) {
 		dv.setDefaultCollapse(collapse);
 	}
@@ -1017,14 +1017,14 @@ RowGroupingPlugin.prototype.setDefaultCollapse = function(collapse) {
 * @param {string} groupColor color name from predefinedColors
 */
 RowGroupingPlugin.prototype.setGroupColor = function(groupRef, groupColor) {
-	var dv = this.getDataView();
+	let dv = this.getDataView();
 	if(!dv) {
 		return;
 	}
-	var grp = dv.getGroup(groupRef);
+	let grp = dv.getGroup(groupRef);
 	if(grp) {
 		grp.setGroupColor(groupColor);
-		var host = this._hosts[0];
+		let host = this._hosts[0];
 		if(host) {
 			host.requestRowRefresh();
 		}
@@ -1035,7 +1035,7 @@ RowGroupingPlugin.prototype.setGroupColor = function(groupRef, groupColor) {
 * @return {boolean}
 */
 RowGroupingPlugin.prototype.getDefaultCollapse = function() {
-	var dv = this.getDataView();
+	let dv = this.getDataView();
 	if (dv) {
 		return dv.getDefaultCollapse();
 	}
@@ -1048,7 +1048,7 @@ RowGroupingPlugin.prototype.getDefaultCollapse = function() {
 RowGroupingPlugin.prototype.sortGroups = function () {
 	this._sortingTimer = 0;
 	if (this._groupSortFunction) {
-		var dv = this.getDataView();
+		let dv = this.getDataView();
 		if (dv) {
 			dv.sortGroups(this._groupSortFunction);
 		}
@@ -1075,8 +1075,8 @@ RowGroupingPlugin.prototype._onPostSectionDataBinding = function (e) {
 * @return {number}
 */
 RowGroupingPlugin._standardGroupSortFunction = function (valA, valB) {
-	var strA = "" + valA;
-	var strB = "" + valB;
+	let strA = "" + valA;
+	let strB = "" + valB;
 	if (strA < strB) {
 		return -1;
 	}
@@ -1095,7 +1095,7 @@ RowGroupingPlugin.prototype._isArrowHidden = function(dv) {
 		if (this._hiddenArrow === true) {
 			return true;
 		} else { // Object map
-			var lvl = dv.getGroupLevel();
+			let lvl = dv.getGroupLevel();
 			if (this._hiddenArrow[lvl]) {
 				return true;
 			}
@@ -1110,7 +1110,7 @@ RowGroupingPlugin.prototype._isArrowHidden = function(dv) {
 */
 RowGroupingPlugin.prototype._hasGroupHeader = function (settings) {
 	if (settings && settings.getType() === "content") {
-		var dv = settings.getDataSource();
+		let dv = settings.getDataSource();
 		if (dv) {
 			return dv.hasGroup();
 		}
@@ -1122,20 +1122,20 @@ RowGroupingPlugin.prototype._hasGroupHeader = function (settings) {
 * @param {number} colIndex
 */
 RowGroupingPlugin.prototype._clearSectionStyles = function (colIndex) {
-	var host = this._hosts[0];
+	let host = this._hosts[0];
 	if (!host || !(colIndex >= 0)) {
 		return;
 	}
 	// TODO: Optimize by checking isHeaderColumn flag
 
-	var sections = host.getAllSections("content");
-	var rowPainter = this._rowPainter;
-	for (var i = sections.length; --i >= 0;) {
-		var section = sections[i];
+	let sections = host.getAllSections("content");
+	let rowPainter = this._rowPainter;
+	for (let i = sections.length; --i >= 0;) {
+		let section = sections[i];
 
-		var fi = section.getFirstIndexInView();
-		var li = section.getLastIndexInView();
-		for (var r = fi; r <= li; r++) {
+		let fi = section.getFirstIndexInView();
+		let li = section.getLastIndexInView();
+		for (let r = fi; r <= li; r++) {
 			rowPainter.removeAllStyles(section, colIndex, r);
 		}
 	}
@@ -1146,8 +1146,8 @@ RowGroupingPlugin.prototype._clearSectionStyles = function (colIndex) {
 * @return {number} headerColumn index, return -1 = not found
 */
 RowGroupingPlugin.prototype._getHeaderColumnIndex = function () {
-	var colCount = this.getColumnCount();
-	for (var columnIndex = 0; columnIndex < colCount; columnIndex++) {
+	let colCount = this.getColumnCount();
+	for (let columnIndex = 0; columnIndex < colCount; columnIndex++) {
 		if (this._getColumnOption(columnIndex, "isHeaderColumn")) {
 			return columnIndex;
 		}
@@ -1159,7 +1159,7 @@ RowGroupingPlugin.prototype._getHeaderColumnIndex = function () {
 * @param {Object} e
 */
 RowGroupingPlugin.prototype._onGroupCriteriaChanged = function (e) {
-	var dv = e.sender;
+	let dv = e.sender;
 
 	if (dv.hasGroup()) {
 		if (this._fixedDisplayColumn < 0  // no fixed index
@@ -1184,7 +1184,7 @@ RowGroupingPlugin.prototype._onGroupAdded = function (e) {
 	if (this._footerRows) {
 		e.newGroup.addFooter(this._footerRows);
 	}
-	var newGroup = e.newGroup;
+	let newGroup = e.newGroup;
 	// WARNING: contentAsHeader mode is overwrite arrow hidden to boolean
 	if(!this._contentAsHeader && newGroup.disableCollapsing) {
 		if(this._isArrowHidden(newGroup)) {
@@ -1192,10 +1192,10 @@ RowGroupingPlugin.prototype._onGroupAdded = function (e) {
 		}
 	}
 
-	var groupColors = this._groupColors;
-	var groupColor;
+	let groupColors = this._groupColors;
+	let groupColor;
 	if(groupColors) { // Backward compatibility
-		var groupId = newGroup.getGroupId();
+		let groupId = newGroup.getGroupId();
 		groupColor = groupColors[groupId];
 		if(groupColor) {
 			newGroup.setGroupColor(groupColor);
@@ -1228,8 +1228,8 @@ RowGroupingPlugin.prototype._updateDisplayColumn = function () {
 	if (this._shouldUpdateDisplayColumn) {
 		this._shouldUpdateDisplayColumn = false;
 
-		var host = this._hosts[0];
-		var c, colCount = host.getColumnCount();
+		let host = this._hosts[0];
+		let c, colCount = host.getColumnCount();
 		this._headerColumn = this._getHeaderColumnIndex();
 
 		if (this._displayColumn < 0) {
@@ -1245,7 +1245,7 @@ RowGroupingPlugin.prototype._updateDisplayColumn = function () {
 			}
 		}
 
-		var tgtHeaderColumn = -1;
+		let tgtHeaderColumn = -1;
 		if (this._displayColumn >= 0) {
 			for (c = this._displayColumn; c < colCount; ++c) {
 				if (host.isColumnVisible(c)) {
@@ -1258,9 +1258,10 @@ RowGroupingPlugin.prototype._updateDisplayColumn = function () {
 		}
 
 		if (this._headerColumn !== tgtHeaderColumn) {
+			let colData;
 			this._clearSectionStyles(this._headerColumn);
 			if (this._headerColumn >= 0) {
-				var colData = this._getColumnData(this._headerColumn);
+				colData = this._getColumnData(this._headerColumn);
 				if (colData) {
 					colData.isHeaderColumn = false;
 				}
@@ -1289,47 +1290,47 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 		return;
 	}
 
-	var headerColumn = this._updateDisplayColumn();
+	let headerColumn = this._updateDisplayColumn();
 	if (headerColumn < 0) {
 		return;
 	} else if (!this._getColumnOption(headerColumn, "isHeaderColumn")) {
 		return; // Workaround: Newly inserted column doesn't have the flag
 	}
 
-	var dataSource = settings.getDataSource();
-	var section = settings.getSection();
-	var fi = (firstRowIndex != null) ? firstRowIndex : section.getFirstIndexInView();
-	var li = (lastRowIndex != null) ? lastRowIndex : section.getLastIndexInView();
-	var rowsForContentHeader = this._getRowsForContentAsHeader();
+	let dataSource = settings.getDataSource();
+	let section = settings.getSection();
+	let fi = (firstRowIndex != null) ? firstRowIndex : section.getFirstIndexInView();
+	let li = (lastRowIndex != null) ? lastRowIndex : section.getLastIndexInView();
+	let rowsForContentHeader = this._getRowsForContentAsHeader();
 
-	var maxColWidth = -1; // -1 means no limit
-	var colCell = section.getCell(headerColumn, 0, false);
+	let maxColWidth = -1; // -1 means no limit
+	let colCell = section.getCell(headerColumn, 0, false);
 	if (!this._headerSpanning && colCell) {
 		maxColWidth = colCell.getWidth() - 27; // Ensure padding will subtract icon width (25px for halo, 27px for solar)
 	}
 
-	var colCount = section.getColumnCount();
-	var nonGroupListener = this.hasListener("nonGroupBinding");
-	var curGroupLevel = dataSource.getGroupLevel(fi);
-	var arg = {
+	let colCount = section.getColumnCount();
+	let nonGroupListener = this.hasListener("nonGroupBinding");
+	let curGroupLevel = dataSource.getGroupLevel(fi);
+	let arg = {
 		section: section,
 		colCount: colCount
 	};
-	var currentGroup;
-	var needCal = this._autoGroupHiding || this._contentAsHeader;
+	let currentGroup;
+	let needCal = this._autoGroupHiding || this._contentAsHeader;
 
-	for (var c = 0; c < colCount; c++) {
+	for (let c = 0; c < colCount; c++) {
 		if(this._getColumnOption(c, "isCheckboxColumn")) {
 			arg.checkboxColumnIndex = c;
 			break;
 		}
 	}
 
-	var rowPainter = this._rowPainter;
-	for (var r = fi; r <= li; r++) {
-		var indentOffset = 0;
-		var rowId = dataSource.getRowId(r); // Slow
-		var cell = section.getCell(headerColumn, r, false); // Work only one row
+	let rowPainter = this._rowPainter;
+	for (let r = fi; r <= li; r++) {
+		let indentOffset = 0;
+		let rowId = dataSource.getRowId(r); // Slow
+		let cell = section.getCell(headerColumn, r, false); // Work only one row
 		if (!cell) { // There may be no header to be updated
 			continue;
 		}
@@ -1341,14 +1342,15 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 		arg.rowData = this._rowGetter(dataSource.getRowData(rowId));
 		arg.noIndent = false;
 
-		var contentHeaderGroup = rowsForContentHeader[rowId];
-		var groupView = dataSource.getGroupByRowId(rowId);
+		let contentHeaderGroup = rowsForContentHeader[rowId];
+		let groupView = dataSource.getGroupByRowId(rowId);
+		let footerRow = false;
 		if (groupView) { // Header Render
 			currentGroup = groupView;
 			curGroupLevel = groupView.getGroupLevel();
 
 			arg.footerIndex = groupView.getFooterRowIndex(rowId);
-			var footerRow = arg.footerRow = (arg.footerIndex >= 0);
+			footerRow = arg.footerRow = (arg.footerIndex >= 0);
 			arg.groupId = groupView.getGroupId();
 			arg.dataSource = groupView;
 			arg.collapsed = groupView.isCollapsed();
@@ -1387,8 +1389,8 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 
 		arg.groupLevel = curGroupLevel;
 
-		var rowLevel = 0;
-		var nonGroupRow = this._autoGroupHiding && currentGroup.getGroupValue() == null && curGroupLevel === 1 && !this._contentAsHeader;
+		let rowLevel = 0;
+		let nonGroupRow = this._autoGroupHiding && currentGroup.getGroupValue() == null && curGroupLevel === 1 && !this._contentAsHeader;
 		arg.nonGroupRow = nonGroupRow;
 
 		if (arg.noIndent || nonGroupRow) { // if user specific indent level, and if group hidden
@@ -1399,11 +1401,11 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 			rowLevel = curGroupLevel + indentOffset; // content have indent more than header 1
 		}
 
-		var indentSize = 0;
+		let indentSize = 0;
 		if(this._indentSizes) {
 			indentSize = this._indentSizes[0];
 			if(rowLevel > 0) {
-				var indentLimit = this._indentSizes.length;
+				let indentLimit = this._indentSizes.length;
 				indentSize = rowLevel < indentLimit ? this._indentSizes[rowLevel] : this._indentSizes[indentLimit - 1];
 			}
 		} else if(rowLevel > 0) {
@@ -1416,19 +1418,19 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 			indentSize = maxColWidth;
 		}
 
-		var groupColor;
+		let groupColor;
 		if(currentGroup.getGroupColor) {
 			groupColor = currentGroup.getGroupColor();
 		} else { // Backward compatibility
 			if (this._groupColors) {
 				// TODO: Need better method to find the first level parent's group id
-				var rootGroup = currentGroup ? currentGroup : dataSource.getGroup(rowId); // Slow
+				let rootGroup = currentGroup ? currentGroup : dataSource.getGroup(rowId); // Slow
 				if (curGroupLevel > 1) {
-					for (var i = curGroupLevel; i > 1; i--) {
+					for (let i = curGroupLevel; i > 1; i--) {
 						rootGroup = rootGroup.getDataSource();
 					}
 				}
-				var groupId = rootGroup.getGroupId();
+				let groupId = rootGroup.getGroupId();
 				groupColor = this._groupColors[groupId];
 			}
 		}
@@ -1457,13 +1459,13 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 RowGroupingPlugin.prototype._getRowsForContentAsHeader = function () {
 	if (!this._contentAsHeader) return {};
 
-	var result = {};
-	var dv = this.getDataView();
-	var allGroups = dv.getAllGroups();
-	for (var grpId in allGroups) {
-		var grp = allGroups[grpId];
+	let result = {};
+	let dv = this.getDataView();
+	let allGroups = dv.getAllGroups();
+	for (let grpId in allGroups) {
+		let grp = allGroups[grpId];
 		if (!grp.hasGroup()) { // Deepest level group
-			var firstRowId = grp.getAllRowIds(true)[0]; // Prepare first row in group for contentAsHeader mode to use.
+			let firstRowId = grp.getAllRowIds(true)[0]; // Prepare first row in group for contentAsHeader mode to use.
 			if (firstRowId) {
 				result[firstRowId] = grp;
 			}
@@ -1493,13 +1495,13 @@ RowGroupingPlugin.prototype._onColumnIndexChanged = function (e) {
 RowGroupingPlugin.prototype.updateHeaders = function () {
 	this._timerId = 0;
 	this._shouldUpdateDisplayColumn = true;
-	var host = this._hosts[0];
+	let host = this._hosts[0];
 	if (!host || this._disabled) {
 		return;
 	}
 
-	var settingList = host.getAllSectionSettings("content");
-	for (var i = settingList.length; --i >= 0;) {
+	let settingList = host.getAllSectionSettings("content");
+	for (let i = settingList.length; --i >= 0;) {
 		this._updateHeader(settingList[i]);
 	}
 };
@@ -1509,10 +1511,10 @@ RowGroupingPlugin.prototype.updateHeaders = function () {
 * @param {boolean=} opt_collapsed=true
 */
 RowGroupingPlugin.prototype._collapseDataRowId = function (rowId, opt_collapsed) {
-	var dv = this.getDataView();
+	let dv = this.getDataView();
 	if (dv) {
-		var rowsForContentHeader = this._getRowsForContentAsHeader();
-		var grp = rowsForContentHeader[rowId];
+		let rowsForContentHeader = this._getRowsForContentAsHeader();
+		let grp = rowsForContentHeader[rowId];
 		if (grp) {
 			grp.collapse(opt_collapsed);
 		}
@@ -1525,21 +1527,21 @@ RowGroupingPlugin.prototype._collapseDataRowId = function (rowId, opt_collapsed)
 RowGroupingPlugin.prototype._onCellClicked = function (e) {
 	if (this._clickDisabled) { return; }
 
-	var changed = false;
-	var host = this._hosts[0];
-	var info = host.getRelativePosition(e);
-	var cellElem = info.cell ? info.cell.getElement() : null;
+	let changed = false;
+	let host = this._hosts[0];
+	let info = host.getRelativePosition(e);
+	let cellElem = info.cell ? info.cell.getElement() : null;
 	if(!cellElem) {
 		return;
 	}
 
-	var collapsed = cellElem.classList.contains("closed");
-	var rowIndex = info.rowIndex;
-	var settings = info.sectionSettings;
+	let collapsed = cellElem.classList.contains("closed");
+	let rowIndex = info.rowIndex;
+	let settings = info.sectionSettings;
 
-	var dv = settings.getDataSource();
-	var rowId = dv.getRowId(rowIndex);
-	var grpView = dv.getGroupByRowId(rowId);
+	let dv = settings.getDataSource();
+	let rowId = dv.getRowId(rowIndex);
+	let grpView = dv.getGroupByRowId(rowId);
 	if (grpView) {
 		changed = true;
 		if(grpView.isCollapsible && !grpView.isCollapsible()) { // Prevent applied styles
@@ -1565,10 +1567,10 @@ RowGroupingPlugin.prototype._onCellClicked = function (e) {
 
 /** @private */
 RowGroupingPlugin.prototype._updateCursor = function () {
-	var host = this._hosts[0]; // TODO: Make this work for multi-table
+	let host = this._hosts[0]; // TODO: Make this work for multi-table
 	if (host) {
-		var disableExpander = false;
-		var disableFolder = false;
+		let disableExpander = false;
+		let disableFolder = false;
 		if (!this._clickableCell) {
 			disableFolder = true;
 		}
@@ -1612,7 +1614,7 @@ RowGroupingPlugin.prototype.expandAll = function (opt_expanded) {
 * @param {boolean=} opt_collapsed
 */
 RowGroupingPlugin.prototype.collapseAll = function (opt_collapsed) {
-	var dv = this.getDataView();
+	let dv = this.getDataView();
 	if (dv) {
 		dv.collapseAllGroups(opt_collapsed);
 	}
@@ -1630,9 +1632,9 @@ RowGroupingPlugin.prototype.expand = function (groupRowId, opt_expanded) {
 * @param {boolean=} opt_collapsed
 */
 RowGroupingPlugin.prototype.collapse = function (groupRowId, opt_collapsed) {
-	var dv = this.getDataView();
+	let dv = this.getDataView();
 	if (dv) {
-		var grp = dv.getGroup(groupRowId);
+		let grp = dv.getGroup(groupRowId);
 		if (grp) {
 			grp.collapse(opt_collapsed);
 		}
@@ -1652,7 +1654,7 @@ RowGroupingPlugin.prototype.disableClicking = function (opt_disabled) {
 * @returns {Array.<RowGroupingPlugin~GroupingState>}
 */
 RowGroupingPlugin.prototype.getGroupingStates = function () {
-	var dv = this.getDataView();
+	let dv = this.getDataView();
 
 	return dv.getAllGroups().map(function (group) {
 		return {
@@ -1671,9 +1673,9 @@ RowGroupingPlugin.prototype.setGroupingStates = function (states) {
 		states = JSON.parse(states);
 	}
 
-	for (var i = 0; i < states.length; i++) {
-		var state = states[i];
-		var groupRowId = state.groupId == null ? i : state.groupId;
+	for (let i = 0; i < states.length; i++) {
+		let state = states[i];
+		let groupRowId = state.groupId == null ? i : state.groupId;
 		this.collapse(groupRowId, state.collapsed);
 	}
 };