tabulator-tables 5.1.4 → 5.1.7

package/bower.json

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

package/dist/js/tabulator.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.1.4 (c) Oliver Folkerd 2022 */
+/* Tabulator v5.1.7 (c) Oliver Folkerd 2022 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -2542,9 +2542,11 @@
       _this.vDomPadLeft = 0;
       _this.vDomPadRight = 0;
       _this.fitDataColAvg = 0;
-      _this.window = 200; //pixel margin to make column visible before it is shown on screen
+      _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 = [];
       return _this;
     }
@@ -2553,6 +2555,8 @@
       key: "initialize",
       value: function initialize() {
         this.compatibilityCheck();
+        this.layoutCheck();
+        this.vertScrollListen();
       }
     }, {
       key: "compatibilityCheck",
@@ -2591,6 +2595,22 @@
 
 
         return ok;
+      }
+    }, {
+      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 ///////////
       //////////////////////////////////////
@@ -2605,9 +2625,24 @@
       value: function scrollColumns(left, dir) {
         if (this.scrollLeft != left) {
           this.scrollLeft = left;
-          this.scroll(left - (this.vDomScrollPosLeft + this.window));
+          this.scroll(left - (this.vDomScrollPosLeft + this.windowBuffer));
         }
       }
+    }, {
+      key: "calcWindowBuffer",
+      value: function calcWindowBuffer() {
+        var buffer = this.elementVertical.clientWidth;
+        this.table.columnManager.columnsByIndex.forEach(function (column) {
+          if (column.visible) {
+            var width = column.getWidth();
+
+            if (width > buffer) {
+              buffer = width;
+            }
+          }
+        });
+        this.windowBuffer = buffer * 2;
+      }
     }, {
       key: "rerenderColumns",
       value: function rerenderColumns(update, blockRedraw) {
@@ -2617,17 +2652,18 @@
           cols: this.columns,
           leftCol: this.leftCol,
           rightCol: this.rightCol
-        };
+        },
+            colPos = 0;
 
         if (update && !this.initialized) {
           return;
         }
 
         this.clear();
+        this.calcWindowBuffer();
         this.scrollLeft = this.elementVertical.scrollLeft;
-        this.vDomScrollPosLeft = this.scrollLeft - this.window;
-        this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.window;
-        var colPos = 0;
+        this.vDomScrollPosLeft = this.scrollLeft - this.windowBuffer;
+        this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.windowBuffer;
         this.table.columnManager.columnsByIndex.forEach(function (column) {
           var config = {};
 
@@ -2637,7 +2673,7 @@
             config.rightPos = colPos + width;
             config.width = width;
 
-            if (_this2.options("layout") === "fitData") {
+            if (_this2.isFitData) {
               config.fitDataCheck = column.modules.vdomHoz ? column.modules.vdomHoz.fitDataCheck : true;
             }
 
@@ -2728,7 +2764,7 @@
             row,
             rowEl;
 
-        if (this.options("layout") === "fitData") {
+        if (this.isFitData) {
           this.table.columnManager.columnsByIndex.forEach(function (column) {
             if (!column.definition.width && column.visible) {
               change = true;
@@ -2737,7 +2773,7 @@
 
           if (change) {
             if (change && this.table.rowManager.getDisplayRows().length) {
-              this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.window;
+              this.vDomScrollPosRight = this.scrollLeft + this.elementVertical.clientWidth + this.windowBuffer;
               var row = this.chain("rows-sample", [1], [], function () {
                 return _this3.table.rowManager.getDisplayRows();
               })[0];
@@ -2751,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);
               }
@@ -2799,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) {
@@ -2836,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();
+                }
+              });
 
-          if (this.rightCol >= this.columns.length - 1) {
-            this.vDomPadRight = 0;
+              _this6.fitDataColActualWidthCheck(column);
+
+              _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();
+                }
+              });
 
-          if (this.leftCol <= 0) {
-            // replicating logic in addColRight
-            this.vDomPadLeft = 0;
+              _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 (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();
         }
       }
     }, {
@@ -2962,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",
@@ -20061,13 +20184,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";
           }
         }
       }
@@ -21913,17 +22034,17 @@
       }
     }, {
       key: "_setPageCounter",
-      value: function _setPageCounter(totalRows) {
-        var content, currentRow;
+      value: function _setPageCounter(totalRows, size, currentRow) {
+        var content;
 
         if (this.pageCounter) {
-          currentRow = (this.page - 1) * this.size + 1;
-
           if (this.mode === "remote") {
+            size = this.size;
+            currentRow = (this.page - 1) * this.size + 1;
             totalRows = this.remoteRowCountEstimate;
           }
 
-          content = this.pageCounter.call(this, this.size, currentRow, this.page, totalRows, this.max);
+          content = this.pageCounter.call(this, size, currentRow, this.page, totalRows, this.max);
 
           switch (_typeof(content)) {
             case "object":
@@ -22071,7 +22192,14 @@
     }, {
       key: "getRows",
       value: function getRows(data) {
-        var output, start, end;
+        var actualRowPageSize = 0,
+            output,
+            start,
+            end,
+            actualStartRow;
+        var actualRows = data.filter(function (row) {
+          return row.type === "row";
+        });
 
         if (this.mode == "local") {
           output = [];
@@ -22088,18 +22216,28 @@
           this._setPageButtons();
 
           for (var i = start; i < end; i++) {
-            if (data[i]) {
-              output.push(data[i]);
+            var row = data[i];
+
+            if (row) {
+              output.push(row);
+
+              if (row.type === "row") {
+                if (!actualStartRow) {
+                  actualStartRow = row;
+                }
+
+                actualRowPageSize++;
+              }
             }
           }
 
-          this._setPageCounter(data.length);
+          this._setPageCounter(actualRows.length, actualRowPageSize, actualStartRow ? actualRows.indexOf(actualStartRow) + 1 : 0);
 
           return output;
         } else {
           this._setPageButtons();
 
-          this._setPageCounter(data.length);
+          this._setPageCounter(actualRows.length);
 
           return data.slice(0);
         }