tabulator-tables 5.1.5 → 5.1.8

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -10,7 +10,7 @@ assignees: ''
 <!--
 YOUR BUG REPORT MUST CONTAIN A LINK TO A JSFiddle OR Codepen THAT DEMONSTRATES THE ISSUE OR IT WILL BE CLOSED WITHOUT DISCUSSION
 
-Please read the Bug Reporting Guide before completing this issue: http://tabulator.info/community#bug
+Please read the Bug Reporting Guide before completing this issue: http://tabulator.info/community/bug
 
 Please make sure you fill in all the sections of this template to give us the best chance of helping you
 -->
@@ -23,8 +23,9 @@ A clear and concise description of what the bug is.
 
 **Working Example**
 YOU MUST include a link to a JS Fiddle or Codepen that demonstrates the problem, it is very hard to diagnose an issue from a simple description.
-
 <!--
+Please read the Minimal Reproducable Example guide if you are unsure what the example should look like http://tabulator.info/community/mre
+
 ISSUES CREATED WITHOUT THIS EXAMPLE WILL BE CLOSED WITHOUT DISCUSSION
 -->
 

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -8,7 +8,7 @@ assignees: ''
 ---
 
 <!--
-Please read the Feature Requesting Guide before completing this issue: http://tabulator.info/community#feature
+Please read the Feature Requesting Guide before completing this issue: http://tabulator.info/community/feature
 -->
 
 *Is your feature request related to a problem? Please describe.**

package/bower.json

@@ -1,7 +1,7 @@
 {
   "name": "tabulator",
   "main": "dist/js/tabulator.js",
-  "version": "5.1.5",
+  "version": "5.1.8",
   "description": "Interactive table generation JavaScript library",
   "keywords": [
     "table",

package/dist/js/tabulator.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.1.5 (c) Oliver Folkerd 2022 */
+/* Tabulator v5.1.8 (c) Oliver Folkerd 2022 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -2544,6 +2544,7 @@
       _this.fitDataColAvg = 0;
       _this.windowBuffer = 200; //pixel margin to make column visible before it is shown on screen
 
+      _this.visibleRows = null;
       _this.initialized = false;
       _this.isFitData = false;
       _this.columns = [];
@@ -2555,6 +2556,7 @@
       value: function initialize() {
         this.compatibilityCheck();
         this.layoutCheck();
+        this.vertScrollListen();
       }
     }, {
       key: "compatibilityCheck",
@@ -2598,6 +2600,17 @@
       key: "layoutCheck",
       value: function layoutCheck() {
         this.isFitData = this.options("layout").startsWith('fitData');
+      }
+    }, {
+      key: "vertScrollListen",
+      value: function vertScrollListen() {
+        this.subscribe("scroll-vertical", this.clearVisRowCache.bind(this));
+        this.subscribe("data-refreshed", this.clearVisRowCache.bind(this));
+      }
+    }, {
+      key: "clearVisRowCache",
+      value: function clearVisRowCache() {
+        this.visibleRows = null;
       } //////////////////////////////////////
       ///////// Public Functions ///////////
       //////////////////////////////////////
@@ -2774,19 +2787,15 @@
                   var cell = row.cells[colEnd];
                   rowEl.appendChild(cell.getElement());
                   cell.column.reinitializeWidth();
-                  collsWidth += cell.column.getWidth();
-
-                  if (collsWidth > this.vDomScrollPosRight) {
-                    break;
-                  }
+                  collsWidth += cell.column.getWidth(); // if(collsWidth > this.vDomScrollPosRight){
+                  // 	break;
+                  // }
                 }
 
-                rowEl.parentNode.removeChild(rowEl);
-                this.fitDataColAvg = Math.floor(collsWidth / (colEnd + 1));
-
-                for (colEnd; colEnd < this.table.columnManager.columnsByIndex.length; colEnd++) {
-                  this.table.columnManager.columnsByIndex[colEnd].setWidth(this.fitDataColAvg);
-                }
+                rowEl.parentNode.removeChild(rowEl); // this.fitDataColAvg = Math.floor(collsWidth / (colEnd + 1));
+                // for(colEnd; colEnd < this.table.columnManager.columnsByIndex.length; colEnd++){
+                // 	this.table.columnManager.columnsByIndex[colEnd].setWidth(this.fitDataColAvg);
+                // }
 
                 this.rerenderColumns(false, true);
               }
@@ -2822,18 +2831,27 @@
       value: function reinitializeRows() {
         var _this5 = this;
 
-        var rows = this.table.rowManager.getVisibleRows();
+        var rows = this.getVisibleRows();
         rows.forEach(function (row) {
           _this5.reinitializeRow(row, true);
         });
       }
+    }, {
+      key: "getVisibleRows",
+      value: function getVisibleRows() {
+        if (!this.visibleRows) {
+          this.visibleRows = this.table.rowManager.getVisibleRows();
+        }
+
+        return this.visibleRows;
+      }
     }, {
       key: "scroll",
       value: function scroll(diff) {
         this.vDomScrollPosLeft += diff;
         this.vDomScrollPosRight += diff;
 
-        if (diff > this.elementVertical.clientWidth * .8) {
+        if (Math.abs(diff) > this.windowBuffer / 2) {
           this.rerenderColumns();
         } else {
           if (diff > 0) {
@@ -2859,117 +2877,197 @@
     }, {
       key: "addColRight",
       value: function addColRight() {
-        var column = this.columns[this.rightCol + 1],
-            rows;
+        var _this6 = this;
 
-        if (column && column.modules.vdomHoz.leftPos <= this.vDomScrollPosRight) {
-          rows = this.table.rowManager.getVisibleRows();
-          rows.forEach(function (row) {
-            if (row.type !== "group") {
-              var cell = row.getCell(column);
-              row.getElement().appendChild(cell.getElement());
-              cell.cellRendered();
-            }
-          });
-          this.fitDataColActualWidthCheck(column);
-          this.rightCol++; // Don't move this below the >= check below
+        var changes = false;
+
+        var _loop = function _loop() {
+          var column = _this6.columns[_this6.rightCol + 1];
+
+          if (column) {
+            if (column.modules.vdomHoz.leftPos <= _this6.vDomScrollPosRight) {
+              changes = true;
+
+              _this6.getVisibleRows().forEach(function (row) {
+                if (row.type !== "group") {
+                  var cell = row.getCell(column);
+                  row.getElement().appendChild(cell.getElement());
+                  cell.cellRendered();
+                }
+              });
+
+              _this6.fitDataColActualWidthCheck(column);
 
-          if (this.rightCol >= this.columns.length - 1) {
-            this.vDomPadRight = 0;
+              _this6.rightCol++; // Don't move this below the >= check below
+
+              if (_this6.rightCol >= _this6.columns.length - 1) {
+                _this6.vDomPadRight = 0;
+              } else {
+                _this6.vDomPadRight -= column.getWidth();
+              }
+            } else {
+              return "break";
+            }
           } else {
-            this.vDomPadRight -= column.getWidth();
+            return "break";
           }
+        };
+
+        while (true) {
+          var _ret = _loop();
 
+          if (_ret === "break") break;
+        }
+
+        if (changes) {
           this.tableElement.style.paddingRight = this.vDomPadRight + "px";
-          this.addColRight();
         }
       }
     }, {
       key: "addColLeft",
       value: function addColLeft() {
-        var column = this.columns[this.leftCol - 1],
-            rows;
+        var _this7 = this;
 
-        if (column && column.modules.vdomHoz.rightPos >= this.vDomScrollPosLeft) {
-          var rows = this.table.rowManager.getVisibleRows();
-          rows.forEach(function (row) {
-            if (row.type !== "group") {
-              var cell = row.getCell(column);
-              row.getElement().prepend(cell.getElement());
-              cell.cellRendered();
-            }
-          });
-          this.fitDataColActualWidthCheck(column);
-          this.leftCol--; // don't move this below the <= check below
+        var changes = false;
+
+        var _loop2 = function _loop2() {
+          var column = _this7.columns[_this7.leftCol - 1];
+
+          if (column) {
+            if (column.modules.vdomHoz.rightPos >= _this7.vDomScrollPosLeft) {
+              changes = true;
+
+              _this7.getVisibleRows().forEach(function (row) {
+                if (row.type !== "group") {
+                  var cell = row.getCell(column);
+                  row.getElement().prepend(cell.getElement());
+                  cell.cellRendered();
+                }
+              });
+
+              _this7.leftCol--; // don't move this below the <= check below
+
+              if (_this7.leftCol <= 0) {
+                // replicating logic in addColRight
+                _this7.vDomPadLeft = 0;
+              } else {
+                _this7.vDomPadLeft -= column.getWidth();
+              }
+
+              var diff = _this7.fitDataColActualWidthCheck(column);
 
-          if (this.leftCol <= 0) {
-            // replicating logic in addColRight
-            this.vDomPadLeft = 0;
+              if (diff) {
+                _this7.scrollLeft = _this7.elementVertical.scrollLeft = _this7.elementVertical.scrollLeft + diff;
+                _this7.vDomPadRight -= diff;
+              }
+            } else {
+              return "break";
+            }
           } else {
-            this.vDomPadLeft -= column.getWidth();
+            return "break";
           }
+        };
+
+        while (true) {
+          var _ret2 = _loop2();
+
+          if (_ret2 === "break") break;
+        }
 
+        if (changes) {
           this.tableElement.style.paddingLeft = this.vDomPadLeft + "px";
-          this.addColLeft();
         }
       }
     }, {
       key: "removeColRight",
-      value: function removeColRight(column) {
-        var column = this.columns[this.rightCol],
-            rows;
+      value: function removeColRight() {
+        var _this8 = this;
 
-        if (column && column.modules.vdomHoz.leftPos > this.vDomScrollPosRight) {
-          rows = this.table.rowManager.getVisibleRows();
-          column.modules.vdomHoz.visible = false;
-          rows.forEach(function (row) {
-            if (row.type !== "group") {
-              var cell = row.getCell(column);
+        var changes = false;
 
-              try {
-                row.getElement().removeChild(cell.getElement());
-              } catch (ex) {
-                console.warn("Could not removeColRight", ex.message);
-              }
+        var _loop3 = function _loop3() {
+          var column = _this8.columns[_this8.rightCol];
+
+          if (column) {
+            if (column.modules.vdomHoz.leftPos > _this8.vDomScrollPosRight) {
+              changes = true;
+
+              _this8.getVisibleRows().forEach(function (row) {
+                if (row.type !== "group") {
+                  var cell = row.getCell(column);
+
+                  try {
+                    row.getElement().removeChild(cell.getElement());
+                  } catch (ex) {
+                    console.warn("Could not removeColRight", ex.message);
+                  }
+                }
+              });
+
+              _this8.vDomPadRight += column.getWidth();
+              _this8.rightCol--;
+            } else {
+              return "break";
             }
-          });
-          this.vDomPadRight += column.getWidth();
+          } else {
+            return "break";
+          }
+        };
+
+        while (true) {
+          var _ret3 = _loop3();
+
+          if (_ret3 === "break") break;
+        }
+
+        if (changes) {
           this.tableElement.style.paddingRight = this.vDomPadRight + "px";
-          this.rightCol--;
-          this.removeColRight();
         }
       }
     }, {
       key: "removeColLeft",
       value: function removeColLeft() {
-        var column = this.columns[this.leftCol],
-            rows;
+        var _this9 = this;
 
-        if (column && column.modules.vdomHoz.rightPos < this.vDomScrollPosLeft) {
-          rows = this.table.rowManager.getVisibleRows();
-          rows.forEach(function (row) {
-            var cell, el;
+        var changes = false;
 
-            if (row.type !== "group") {
-              cell = row.getCell(column);
+        var _loop4 = function _loop4() {
+          var column = _this9.columns[_this9.leftCol];
 
-              if (cell) {
-                el = cell.getElement();
+          if (column) {
+            if (column.modules.vdomHoz.rightPos < _this9.vDomScrollPosLeft) {
+              changes = true;
+
+              _this9.getVisibleRows().forEach(function (row) {
+                if (row.type !== "group") {
+                  var cell = row.getCell(column);
 
-                if (el.parentNode) {
                   try {
-                    row.getElement().removeChild(el);
+                    row.getElement().removeChild(cell.getElement());
                   } catch (ex) {
                     console.warn("Could not removeColLeft", ex.message);
                   }
                 }
-              }
+              });
+
+              _this9.vDomPadLeft += column.getWidth();
+              _this9.leftCol++;
+            } else {
+              return "break";
             }
-          });
-          this.vDomPadLeft += column.getWidth();
+          } else {
+            return "break";
+          }
+        };
+
+        while (true) {
+          var _ret4 = _loop4();
+
+          if (_ret4 === "break") break;
+        }
+
+        if (changes) {
           this.tableElement.style.paddingLeft = this.vDomPadLeft + "px";
-          this.leftCol++;
-          this.removeColLeft();
         }
       }
     }, {
@@ -2985,11 +3083,13 @@
           if (widthDiff) {
             column.modules.vdomHoz.rightPos += widthDiff;
             column.modules.vdomHoz.width = newWidth;
-            this.colPositionAdjust(this.rightCol + 2, this.columns.length, widthDiff);
+            this.colPositionAdjust(this.columns.indexOf(column) + 1, this.columns.length, widthDiff);
           }
 
           column.modules.vdomHoz.fitDataCheck = false;
         }
+
+        return widthDiff;
       }
     }, {
       key: "initializeRow",
@@ -6575,7 +6675,7 @@
         }
 
         if (this.bindings[type][funcName]) {
-          console.warn("Unable to bind component handler, a matching function name is already bound", type, funcName, hanlder);
+          console.warn("Unable to bind component handler, a matching function name is already bound", type, funcName, handler);
         } else {
           this.bindings[type][funcName] = handler;
         }
@@ -6583,7 +6683,7 @@
     }, {
       key: "handle",
       value: function handle(type, component, name) {
-        if (this.bindings[type] && this.bindings[type][name]) {
+        if (this.bindings[type] && this.bindings[type][name] && typeof this.bindings[type][name].bind === 'function') {
           return this.bindings[type][name].bind(null, component);
         } else {
           if (name !== "then" && typeof name === "string" && !name.startsWith("_")) {
@@ -14015,6 +14115,7 @@
               cell.column.definition.cellEditing.call(this.table, component);
             }
 
+            this.dispatch("cell-editing", cell);
             this.dispatchExternal("cellEditing", component);
             params = typeof cell.column.modules.edit.params === "function" ? cell.column.modules.edit.params(component) : cell.column.modules.edit.params;
             cellEditor = cell.column.modules.edit.editor.call(self, component, onRendered, success, cancel, params); //if editor returned, add to DOM, if false, abort edit
@@ -15973,7 +16074,7 @@
 
       if (newDatetime.isValid) {
         if (formatterParams.timezone) {
-          newDatetime = newDatetime.shiftTimezone(formatterParams.timezone);
+          newDatetime = newDatetime.setZone(formatterParams.timezone);
         }
 
         return newDatetime.toFormat(outputFormat);
@@ -20064,6 +20165,8 @@
         setTimeout(function () {
           _this4.table.rowManager.element.addEventListener("scroll", _this4.blurEvent);
 
+          _this4.subscribe("cell-editing", _this4.blurEvent);
+
           document.body.addEventListener("click", _this4.blurEvent);
           document.body.addEventListener("contextmenu", _this4.blurEvent);
           window.addEventListener("resize", _this4.blurEvent);
@@ -20084,13 +20187,11 @@
         } //move menu to start on bottom edge if it is too close to the edge of the screen
 
 
-        if (y + element.offsetHeight >= this.menuContainer.offsetHeight) {
-          element.style.top = "";
-
+        if (y + element.offsetHeight > this.menuContainer.offsetHeight) {
           if (parentEl) {
-            element.style.bottom = this.menuContainer.offsetHeight - parentOffset.top - parentEl.offsetHeight - 1 + "px";
+            element.style.top = parseInt(element.style.top) - element.offsetHeight + parentEl.offsetHeight + 1 + "px";
           } else {
-            element.style.bottom = this.menuContainer.offsetHeight - y + "px";
+            element.style.top = parseInt(element.style.top) - element.offsetHeight + "px";
           }
         }
       }
@@ -20119,6 +20220,7 @@
         document.body.removeEventListener("contextmenu", this.blurEvent);
         window.removeEventListener("resize", this.blurEvent);
         this.table.rowManager.element.removeEventListener("scroll", this.blurEvent);
+        this.unsubscribe("cell-editing", this.blurEvent);
 
         if (this.currentComponent) {
           this.dispatchExternal("menuClosed", this.currentComponent.getComponent());