tabulator-tables 5.0.2 → 5.0.7

package/dist/js/tabulator.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.0.2 (c) Oliver Folkerd 2021 */
+/* Tabulator v5.0.7 (c) Oliver Folkerd 2021 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -731,7 +731,7 @@
     return CellComponent;
   }();
 
-  var Cell$1 = /*#__PURE__*/function (_CoreFeature) {
+  var Cell = /*#__PURE__*/function (_CoreFeature) {
     _inherits(Cell, _CoreFeature);
 
     var _super = _createSuper(Cell);
@@ -1786,8 +1786,7 @@
             this.reinitializeWidth();
           }
 
-          this.table.columnManager._verticalAlignHeaders();
-
+          this.table.columnManager.verticalAlignHeaders();
           this.dispatch("column-show", this, responsiveToggle);
 
           if (!silent) {
@@ -1810,8 +1809,7 @@
         if (this.visible) {
           this.visible = false;
           this.element.style.display = "none";
-
-          this.table.columnManager._verticalAlignHeaders();
+          this.table.columnManager.verticalAlignHeaders();
 
           if (this.parent.isGroup) {
             this.parent.checkColumnVisibility();
@@ -2017,7 +2015,7 @@
     }, {
       key: "generateCell",
       value: function generateCell(row) {
-        var cell = new Cell$1(this, row);
+        var cell = new Cell(this, row);
         this.cells.push(cell);
         return cell;
       }
@@ -2144,7 +2142,7 @@
 
   Column$1.defaultOptionList = defaultOptions$1;
 
-  var Helpers$1 = /*#__PURE__*/function () {
+  var Helpers = /*#__PURE__*/function () {
     function Helpers() {
       _classCallCheck(this, Helpers);
     }
@@ -2165,17 +2163,42 @@
       }
     }, {
       key: "deepClone",
-      value: function deepClone(obj) {
-        var clone = Object.assign(Array.isArray(obj) ? [] : {}, obj);
+      value: function deepClone(obj, clone) {
+        var _this = this;
 
-        for (var i in obj) {
-          if (obj[i] != null && _typeof(obj[i]) === "object") {
-            if (obj[i] instanceof Date) {
-              clone[i] = new Date(obj[i]);
+        var list = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+        var objectProto = {}.__proto__,
+            arrayProto = [].__proto__;
+
+        if (!clone) {
+          clone = Object.assign(Array.isArray(obj) ? [] : {}, obj);
+        }
+
+        var _loop = function _loop() {
+          var subject = obj[i],
+              match = void 0,
+              copy = void 0;
+
+          if (subject != null && _typeof(subject) === "object" && (subject.__proto__ === objectProto || subject.__proto__ === arrayProto)) {
+            match = list.findIndex(function (item) {
+              return item.subject === subject;
+            });
+
+            if (match > -1) {
+              clone[i] = list[match].copy;
             } else {
-              clone[i] = this.deepClone(obj[i]);
+              copy = Object.assign(Array.isArray(subject) ? [] : {}, subject);
+              list.unshift({
+                subject: subject,
+                copy: copy
+              });
+              clone[i] = _this.deepClone(subject, copy, list);
             }
           }
+        };
+
+        for (var i in obj) {
+          _loop();
         }
 
         return clone;
@@ -2389,8 +2412,8 @@
 
 
             if (!ifVisible) {
-              if (Helpers$1.elVisible(rowEl)) {
-                offset = Helpers$1.elOffset(rowEl).top - Helpers$1.elOffset(_this2.elementVertical).top;
+              if (Helpers.elVisible(rowEl)) {
+                offset = Helpers.elOffset(rowEl).top - Helpers.elOffset(_this2.elementVertical).top;
 
                 if (offset > 0 && offset < _this2.elementVertical.clientHeight - rowEl.offsetHeight) {
                   return false;
@@ -3007,6 +3030,7 @@
       value: function createHeadersElement() {
         var el = document.createElement("div");
         el.classList.add("tabulator-headers");
+        el.setAttribute("role", "row");
         return el;
       }
     }, {
@@ -3014,6 +3038,7 @@
       value: function createHeaderElement() {
         var el = document.createElement("div");
         el.classList.add("tabulator-header");
+        el.setAttribute("role", "rowgroup");
 
         if (!this.table.options.headerVisible) {
           el.classList.add("tabulator-header-hidden");
@@ -3173,8 +3198,9 @@
             index = nextToColumn ? this.findColumnIndex(nextToColumn) : nextToColumn;
 
         if (nextToColumn && index > -1) {
-          var parentIndex = this.columns.indexOf(nextToColumn.getTopColumn());
-          var nextEl = nextToColumn.getElement();
+          var topColumn = nextToColumn.getTopColumn();
+          var parentIndex = this.columns.indexOf(topColumn);
+          var nextEl = topColumn.getElement();
 
           if (before) {
             this.columns.splice(parentIndex, 0, column);
@@ -3191,10 +3217,9 @@
             this.columns.push(column);
             this.headersElement.appendChild(column.getElement());
           }
-
-          column.columnRendered();
         }
 
+        column.columnRendered();
         return column;
       }
     }, {
@@ -3219,8 +3244,8 @@
       } //ensure column headers take up the correct amount of space in column groups
 
     }, {
-      key: "_verticalAlignHeaders",
-      value: function _verticalAlignHeaders() {
+      key: "verticalAlignHeaders",
+      value: function verticalAlignHeaders() {
         var _this3 = this;
 
         var minHeight = 0;
@@ -3376,8 +3401,7 @@
           to.element.parentNode.insertBefore(to.element, from.element);
         }
 
-        this._verticalAlignHeaders();
-
+        this.verticalAlignHeaders();
         this.table.rowManager.reinitialize();
       }
     }, {
@@ -3542,13 +3566,11 @@
 
           _this6.dispatch("column-add", definition, before, nextToColumn);
 
-          _this6.redraw(true);
-
           if (_this6.layoutMode() != "fitColumns") {
             column.reinitializeWidth();
           }
 
-          _this6._verticalAlignHeaders();
+          _this6.redraw(true);
 
           _this6.table.rowManager.reinitialize();
 
@@ -3582,19 +3604,18 @@
           this.columns.splice(index, 1);
         }
 
-        this._verticalAlignHeaders();
-
+        this.verticalAlignHeaders();
         this.redraw();
       } //redraw columns
 
     }, {
       key: "redraw",
       value: function redraw(force) {
-        if (force) {
-          if (Helpers$1.elVisible(this.element)) {
-            this._verticalAlignHeaders();
-          }
+        if (Helpers.elVisible(this.element)) {
+          this.verticalAlignHeaders();
+        }
 
+        if (force) {
           this.table.rowManager.resetScroll();
           this.table.rowManager.reinitialize();
         }
@@ -3725,7 +3746,7 @@
     return RowComponent;
   }();
 
-  var Row$1 = /*#__PURE__*/function (_CoreFeature) {
+  var Row = /*#__PURE__*/function (_CoreFeature) {
     _inherits(Row, _CoreFeature);
 
     var _super = _createSuper(Row);
@@ -3968,7 +3989,7 @@
       value: function updateData(updatedData) {
         var _this2 = this;
 
-        var visible = this.element && Helpers$1.elVisible(this.element),
+        var visible = this.element && Helpers.elVisible(this.element),
             tempData = {},
             newRowData;
         return new Promise(function (resolve, reject) {
@@ -4252,14 +4273,14 @@
     }, {
       key: "scrollToRowNearestTop",
       value: function scrollToRowNearestTop(row) {
-        var rowTop = Helpers$1.elOffset(row.getElement()).top;
+        var rowTop = Helpers.elOffset(row.getElement()).top;
         return !(Math.abs(this.elementVertical.scrollTop - rowTop) > Math.abs(this.elementVertical.scrollTop + this.elementVertical.clientHeight - rowTop));
       }
     }, {
       key: "scrollToRow",
       value: function scrollToRow(row) {
         var rowEl = row.getElement();
-        this.elementVertical.scrollTop = Helpers$1.elOffset(rowEl).top - Helpers$1.elOffset(this.elementVertical).top + this.elementVertical.scrollTop;
+        this.elementVertical.scrollTop = Helpers.elOffset(rowEl).top - Helpers.elOffset(this.elementVertical).top + this.elementVertical.scrollTop;
       }
     }, {
       key: "visibleRows",
@@ -4539,7 +4560,7 @@
           position -= topPad;
         }
 
-        if (rowsCount && Helpers$1.elVisible(this.elementVertical)) {
+        if (rowsCount && Helpers.elVisible(this.elementVertical)) {
           this.vDomTop = position;
           this.vDomBottom = position - 1;
 
@@ -4935,6 +4956,7 @@
         var el = document.createElement("div");
         el.classList.add("tabulator-tableholder");
         el.setAttribute("tabindex", 0);
+        el.setAttribute("role", "rowgroup");
         return el;
       }
     }, {
@@ -4942,6 +4964,7 @@
       value: function createTableElement() {
         var el = document.createElement("div");
         el.classList.add("tabulator-table");
+        el.setAttribute("role", "rowgroup");
         return el;
       } //return containing element
 
@@ -5009,7 +5032,7 @@
         var _this3 = this;
 
         if (_typeof(subject) == "object") {
-          if (subject instanceof Row$1) {
+          if (subject instanceof Row) {
             //subject is row element
             return subject;
           } else if (subject instanceof RowComponent$1) {
@@ -5099,7 +5122,7 @@
           this.dispatch("data-processing", data);
           data.forEach(function (def, i) {
             if (def && _typeof(def) === "object") {
-              var row = new Row$1(def, _this5);
+              var row = new Row(def, _this5);
 
               _this5.rows.push(row);
             } else {
@@ -5201,7 +5224,7 @@
             _this6.dispatch("row-added", row, data, pos, index);
           });
 
-          _this6.reRenderInPosition();
+          _this6.refreshActiveData(false, false, true);
 
           _this6.regenerateRowNumbers();
 
@@ -5232,7 +5255,7 @@
     }, {
       key: "addRowActual",
       value: function addRowActual(data, pos, index, blockRedraw) {
-        var row = data instanceof Row$1 ? data : new Row$1(data || {}, this),
+        var row = data instanceof Row ? data : new Row(data || {}, this),
             top = this.findAddRowPos(pos),
             allIndex = -1,
             activeIndex,
@@ -5384,7 +5407,7 @@
           nextRow = this.getDisplayRows()[index + 1];
         }
 
-        if (nextRow && (!(nextRow instanceof Row$1) || nextRow.type != "row")) {
+        if (nextRow && (!(nextRow instanceof Row) || nextRow.type != "row")) {
           return this.nextDisplayRow(nextRow, rowOnly);
         }
 
@@ -5400,7 +5423,7 @@
           prevRow = this.getDisplayRows()[index - 1];
         }
 
-        if (rowOnly && prevRow && (!(prevRow instanceof Row$1) || prevRow.type != "row")) {
+        if (rowOnly && prevRow && (!(prevRow instanceof Row) || prevRow.type != "row")) {
           return this.prevDisplayRow(prevRow, rowOnly);
         }
 
@@ -5581,7 +5604,7 @@
 
           }
 
-          if (Helpers$1.elVisible(this.element)) {
+          if (Helpers.elVisible(this.element)) {
             if (renderInPosition) {
               this.reRenderInPosition();
             } else {
@@ -5756,9 +5779,9 @@
         this.dispatchExternal("renderStarted");
         this.element.scrollTop = 0;
 
-        if (this.displayRowsCount) {
-          this._clearTable();
+        this._clearTable();
 
+        if (this.displayRowsCount) {
           this.renderer.renderRows();
 
           if (this.firstRender) {
@@ -6456,7 +6479,7 @@
               _this2.hideLoader();
 
               if (rowData !== false) {
-                _this2.dispatchExternal("dataLoaded", data);
+                _this2.dispatchExternal("dataLoaded", rowData);
 
                 _this2.table.rowManager.setData(rowData, replace, !replace);
               }
@@ -6573,9 +6596,10 @@
   }(CoreFeature);
 
   var ExternalEventBus = /*#__PURE__*/function () {
-    function ExternalEventBus(optionsList, debug) {
+    function ExternalEventBus(table, optionsList, debug) {
       _classCallCheck(this, ExternalEventBus);
 
+      this.table = table;
       this.events = {};
       this.optionsList = optionsList || {};
       this.subscriptionNotifiers = {};
@@ -6661,7 +6685,7 @@
 
         if (this.events[key]) {
           this.events[key].forEach(function (callback, i) {
-            var callResult = callback.apply(_this, args);
+            var callResult = callback.apply(_this.table, args);
 
             if (!i) {
               result = callResult;
@@ -7392,7 +7416,7 @@
     _createClass(Localize, [{
       key: "initialize",
       value: function initialize() {
-        this.langList = Helpers$1.deepClone(Localize.langs);
+        this.langList = Helpers.deepClone(Localize.langs);
 
         if (this.table.options.columnDefaults.headerFilterPlaceholder !== false) {
           this.setHeaderFilterPlaceholder(this.table.options.columnDefaults.headerFilterPlaceholder);
@@ -7487,7 +7511,7 @@
 
         this.locale = desiredLocale; //load default lang template
 
-        this.lang = Helpers$1.deepClone(this.langList["default"] || {});
+        this.lang = Helpers.deepClone(this.langList["default"] || {});
 
         if (desiredLocale != "default") {
           traverseLang(this.langList[desiredLocale], this.lang);
@@ -7765,6 +7789,8 @@
 
       this.rtl = false; //check if the table is in RTL mode
 
+      this.originalElement = null; //hold original table element if it has been replaced
+
       this.componentFunctionBinder = new ComponentFuctionBinder(this); //bind component functions
 
       this.dataLoader = false; //bind component functions
@@ -7823,36 +7849,13 @@
 
         this._mapDepricatedFunctionality();
 
-        this.externalEvents = new ExternalEventBus(this.options, this.options.debugEventsExternal);
+        this.externalEvents = new ExternalEventBus(this, this.options, this.options.debugEventsExternal);
         this.eventBus = new InternalEventBus(this.options.debugEventsInternal);
         this.interactionMonitor = new InteractionManager(this);
         this.dataLoader.initialize();
         this.columnManager.initialize();
         this.rowManager.initialize();
         this.footerManager.initialize();
-      }
-    }, {
-      key: "rtlCheck",
-      value: function rtlCheck() {
-        var style = window.getComputedStyle(this.element);
-
-        switch (this.options.textDirection) {
-          case "auto":
-            if (style.direction !== "rtl") {
-              break;
-            }
-
-          case "rtl":
-            this.element.classList.add("tabulator-rtl");
-            this.rtl = true;
-            break;
-
-          case "ltr":
-            this.element.classList.add("tabulator-ltr");
-
-          default:
-            this.rtl = false;
-        }
       } //convert depricated functionality to new functions
 
     }, {
@@ -7885,14 +7888,40 @@
       value: function _create() {
         this.externalEvents.dispatch("tableBuilding");
         this.eventBus.dispatch("table-building");
-        this.rtlCheck();
+
+        this._rtlCheck();
 
         this._buildElement();
 
+        this._initializeTable();
+
         this._loadInitialData();
 
         this.initialized = true;
         this.externalEvents.dispatch("tableBuilt");
+      }
+    }, {
+      key: "_rtlCheck",
+      value: function _rtlCheck() {
+        var style = window.getComputedStyle(this.element);
+
+        switch (this.options.textDirection) {
+          case "auto":
+            if (style.direction !== "rtl") {
+              break;
+            }
+
+          case "rtl":
+            this.element.classList.add("tabulator-rtl");
+            this.rtl = true;
+            break;
+
+          case "ltr":
+            this.element.classList.add("tabulator-ltr");
+
+          default:
+            this.rtl = false;
+        }
       } //clear pointers to objects in default config object
 
     }, {
@@ -7909,7 +7938,26 @@
       key: "_buildElement",
       value: function _buildElement() {
         var element = this.element,
-            options = this.options;
+            options = this.options,
+            newElement;
+
+        if (element.tagName === "TABLE") {
+          this.originalElement = this.element;
+          newElement = document.createElement("div"); //transfer attributes to new element
+
+          var attributes = element.attributes; // loop through attributes and apply them on div
+
+          for (var i in attributes) {
+            if (_typeof(attributes[i]) == "object") {
+              newElement.setAttribute(attributes[i].name, attributes[i].value);
+            }
+          } // replace table with div element
+
+
+          element.parentNode.replaceChild(newElement, element);
+          this.element = element = newElement;
+        }
+
         element.classList.add("tabulator");
         element.setAttribute("role", "grid"); //empty element
 
@@ -7934,7 +7982,13 @@
           options.maxHeight = isNaN(options.maxHeight) ? options.maxHeight : options.maxHeight + "px";
           element.style.maxHeight = options.maxHeight;
         }
+      } //initialize core systems and modules
 
+    }, {
+      key: "_initializeTable",
+      value: function _initializeTable() {
+        var element = this.element,
+            options = this.options;
         this.columnManager.initialize();
         this.rowManager.initialize();
 
@@ -8112,7 +8166,11 @@
     }, {
       key: "replaceData",
       value: function replaceData(data, params, config) {
-        return this.dataLoader.load(data, params, config, true, true);
+        if (this.initialized) {
+          return this.dataLoader.load(data, params, config, true, true);
+        } else {
+          console.warn("replaceData failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+        }
       } //update table data
 
     }, {
@@ -8121,59 +8179,68 @@
         var _this3 = this;
 
         var responses = 0;
-        return new Promise(function (resolve, reject) {
-          _this3.dataLoader.blockActiveLoad();
 
-          if (typeof data === "string") {
-            data = JSON.parse(data);
-          }
+        if (this.initialized) {
+          return new Promise(function (resolve, reject) {
+            _this3.dataLoader.blockActiveLoad();
 
-          if (data) {
-            data.forEach(function (item) {
-              var row = _this3.rowManager.findRow(item[_this3.options.index]);
+            if (typeof data === "string") {
+              data = JSON.parse(data);
+            }
 
-              if (row) {
-                responses++;
-                row.updateData(item).then(function () {
-                  responses--;
+            if (data) {
+              data.forEach(function (item) {
+                var row = _this3.rowManager.findRow(item[_this3.options.index]);
 
-                  if (!responses) {
-                    resolve();
-                  }
-                });
-              }
-            });
-          } else {
-            console.warn("Update Error - No data provided");
-            reject("Update Error - No data provided");
-          }
-        });
+                if (row) {
+                  responses++;
+                  row.updateData(item).then(function () {
+                    responses--;
+
+                    if (!responses) {
+                      resolve();
+                    }
+                  });
+                }
+              });
+            } else {
+              console.warn("Update Error - No data provided");
+              reject("Update Error - No data provided");
+            }
+          });
+        } else {
+          console.warn("updateData failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+        }
       }
     }, {
       key: "addData",
       value: function addData(data, pos, index) {
         var _this4 = this;
 
-        return new Promise(function (resolve, reject) {
-          _this4.dataLoader.blockActiveLoad();
+        if (this.initialized) {
+          return new Promise(function (resolve, reject) {
+            _this4.dataLoader.blockActiveLoad();
 
-          if (typeof data === "string") {
-            data = JSON.parse(data);
-          }
+            if (typeof data === "string") {
+              data = JSON.parse(data);
+            }
 
-          if (data) {
-            _this4.rowManager.addRows(data, pos, index).then(function (rows) {
-              var output = [];
-              rows.forEach(function (row) {
-                output.push(row.getComponent());
+            if (data) {
+              _this4.rowManager.addRows(data, pos, index).then(function (rows) {
+                var output = [];
+                rows.forEach(function (row) {
+                  output.push(row.getComponent());
+                });
+                resolve(output);
               });
-              resolve(output);
-            });
-          } else {
-            console.warn("Update Error - No data provided");
-            reject("Update Error - No data provided");
-          }
-        });
+            } else {
+              console.warn("Update Error - No data provided");
+              reject("Update Error - No data provided");
+            }
+          });
+        } else {
+          console.warn("addData failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+        }
       } //update table data
 
     }, {
@@ -8183,44 +8250,49 @@
 
         var rows = [],
             responses = 0;
-        return new Promise(function (resolve, reject) {
-          _this5.dataLoader.blockActiveLoad();
 
-          if (typeof data === "string") {
-            data = JSON.parse(data);
-          }
+        if (this.initialized) {
+          return new Promise(function (resolve, reject) {
+            _this5.dataLoader.blockActiveLoad();
 
-          if (data) {
-            data.forEach(function (item) {
-              var row = _this5.rowManager.findRow(item[_this5.options.index]);
+            if (typeof data === "string") {
+              data = JSON.parse(data);
+            }
 
-              responses++;
+            if (data) {
+              data.forEach(function (item) {
+                var row = _this5.rowManager.findRow(item[_this5.options.index]);
 
-              if (row) {
-                row.updateData(item).then(function () {
-                  responses--;
-                  rows.push(row.getComponent());
+                responses++;
 
-                  if (!responses) {
-                    resolve(rows);
-                  }
-                });
-              } else {
-                _this5.rowManager.addRows(item).then(function (newRows) {
-                  responses--;
-                  rows.push(newRows[0].getComponent());
+                if (row) {
+                  row.updateData(item).then(function () {
+                    responses--;
+                    rows.push(row.getComponent());
 
-                  if (!responses) {
-                    resolve(rows);
-                  }
-                });
-              }
-            });
-          } else {
-            console.warn("Update Error - No data provided");
-            reject("Update Error - No data provided");
-          }
-        });
+                    if (!responses) {
+                      resolve(rows);
+                    }
+                  });
+                } else {
+                  _this5.rowManager.addRows(item).then(function (newRows) {
+                    responses--;
+                    rows.push(newRows[0].getComponent());
+
+                    if (!responses) {
+                      resolve(rows);
+                    }
+                  });
+                }
+              });
+            } else {
+              console.warn("Update Error - No data provided");
+              reject("Update Error - No data provided");
+            }
+          });
+        } else {
+          console.warn("updateOrAddData failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+        }
       } //get row object
 
     }, {
@@ -8298,13 +8370,17 @@
     }, {
       key: "addRow",
       value: function addRow(data, pos, index) {
-        if (typeof data === "string") {
-          data = JSON.parse(data);
-        }
+        if (this.initialized) {
+          if (typeof data === "string") {
+            data = JSON.parse(data);
+          }
 
-        return this.rowManager.addRows(data, pos, index).then(function (rows) {
-          return rows[0].getComponent();
-        });
+          return this.rowManager.addRows(data, pos, index).then(function (rows) {
+            return rows[0].getComponent();
+          });
+        } else {
+          console.warn("addRow failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+        }
       } //update a row if it exitsts otherwise create it
 
     }, {
@@ -8372,7 +8448,11 @@
     }, {
       key: "getRows",
       value: function getRows(active) {
-        return this.rowManager.getComponents(active);
+        if (this.initialized) {
+          return this.rowManager.getComponents(active);
+        } else {
+          console.warn("getRows failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+        }
       } //get position of row in table
 
     }, {
@@ -8391,7 +8471,11 @@
     }, {
       key: "setColumns",
       value: function setColumns(definition) {
-        this.columnManager.setColumns(definition);
+        if (this.initialized) {
+          this.columnManager.setColumns(definition);
+        } else {
+          console.warn("setColumns failed - table not yet initialized. To set initial data please use the 'columns' property in the table constructor.");
+        }
       }
     }, {
       key: "getColumns",
@@ -8525,8 +8609,12 @@
     }, {
       key: "redraw",
       value: function redraw(force) {
-        this.columnManager.redraw(force);
-        this.rowManager.redraw(force);
+        if (this.initialized) {
+          this.columnManager.redraw(force);
+          this.rowManager.redraw(force);
+        } else {
+          console.warn("redraw failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.");
+        }
       }
     }, {
       key: "setHeight",
@@ -8644,6 +8732,8 @@
     }, {
       key: "initializeColumn",
       value: function initializeColumn(column) {
+        var _this2 = this;
+
         var match = false,
             config = {};
         this.allowedTypes.forEach(function (type) {
@@ -8651,7 +8741,7 @@
               accessor;
 
           if (column.definition[key]) {
-            accessor = this.lookupAccessor(column.definition[key]);
+            accessor = _this2.lookupAccessor(column.definition[key]);
 
             if (accessor) {
               match = true;
@@ -8696,7 +8786,7 @@
         var key = "accessor" + (type.charAt(0).toUpperCase() + type.slice(1)),
             rowComponent = row.getComponent(); //clone data object with deep copy to isolate internal data from returned result
 
-        var data = Helpers$1.deepClone(row.data || {});
+        var data = Helpers.deepClone(row.data || {});
         this.table.columnManager.traverse(function (column) {
           var value, accessor, params, colCompnent;
 
@@ -8857,6 +8947,28 @@
     });
   }
 
+  function generateParamsList$1(data, prefix) {
+    var output = [];
+    prefix = prefix || "";
+
+    if (Array.isArray(data)) {
+      data.forEach(function (item, i) {
+        output = output.concat(generateParamsList$1(item, prefix ? prefix + "[" + i + "]" : i));
+      });
+    } else if (_typeof(data) === "object") {
+      for (var key in data) {
+        output = output.concat(generateParamsList$1(data[key], prefix ? prefix + "[" + key + "]" : key));
+      }
+    } else {
+      output.push({
+        key: prefix,
+        value: data
+      });
+    }
+
+    return output;
+  }
+
   var defaultContentTypeFormatters = {
     "json": {
       headers: {
@@ -8869,7 +8981,7 @@
     "form": {
       headers: {},
       body: function body(url, config, params) {
-        var output = this.generateParamsList(params),
+        var output = generateParamsList$1(params),
             form = new FormData();
         output.forEach(function (item) {
           form.append(item.key, item.value);
@@ -9959,7 +10071,7 @@
           this.table.modules.mutator.disable();
         }
 
-        row = new Row$1(rowData, this, "calc");
+        row = new Row(rowData, this, "calc");
 
         if (this.table.modExists("mutator")) {
           this.table.modules.mutator.enable();
@@ -10000,7 +10112,7 @@
 
             _this4.genColumn.definition.cssClass = column.definition.cssClass; //generate cell and assign to correct column
 
-            var cell = new Cell$1(_this4.genColumn, row);
+            var cell = new Cell(_this4.genColumn, row);
             cell.getElement();
             cell.column = column;
             cell.setWidth();
@@ -10434,7 +10546,7 @@
           var config, children;
           output.push(row);
 
-          if (row instanceof Row$1) {
+          if (row instanceof Row) {
             row.create();
             config = row.modules.dataTree.children;
 
@@ -10499,7 +10611,7 @@
         }
 
         childArray.forEach(function (childData) {
-          var childRow = new Row$1(childData || {}, _this6.table.rowManager);
+          var childRow = new Row(childData || {}, _this6.table.rowManager);
           childRow.create();
           childRow.modules.dataTree.index = row.modules.dataTree.index + 1;
           childRow.modules.dataTree.parent = row;
@@ -10573,7 +10685,7 @@
           }
 
           children.forEach(function (childRow) {
-            if (childRow instanceof Row$1) {
+            if (childRow instanceof Row) {
               output.push(childRow);
             }
           });
@@ -10646,7 +10758,7 @@
         var match = false;
 
         if (_typeof(subject) == "object") {
-          if (subject instanceof Row$1) {
+          if (subject instanceof Row) {
             //subject is row element
             match = subject.data;
           } else if (subject instanceof RowComponent) {
@@ -10655,7 +10767,7 @@
           } else if (typeof HTMLElement !== "undefined" && subject instanceof HTMLElement) {
             if (parent.modules.dataTree) {
               match = parent.modules.dataTree.children.find(function (childRow) {
-                return childRow instanceof Row$1 ? childRow.element === subject : false;
+                return childRow instanceof Row ? childRow.element === subject : false;
               });
 
               if (match) {
@@ -10699,7 +10811,7 @@
           }
 
           config.children.forEach(function (childRow) {
-            if (childRow instanceof Row$1) {
+            if (childRow instanceof Row) {
               output.push(component ? childRow.getComponent() : childRow);
 
               if (recurse) {
@@ -10715,7 +10827,7 @@
       key: "checkForRestyle",
       value: function checkForRestyle(cell) {
         if (!cell.row.cells.indexOf(cell)) {
-          cell.row.reinitialize();
+          this.layoutRow(cell.row);
         }
       }
     }, {
@@ -12015,7 +12127,7 @@
           parseItems(editorParams.values || [], initialDisplayValue);
         }
 
-        var offset = Helpers$1.elOffset(cellEl);
+        var offset = Helpers.elOffset(cellEl);
         listEl.style.minWidth = cellEl.offsetWidth + "px";
         listEl.style.top = offset.top + cellEl.offsetHeight + "px";
         listEl.style.left = offset.left + "px";
@@ -12471,7 +12583,7 @@
           listEl.removeChild(listEl.firstChild);
         }
 
-        var offset = Helpers$1.elOffset(cellEl);
+        var offset = Helpers.elOffset(cellEl);
         listEl.style.minWidth = cellEl.offsetWidth + "px";
         listEl.style.top = offset.top + cellEl.offsetHeight + "px";
         listEl.style.left = offset.left + "px";
@@ -12778,9 +12890,11 @@
 
   //draggable progress bar
   function progress (cell, onRendered, success, cancel, editorParams) {
+    var _element$getElementsB, _element$getElementsB2;
+
     var element = cell.getElement(),
-        max = typeof editorParams.max === "undefined" ? element.getElementsByTagName("div")[0].getAttribute("max") || 100 : editorParams.max,
-        min = typeof editorParams.min === "undefined" ? element.getElementsByTagName("div")[0].getAttribute("min") || 0 : editorParams.min,
+        max = typeof editorParams.max === "undefined" ? ((_element$getElementsB = element.getElementsByTagName("div")[0]) === null || _element$getElementsB === void 0 ? void 0 : _element$getElementsB.getAttribute("max")) || 100 : editorParams.max,
+        min = typeof editorParams.min === "undefined" ? ((_element$getElementsB2 = element.getElementsByTagName("div")[0]) === null || _element$getElementsB2 === void 0 ? void 0 : _element$getElementsB2.getAttribute("min")) || 0 : editorParams.min,
         percent = (max - min) / 100,
         value = cell.getValue() || 0,
         handle = document.createElement("div"),
@@ -13173,7 +13287,7 @@
               nextCell = this.findNextEditableCell(prevRow, prevRow.cells.length);
 
               if (nextCell) {
-                nextCell.edit();
+                nextCell.getComponent().edit();
                 return true;
               }
             }
@@ -13205,7 +13319,7 @@
               nextCell = this.findNextEditableCell(nextRow, -1);
 
               if (nextCell) {
-                nextCell.edit();
+                nextCell.getComponent().edit();
                 return true;
               }
             }
@@ -13230,7 +13344,7 @@
           nextCell = this.findPrevEditableCell(cell.row, index);
 
           if (nextCell) {
-            nextCell.edit();
+            nextCell.getComponent().edit();
             return true;
           }
         }
@@ -13253,7 +13367,7 @@
           nextCell = this.findNextEditableCell(cell.row, index);
 
           if (nextCell) {
-            nextCell.edit();
+            nextCell.getComponent().edit();
             return true;
           }
         }
@@ -13276,7 +13390,7 @@
           nextRow = this.table.rowManager.prevDisplayRow(cell.row, true);
 
           if (nextRow) {
-            nextRow.cells[index].edit();
+            nextRow.cells[index].getComponent().edit();
             return true;
           }
         }
@@ -13299,7 +13413,7 @@
           nextRow = this.table.rowManager.nextDisplayRow(cell.row, true);
 
           if (nextRow) {
-            nextRow.cells[index].edit();
+            nextRow.cells[index].getComponent().edit();
             return true;
           }
         }
@@ -14500,6 +14614,8 @@
       _this.prevHeaderFilterChangeCheck = "{}";
       _this.changed = false; //has filtering changed since last render
 
+      _this.tableInitialized = false;
+
       _this.registerTableOption("filterMode", "local"); //local or remote filtering
 
 
@@ -14598,6 +14714,8 @@
             }
           });
         }
+
+        this.tableInitialized = true;
       }
     }, {
       key: "remoteFilterParams",
@@ -15066,10 +15184,12 @@
     }, {
       key: "refreshFilter",
       value: function refreshFilter() {
-        if (this.table.options.filterMode === "remote") {
-          this.reloadData();
-        } else {
-          this.refreshData();
+        if (this.tableInitialized) {
+          if (this.table.options.filterMode === "remote") {
+            this.reloadData();
+          } else {
+            this.refreshData();
+          }
         } //TODO - Persist left position of row manager
         // left = this.scrollLeft;
         // this.scrollHorizontal(left);
@@ -15451,12 +15571,14 @@
 
   function money (cell, formatterParams, onRendered) {
     var floatVal = parseFloat(cell.getValue()),
+        sign = "",
         number,
         integer,
         decimal,
         rgx;
     var decimalSym = formatterParams.decimal || ".";
     var thousandSym = formatterParams.thousand || ",";
+    var negativeSign = formatterParams.negativeSign || "-";
     var symbol = formatterParams.symbol || "";
     var after = !!formatterParams.symbolAfter;
     var precision = typeof formatterParams.precision !== "undefined" ? formatterParams.precision : 2;
@@ -15465,6 +15587,11 @@
       return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
     }
 
+    if (floatVal < 0) {
+      floatVal = Math.abs(floatVal);
+      sign = negativeSign;
+    }
+
     number = precision !== false ? floatVal.toFixed(precision) : floatVal;
     number = String(number).split(".");
     integer = number[0];
@@ -15475,7 +15602,7 @@
       integer = integer.replace(rgx, "$1" + thousandSym + "$2");
     }
 
-    return after ? integer + decimal + symbol : symbol + integer + decimal;
+    return after ? sign + integer + decimal + symbol : sign + symbol + integer + decimal;
   }
 
   function link (cell, formatterParams, onRendered) {
@@ -16382,29 +16509,52 @@
           if (this.table.modules.columnCalcs.botInitialized && this.table.modules.columnCalcs.botRow) {
             this.layoutRow(this.table.modules.columnCalcs.botRow);
           }
+
+          if (this.table.modExists("groupRows")) {
+            this.layoutGroupCalcs(this.table.modules.groupRows.getGroups());
+          }
         }
+      }
+    }, {
+      key: "layoutGroupCalcs",
+      value: function layoutGroupCalcs(groups) {
+        var _this3 = this;
+
+        groups.forEach(function (group) {
+          if (group.calcs.top) {
+            _this3.layoutRow(group.calcs.top);
+          }
+
+          if (group.calcs.bottom) {
+            _this3.layoutRow(group.calcs.bottom);
+          }
+
+          if (group.groupList && group.groupList.length) {
+            _this3.layoutGroupCalcs(group.groupList && group.groupList);
+          }
+        });
       } //calculate column positions and layout headers
 
     }, {
       key: "layoutColumnPosition",
       value: function layoutColumnPosition(allCells) {
-        var _this3 = this;
+        var _this4 = this;
 
         var leftParents = [];
         this.leftColumns.forEach(function (column, i) {
-          column.modules.frozen.margin = _this3._calcSpace(_this3.leftColumns, i) + _this3.table.columnManager.scrollLeft + "px";
+          column.modules.frozen.margin = _this4._calcSpace(_this4.leftColumns, i) + _this4.table.columnManager.scrollLeft + "px";
 
-          if (i == _this3.leftColumns.length - 1) {
+          if (i == _this4.leftColumns.length - 1) {
             column.modules.frozen.edge = true;
           } else {
             column.modules.frozen.edge = false;
           }
 
           if (column.parent.isGroup) {
-            var parentEl = _this3.getColGroupParentElement(column);
+            var parentEl = _this4.getColGroupParentElement(column);
 
             if (!leftParents.includes(parentEl)) {
-              _this3.layoutElement(parentEl, column);
+              _this4.layoutElement(parentEl, column);
 
               leftParents.push(parentEl);
             }
@@ -16413,33 +16563,33 @@
               parentEl.classList.add("tabulator-frozen-" + column.modules.frozen.position);
             }
           } else {
-            _this3.layoutElement(column.getElement(), column);
+            _this4.layoutElement(column.getElement(), column);
           }
 
           if (allCells) {
             column.cells.forEach(function (cell) {
-              _this3.layoutElement(cell.getElement(true), column);
+              _this4.layoutElement(cell.getElement(true), column);
             });
           }
         });
         this.rightColumns.forEach(function (column, i) {
-          column.modules.frozen.margin = _this3.rightPadding - _this3._calcSpace(_this3.rightColumns, i + 1) + "px";
+          column.modules.frozen.margin = _this4.rightPadding - _this4._calcSpace(_this4.rightColumns, i + 1) + "px";
 
-          if (i == _this3.rightColumns.length - 1) {
+          if (i == _this4.rightColumns.length - 1) {
             column.modules.frozen.edge = true;
           } else {
             column.modules.frozen.edge = false;
           }
 
           if (column.parent.isGroup) {
-            _this3.layoutElement(_this3.getColGroupParentElement(column), column);
+            _this4.layoutElement(_this4.getColGroupParentElement(column), column);
           } else {
-            _this3.layoutElement(column.getElement(), column);
+            _this4.layoutElement(column.getElement(), column);
           }
 
           if (allCells) {
             column.cells.forEach(function (cell) {
-              _this3.layoutElement(cell.getElement(true), column);
+              _this4.layoutElement(cell.getElement(true), column);
             });
           }
         });
@@ -16453,14 +16603,14 @@
     }, {
       key: "layout",
       value: function layout() {
-        var _this4 = this;
+        var _this5 = this;
 
         if (this.active) {
           //calculate row padding
           this.calcMargins();
           this.table.rowManager.getDisplayRows().forEach(function (row) {
             if (row.type === "row") {
-              _this4.layoutRow(row);
+              _this5.layoutRow(row);
             }
           });
           this.layoutCalcRows(); //calculate left columns
@@ -16472,7 +16622,7 @@
     }, {
       key: "layoutRow",
       value: function layoutRow(row) {
-        var _this5 = this;
+        var _this6 = this;
 
         var rowEl = row.getElement();
         rowEl.style.paddingLeft = this.leftMargin;
@@ -16480,14 +16630,14 @@
           var cell = row.getCell(column);
 
           if (cell) {
-            _this5.layoutElement(cell.getElement(true), column);
+            _this6.layoutElement(cell.getElement(true), column);
           }
         });
         this.rightColumns.forEach(function (column) {
           var cell = row.getCell(column);
 
           if (cell) {
-            _this5.layoutElement(cell.getElement(true), column);
+            _this6.layoutElement(cell.getElement(true), column);
           }
         });
       }
@@ -16623,7 +16773,11 @@
 
         if (index > -1) {
           var rowEl = row.getElement();
-          rowEl.parentNode.removeChild(rowEl);
+
+          if (rowEl.parentNode) {
+            rowEl.parentNode.removeChild(rowEl);
+          }
+
           this.rows.splice(index, 1);
         }
       }
@@ -17331,7 +17485,7 @@
         this.initialized = false;
         this.height = 0;
 
-        if (Helpers$1.elVisible(this.element)) {
+        if (Helpers.elVisible(this.element)) {
           this.initialize(true);
         }
       }
@@ -17365,7 +17519,10 @@
       value: function setCellHeight() {}
     }, {
       key: "clearCellHeight",
-      value: function clearCellHeight() {} //////////////// Object Generation /////////////////
+      value: function clearCellHeight() {}
+    }, {
+      key: "deinitializeHeight",
+      value: function deinitializeHeight() {} //////////////// Object Generation /////////////////
 
     }, {
       key: "getComponent",
@@ -17458,6 +17615,30 @@
     _createClass(GroupRows, [{
       key: "initialize",
       value: function initialize() {
+        if (this.table.options.groupBy) {
+          this.configureGroupSetup();
+
+          if (this.table.options.groupUpdateOnCellEdit) {
+            this.subscribe("cell-value-updated", this.cellUpdated.bind(this));
+            this.subscribe("row-data-changed", this.reassignRowToGroup.bind(this), 0);
+          }
+
+          this.subscribe("row-deleting", this.rowDeleting.bind(this));
+          this.subscribe("row-deleted", this.rowsUpdated.bind(this));
+          this.subscribe("scroll-horizontal", this.scrollHeaders.bind(this));
+          this.subscribe("rows-wipe", this.wipe.bind(this));
+          this.subscribe("rows-added", this.rowsUpdated.bind(this));
+          this.subscribe("row-moving", this.rowMoving.bind(this));
+          this.subscribe("row-adding-index", this.rowAddingIndex.bind(this));
+          this.subscribe("rows-sample", this.rowSample.bind(this));
+          this.subscribe("render-virtual-fill", this.virtualRenderFill.bind(this));
+          this.registerDisplayHandler(this.displayHandler, 20);
+          this.initialized = true;
+        }
+      }
+    }, {
+      key: "configureGroupSetup",
+      value: function configureGroupSetup() {
         var _this2 = this;
 
         if (this.table.options.groupBy) {
@@ -17547,23 +17728,6 @@
           if (groupHeader) {
             this.headerGenerator = Array.isArray(groupHeader) ? groupHeader : [groupHeader];
           }
-
-          if (this.table.options.groupUpdateOnCellEdit) {
-            this.subscribe("cell-value-updated", this.cellUpdated.bind(this));
-            this.subscribe("row-data-changed", this.reassignRowToGroup.bind(this), 0);
-          }
-
-          this.subscribe("row-deleting", this.rowDeleting.bind(this));
-          this.subscribe("row-deleted", this.rowsUpdated.bind(this));
-          this.subscribe("scroll-horizontal", this.scrollHeaders.bind(this));
-          this.subscribe("rows-wipe", this.wipe.bind(this));
-          this.subscribe("rows-added", this.rowsUpdated.bind(this));
-          this.subscribe("row-moving", this.rowMoving.bind(this));
-          this.subscribe("row-adding-index", this.rowAddingIndex.bind(this));
-          this.subscribe("rows-sample", this.rowSample.bind(this));
-          this.subscribe("render-virtual-fill", this.virtualRenderFill.bind(this));
-          this.registerDisplayHandler(this.displayHandler, 20);
-          this.initialized = true;
         }
       }
     }, {
@@ -17625,23 +17789,23 @@
       key: "setGroupBy",
       value: function setGroupBy(groups) {
         this.table.options.groupBy = groups;
-        this.initialize();
-        this.refreshData(false, "display");
+        this.configureGroupSetup();
+        this.refreshData();
         this.trackChanges();
       }
     }, {
       key: "setGroupValues",
       value: function setGroupValues(groupValues) {
         this.table.options.groupValues = groupValues;
-        this.initialize();
-        this.refreshData(false, "display");
+        this.configureGroupSetup();
+        this.refreshData();
         this.trackChanges();
       }
     }, {
       key: "setGroupStartOpen",
       value: function setGroupStartOpen(values) {
         this.table.options.groupStartOpen = values;
-        this.initialize();
+        this.configureGroupSetup();
 
         if (this.table.options.groupBy) {
           this.refreshData();
@@ -17654,7 +17818,7 @@
       key: "setGroupHeader",
       value: function setGroupHeader(values) {
         this.table.options.groupHeader = values;
-        this.initialize();
+        this.configureGroupSetup();
 
         if (this.table.options.groupBy) {
           this.refreshData();
@@ -17737,14 +17901,12 @@
     }, {
       key: "getRows",
       value: function getRows(rows) {
-        if (this.groupIDLookups.length) {
-          if (!Object.keys(this.groups).length) {
-            this.dispatchExternal("dataGrouping");
-            this.generateGroups(rows);
+        if (this.table.options.groupBy && this.groupIDLookups.length) {
+          this.dispatchExternal("dataGrouping");
+          this.generateGroups(rows);
 
-            if (this.subscribedExternal("dataGrouped")) {
-              this.dispatchExternal("dataGrouped", this.getGroups(true));
-            }
+          if (this.subscribedExternal("dataGrouped")) {
+            this.dispatchExternal("dataGrouped", this.getGroups(true));
           }
 
           return this.updateGroupRows();
@@ -17980,6 +18142,7 @@
   var defaultUndoers = {
     cellEdit: function cellEdit(action) {
       action.component.setValueProcessData(action.data.oldValue);
+      action.component.cellRendered();
     },
     rowAdd: function rowAdd(action) {
       action.component.deleteActual();
@@ -18002,6 +18165,7 @@
   var defaultRedoers = {
     cellEdit: function cellEdit(action) {
       action.component.setValueProcessData(action.data.newValue);
+      action.component.cellRendered();
     },
     rowAdd: function rowAdd(action) {
       var newRow = this.table.rowManager.addRowActual(action.data.data, action.data.pos, action.data.index);
@@ -18098,7 +18262,7 @@
           }
         }
 
-        this.history.action("rowDelete", row, {
+        this.action("rowDelete", row, {
           data: row.getData(),
           pos: !index,
           index: index
@@ -18233,19 +18397,19 @@
     _createClass(HtmlTableImport, [{
       key: "initialize",
       value: function initialize() {
-        this.subscribe("table-building", this.tableElementCheck.bind(this));
+        this.tableElementCheck();
       }
     }, {
       key: "tableElementCheck",
       value: function tableElementCheck() {
-        if (this.table.element.tagName === "TABLE") {
+        if (this.table.originalElement && this.table.originalElement.tagName === "TABLE") {
           this.parseTable();
         }
       }
     }, {
       key: "parseTable",
       value: function parseTable() {
-        var element = this.table.element,
+        var element = this.table.originalElement,
             options = this.table.options,
             columns = options.columns,
             headers = element.getElementsByTagName("th"),
@@ -18283,24 +18447,10 @@
 
 
           data.push(item);
-        } //create new element
-
-
-        var newElement = document.createElement("div"); //transfer attributes to new element
-
-        var attributes = element.attributes; // loop through attributes and apply them on div
-
-        for (var i in attributes) {
-          if (_typeof(attributes[i]) == "object") {
-            newElement.setAttribute(attributes[i].name, attributes[i].value);
-          }
-        } // replace table with div element
-
+        }
 
-        element.parentNode.replaceChild(newElement, element);
         options.data = data;
         this.dispatchExternal("htmlImported");
-        this.table.element = newElement;
       } //extract tabulator attribute options
 
     }, {
@@ -18380,7 +18530,7 @@
 
           header.attributes; // //check for tablator inline options
 
-          this._extractOptions(header, col, Column.prototype.defaultOptionList);
+          this._extractOptions(header, col, Column$1.prototype.defaultOptionList);
 
           this.fieldIndex[index] = col.field;
 
@@ -18728,7 +18878,7 @@
             callback;
 
         if (this.columnSubscribers[action]) {
-          if (component instanceof Cell$1) {
+          if (component instanceof Cell) {
             callback = component.column.definition[action];
           } else if (component instanceof Column$1) {
             callback = component.definition[action];
@@ -19352,7 +19502,7 @@
           y = touch ? e.touches[0].pageY : e.pageY;
           this.positionReversedX = false;
         } else {
-          parentOffset = Helpers$1.elOffset(parentEl);
+          parentOffset = Helpers.elOffset(parentEl);
           x = parentOffset.left + parentEl.offsetWidth;
           y = parentOffset.top - 1;
         }
@@ -19492,7 +19642,7 @@
 
           config.mousemove = function (e) {
             if (column.parent === self.moving.parent) {
-              if ((self.touchMove ? e.touches[0].pageX : e.pageX) - Helpers$1.elOffset(colEl).left + self.table.columnManager.element.scrollLeft > column.getWidth() / 2) {
+              if ((self.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(colEl).left + self.table.columnManager.element.scrollLeft > column.getWidth() / 2) {
                 if (self.toCol !== column || !self.toColAfter) {
                   colEl.parentNode.insertBefore(self.placeholderElement, colEl.nextSibling);
                   self.moveColumn(column, true);
@@ -19617,9 +19767,11 @@
     }, {
       key: "startMove",
       value: function startMove(e, column) {
-        var element = column.getElement();
+        var element = column.getElement(),
+            headerElement = this.table.columnManager.getElement(),
+            headersElement = this.table.columnManager.getHeadersElement();
         this.moving = column;
-        this.startX = (this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers$1.elOffset(element).left;
+        this.startX = (this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(element).left;
         this.table.element.classList.add("tabulator-block-select"); //create placeholder
 
         this.placeholderElement.style.width = column.getWidth() + "px";
@@ -19631,7 +19783,7 @@
         this.hoverElement.classList.add("tabulator-moving");
         this.table.columnManager.getElement().appendChild(this.hoverElement);
         this.hoverElement.style.left = "0";
-        this.hoverElement.style.bottom = "0";
+        this.hoverElement.style.bottom = headerElement.clientHeight - headersElement.offsetHeight + "px";
 
         if (!this.touchMove) {
           this._bindMouseMove();
@@ -19671,7 +19823,7 @@
           column.getCells().forEach(function (cell, i) {
             var cellEl = cell.getElement(true);
 
-            if (cellEl.parentNode) {
+            if (cellEl.parentNode && movingCells[i]) {
               cellEl.parentNode.insertBefore(movingCells[i].getElement(), cellEl.nextSibling);
             }
           });
@@ -19679,7 +19831,7 @@
           column.getCells().forEach(function (cell, i) {
             var cellEl = cell.getElement(true);
 
-            if (cellEl.parentNode) {
+            if (cellEl.parentNode && movingCells[i]) {
               cellEl.parentNode.insertBefore(movingCells[i].getElement(), cellEl);
             }
           });
@@ -19717,7 +19869,7 @@
 
         var columnHolder = this.table.columnManager.getElement(),
             scrollLeft = columnHolder.scrollLeft,
-            xPos = (this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers$1.elOffset(columnHolder).left + scrollLeft,
+            xPos = (this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(columnHolder).left + scrollLeft,
             scrollPos;
         this.hoverElement.style.left = xPos - this.startX + "px";
 
@@ -19841,7 +19993,7 @@
 
 
         config.mousemove = function (e) {
-          if (e.pageY - Helpers$1.elOffset(group.element).top + self.table.rowManager.element.scrollTop > group.getHeight() / 2) {
+          if (e.pageY - Helpers.elOffset(group.element).top + self.table.rowManager.element.scrollTop > group.getHeight() / 2) {
             if (self.toRow !== group || !self.toRowAfter) {
               var rowEl = group.getElement();
               rowEl.parentNode.insertBefore(self.placeholderElement, rowEl.nextSibling);
@@ -19876,7 +20028,7 @@
         config.mousemove = function (e) {
           var rowEl = row.getElement();
 
-          if (e.pageY - Helpers$1.elOffset(rowEl).top + self.table.rowManager.element.scrollTop > row.getHeight() / 2) {
+          if (e.pageY - Helpers.elOffset(rowEl).top + self.table.rowManager.element.scrollTop > row.getHeight() / 2) {
             if (self.toRow !== row || !self.toRowAfter) {
               rowEl.parentNode.insertBefore(self.placeholderElement, rowEl.nextSibling);
               self.moveRow(row, true);
@@ -20846,7 +20998,6 @@
           if (Array.isArray(this.table.options.paginationSizeSelector)) {
             pageSizes = this.table.options.paginationSizeSelector;
             this.pageSizes = pageSizes;
-            console.log("gen", this.size);
 
             if (this.pageSizes.indexOf(this.size) == -1) {
               pageSizes.unshift(this.size);
@@ -21100,7 +21251,6 @@
           this.generatePageSizeSelectList();
         }
 
-        console.log("set", size, this.size);
         this.trackChanges();
       } //setup the pagination buttons
 
@@ -22054,10 +22204,8 @@
     }, {
       key: "watchData",
       value: function watchData(data) {
-        var _arguments = arguments,
-            _this2 = this;
-
-        var version;
+        var self = this,
+            version;
         this.currentVersion++;
         version = this.currentVersion;
         this.unwatchData();
@@ -22068,15 +22216,15 @@
           enumerable: false,
           configurable: true,
           value: function value() {
-            var args = Array.from(_arguments);
+            var args = Array.from(arguments);
 
-            if (!_this2.blocked && version === _this2.currentVersion) {
+            if (!self.blocked && version === self.currentVersion) {
               args.forEach(function (arg) {
-                _this2.table.rowManager.addRowActual(arg, false);
+                self.table.rowManager.addRowActual(arg, false);
               });
             }
 
-            return _this2.origFuncs.push.apply(data, _arguments);
+            return self.origFuncs.push.apply(data, arguments);
           }
         }); //override array unshift function
 
@@ -22085,15 +22233,15 @@
           enumerable: false,
           configurable: true,
           value: function value() {
-            var args = Array.from(_arguments);
+            var args = Array.from(arguments);
 
-            if (!_this2.blocked && version === _this2.currentVersion) {
+            if (!self.blocked && version === self.currentVersion) {
               args.forEach(function (arg) {
-                _this2.table.rowManager.addRowActual(arg, true);
+                self.table.rowManager.addRowActual(arg, true);
               });
             }
 
-            return _this2.origFuncs.unshift.apply(data, _arguments);
+            return self.origFuncs.unshift.apply(data, arguments);
           }
         }); //override array shift function
 
@@ -22104,9 +22252,9 @@
           value: function value() {
             var row;
 
-            if (!_this2.blocked && version === _this2.currentVersion) {
-              if (_this2.data.length) {
-                row = _this2.table.rowManager.getRowFromDataObject(_this2.data[0]);
+            if (!self.blocked && version === self.currentVersion) {
+              if (self.data.length) {
+                row = self.table.rowManager.getRowFromDataObject(self.data[0]);
 
                 if (row) {
                   row.deleteActual();
@@ -22114,7 +22262,7 @@
               }
             }
 
-            return _this2.origFuncs.shift.call(data);
+            return self.origFuncs.shift.call(data);
           }
         }); //override array pop function
 
@@ -22125,9 +22273,9 @@
           value: function value() {
             var row;
 
-            if (!_this2.blocked && version === _this2.currentVersion) {
-              if (_this2.data.length) {
-                row = _this2.table.rowManager.getRowFromDataObject(_this2.data[_this2.data.length - 1]);
+            if (!self.blocked && version === self.currentVersion) {
+              if (self.data.length) {
+                row = self.table.rowManager.getRowFromDataObject(self.data[self.data.length - 1]);
 
                 if (row) {
                   row.deleteActual();
@@ -22135,7 +22283,7 @@
               }
             }
 
-            return _this2.origFuncs.pop.call(data);
+            return self.origFuncs.pop.call(data);
           }
         }); //override array splice function
 
@@ -22144,25 +22292,25 @@
           enumerable: false,
           configurable: true,
           value: function value() {
-            var args = Array.from(_arguments),
+            var args = Array.from(arguments),
                 start = args[0] < 0 ? data.length + args[0] : args[0],
                 end = args[1],
                 newRows = args[2] ? args.slice(2) : false,
                 startRow;
 
-            if (!_this2.blocked && version === _this2.currentVersion) {
+            if (!self.blocked && version === self.currentVersion) {
               //add new rows
               if (newRows) {
-                startRow = data[start] ? _this2.table.rowManager.getRowFromDataObject(data[start]) : false;
+                startRow = data[start] ? self.table.rowManager.getRowFromDataObject(data[start]) : false;
 
                 if (startRow) {
                   newRows.forEach(function (rowData) {
-                    _this2.table.rowManager.addRowActual(rowData, true, startRow, true);
+                    self.table.rowManager.addRowActual(rowData, true, startRow, true);
                   });
                 } else {
                   newRows = newRows.slice().reverse();
                   newRows.forEach(function (rowData) {
-                    _this2.table.rowManager.addRowActual(rowData, true, false, true);
+                    self.table.rowManager.addRowActual(rowData, true, false, true);
                   });
                 }
               } //delete removed rows
@@ -22171,7 +22319,7 @@
               if (end !== 0) {
                 var oldRows = data.slice(start, typeof args[1] === "undefined" ? args[1] : start + end);
                 oldRows.forEach(function (rowData, i) {
-                  var row = _this2.table.rowManager.getRowFromDataObject(rowData);
+                  var row = self.table.rowManager.getRowFromDataObject(rowData);
 
                   if (row) {
                     row.deleteActual(i !== oldRows.length - 1);
@@ -22180,11 +22328,11 @@
               }
 
               if (newRows || end !== 0) {
-                _this2.table.rowManager.reRenderInPosition();
+                self.table.rowManager.reRenderInPosition();
               }
             }
 
-            return _this2.origFuncs.splice.apply(data, _arguments);
+            return self.origFuncs.splice.apply(data, arguments);
           }
         });
       }
@@ -22221,7 +22369,7 @@
     }, {
       key: "watchTreeChildren",
       value: function watchTreeChildren(row) {
-        var _arguments2 = arguments;
+        var _arguments = arguments;
         var childField = row.getData()[this.table.options.dataTreeChildField],
             origFuncs = {};
 
@@ -22237,7 +22385,7 @@
             enumerable: false,
             configurable: true,
             value: function value() {
-              var result = origFuncs.push.apply(childField, _arguments2);
+              var result = origFuncs.push.apply(childField, _arguments);
               rebuildTree();
               return result;
             }
@@ -22247,7 +22395,7 @@
             enumerable: false,
             configurable: true,
             value: function value() {
-              var result = origFuncs.unshift.apply(childField, _arguments2);
+              var result = origFuncs.unshift.apply(childField, _arguments);
               rebuildTree();
               return result;
             }
@@ -22277,7 +22425,7 @@
             enumerable: false,
             configurable: true,
             value: function value() {
-              var result = origFuncs.splice.apply(childField, _arguments2);
+              var result = origFuncs.splice.apply(childField, _arguments);
               rebuildTree();
               return result;
             }
@@ -22287,7 +22435,7 @@
     }, {
       key: "watchKey",
       value: function watchKey(row, data, key) {
-        var _this3 = this;
+        var _this2 = this;
 
         var props = Object.getOwnPropertyDescriptor(data, key),
             value = data[key],
@@ -22296,7 +22444,7 @@
           set: function set(newValue) {
             value = newValue;
 
-            if (!_this3.blocked && version === _this3.currentVersion) {
+            if (!_this2.blocked && version === _this2.currentVersion) {
               var update = {};
               update[key] = newValue;
               row.updateData(update);
@@ -23086,6 +23234,10 @@
 
           if (column.definition.title && column.field) {
             if (column.modules.format && self.table.options.responsiveLayoutCollapseUseFormatters) {
+              var onRendered = function onRendered(callback) {
+                callback();
+              };
+
               mockCellComponent = {
                 value: false,
                 data: {},
@@ -23108,7 +23260,7 @@
               output.push({
                 field: column.field,
                 title: column.definition.title,
-                value: column.modules.format.formatter.call(self.table.modules.format, mockCellComponent, column.modules.format.params)
+                value: column.modules.format.formatter.call(self.table.modules.format, mockCellComponent, column.modules.format.params, onRendered)
               });
             } else {
               output.push({
@@ -23224,7 +23376,7 @@
           this.subscribe("row-init", this.initializeRow.bind(this));
           this.subscribe("row-deleting", this.rowDeleted.bind(this));
           this.subscribe("rows-wipe", this.clearSelectionData.bind(this));
-          this.subscribe("rows-retrieve", this.clearSelectionData.bind(this));
+          this.subscribe("rows-retrieve", this.rowRetrieve.bind(this));
 
           if (this.table.options.selectable && this.table.options.selectablePersistence) {
             this.subscribe("data-refeshing", this.deselectRows.bind(this));