jsl-ui 9.28.2 → 9.28.4

package/lib/grid/slick.grid.js

@@ -15,7 +15,7 @@ import "./slick-default-theme.css";
 import { Resizable } from "../interaction/resizable";
 import { EventHandler } from "../interaction/eventhandler";
 import { helper } from "../core";
-var $ = Slick.$;
+let $ = Slick.$;
 $.deepExtend(Slick, { Grid: SlickGrid });
 // shared across all grids on the page
 var scrollbarDimensions;
@@ -262,7 +262,7 @@ export function SlickGrid(container, data, columns, options) {
             .addClass(uid)
             .addClass("slickgrid")
             .addClass("ui-widget");
-        var isTouch = helper.isTouchScreen();
+        const isTouch = helper.isTouchScreen();
         if (isTouch) {
             $container.addClass("js-touch");
         }
@@ -496,49 +496,49 @@ export function SlickGrid(container, data, columns, options) {
                 .on("dblclick", handleDblClick)
                 .on("contextmenu", handleContextMenu);
             // ---- BEGIN
-            var dragStartX_1;
-            var dragStartY_1;
-            var isDown_1;
-            var dragStartedDD_1 = null;
-            var delta_1 = 3;
+            let dragStartX;
+            let dragStartY;
+            let isDown;
+            let dragStartedDD = null;
+            const delta = 3;
             // $canvas.on("touchstart", function (e, dd) {
             //   handleDragInit(e, dd);
             //   // TODO
             // });
-            var _down = function (e, dd) {
+            let _down = function (e, dd) {
                 handleDragInit(e, dd); // TODO -> do something with result?
-                dragStartX_1 = e.pageX != null ? e.pageX : e.touches[0].pageX;
-                dragStartY_1 = e.pageY != null ? e.pageY : e.touches[0].pageY;
-                isDown_1 = true;
-                document.addEventListener("mouseup", handleUp_1);
-                document.addEventListener("touchend", handleUp_1);
+                dragStartX = e.pageX != null ? e.pageX : e.touches[0].pageX;
+                dragStartY = e.pageY != null ? e.pageY : e.touches[0].pageY;
+                isDown = true;
+                document.addEventListener("mouseup", handleUp);
+                document.addEventListener("touchend", handleUp);
             };
             $canvas.on("mousedown", _down);
             $canvas.on("touchstart", _down);
-            var _move = function (e, _dd) {
-                if (isDown_1) {
-                    var pageX_1 = e.pageX != null ? e.pageX : e.touches[0].pageX;
-                    var pageY = e.pageY != null ? e.pageY : e.touches[0].pageY;
-                    if (Math.abs(dragStartX_1 - pageX_1) < delta_1
-                        && Math.abs(dragStartY_1 - pageY) < delta_1) {
+            let _move = function (e, _dd) {
+                if (isDown) {
+                    const pageX = e.pageX != null ? e.pageX : e.touches[0].pageX;
+                    const pageY = e.pageY != null ? e.pageY : e.touches[0].pageY;
+                    if (Math.abs(dragStartX - pageX) < delta
+                        && Math.abs(dragStartY - pageY) < delta) {
                         return;
                     }
-                    if (dragStartedDD_1 == null) {
-                        dragStartedDD_1 = {};
-                        dragStartedDD_1.dragging = null;
-                        dragStartedDD_1.propagates = 1;
-                        dragStartedDD_1.target = e.target;
-                        dragStartedDD_1.pageX = pageX_1;
-                        dragStartedDD_1.pageY = pageY;
-                        dragStartedDD_1.startX = dragStartedDD_1.pageX;
-                        dragStartedDD_1.startY = dragStartedDD_1.pageY;
-                        var res = handleDragStart(e, dragStartedDD_1); // TODO -> do something with result?
+                    if (dragStartedDD == null) {
+                        dragStartedDD = {};
+                        dragStartedDD.dragging = null;
+                        dragStartedDD.propagates = 1;
+                        dragStartedDD.target = e.target;
+                        dragStartedDD.pageX = pageX;
+                        dragStartedDD.pageY = pageY;
+                        dragStartedDD.startX = dragStartedDD.pageX;
+                        dragStartedDD.startY = dragStartedDD.pageY;
+                        const res = handleDragStart(e, dragStartedDD); // TODO -> do something with result?
                     }
-                    dragStartedDD_1.pageX = pageX_1;
-                    dragStartedDD_1.pageY = pageY;
-                    dragStartedDD_1.startX = dragStartedDD_1.pageX;
-                    dragStartedDD_1.startY = dragStartedDD_1.pageY;
-                    handleDrag(e, dragStartedDD_1);
+                    dragStartedDD.pageX = pageX;
+                    dragStartedDD.pageY = pageY;
+                    dragStartedDD.startX = dragStartedDD.pageX;
+                    dragStartedDD.startY = dragStartedDD.pageY;
+                    handleDrag(e, dragStartedDD);
                     // e.stopImmediatePropagation();
                     // e.stopPropagation();
                     if (e.isImmediatePropagationStopped && e.isImmediatePropagationStopped()) {
@@ -548,14 +548,14 @@ export function SlickGrid(container, data, columns, options) {
             };
             $canvas.on("mousemove", _move);
             $canvas.on("touchmove", _move);
-            var handleUp_1 = function (e) {
-                if (isDown_1 && dragStartedDD_1 != null) {
-                    handleDragEnd(e, dragStartedDD_1);
+            const handleUp = (e) => {
+                if (isDown && dragStartedDD != null) {
+                    handleDragEnd(e, dragStartedDD);
                 }
-                isDown_1 = false;
-                dragStartedDD_1 = null;
-                document.removeEventListener("mouseup", handleUp_1);
-                document.removeEventListener("touchend", handleUp_1);
+                isDown = false;
+                dragStartedDD = null;
+                document.removeEventListener("mouseup", handleUp);
+                document.removeEventListener("touchend", handleUp);
             };
             // .on("draginit", handleDragInit) //TODO TODOFIX
             // .on("dragstart", {distance: 3}, handleDragStart) //TODO TODOFIX
@@ -676,9 +676,9 @@ export function SlickGrid(container, data, columns, options) {
     }
     function measureScrollbar() {
         //var $outerdiv = $("<div style=\"position:absolute; top:-10000px; left:-10000px; overflow:auto; width:100px; height:100px;\"></div>").appendTo($viewport);
-        var $outerdiv = $("<div style=\"position:absolute; top:-10000px; left:-10000px; overflow:auto; width:100px; height:100px;\"></div>").appendTo($("body"));
-        var $innerdiv = $("<div style=\"width:200px; height:200px; overflow:auto;\"></div>").appendTo($outerdiv);
-        var dim = {
+        const $outerdiv = $("<div style=\"position:absolute; top:-10000px; left:-10000px; overflow:auto; width:100px; height:100px;\"></div>").appendTo($("body"));
+        const $innerdiv = $("<div style=\"width:200px; height:200px; overflow:auto;\"></div>").appendTo($outerdiv);
+        const dim = {
             width: $outerdiv[0].offsetWidth - $outerdiv[0].clientWidth,
             height: $outerdiv[0].offsetHeight - $outerdiv[0].clientHeight
         };
@@ -1144,7 +1144,7 @@ export function SlickGrid(container, data, columns, options) {
             div.style.width = (m.width - headerColumnWidthDiff) + "px";
             div.id = "" + uid + m.id;
             div.title = m.toolTip || "";
-            var html = "<span class='slick-column-name'>" + m.name + "</span>";
+            let html = "<span class='slick-column-name'>" + m.name + "</span>";
             if (m.resizable) {
                 html += "<span class='rs-r'" + (options.resizeHandleWidth ? "style='width:" + options.resizeHandleWidth + "'" : "") + "></span>";
                 div.className += " resizable";
@@ -1224,7 +1224,7 @@ export function SlickGrid(container, data, columns, options) {
     }
     function setupColumnSort() {
         $headers.on("click", function (e) {
-            var ctrlPressed = e.metaKey || e.ctrlKey;
+            let ctrlPressed = e.metaKey || e.ctrlKey;
             if ($(e.target).hasClass("rs-r")) {
                 return;
             }
@@ -1439,17 +1439,16 @@ export function SlickGrid(container, data, columns, options) {
         return impactedColumns;
     }
     function setupColumnMoveAndResize() {
-        for (var _i = 0, _a = $container.find(".slick-header-columns"); _i < _a.length; _i++) {
-            var c = _a[_i];
+        for (const c of $container.find(".slick-header-columns")) {
             Resizable(c, {
                 resizeDelta: options.resizeDelta,
-                onResize: new EventHandler(function (evt) {
+                onResize: new EventHandler((evt) => {
                     processColumnResize(evt.target, evt.x);
                 }),
-                onStart: new EventHandler(function (evt) {
+                onStart: new EventHandler((evt) => {
                     startColumnResize(evt.target, evt.x);
                 }),
-                onStop: new EventHandler(function (evt) {
+                onStop: new EventHandler((evt) => {
                     finishColumnResize();
                 })
             });
@@ -1463,9 +1462,9 @@ export function SlickGrid(container, data, columns, options) {
             //   finishColumnResize();
             // });
         }
-        var mouseDownFnc = function (e) {
-            var arg = e;
-            var $target = $(e.target).closestClass("slick-header-column");
+        const mouseDownFnc = function (e) {
+            let arg = e;
+            let $target = $(e.target).closestClass("slick-header-column");
             if ($target.length === 0) {
                 // special case for last column
                 if (e.target.classList.contains("slick-header-columns")) {
@@ -1475,8 +1474,8 @@ export function SlickGrid(container, data, columns, options) {
                     return;
                 }
             }
-            var x = arg.pageX != null ? arg.pageX : arg.touches[0].pageX;
-            var columnInfo = $target.data("column");
+            const x = arg.pageX != null ? arg.pageX : arg.touches[0].pageX;
+            let columnInfo = $target.data("column");
             if (options.enableColumnReorder) {
                 startColumnDragging($target, x);
             }
@@ -1500,7 +1499,7 @@ export function SlickGrid(container, data, columns, options) {
         dragGhost.style.left = draggedEl.offsetLeft + "px";
         dragGhost.style.height = draggedEl.clientHeight + "px";
         dragGhost.style.width = draggedEl.clientWidth + "px";
-        var ghostContent = document.createElement("div");
+        let ghostContent = document.createElement("div");
         ghostContent.className = "slick-ghost-content";
         ghostContent.style.height = draggedEl.clientHeight + "px";
         dragGhost.appendChild(ghostContent);
@@ -1512,12 +1511,12 @@ export function SlickGrid(container, data, columns, options) {
         window.addEventListener("touchend", finishColumnDrag);
     }
     function processColumnDrag(evt) {
-        var x = evt.pageX != null ? evt.pageX : evt.touches[0].pageX;
-        var prevEl = draggedEl.previousElementSibling;
-        var nextEl = draggedEl.nextElementSibling;
-        var prevWidth = prevEl != null ? prevEl.offsetWidth : -1;
-        var nextWidth = nextEl != null ? nextEl.offsetWidth : -1;
-        var draggedDistance = x - dragColCurrentX;
+        const x = evt.pageX != null ? evt.pageX : evt.touches[0].pageX;
+        let prevEl = draggedEl.previousElementSibling;
+        let nextEl = draggedEl.nextElementSibling;
+        let prevWidth = prevEl != null ? prevEl.offsetWidth : -1;
+        let nextWidth = nextEl != null ? nextEl.offsetWidth : -1;
+        let draggedDistance = x - dragColCurrentX;
         dragGhost.style.left = (draggedEl.offsetLeft + draggedDistance) + "px";
         if (prevWidth >= 0 && draggedDistance < -prevWidth) {
             if (prevEl != null) {
@@ -1538,19 +1537,19 @@ export function SlickGrid(container, data, columns, options) {
         if (!getEditorLock().commitCurrentEdit()) {
             return;
         }
-        var $colsL = $headerL.find(".slick-header-column");
-        var $colsR = $headerR.find(".slick-header-column");
-        var reorderedIds = $colsL.map(function (e) { return e.id; });
-        reorderedIds = reorderedIds.concat($colsR.map(function (e) { return e.id; }));
-        var reorderedColumns = [];
-        for (var i = 0; i < reorderedIds.length; i++) {
+        let $colsL = $headerL.find(".slick-header-column");
+        let $colsR = $headerR.find(".slick-header-column");
+        let reorderedIds = $colsL.map((e) => e.id);
+        reorderedIds = reorderedIds.concat($colsR.map((e) => e.id));
+        let reorderedColumns = [];
+        for (let i = 0; i < reorderedIds.length; i++) {
             reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]);
         }
         setColumns(reorderedColumns);
         trigger(self.onColumnsReordered, { impactedColumns: getImpactedColumns(0 /*limit*/) }); // tODO limit
     }
     function finishColumnDrag(arg) {
-        var x = arg.pageX != null ? arg.pageX : (arg.touches.length > 0 ? arg.touches : arg.changedTouches)[0].pageX;
+        const x = arg.pageX != null ? arg.pageX : (arg.touches.length > 0 ? arg.touches : arg.changedTouches)[0].pageX;
         window.removeEventListener("mousemove", processColumnDrag);
         window.removeEventListener("mouseup", finishColumnDrag);
         window.removeEventListener("touchmove", processColumnDrag);
@@ -1567,17 +1566,17 @@ export function SlickGrid(container, data, columns, options) {
             //sort
         }
     }
-    var pageX, minPageX, maxPageX;
+    let pageX, minPageX, maxPageX;
     function startColumnResize(target, x) {
-        var $target = $(target);
+        const $target = $(target);
         // columnResizeDragging = true;
         if (!getEditorLock().commitCurrentEdit()) {
             return false;
         }
         pageX = x;
-        var colIdx = $target.index();
-        var columnElements = $headers.children();
-        var shrinkLeewayOnRight = null, stretchLeewayOnRight = null;
+        let colIdx = $target.index();
+        let columnElements = $headers.children();
+        let shrinkLeewayOnRight = null, stretchLeewayOnRight = null;
         $target.addClass("slick-header-column-active");
         // lock each column's width option to current width
         $.each(columnElements, function (i, e) {
@@ -1590,8 +1589,8 @@ export function SlickGrid(container, data, columns, options) {
             shrinkLeewayOnRight = 0;
             stretchLeewayOnRight = 0;
             // colums on right affect maxPageX/minPageX
-            for (var j = colIdx + 1; j < columns.length; j++) {
-                var c = columns[j];
+            for (let j = colIdx + 1; j < columns.length; j++) {
+                let c = columns[j];
                 if (c.resizable) {
                     if (stretchLeewayOnRight !== null) {
                         if (c.maxWidth) {
@@ -1605,10 +1604,10 @@ export function SlickGrid(container, data, columns, options) {
                 }
             }
         }
-        var shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0;
-        for (var j = 0; j <= colIdx; j++) {
+        let shrinkLeewayOnLeft = 0, stretchLeewayOnLeft = 0;
+        for (let j = 0; j <= colIdx; j++) {
             // columns on left only affect minPageX
-            var c = columns[j];
+            let c = columns[j];
             if (c.resizable) {
                 if (stretchLeewayOnLeft !== null) {
                     if (c.maxWidth) {
@@ -1640,19 +1639,19 @@ export function SlickGrid(container, data, columns, options) {
     function processColumnResize(target, currentX) {
         // if (options.resizeDelta && Math.abs(oldResizeX - newx) <= options.resizeDelta)
         //   return;
-        var $target = $(target);
+        let $target = $(target);
         // const width = $target.width() as number;
         // oldResizeX = newx;
-        var colIdx = $target.index();
+        let colIdx = $target.index();
         if (hasFrozenColumns() && $target.closestClass("slick-header-columns").hasClass("slick-header-columns-right")) {
             colIdx += options.frozenColumn + 1;
         }
-        var actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, currentX)) - pageX, x;
+        let actualMinWidth, d = Math.min(maxPageX, Math.max(minPageX, currentX)) - pageX, x;
         if (d < 0) { // shrink column
             x = d;
             var newCanvasWidthL = 0, newCanvasWidthR = 0;
-            for (var j = colIdx; j >= 0; j--) {
-                var c = columns[j];
+            for (let j = colIdx; j >= 0; j--) {
+                let c = columns[j];
                 if (c.resizable) {
                     actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);
                     if (x && c.previousWidth + x < actualMinWidth) {
@@ -1666,8 +1665,8 @@ export function SlickGrid(container, data, columns, options) {
                 }
             }
             // return;
-            for (var k = 0; k <= colIdx; k++) {
-                var c = columns[k];
+            for (let k = 0; k <= colIdx; k++) {
+                let c = columns[k];
                 if (hasFrozenColumns() && (k > options.frozenColumn)) {
                     newCanvasWidthR += c.width;
                 }
@@ -1677,8 +1676,8 @@ export function SlickGrid(container, data, columns, options) {
             }
             if (options.forceFitColumns) {
                 x = -d;
-                for (var j = colIdx + 1; j < columns.length; j++) {
-                    var c = columns[j];
+                for (let j = colIdx + 1; j < columns.length; j++) {
+                    let c = columns[j];
                     if (c.resizable) {
                         if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
                             x -= c.maxWidth - c.previousWidth;
@@ -1698,8 +1697,8 @@ export function SlickGrid(container, data, columns, options) {
                 }
             }
             else {
-                for (var j = colIdx + 1; j < columns.length; j++) {
-                    var c = columns[j];
+                for (let j = colIdx + 1; j < columns.length; j++) {
+                    let c = columns[j];
                     if (hasFrozenColumns() && (j > options.frozenColumn)) {
                         newCanvasWidthR += c.width;
                     }
@@ -1710,8 +1709,8 @@ export function SlickGrid(container, data, columns, options) {
             }
             if (options.forceFitColumns) {
                 x = -d;
-                for (var j = colIdx + 1; j < columns.length; j++) {
-                    var c = columns[j];
+                for (let j = colIdx + 1; j < columns.length; j++) {
+                    let c = columns[j];
                     if (c.resizable) {
                         if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
                             x -= c.maxWidth - c.previousWidth;
@@ -1728,8 +1727,8 @@ export function SlickGrid(container, data, columns, options) {
         else { // stretch column
             x = d;
             var newCanvasWidthL = 0, newCanvasWidthR = 0;
-            for (var j = colIdx; j >= 0; j--) {
-                var c = columns[j];
+            for (let j = colIdx; j >= 0; j--) {
+                let c = columns[j];
                 if (c.resizable) {
                     if (x && c.maxWidth && (c.maxWidth - c.previousWidth < x)) {
                         x -= c.maxWidth - c.previousWidth;
@@ -1741,8 +1740,8 @@ export function SlickGrid(container, data, columns, options) {
                     }
                 }
             }
-            for (var k = 0; k <= colIdx; k++) {
-                var c = columns[k];
+            for (let k = 0; k <= colIdx; k++) {
+                let c = columns[k];
                 if (hasFrozenColumns() && (k > options.frozenColumn)) {
                     newCanvasWidthR += c.width;
                 }
@@ -1752,8 +1751,8 @@ export function SlickGrid(container, data, columns, options) {
             }
             if (options.forceFitColumns) {
                 x = -d;
-                for (var j = colIdx + 1; j < columns.length; j++) {
-                    var c = columns[j];
+                for (let j = colIdx + 1; j < columns.length; j++) {
+                    let c = columns[j];
                     if (c.resizable) {
                         actualMinWidth = Math.max(c.minWidth || 0, absoluteColumnMinWidth);
                         if (x && c.previousWidth + x < actualMinWidth) {
@@ -1774,8 +1773,8 @@ export function SlickGrid(container, data, columns, options) {
                 }
             }
             else {
-                for (var j = colIdx + 1; j < columns.length; j++) {
-                    var c = columns[j];
+                for (let j = colIdx + 1; j < columns.length; j++) {
+                    let c = columns[j];
                     if (hasFrozenColumns() && (j > options.frozenColumn)) {
                         newCanvasWidthR += c.width;
                     }
@@ -1796,12 +1795,12 @@ export function SlickGrid(container, data, columns, options) {
         }
     }
     function finishColumnResize() {
-        var changedColumns = [];
-        var newWidth;
-        var columnElements = $headers.children();
+        const changedColumns = [];
+        let newWidth;
+        let columnElements = $headers.children();
         $headers.find(".slick-header-column-active").removeClass("slick-header-column-active");
-        for (var j = 0; j < columns.length; j++) {
-            var c = columns[j];
+        for (let j = 0; j < columns.length; j++) {
+            let c = columns[j];
             newWidth = $(columnElements[j]).width();
             if (c.previousWidth !== newWidth) {
                 changedColumns.push({
@@ -2200,7 +2199,7 @@ export function SlickGrid(container, data, columns, options) {
         absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff);
     }
     function createCssRules() {
-        var style = document.createElement("style");
+        let style = document.createElement("style");
         style.type = "text/css";
         $("head").append(style);
         $style = $(style);
@@ -2287,9 +2286,9 @@ export function SlickGrid(container, data, columns, options) {
         // }
         e = e || new Slick.EventData();
         if (e.stopImmediatePropagation) {
-            var tmp_fnc_1 = e.stopImmediatePropagation;
+            let tmp_fnc = e.stopImmediatePropagation;
             e.stopImmediatePropagation = function () {
-                tmp_fnc_1.apply(e);
+                tmp_fnc.apply(e);
                 e._isImmediatePropagationStopped = true;
             };
             if (!e.isImmediatePropagationStopped) {
@@ -2299,9 +2298,9 @@ export function SlickGrid(container, data, columns, options) {
             }
         }
         if (e.stopPropagation) {
-            var tmp_fnc_2 = e.stopPropagation;
+            let tmp_fnc = e.stopPropagation;
             e.stopPropagation = function () {
-                tmp_fnc_2.apply(e);
+                tmp_fnc.apply(e);
                 e._isPropagationStopped = true;
             };
             if (!e.isPropagationStopped) {
@@ -2688,7 +2687,7 @@ export function SlickGrid(container, data, columns, options) {
     //////////////////////////////////////////////////////////////////////////////////////////////
     // rendering / Scrolling
     function getRowTop(row) {
-        var result;
+        let result;
         if (options.variableRowHeight) {
             result = rowPositionCache[row].top - offset;
         }
@@ -2710,13 +2709,13 @@ export function SlickGrid(container, data, columns, options) {
         if (!options.variableRowHeight) {
             return Math.floor((y + offset) / options.rowHeight);
         }
-        var rowsInPosCache = getDataLength();
+        let rowsInPosCache = getDataLength();
         if (!rowsInPosCache) {
             return 0;
         }
         // loop through the row position cache and break when
         // the row is found
-        var row = Math.max(0, binarySearch(rowPositionCache, y + offset, function (pos, cacheEntry) {
+        let row = Math.max(0, binarySearch(rowPositionCache, y + offset, function (pos, cacheEntry) {
             if (cacheEntry.top <= pos) {
                 if (cacheEntry.bottom > pos) {
                     return 0;
@@ -2839,9 +2838,9 @@ export function SlickGrid(container, data, columns, options) {
             return undefined;
         }
         if (columnDef.field && columnDef.field.indexOf(".") > 0) {
-            var fields = columnDef.field.split(".");
-            var result = item;
-            for (var i = 0; i < fields.length; i++) {
+            const fields = columnDef.field.split(".");
+            let result = item;
+            for (let i = 0; i < fields.length; i++) {
                 result = result[fields[i]];
             }
             return result;
@@ -2968,7 +2967,7 @@ export function SlickGrid(container, data, columns, options) {
     }
     function cleanupRows(rangeToKeep) {
         for (var i in rowsCache) {
-            var idx = parseInt(i, 10);
+            let idx = parseInt(i, 10);
             var removeFrozenRow = true;
             if (hasFrozenRows
                 && ((options.frozenBottom && idx >= actualFrozenRow) // frozen bottom rows
@@ -2987,7 +2986,7 @@ export function SlickGrid(container, data, columns, options) {
         }
     }
     function invalidate() {
-        var currentActiveCell = null;
+        let currentActiveCell = null;
         if (currentEditor) {
             currentActiveCell = getActiveCell();
         }
@@ -3014,7 +3013,7 @@ export function SlickGrid(container, data, columns, options) {
         // store and detach node for later async cleanup
         for (var column in postProcessedRow) {
             if (postProcessedRow.hasOwnProperty(column)) {
-                var columnIdx = parseInt(column, 10) | 0;
+                let columnIdx = parseInt(column, 10) | 0;
                 postProcessedCleanupQueue.push({
                     actionType: "C",
                     groupId: postProcessgroupId,
@@ -3029,7 +3028,7 @@ export function SlickGrid(container, data, columns, options) {
             groupId: postProcessgroupId,
             node: cacheEntry.rowNode
         });
-        cacheEntry.rowNode.forEach(function (x) { return x.parent.removeChild(x); }); // $(cacheEntry.rowNode).detach();
+        cacheEntry.rowNode.forEach(x => x.parent.removeChild(x)); // $(cacheEntry.rowNode).detach();
     }
     function initializeRowPositions() {
         rowPositionCache = [{
@@ -3062,7 +3061,7 @@ export function SlickGrid(container, data, columns, options) {
             return;
         }
         trigger(self.onBeforeRemoveRow, { row: row, dom: cacheEntry.rowNode });
-        cacheEntry.rowNode.forEach(function (x) {
+        cacheEntry.rowNode.forEach(x => {
             x.parentElement.removeChild(x);
         });
         delete rowsCache[row];
@@ -3103,15 +3102,13 @@ export function SlickGrid(container, data, columns, options) {
         else {
             cellNode.innerHTML = formatterResult.text;
             if (formatterResult.removeClasses && !suppressRemove) {
-                for (var _i = 0, _a = formatterResult.removeClasses; _i < _a.length; _i++) {
-                    var c = _a[_i];
+                for (const c of formatterResult.removeClasses) {
                     cellNode.classList.remove(c);
                 }
                 // $(cellNode).removeClass(formatterResult.removeClasses);
             }
             if (formatterResult.addClasses) {
-                for (var _b = 0, _c = formatterResult.addClasses; _b < _c.length; _b++) {
-                    var c = _c[_b];
+                for (const c of formatterResult.addClasses) {
                     cellNode.classList.add(c);
                 }
                 // $(cellNode).addClass(formatterResult.addClasses);
@@ -3134,8 +3131,8 @@ export function SlickGrid(container, data, columns, options) {
             var formatterResult = d ? getFormatter(row, m)(row, cell, getDataItemValueForColumn(d, m), m, d, self) : "";
             applyFormatResultToCellNode(formatterResult, cellNode);
             if (self.onAppendCell.countHandlers() > 0) {
-                var item = getDataItem(activeRow);
-                var value = getDataItemValueForColumn(item, columns[activeCell]);
+                let item = getDataItem(activeRow);
+                let value = getDataItemValueForColumn(item, columns[activeCell]);
                 trigger(self.onAppendCell, {
                     row: row, cell: cell,
                     value: value, item: item,
@@ -3161,7 +3158,7 @@ export function SlickGrid(container, data, columns, options) {
             if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(column)) {
                 continue;
             }
-            var columnIdx = parseInt(column, 10) | 0;
+            let columnIdx = parseInt(column, 10) | 0;
             var m = columns[columnIdx], node = cacheEntry.cellNodesByColumnIdx[columnIdx];
             if (row === activeRow && columnIdx === activeCell && currentEditor) {
                 currentEditor.loadValue(d);
@@ -3170,8 +3167,8 @@ export function SlickGrid(container, data, columns, options) {
                 formatterResult = getFormatter(row, m)(row, columnIdx, getDataItemValueForColumn(d, m), m, d, self);
                 applyFormatResultToCellNode(formatterResult, node);
                 if (self.onAppendCell.countHandlers() > 0) {
-                    var item = getDataItem(row);
-                    var value = getDataItemValueForColumn(item, columns[columnIdx]);
+                    let item = getDataItem(row);
+                    let value = getDataItemValueForColumn(item, columns[columnIdx]);
                     trigger(self.onAppendCell, {
                         row: row, cell: columnIdx,
                         value: value, item: item,
@@ -3187,7 +3184,7 @@ export function SlickGrid(container, data, columns, options) {
     }
     function getViewportHeight() {
         if (options.autoHeight) {
-            var fullHeight = $paneHeaderL.height();
+            let fullHeight = $paneHeaderL.height();
             fullHeight += (options.showHeaderRow) ? options.headerRowHeight + getVBoxDelta($headerRowScroller) : 0;
             fullHeight += (options.showFooterRow) ? options.footerRowHeight + getVBoxDelta($footerRowScroller) : 0;
             fullHeight += (getCanvasWidth() > viewportW) ? scrollbarDimensions.height : 0;
@@ -3204,7 +3201,7 @@ export function SlickGrid(container, data, columns, options) {
             topPanelH = (options.showTopPanel) ? options.topPanelHeight + getVBoxDelta($topPanelScroller) : 0;
             headerRowH = (options.showHeaderRow) ? options.headerRowHeight + getVBoxDelta($headerRowScroller) : 0;
             footerRowH = (options.showFooterRow) ? options.footerRowHeight + getVBoxDelta($footerRowScroller) : 0;
-            var preHeaderH = (options.createPreHeaderPanel && options.showPreHeaderPanel) ? options.preHeaderPanelHeight + getVBoxDelta($preHeaderPanelScroller) : 0;
+            let preHeaderH = (options.createPreHeaderPanel && options.showPreHeaderPanel) ? options.preHeaderPanelHeight + getVBoxDelta($preHeaderPanelScroller) : 0;
             viewportH = $container[0].clientHeight
                 - $headerScroller[0].clientHeight
                 - getVBoxDelta($headerScroller)
@@ -3479,7 +3476,7 @@ export function SlickGrid(container, data, columns, options) {
                 continue;
             }
             // this is a string, so it needs to be cast back to a number.
-            var i = parseInt(idx, 10) | 0;
+            let i = parseInt(idx, 10) | 0;
             // ignore frozen columns
             if (i <= options.frozenColumn) {
                 continue;
@@ -3575,8 +3572,8 @@ export function SlickGrid(container, data, columns, options) {
                     cacheEntry.rowNode[0].appendChild(node);
                 }
                 if (self.onAppendCell.countHandlers() > 0) {
-                    var item = getDataItem(processedRow);
-                    var value = getDataItemValueForColumn(item, columns[columnIdx]);
+                    let item = getDataItem(processedRow);
+                    let value = getDataItemValueForColumn(item, columns[columnIdx]);
                     trigger(self.onAppendCell, {
                         row: processedRow, cell: columnIdx,
                         value: value, item: item,
@@ -3589,7 +3586,7 @@ export function SlickGrid(container, data, columns, options) {
     }
     function renderRows(range) {
         var html = { L: "", R: "" }, rows = [], needToReselectCell = false, dataLength = getDataLength();
-        for (var i = range.top, ii = range.bottom; i <= ii; i++) {
+        for (let i = range.top, ii = range.bottom; i <= ii; i++) {
             if (rowsCache[i] || (hasFrozenRows && options.frozenBottom && i == getDataLength())) {
                 continue;
             }
@@ -3617,19 +3614,19 @@ export function SlickGrid(container, data, columns, options) {
         if (!rows.length) {
             return;
         }
-        var x;
+        let x;
         if (html.L.length > 0) {
             x = document.createElement("div");
             x.innerHTML = html.L;
         }
-        var xRight;
+        let xRight;
         if (html.R.length > 0) {
             xRight = document.createElement("div");
             xRight.innerHTML = html.R;
         }
-        for (var i = 0, ii = rows.length; i < ii; i++) {
-            var xChild = void 0;
-            var xChildRight = void 0;
+        for (let i = 0, ii = rows.length; i < ii; i++) {
+            let xChild;
+            let xChildRight;
             rowsCache[rows[i]].rowNode = [];
             if (x && x.children.length > 0) {
                 xChild = x.children[0];
@@ -3653,18 +3650,18 @@ export function SlickGrid(container, data, columns, options) {
                 $canvasTopL[0].appendChild(xChild);
             }
             if (self.onAppendCell.countHandlers() > 0) {
-                var nodes = [];
-                for (var idx = 0; idx < xChild.childNodes.length; idx++) {
+                const nodes = [];
+                for (let idx = 0; idx < xChild.childNodes.length; idx++) {
                     nodes.push(xChild.childNodes[idx]);
                 }
                 if (xChildRight) {
-                    for (var idx = 0; idx < xChildRight.childNodes.length; idx++) {
+                    for (let idx = 0; idx < xChildRight.childNodes.length; idx++) {
                         nodes.push(xChildRight.childNodes[idx]);
                     }
                 }
-                for (var cIdx = 0; cIdx < nodes.length; cIdx++) {
-                    var item = getDataItem(rows[i]);
-                    var value = getDataItemValueForColumn(item, columns[cIdx]);
+                for (let cIdx = 0; cIdx < nodes.length; cIdx++) {
+                    let item = getDataItem(rows[i]);
+                    let value = getDataItemValueForColumn(item, columns[cIdx]);
                     trigger(self.onAppendCell, {
                         row: rows[i], cell: cIdx,
                         value: value, item: item,
@@ -3704,7 +3701,7 @@ export function SlickGrid(container, data, columns, options) {
     }
     function updateRowPositions() {
         for (var row in rowsCache) {
-            rowsCache[row].rowNode.forEach(function (x) { return x.style.top = getRowTop(row) + "px"; });
+            rowsCache[row].rowNode.forEach(x => x.style.top = getRowTop(row) + "px");
         }
     }
     function render() {
@@ -3804,19 +3801,19 @@ export function SlickGrid(container, data, columns, options) {
         //   programmaticScrollingTimeout = null;
         // }, 600);
         // ceiling the max scroll values
-        var vScrollDist = 0;
+        let vScrollDist = 0;
         if (!options.autoHeight) {
-            var maxScrollDistanceY = $viewportScrollContainerY[0].scrollHeight - $viewportScrollContainerY[0].clientHeight;
+            let maxScrollDistanceY = $viewportScrollContainerY[0].scrollHeight - $viewportScrollContainerY[0].clientHeight;
             if (scrollTop > maxScrollDistanceY) {
                 scrollTop = maxScrollDistanceY;
             }
             vScrollDist = Math.abs(scrollTop - prevScrollTop);
         }
-        var maxScrollDistanceX = $viewportScrollContainerY[0].scrollWidth - $viewportScrollContainerY[0].clientWidth;
+        let maxScrollDistanceX = $viewportScrollContainerY[0].scrollWidth - $viewportScrollContainerY[0].clientWidth;
         if (scrollLeft > maxScrollDistanceX) {
             scrollLeft = maxScrollDistanceX;
         }
-        var hScrollDist = Math.abs(scrollLeft - prevScrollLeft);
+        let hScrollDist = Math.abs(scrollLeft - prevScrollLeft);
         if (hScrollDist) {
             prevScrollLeft = scrollLeft;
             $viewportScrollContainerX[0].scrollLeft = scrollLeft;
@@ -3952,7 +3949,7 @@ export function SlickGrid(container, data, columns, options) {
                 if (!cacheEntry.cellNodesByColumnIdx.hasOwnProperty(column)) {
                     continue;
                 }
-                var columnIdx = parseInt(column, 10) | 0;
+                let columnIdx = parseInt(column, 10) | 0;
                 var m = columns[columnIdx];
                 var processedStatus = postProcessedRows[row][columnIdx]; // c=cleanup and re-render, R=rendered
                 if (m.asyncPostRender && processedStatus !== "R") {
@@ -4043,17 +4040,17 @@ export function SlickGrid(container, data, columns, options) {
     function flashCell(row, cell, speed, times) {
         speed = speed || 100;
         if (rowsCache[row]) {
-            var $cell_1 = $(getCellNode(row, cell));
-            var toggleCellClass_1 = function (remaining) {
+            let $cell = $(getCellNode(row, cell));
+            let toggleCellClass = (remaining) => {
                 if (!remaining) {
                     return;
                 }
-                $cell_1.toggleClass(options.cellFlashingCssClass);
-                setTimeout(function () {
-                    toggleCellClass_1(remaining - 1);
+                $cell.toggleClass(options.cellFlashingCssClass);
+                setTimeout(() => {
+                    toggleCellClass(remaining - 1);
                 }, speed);
             };
-            toggleCellClass_1((times || 4) * 2);
+            toggleCellClass((times || 4) * 2);
         }
     }
     function handleDragInit(e, dd) {
@@ -4421,7 +4418,7 @@ export function SlickGrid(container, data, columns, options) {
             makeActiveCellNormal();
             $(activeCellNode).removeClass("active");
             if (rowsCache[activeRow]) {
-                rowsCache[activeRow].rowNode.forEach(function (x) { return x.classList.remove("active"); }); // $(rowsCache[activeRow].rowNode).removeClass("active");
+                rowsCache[activeRow].rowNode.forEach(x => x.classList.remove("active")); // $(rowsCache[activeRow].rowNode).removeClass("active");
             }
         }
         var activeCellChanged = (activeCellNode !== newCell);
@@ -4436,19 +4433,19 @@ export function SlickGrid(container, data, columns, options) {
                     ? $canvasTopL.height()
                     : frozenRowsHeight;
             }
-            var cell = getCellFromPoint($activeCellOffset.left, Math.ceil($activeCellOffset.top) - rowOffset);
+            let cell = getCellFromPoint($activeCellOffset.left, Math.ceil($activeCellOffset.top) - rowOffset);
             activeRow = cell.row;
             activeCell = activePosX = activeCell = activePosX = getCellFromNode(activeCellNode);
             $activeCellNode.addClass("active");
             if (rowsCache[activeRow]) {
-                rowsCache[activeRow].rowNode.forEach(function (x) { return x.classList.add("active"); }); // $(rowsCache[activeRow].rowNode).addClass('active');
+                rowsCache[activeRow].rowNode.forEach(x => x.classList.add("active")); // $(rowsCache[activeRow].rowNode).addClass('active');
             }
             if (opt_editMode == null) {
                 opt_editMode = (activeRow == getDataLength()) || options.autoEdit;
             }
             if (options.showCellSelection) {
                 $(activeCellNode).addClass("active");
-                rowsCache[activeRow].rowNode.forEach(function (x) { return x.classList.add("active"); }); // $(rowsCache[activeRow].rowNode).addClass("active");
+                rowsCache[activeRow].rowNode.forEach(x => x.classList.add("active")); // $(rowsCache[activeRow].rowNode).addClass("active");
             }
             if (options.editable && opt_editMode && isCellPotentiallyEditable(activeRow, activeCell)) {
                 clearTimeout(h_editorLoader);
@@ -4519,8 +4516,8 @@ export function SlickGrid(container, data, columns, options) {
                 var formatterResult = formatter(activeRow, activeCell, getDataItemValueForColumn(d, column), column, d, self);
                 applyFormatResultToCellNode(formatterResult, activeCellNode);
                 if (self.onAppendCell.countHandlers() > 0) {
-                    var item = getDataItem(activeRow);
-                    var value = getDataItemValueForColumn(item, columns[activeCell]);
+                    let item = getDataItem(activeRow);
+                    let value = getDataItemValueForColumn(item, columns[activeCell]);
                     trigger(self.onAppendCell, {
                         row: activeRow, cell: activeCell,
                         value: value, item: item,