tabulator-tables 5.1.3 → 5.1.6

package/dist/js/tabulator.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.1.3 (c) Oliver Folkerd 2022 */
+/* Tabulator v5.1.6 (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,20 @@
 
 
         return ok;
+      }
+    }, {
+      key: "layoutCheck",
+      value: function layoutCheck() {
+        this.isFitData = this.options("layout").startsWith('fitData');
+      }
+    }, {
+      key: "vertScrollListen",
+      value: function vertScrollListen() {
+        var _this2 = this;
+
+        this.subscribe("scroll-vertical", function () {
+          _this2.visibleRows = null;
+        });
       } //////////////////////////////////////
       ///////// Public Functions ///////////
       //////////////////////////////////////
@@ -2605,29 +2623,45 @@
       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) {
-        var _this2 = this;
+        var _this3 = this;
 
         var old = {
           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,26 +2671,26 @@
             config.rightPos = colPos + width;
             config.width = width;
 
-            if (_this2.options("layout") === "fitData") {
+            if (_this3.isFitData) {
               config.fitDataCheck = column.modules.vdomHoz ? column.modules.vdomHoz.fitDataCheck : true;
             }
 
-            if (colPos + width > _this2.vDomScrollPosLeft && colPos < _this2.vDomScrollPosRight) {
+            if (colPos + width > _this3.vDomScrollPosLeft && colPos < _this3.vDomScrollPosRight) {
               //column is visible
-              if (_this2.leftCol == -1) {
-                _this2.leftCol = _this2.columns.length;
-                _this2.vDomPadLeft = colPos;
+              if (_this3.leftCol == -1) {
+                _this3.leftCol = _this3.columns.length;
+                _this3.vDomPadLeft = colPos;
               }
 
-              _this2.rightCol = _this2.columns.length;
+              _this3.rightCol = _this3.columns.length;
             } else {
               // column is hidden
-              if (_this2.leftCol !== -1) {
-                _this2.vDomPadRight += width;
+              if (_this3.leftCol !== -1) {
+                _this3.vDomPadRight += width;
               }
             }
 
-            _this2.columns.push(column);
+            _this3.columns.push(column);
 
             column.modules.vdomHoz = config;
             colPos += width;
@@ -2720,7 +2754,7 @@
     }, {
       key: "dataChange",
       value: function dataChange() {
-        var _this3 = this;
+        var _this4 = this;
 
         var change = false,
             collsWidth = 0,
@@ -2728,7 +2762,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,9 +2771,9 @@
 
           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];
+                return _this4.table.rowManager.getDisplayRows();
               })[0];
 
               if (row) {
@@ -2751,19 +2785,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);
               }
@@ -2779,7 +2809,7 @@
     }, {
       key: "reinitChanged",
       value: function reinitChanged(old) {
-        var _this4 = this;
+        var _this5 = this;
 
         var match = true;
 
@@ -2788,7 +2818,7 @@
         }
 
         old.cols.forEach(function (col, i) {
-          if (col !== _this4.columns[i]) {
+          if (col !== _this5.columns[i]) {
             match = false;
           }
         });
@@ -2797,20 +2827,29 @@
     }, {
       key: "reinitializeRows",
       value: function reinitializeRows() {
-        var _this5 = this;
+        var _this6 = this;
 
-        var rows = this.table.rowManager.getVisibleRows();
+        var rows = this.getVisibleRows();
         rows.forEach(function (row) {
-          _this5.reinitializeRow(row, true);
+          _this6.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 +2875,197 @@
     }, {
       key: "addColRight",
       value: function addColRight() {
-        var column = this.columns[this.rightCol + 1],
-            rows;
+        var _this7 = 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 = _this7.columns[_this7.rightCol + 1];
+
+          if (column) {
+            if (column.modules.vdomHoz.leftPos <= _this7.vDomScrollPosRight) {
+              changes = true;
+
+              _this7.getVisibleRows().forEach(function (row) {
+                if (row.type !== "group") {
+                  var cell = row.getCell(column);
+                  row.getElement().appendChild(cell.getElement());
+                  cell.cellRendered();
+                }
+              });
+
+              _this7.fitDataColActualWidthCheck(column);
+
+              _this7.rightCol++; // Don't move this below the >= check below
 
-          if (this.rightCol >= this.columns.length - 1) {
-            this.vDomPadRight = 0;
+              if (_this7.rightCol >= _this7.columns.length - 1) {
+                _this7.vDomPadRight = 0;
+              } else {
+                _this7.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 _this8 = 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 = _this8.columns[_this8.leftCol - 1];
+
+          if (column) {
+            if (column.modules.vdomHoz.rightPos >= _this8.vDomScrollPosLeft) {
+              changes = true;
+
+              _this8.getVisibleRows().forEach(function (row) {
+                if (row.type !== "group") {
+                  var cell = row.getCell(column);
+                  row.getElement().prepend(cell.getElement());
+                  cell.cellRendered();
+                }
+              });
+
+              _this8.leftCol--; // don't move this below the <= check below
 
-          if (this.leftCol <= 0) {
-            // replicating logic in addColRight
-            this.vDomPadLeft = 0;
+              if (_this8.leftCol <= 0) {
+                // replicating logic in addColRight
+                _this8.vDomPadLeft = 0;
+              } else {
+                _this8.vDomPadLeft -= column.getWidth();
+              }
+
+              var diff = _this8.fitDataColActualWidthCheck(column);
+
+              if (diff) {
+                _this8.scrollLeft = _this8.elementVertical.scrollLeft = _this8.elementVertical.scrollLeft + diff;
+                _this8.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 _this9 = 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 = _this9.columns[_this9.rightCol];
+
+          if (column) {
+            if (column.modules.vdomHoz.leftPos > _this9.vDomScrollPosRight) {
+              changes = true;
+
+              _this9.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);
+                  }
+                }
+              });
+
+              _this9.vDomPadRight += column.getWidth();
+              _this9.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 _this10 = 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 = _this10.columns[_this10.leftCol];
 
-              if (cell) {
-                el = cell.getElement();
+          if (column) {
+            if (column.modules.vdomHoz.rightPos < _this10.vDomScrollPosLeft) {
+              changes = true;
+
+              _this10.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);
                   }
                 }
-              }
+              });
+
+              _this10.vDomPadLeft += column.getWidth();
+              _this10.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 +3081,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",
@@ -3884,6 +4005,7 @@
 
           this.dispatch("row-layout-before", this);
           this.generateCells();
+          this.initialized = true;
           this.table.columnManager.renderer.renderRowCells(this);
 
           if (force) {
@@ -3891,7 +4013,6 @@
           }
 
           this.dispatch("row-layout", this);
-          this.initialized = true;
 
           if (this.table.options.rowFormatter) {
             this.table.options.rowFormatter(this.getComponent());
@@ -6099,7 +6220,7 @@
                 this.containerElement.innerHTML = this.table.options.footerElement;
               } else {
                 this.external = true;
-                this.element = document.querySelector(this.table.options.footerElement);
+                this.containerElement = document.querySelector(this.table.options.footerElement);
               }
 
               break;
@@ -6458,7 +6579,7 @@
                       return row.getElement() === target;
                     });
 
-                    if (targets["row"].parentNode && targets["row"].parentNode.closest(".tabulator-row")) {
+                    if (targets["row"] && targets["row"].parentNode && targets["row"].parentNode.closest(".tabulator-row")) {
                       targets[key] = false;
                     }
                   }
@@ -8140,7 +8261,7 @@
       value: function _clearObjectPointers() {
         this.options.columns = this.options.columns.slice(0);
 
-        if (this.options.data && !this.options.reactiveData) {
+        if (Array.isArray(this.options.data) && !this.options.reactiveData) {
           this.options.data = this.options.data.slice(0);
         }
       } //build tabulator element
@@ -14560,7 +14681,9 @@
           if (col) {
             var cellEl = document.createElement("td"),
                 column = col.component._column,
+                index = _this8.table.columnManager.findColumnIndex(column),
                 value = col.value;
+
             var cellWrapper = {
               modules: {},
               getValue: function getValue() {
@@ -14615,8 +14738,8 @@
               cellEl.innerHTML = value;
             }
 
-            if (styles.firstCell) {
-              _this8.mapElementStyles(styles.firstCell, cellEl, ["padding-top", "padding-left", "padding-right", "padding-bottom", "border-top", "border-left", "border-right", "border-bottom", "color", "font-weight", "font-family", "font-size"]);
+            if (styles.styleCells[index] || styles.firstCell) {
+              _this8.mapElementStyles(styles.styleCells[index] || styles.firstCell, cellEl, ["padding-top", "padding-left", "padding-right", "padding-bottom", "border-top", "border-left", "border-right", "border-bottom", "color", "font-weight", "font-family", "font-size", "text-align"]);
 
               if (column.definition.align) {
                 cellEl.style.textAlign = column.definition.align;
@@ -15253,8 +15376,9 @@
             });
             editorElement.addEventListener("focus", function (e) {
               var left = _this3.table.columnManager.element.scrollLeft;
+              var headerPos = _this3.table.rowManager.element.scrollLeft + parseInt(_this3.table.columnManager.element.style.marginLeft);
 
-              if (left !== _this3.table.rowManager.element.scrollLeft) {
+              if (left !== headerPos) {
                 _this3.table.rowManager.scrollHorizontal(left);
 
                 _this3.table.columnManager.scrollHorizontal(left);
@@ -16281,6 +16405,7 @@
     var checkbox = document.createElement("input");
     var blocked = false;
     checkbox.type = 'checkbox';
+    checkbox.setAttribute("aria-label", "Select Row");
 
     if (this.table.modExists("selectRow", true)) {
       checkbox.addEventListener("click", function (e) {
@@ -16702,13 +16827,9 @@
         var rows;
 
         if (this.active) {
-          clearTimeout(this.scrollEndTimer); //layout all rows after scroll is complete
-
-          this.scrollEndTimer = setTimeout(function () {
-            _this2.layout();
-          }, 100);
+          clearTimeout(this.scrollEndTimer);
           rows = this.table.rowManager.getVisibleRows();
-          this.calcMargins();
+          this.calcMargins(true);
           this.layoutColumnPosition();
           this.layoutCalcRows();
           rows.forEach(function (row) {
@@ -16716,17 +16837,18 @@
               _this2.layoutRow(row);
             }
           });
-          this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
         }
       } //calculate margins for rows
 
     }, {
       key: "calcMargins",
-      value: function calcMargins() {
-        this.leftMargin = this._calcSpace(this.leftColumns, this.leftColumns.length) + "px";
-        this.table.columnManager.headersElement.style.marginLeft = this.leftMargin;
-        this.rightMargin = this._calcSpace(this.rightColumns, this.rightColumns.length) + "px";
-        this.table.columnManager.element.style.paddingRight = this.rightMargin; //calculate right frozen columns
+      value: function calcMargins(scroll) {
+        if (!scroll) {
+          this.leftMargin = this._calcSpace(this.leftColumns, this.leftColumns.length) + "px";
+          this.rightMargin = this._calcSpace(this.rightColumns, this.rightColumns.length) + "px";
+          this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
+        } //calculate right frozen columns
+
 
         this.rightPadding = this.table.rowManager.element.clientWidth + this.table.columnManager.scrollLeft;
       } //layout calculation rows
@@ -16774,8 +16896,16 @@
         var _this4 = this;
 
         var leftParents = [];
+        var leftMargin = 0;
+        var rightMargin = 0;
+        this.table.columnManager.headersElement.style.marginLeft = this.leftMargin;
+        this.table.columnManager.element.style.paddingRight = this.rightMargin;
         this.leftColumns.forEach(function (column, i) {
-          column.modules.frozen.margin = _this4._calcSpace(_this4.leftColumns, i) + _this4.table.columnManager.scrollLeft + "px";
+          column.modules.frozen.margin = leftMargin + _this4.table.columnManager.scrollLeft + "px";
+
+          if (column.visible) {
+            leftMargin += column.getWidth();
+          }
 
           if (i == _this4.leftColumns.length - 1) {
             column.modules.frozen.edge = true;
@@ -16806,7 +16936,11 @@
           }
         });
         this.rightColumns.forEach(function (column, i) {
-          column.modules.frozen.margin = _this4.rightPadding - _this4._calcSpace(_this4.rightColumns, i + 1) + "px";
+          if (column.visible) {
+            rightMargin += column.getWidth();
+          }
+
+          column.modules.frozen.margin = _this4.rightPadding - rightMargin + "px";
 
           if (i == _this4.rightColumns.length - 1) {
             column.modules.frozen.edge = true;
@@ -16849,7 +16983,6 @@
           this.layoutCalcRows(); //calculate left columns
 
           this.layoutColumnPosition(true);
-          this.table.rowManager.tableElement.style.marginRight = this.rightMargin;
         }
       }
     }, {
@@ -20049,13 +20182,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";
           }
         }
       }
@@ -21243,19 +21374,28 @@
     this.table.modules.localize.langBind("pagination|counter|showing", function (value) {
       showingEl.innerHTML = value;
     });
-    valueEl.innerHTML = " " + currentRow + "-" + Math.min(currentRow + pageSize - 1, totalRows) + " ";
     this.table.modules.localize.langBind("pagination|counter|of", function (value) {
       ofEl.innerHTML = value;
     });
-    totalEl.innerHTML = " " + totalRows + " ";
     this.table.modules.localize.langBind("pagination|counter|rows", function (value) {
       rowsEl.innerHTML = value;
     });
-    el.appendChild(showingEl);
-    el.appendChild(valueEl);
-    el.appendChild(ofEl);
-    el.appendChild(totalEl);
-    el.appendChild(rowsEl);
+
+    if (totalRows) {
+      valueEl.innerHTML = " " + currentRow + "-" + Math.min(currentRow + pageSize - 1, totalRows) + " ";
+      totalEl.innerHTML = " " + totalRows + " ";
+      el.appendChild(showingEl);
+      el.appendChild(valueEl);
+      el.appendChild(ofEl);
+      el.appendChild(totalEl);
+      el.appendChild(rowsEl);
+    } else {
+      valueEl.innerHTML = " 0 ";
+      el.appendChild(showingEl);
+      el.appendChild(valueEl);
+      el.appendChild(rowsEl);
+    }
+
     return el;
   }
 
@@ -21892,17 +22032,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":
@@ -22050,7 +22190,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 = [];
@@ -22067,18 +22214,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);
         }
@@ -22177,7 +22334,7 @@
     }, {
       key: "footerRedraw",
       value: function footerRedraw() {
-        var footer = this.table.footerManager.element;
+        var footer = this.table.footerManager.containerElement;
 
         if (Math.ceil(footer.clientWidth) - footer.scrollWidth < 0) {
           this.pagesElement.style.display = 'none';
@@ -24353,7 +24510,9 @@
             self._deselectRow(self.selectedRows[0], true);
           }
 
-          self._rowSelectionChanged(silent);
+          if (rowCount) {
+            self._rowSelectionChanged(silent);
+          }
         } else {
           if (Array.isArray(rows)) {
             rows.forEach(function (row) {