tabulator-tables 5.0.1 → 5.0.6

package/dist/js/tabulator.js

@@ -1,4 +1,4 @@
-/* Tabulator v5.0.1 (c) Oliver Folkerd 2021 */
+/* Tabulator v5.0.6 (c) Oliver Folkerd 2021 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -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();
@@ -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");
@@ -3191,10 +3216,9 @@
             this.columns.push(column);
             this.headersElement.appendChild(column.getElement());
           }
-
-          column.columnRendered();
         }
 
+        column.columnRendered();
         return column;
       }
     }, {
@@ -3219,8 +3243,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 +3400,7 @@
           to.element.parentNode.insertBefore(to.element, from.element);
         }
 
-        this._verticalAlignHeaders();
-
+        this.verticalAlignHeaders();
         this.table.rowManager.reinitialize();
       }
     }, {
@@ -3548,7 +3571,7 @@
             column.reinitializeWidth();
           }
 
-          _this6._verticalAlignHeaders();
+          _this6.verticalAlignHeaders();
 
           _this6.table.rowManager.reinitialize();
 
@@ -3582,19 +3605,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();
         }
@@ -3848,6 +3870,11 @@
           this.normalizeHeight(true);
         }
       }
+    }, {
+      key: "deinitializeHeight",
+      value: function deinitializeHeight() {
+        this.heightInitialized = false;
+      }
     }, {
       key: "reinitialize",
       value: function reinitialize(children) {
@@ -3963,7 +3990,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) {
@@ -4247,14 +4274,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",
@@ -4365,6 +4392,10 @@
           }
         }
 
+        rows.forEach(function (row) {
+          row.deinitializeHeight();
+        });
+
         if (callback) {
           callback();
         }
@@ -4530,7 +4561,7 @@
           position -= topPad;
         }
 
-        if (rowsCount && Helpers$1.elVisible(this.elementVertical)) {
+        if (rowsCount && Helpers.elVisible(this.elementVertical)) {
           this.vDomTop = position;
           this.vDomBottom = position - 1;
 
@@ -4926,6 +4957,7 @@
         var el = document.createElement("div");
         el.classList.add("tabulator-tableholder");
         el.setAttribute("tabindex", 0);
+        el.setAttribute("role", "rowgroup");
         return el;
       }
     }, {
@@ -4933,6 +4965,7 @@
       value: function createTableElement() {
         var el = document.createElement("div");
         el.classList.add("tabulator-table");
+        el.setAttribute("role", "rowgroup");
         return el;
       } //return containing element
 
@@ -5065,7 +5098,7 @@
               });
             }
           } else {
-            if (_this4.table.options.autoColumns && columnsChanged) {
+            if (_this4.table.options.autoColumns && columnsChanged && _this4.table.initialized) {
               _this4.table.columnManager.generateColumnsFromRowData(data);
             }
 
@@ -5192,7 +5225,7 @@
             _this6.dispatch("row-added", row, data, pos, index);
           });
 
-          _this6.reRenderInPosition();
+          _this6.refreshActiveData(false, false, true);
 
           _this6.regenerateRowNumbers();
 
@@ -5572,7 +5605,7 @@
 
           }
 
-          if (Helpers$1.elVisible(this.element)) {
+          if (Helpers.elVisible(this.element)) {
             if (renderInPosition) {
               this.reRenderInPosition();
             } else {
@@ -5747,9 +5780,9 @@
         this.dispatchExternal("renderStarted");
         this.element.scrollTop = 0;
 
-        if (this.displayRowsCount) {
-          this._clearTable();
+        this._clearTable();
 
+        if (this.displayRowsCount) {
           this.renderer.renderRows();
 
           if (this.firstRender) {
@@ -5957,7 +5990,9 @@
 
     _createClass(FooterManager, [{
       key: "initialize",
-      value: function initialize() {}
+      value: function initialize() {
+        this.initializeElement();
+      }
     }, {
       key: "createElement",
       value: function createElement() {
@@ -5967,7 +6002,7 @@
       }
     }, {
       key: "initializeElement",
-      value: function initializeElement(element) {
+      value: function initializeElement() {
         if (this.table.options.footerElement) {
           switch (_typeof(this.table.options.footerElement)) {
             case "string":
@@ -6150,7 +6185,8 @@
           if (listener.components.length) {
             if (!listener.handler) {
               listener.handler = this.track.bind(this, key);
-              this.el.addEventListener(key, listener.handler); // this.el.addEventListener(key, listener.handler, {passive: true})
+              this.el.addEventListener(key, listener.handler);
+              console.log("add", key); // this.el.addEventListener(key, listener.handler, {passive: true})
             }
           } else {
             if (listener.handler) {
@@ -6445,7 +6481,7 @@
               _this2.hideLoader();
 
               if (rowData !== false) {
-                _this2.dispatchExternal("dataLoaded", data);
+                _this2.dispatchExternal("dataLoaded", rowData);
 
                 _this2.table.rowManager.setData(rowData, replace, !replace);
               }
@@ -6562,9 +6598,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 = {};
@@ -6650,7 +6687,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;
@@ -7381,7 +7418,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);
@@ -7476,7 +7513,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);
@@ -7654,7 +7691,7 @@
 
         tabulator.extendModule = function (name, property, values) {
           if (tabulator.moduleBindings[name]) {
-            var source = tabulator.moduleBindings[name].prototype[property];
+            var source = tabulator.moduleBindings[name][property];
 
             if (source) {
               if (_typeof(values) == "object") {
@@ -7754,6 +7791,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
@@ -7812,36 +7851,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
 
     }, {
@@ -7874,13 +7890,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
 
     }, {
@@ -7897,7 +7940,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
 
@@ -7922,7 +7984,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();
 
@@ -7952,7 +8020,7 @@
           this.footerManager.activate();
         }
 
-        if (options.autoColumns && this.options.data) {
+        if (options.autoColumns && options.data) {
           this.columnManager.generateColumnsFromRowData(this.options.data);
         } //initialize regular modules
 
@@ -7965,7 +8033,6 @@
 
         this.columnManager.setColumns(options.columns);
         this.eventBus.dispatch("table-built");
-        this.externalEvents.dispatch("tableBuilt");
       }
     }, {
       key: "_loadInitialData",
@@ -8380,7 +8447,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",
@@ -8633,6 +8704,8 @@
     }, {
       key: "initializeColumn",
       value: function initializeColumn(column) {
+        var _this2 = this;
+
         var match = false,
             config = {};
         this.allowedTypes.forEach(function (type) {
@@ -8640,7 +8713,7 @@
               accessor;
 
           if (column.definition[key]) {
-            accessor = this.lookupAccessor(column.definition[key]);
+            accessor = _this2.lookupAccessor(column.definition[key]);
 
             if (accessor) {
               match = true;
@@ -8685,7 +8758,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;
 
@@ -8846,6 +8919,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: {
@@ -8858,7 +8953,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);
@@ -10704,7 +10799,7 @@
       key: "checkForRestyle",
       value: function checkForRestyle(cell) {
         if (!cell.row.cells.indexOf(cell)) {
-          cell.row.reinitialize();
+          this.layoutRow(cell.row);
         }
       }
     }, {
@@ -12004,7 +12099,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";
@@ -12460,7 +12555,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";
@@ -12767,9 +12862,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"),
@@ -13162,7 +13259,7 @@
               nextCell = this.findNextEditableCell(prevRow, prevRow.cells.length);
 
               if (nextCell) {
-                nextCell.edit();
+                nextCell.getComponent().edit();
                 return true;
               }
             }
@@ -13194,7 +13291,7 @@
               nextCell = this.findNextEditableCell(nextRow, -1);
 
               if (nextCell) {
-                nextCell.edit();
+                nextCell.getComponent().edit();
                 return true;
               }
             }
@@ -13219,7 +13316,7 @@
           nextCell = this.findPrevEditableCell(cell.row, index);
 
           if (nextCell) {
-            nextCell.edit();
+            nextCell.getComponent().edit();
             return true;
           }
         }
@@ -13242,7 +13339,7 @@
           nextCell = this.findNextEditableCell(cell.row, index);
 
           if (nextCell) {
-            nextCell.edit();
+            nextCell.getComponent().edit();
             return true;
           }
         }
@@ -13265,7 +13362,7 @@
           nextRow = this.table.rowManager.prevDisplayRow(cell.row, true);
 
           if (nextRow) {
-            nextRow.cells[index].edit();
+            nextRow.cells[index].getComponent().edit();
             return true;
           }
         }
@@ -13288,7 +13385,7 @@
           nextRow = this.table.rowManager.nextDisplayRow(cell.row, true);
 
           if (nextRow) {
-            nextRow.cells[index].edit();
+            nextRow.cells[index].getComponent().edit();
             return true;
           }
         }
@@ -15440,12 +15537,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;
@@ -15454,6 +15553,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];
@@ -15464,7 +15568,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) {
@@ -16371,29 +16475,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);
             }
@@ -16402,33 +16529,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);
             });
           }
         });
@@ -16442,14 +16569,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
@@ -16461,7 +16588,7 @@
     }, {
       key: "layoutRow",
       value: function layoutRow(row) {
-        var _this5 = this;
+        var _this6 = this;
 
         var rowEl = row.getElement();
         rowEl.style.paddingLeft = this.leftMargin;
@@ -16469,14 +16596,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);
           }
         });
       }
@@ -17320,7 +17447,7 @@
         this.initialized = false;
         this.height = 0;
 
-        if (Helpers$1.elVisible(this.element)) {
+        if (Helpers.elVisible(this.element)) {
           this.initialize(true);
         }
       }
@@ -17354,7 +17481,10 @@
       value: function setCellHeight() {}
     }, {
       key: "clearCellHeight",
-      value: function clearCellHeight() {} //////////////// Object Generation /////////////////
+      value: function clearCellHeight() {}
+    }, {
+      key: "deinitializeHeight",
+      value: function deinitializeHeight() {} //////////////// Object Generation /////////////////
 
     }, {
       key: "getComponent",
@@ -17727,13 +17857,11 @@
       key: "getRows",
       value: function getRows(rows) {
         if (this.groupIDLookups.length) {
-          if (!Object.keys(this.groups).length) {
-            this.dispatchExternal("dataGrouping");
-            this.generateGroups(rows);
+          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();
@@ -17969,6 +18097,7 @@
   var defaultUndoers = {
     cellEdit: function cellEdit(action) {
       action.component.setValueProcessData(action.data.oldValue);
+      action.component.cellRendered();
     },
     rowAdd: function rowAdd(action) {
       action.component.deleteActual();
@@ -17991,6 +18120,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);
@@ -18222,19 +18352,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"),
@@ -18272,24 +18402,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
 
     }, {
@@ -18369,7 +18485,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;
 
@@ -19341,7 +19457,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;
         }
@@ -19481,7 +19597,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);
@@ -19608,7 +19724,7 @@
       value: function startMove(e, column) {
         var element = column.getElement();
         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";
@@ -19706,7 +19822,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";
 
@@ -19830,7 +19946,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);
@@ -19865,7 +19981,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);
@@ -20710,6 +20826,8 @@
           this.size = Math.floor(this.table.rowManager.getElement().clientHeight / testElRow.offsetHeight);
           this.table.rowManager.getTableElement().removeChild(testElRow);
         }
+
+        this.generatePageSizeSelectList();
       }
     }, {
       key: "initialLoadComplete",
@@ -20964,7 +21082,6 @@
 
           this.page = this.table.options.paginationInitialPage;
           this.count = this.table.options.paginationButtonCount;
-          this.generatePageSizeSelectList();
         } //set default values
 
 
@@ -22040,10 +22157,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();
@@ -22054,15 +22169,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
 
@@ -22071,15 +22186,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
 
@@ -22090,9 +22205,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();
@@ -22100,7 +22215,7 @@
               }
             }
 
-            return _this2.origFuncs.shift.call(data);
+            return self.origFuncs.shift.call(data);
           }
         }); //override array pop function
 
@@ -22111,9 +22226,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();
@@ -22121,7 +22236,7 @@
               }
             }
 
-            return _this2.origFuncs.pop.call(data);
+            return self.origFuncs.pop.call(data);
           }
         }); //override array splice function
 
@@ -22130,25 +22245,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
@@ -22157,7 +22272,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);
@@ -22166,11 +22281,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);
           }
         });
       }
@@ -22207,7 +22322,7 @@
     }, {
       key: "watchTreeChildren",
       value: function watchTreeChildren(row) {
-        var _arguments2 = arguments;
+        var _arguments = arguments;
         var childField = row.getData()[this.table.options.dataTreeChildField],
             origFuncs = {};
 
@@ -22223,7 +22338,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;
             }
@@ -22233,7 +22348,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;
             }
@@ -22263,7 +22378,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;
             }
@@ -22273,7 +22388,7 @@
     }, {
       key: "watchKey",
       value: function watchKey(row, data, key) {
-        var _this3 = this;
+        var _this2 = this;
 
         var props = Object.getOwnPropertyDescriptor(data, key),
             value = data[key],
@@ -22282,7 +22397,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);
@@ -23072,6 +23187,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: {},
@@ -23094,7 +23213,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({