tabulator-tables/dist/js/tabulator.js

Interactive table generation JavaScript library

/* Tabulator v5.3.2 (c) Oliver Folkerd 2022 */
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Tabulator = factory());
}(this, (function () { 'use strict';

  function _typeof(obj) {
    "@babel/helpers - typeof";

    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
      _typeof = function (obj) {
        return typeof obj;
      };
    } else {
      _typeof = function (obj) {
        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
      };
    }

    return _typeof(obj);
  }

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
  }

  function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
      throw new TypeError("Super expression must either be null or a function");
    }

    subClass.prototype = Object.create(superClass && superClass.prototype, {
      constructor: {
        value: subClass,
        writable: true,
        configurable: true
      }
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
  }

  function _getPrototypeOf(o) {
    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
      return o.__proto__ || Object.getPrototypeOf(o);
    };
    return _getPrototypeOf(o);
  }

  function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };

    return _setPrototypeOf(o, p);
  }

  function _isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  function _assertThisInitialized(self) {
    if (self === void 0) {
      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }

    return self;
  }

  function _possibleConstructorReturn(self, call) {
    if (call && (typeof call === "object" || typeof call === "function")) {
      return call;
    }

    return _assertThisInitialized(self);
  }

  function _createSuper(Derived) {
    var hasNativeReflectConstruct = _isNativeReflectConstruct();

    return function _createSuperInternal() {
      var Super = _getPrototypeOf(Derived),
          result;

      if (hasNativeReflectConstruct) {
        var NewTarget = _getPrototypeOf(this).constructor;

        result = Reflect.construct(Super, arguments, NewTarget);
      } else {
        result = Super.apply(this, arguments);
      }

      return _possibleConstructorReturn(this, result);
    };
  }

  function _slicedToArray(arr, i) {
    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
  }

  function _toConsumableArray(arr) {
    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
  }

  function _arrayWithoutHoles(arr) {
    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
  }

  function _arrayWithHoles(arr) {
    if (Array.isArray(arr)) return arr;
  }

  function _iterableToArray(iter) {
    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
  }

  function _iterableToArrayLimit(arr, i) {
    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
    var _arr = [];
    var _n = true;
    var _d = false;
    var _e = undefined;

    try {
      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
        _arr.push(_s.value);

        if (i && _arr.length === i) break;
      }
    } catch (err) {
      _d = true;
      _e = err;
    } finally {
      try {
        if (!_n && _i["return"] != null) _i["return"]();
      } finally {
        if (_d) throw _e;
      }
    }

    return _arr;
  }

  function _unsupportedIterableToArray(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(o);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
  }

  function _arrayLikeToArray(arr, len) {
    if (len == null || len > arr.length) len = arr.length;

    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

    return arr2;
  }

  function _nonIterableSpread() {
    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  function _nonIterableRest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  function _createForOfIteratorHelper(o, allowArrayLike) {
    var it;

    if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
      if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
        if (it) o = it;
        var i = 0;

        var F = function () {};

        return {
          s: F,
          n: function () {
            if (i >= o.length) return {
              done: true
            };
            return {
              done: false,
              value: o[i++]
            };
          },
          e: function (e) {
            throw e;
          },
          f: F
        };
      }

      throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
    }

    var normalCompletion = true,
        didErr = false,
        err;
    return {
      s: function () {
        it = o[Symbol.iterator]();
      },
      n: function () {
        var step = it.next();
        normalCompletion = step.done;
        return step;
      },
      e: function (e) {
        didErr = true;
        err = e;
      },
      f: function () {
        try {
          if (!normalCompletion && it.return != null) it.return();
        } finally {
          if (didErr) throw err;
        }
      }
    };
  }

  var defaultOptions = {
    debugEventsExternal: false,
    //flag to console log events
    debugEventsInternal: false,
    //flag to console log events
    debugInvalidOptions: true,
    //allow toggling of invalid option warnings
    debugInvalidComponentFuncs: true,
    //allow toggling of invalid component warnings
    debugInitialization: true,
    //allow toggling of pre initialization function call warnings
    debugDeprecation: true,
    //allow toggling of deprecation warnings
    height: false,
    //height of tabulator
    minHeight: false,
    //minimum height of tabulator
    maxHeight: false,
    //maximum height of tabulator
    columnHeaderVertAlign: "top",
    //vertical alignment of column headers
    popupContainer: false,
    columns: [],
    //store for colum header info
    columnDefaults: {},
    //store column default props
    data: false,
    //default starting data
    autoColumns: false,
    //build columns from data row structure
    autoColumnsDefinitions: false,
    nestedFieldSeparator: ".",
    //separator for nested data
    footerElement: false,
    //hold footer element
    index: "id",
    //filed for row index
    textDirection: "auto",
    addRowPos: "bottom",
    //position to insert blank rows, top|bottom
    headerVisible: true,
    //hide header
    renderVertical: "virtual",
    renderHorizontal: "basic",
    renderVerticalBuffer: 0,
    // set virtual DOM buffer size
    scrollToRowPosition: "top",
    scrollToRowIfVisible: true,
    scrollToColumnPosition: "left",
    scrollToColumnIfVisible: true,
    rowFormatter: false,
    rowFormatterPrint: null,
    rowFormatterClipboard: null,
    rowFormatterHtmlOutput: null,
    rowHeight: null,
    placeholder: false,
    dataLoader: true,
    dataLoaderLoading: false,
    dataLoaderError: false,
    dataLoaderErrorTimeout: 3000,
    dataSendParams: {},
    dataReceiveParams: {}
  };

  var CoreFeature = /*#__PURE__*/function () {
    function CoreFeature(table) {
      _classCallCheck(this, CoreFeature);

      this.table = table;
    } //////////////////////////////////////////
    /////////////// DataLoad /////////////////
    //////////////////////////////////////////


    _createClass(CoreFeature, [{
      key: "reloadData",
      value: function reloadData(data, silent, columnsChanged) {
        return this.table.dataLoader.load(data, undefined, undefined, undefined, silent, columnsChanged);
      } //////////////////////////////////////////
      ///////////// Localization ///////////////
      //////////////////////////////////////////

    }, {
      key: "langText",
      value: function langText() {
        var _this$table$modules$l;

        return (_this$table$modules$l = this.table.modules.localize).getText.apply(_this$table$modules$l, arguments);
      }
    }, {
      key: "langBind",
      value: function langBind() {
        var _this$table$modules$l2;

        return (_this$table$modules$l2 = this.table.modules.localize).bind.apply(_this$table$modules$l2, arguments);
      }
    }, {
      key: "langLocale",
      value: function langLocale() {
        var _this$table$modules$l3;

        return (_this$table$modules$l3 = this.table.modules.localize).getLocale.apply(_this$table$modules$l3, arguments);
      } //////////////////////////////////////////
      ////////// Inter Table Comms /////////////
      //////////////////////////////////////////

    }, {
      key: "commsConnections",
      value: function commsConnections() {
        var _this$table$modules$c;

        return (_this$table$modules$c = this.table.modules.comms).getConnections.apply(_this$table$modules$c, arguments);
      }
    }, {
      key: "commsSend",
      value: function commsSend() {
        var _this$table$modules$c2;

        return (_this$table$modules$c2 = this.table.modules.comms).send.apply(_this$table$modules$c2, arguments);
      } //////////////////////////////////////////
      //////////////// Layout  /////////////////
      //////////////////////////////////////////

    }, {
      key: "layoutMode",
      value: function layoutMode() {
        return this.table.modules.layout.getMode();
      }
    }, {
      key: "layoutRefresh",
      value: function layoutRefresh(force) {
        return this.table.modules.layout.layout(force);
      } //////////////////////////////////////////
      /////////////// Event Bus ////////////////
      //////////////////////////////////////////

    }, {
      key: "subscribe",
      value: function subscribe() {
        var _this$table$eventBus;

        return (_this$table$eventBus = this.table.eventBus).subscribe.apply(_this$table$eventBus, arguments);
      }
    }, {
      key: "unsubscribe",
      value: function unsubscribe() {
        var _this$table$eventBus2;

        return (_this$table$eventBus2 = this.table.eventBus).unsubscribe.apply(_this$table$eventBus2, arguments);
      }
    }, {
      key: "subscribed",
      value: function subscribed(key) {
        return this.table.eventBus.subscribed(key);
      }
    }, {
      key: "subscriptionChange",
      value: function subscriptionChange() {
        var _this$table$eventBus3;

        return (_this$table$eventBus3 = this.table.eventBus).subscriptionChange.apply(_this$table$eventBus3, arguments);
      }
    }, {
      key: "dispatch",
      value: function dispatch() {
        var _this$table$eventBus4;

        return (_this$table$eventBus4 = this.table.eventBus).dispatch.apply(_this$table$eventBus4, arguments);
      }
    }, {
      key: "chain",
      value: function chain() {
        var _this$table$eventBus5;

        return (_this$table$eventBus5 = this.table.eventBus).chain.apply(_this$table$eventBus5, arguments);
      }
    }, {
      key: "confirm",
      value: function confirm() {
        var _this$table$eventBus6;

        return (_this$table$eventBus6 = this.table.eventBus).confirm.apply(_this$table$eventBus6, arguments);
      }
    }, {
      key: "dispatchExternal",
      value: function dispatchExternal() {
        var _this$table$externalE;

        return (_this$table$externalE = this.table.externalEvents).dispatch.apply(_this$table$externalE, arguments);
      }
    }, {
      key: "subscribedExternal",
      value: function subscribedExternal(key) {
        return this.table.externalEvents.subscribed(key);
      }
    }, {
      key: "subscriptionChangeExternal",
      value: function subscriptionChangeExternal() {
        var _this$table$externalE2;

        return (_this$table$externalE2 = this.table.externalEvents).subscriptionChange.apply(_this$table$externalE2, arguments);
      } //////////////////////////////////////////
      //////////////// Options /////////////////
      //////////////////////////////////////////

    }, {
      key: "options",
      value: function options(key) {
        return this.table.options[key];
      }
    }, {
      key: "setOption",
      value: function setOption(key, value) {
        if (typeof value !== "undefined") {
          this.table.options[key] = value;
        }

        return this.table.options[key];
      } //////////////////////////////////////////
      /////////// Deprecation Checks ///////////
      //////////////////////////////////////////

    }, {
      key: "deprecationCheck",
      value: function deprecationCheck(oldOption, newOption) {
        return this.table.deprecationAdvisor.check(oldOption, newOption);
      }
    }, {
      key: "deprecationCheckMsg",
      value: function deprecationCheckMsg(oldOption, msg) {
        return this.table.deprecationAdvisor.checkMsg(oldOption, msg);
      }
    }, {
      key: "deprecationMsg",
      value: function deprecationMsg(msg) {
        return this.table.deprecationAdvisor.msg(msg);
      } //////////////////////////////////////////
      //////////////// Modules /////////////////
      //////////////////////////////////////////

    }, {
      key: "module",
      value: function module(key) {
        return this.table.module(key);
      }
    }]);

    return CoreFeature;
  }();

  var ColumnComponent = /*#__PURE__*/function () {
    function ColumnComponent(column) {
      _classCallCheck(this, ColumnComponent);

      this._column = column;
      this.type = "ColumnComponent";
      return new Proxy(this, {
        get: function get(target, name, receiver) {
          if (typeof target[name] !== "undefined") {
            return target[name];
          } else {
            return target._column.table.componentFunctionBinder.handle("column", target._column, name);
          }
        }
      });
    }

    _createClass(ColumnComponent, [{
      key: "getElement",
      value: function getElement() {
        return this._column.getElement();
      }
    }, {
      key: "getDefinition",
      value: function getDefinition() {
        return this._column.getDefinition();
      }
    }, {
      key: "getField",
      value: function getField() {
        return this._column.getField();
      }
    }, {
      key: "getTitleDownload",
      value: function getTitleDownload() {
        return this._column.getTitleDownload();
      }
    }, {
      key: "getCells",
      value: function getCells() {
        var cells = [];

        this._column.cells.forEach(function (cell) {
          cells.push(cell.getComponent());
        });

        return cells;
      }
    }, {
      key: "isVisible",
      value: function isVisible() {
        return this._column.visible;
      }
    }, {
      key: "show",
      value: function show() {
        if (this._column.isGroup) {
          this._column.columns.forEach(function (column) {
            column.show();
          });
        } else {
          this._column.show();
        }
      }
    }, {
      key: "hide",
      value: function hide() {
        if (this._column.isGroup) {
          this._column.columns.forEach(function (column) {
            column.hide();
          });
        } else {
          this._column.hide();
        }
      }
    }, {
      key: "toggle",
      value: function toggle() {
        if (this._column.visible) {
          this.hide();
        } else {
          this.show();
        }
      }
    }, {
      key: "delete",
      value: function _delete() {
        return this._column["delete"]();
      }
    }, {
      key: "getSubColumns",
      value: function getSubColumns() {
        var output = [];

        if (this._column.columns.length) {
          this._column.columns.forEach(function (column) {
            output.push(column.getComponent());
          });
        }

        return output;
      }
    }, {
      key: "getParentColumn",
      value: function getParentColumn() {
        return this._column.parent instanceof Column ? this._column.parent.getComponent() : false;
      }
    }, {
      key: "_getSelf",
      value: function _getSelf() {
        return this._column;
      }
    }, {
      key: "scrollTo",
      value: function scrollTo() {
        return this._column.table.columnManager.scrollToColumn(this._column);
      }
    }, {
      key: "getTable",
      value: function getTable() {
        return this._column.table;
      }
    }, {
      key: "move",
      value: function move(to, after) {
        var toColumn = this._column.table.columnManager.findColumn(to);

        if (toColumn) {
          this._column.table.columnManager.moveColumn(this._column, toColumn, after);
        } else {
          console.warn("Move Error - No matching column found:", toColumn);
        }
      }
    }, {
      key: "getNextColumn",
      value: function getNextColumn() {
        var nextCol = this._column.nextColumn();

        return nextCol ? nextCol.getComponent() : false;
      }
    }, {
      key: "getPrevColumn",
      value: function getPrevColumn() {
        var prevCol = this._column.prevColumn();

        return prevCol ? prevCol.getComponent() : false;
      }
    }, {
      key: "updateDefinition",
      value: function updateDefinition(updates) {
        return this._column.updateDefinition(updates);
      }
    }, {
      key: "getWidth",
      value: function getWidth() {
        return this._column.getWidth();
      }
    }, {
      key: "setWidth",
      value: function setWidth(width) {
        var result;

        if (width === true) {
          result = this._column.reinitializeWidth(true);
        } else {
          result = this._column.setWidth(width);
        }

        this._column.table.columnManager.rerenderColumns(true);

        return result;
      }
    }]);

    return ColumnComponent;
  }();

  var defaultColumnOptions = {
    "title": undefined,
    "field": undefined,
    "columns": undefined,
    "visible": undefined,
    "hozAlign": undefined,
    "vertAlign": undefined,
    "width": undefined,
    "minWidth": 40,
    "maxWidth": undefined,
    "maxInitialWidth": undefined,
    "cssClass": undefined,
    "variableHeight": undefined,
    "headerVertical": undefined,
    "headerHozAlign": undefined,
    "editableTitle": undefined
  };

  //public cell object
  var CellComponent = /*#__PURE__*/function () {
    function CellComponent(cell) {
      _classCallCheck(this, CellComponent);

      this._cell = cell;
      return new Proxy(this, {
        get: function get(target, name, receiver) {
          if (typeof target[name] !== "undefined") {
            return target[name];
          } else {
            return target._cell.table.componentFunctionBinder.handle("cell", target._cell, name);
          }
        }
      });
    }

    _createClass(CellComponent, [{
      key: "getValue",
      value: function getValue() {
        return this._cell.getValue();
      }
    }, {
      key: "getOldValue",
      value: function getOldValue() {
        return this._cell.getOldValue();
      }
    }, {
      key: "getInitialValue",
      value: function getInitialValue() {
        return this._cell.initialValue;
      }
    }, {
      key: "getElement",
      value: function getElement() {
        return this._cell.getElement();
      }
    }, {
      key: "getRow",
      value: function getRow() {
        return this._cell.row.getComponent();
      }
    }, {
      key: "getData",
      value: function getData() {
        return this._cell.row.getData();
      }
    }, {
      key: "getField",
      value: function getField() {
        return this._cell.column.getField();
      }
    }, {
      key: "getColumn",
      value: function getColumn() {
        return this._cell.column.getComponent();
      }
    }, {
      key: "setValue",
      value: function setValue(value, mutate) {
        if (typeof mutate == "undefined") {
          mutate = true;
        }

        this._cell.setValue(value, mutate);
      }
    }, {
      key: "restoreOldValue",
      value: function restoreOldValue() {
        this._cell.setValueActual(this._cell.getOldValue());
      }
    }, {
      key: "restoreInitialValue",
      value: function restoreInitialValue() {
        this._cell.setValueActual(this._cell.initialValue);
      }
    }, {
      key: "checkHeight",
      value: function checkHeight() {
        this._cell.checkHeight();
      }
    }, {
      key: "getTable",
      value: function getTable() {
        return this._cell.table;
      }
    }, {
      key: "_getSelf",
      value: function _getSelf() {
        return this._cell;
      }
    }]);

    return CellComponent;
  }();

  var Cell = /*#__PURE__*/function (_CoreFeature) {
    _inherits(Cell, _CoreFeature);

    var _super = _createSuper(Cell);

    function Cell(column, row) {
      var _this;

      _classCallCheck(this, Cell);

      _this = _super.call(this, column.table);
      _this.table = column.table;
      _this.column = column;
      _this.row = row;
      _this.element = null;
      _this.value = null;
      _this.initialValue;
      _this.oldValue = null;
      _this.modules = {};
      _this.height = null;
      _this.width = null;
      _this.minWidth = null;
      _this.component = null;
      _this.loaded = false; //track if the cell has been added to the DOM yet

      _this.build();

      return _this;
    } //////////////// Setup Functions /////////////////
    //generate element


    _createClass(Cell, [{
      key: "build",
      value: function build() {
        this.generateElement();
        this.setWidth();

        this._configureCell();

        this.setValueActual(this.column.getFieldValue(this.row.data));
        this.initialValue = this.value;
      }
    }, {
      key: "generateElement",
      value: function generateElement() {
        this.element = document.createElement('div');
        this.element.className = "tabulator-cell";
        this.element.setAttribute("role", "gridcell");
      }
    }, {
      key: "_configureCell",
      value: function _configureCell() {
        var element = this.element,
            field = this.column.getField(),
            vertAligns = {
          top: "flex-start",
          bottom: "flex-end",
          middle: "center"
        },
            hozAligns = {
          left: "flex-start",
          right: "flex-end",
          center: "center"
        }; //set text alignment

        element.style.textAlign = this.column.hozAlign;

        if (this.column.vertAlign) {
          element.style.display = "inline-flex";
          element.style.alignItems = vertAligns[this.column.vertAlign] || "";

          if (this.column.hozAlign) {
            element.style.justifyContent = hozAligns[this.column.hozAlign] || "";
          }
        }

        if (field) {
          element.setAttribute("tabulator-field", field);
        } //add class to cell if needed


        if (this.column.definition.cssClass) {
          var classNames = this.column.definition.cssClass.split(" ");
          classNames.forEach(function (className) {
            element.classList.add(className);
          });
        }

        this.dispatch("cell-init", this); //hide cell if not visible

        if (!this.column.visible) {
          this.hide();
        }
      } //generate cell contents

    }, {
      key: "_generateContents",
      value: function _generateContents() {
        var _this2 = this;

        var val;
        val = this.chain("cell-format", this, null, function () {
          return _this2.element.innerHTML = _this2.value;
        });

        switch (_typeof(val)) {
          case "object":
            if (val instanceof Node) {
              //clear previous cell contents
              while (this.element.firstChild) {
                this.element.removeChild(this.element.firstChild);
              }

              this.element.appendChild(val);
            } else {
              this.element.innerHTML = "";

              if (val != null) {
                console.warn("Format Error - Formatter has returned a type of object, the only valid formatter object return is an instance of Node, the formatter returned:", val);
              }
            }

            break;

          case "undefined":
            this.element.innerHTML = "";
            break;

          default:
            this.element.innerHTML = val;
        }
      }
    }, {
      key: "cellRendered",
      value: function cellRendered() {
        this.dispatch("cell-rendered", this);
      } //////////////////// Getters ////////////////////

    }, {
      key: "getElement",
      value: function getElement(containerOnly) {
        if (!this.loaded) {
          this.loaded = true;

          if (!containerOnly) {
            this.layoutElement();
          }
        }

        return this.element;
      }
    }, {
      key: "getValue",
      value: function getValue() {
        return this.value;
      }
    }, {
      key: "getOldValue",
      value: function getOldValue() {
        return this.oldValue;
      } //////////////////// Actions ////////////////////

    }, {
      key: "setValue",
      value: function setValue(value, mutate, force) {
        var changed = this.setValueProcessData(value, mutate, force);

        if (changed) {
          this.dispatch("cell-value-updated", this);
          this.cellRendered();

          if (this.column.definition.cellEdited) {
            this.column.definition.cellEdited.call(this.table, this.getComponent());
          }

          this.dispatchExternal("cellEdited", this.getComponent());

          if (this.subscribedExternal("dataChanged")) {
            this.dispatchExternal("dataChanged", this.table.rowManager.getData());
          }
        }
      }
    }, {
      key: "setValueProcessData",
      value: function setValueProcessData(value, mutate, force) {
        var changed = false;

        if (this.value !== value || force) {
          changed = true;

          if (mutate) {
            value = this.chain("cell-value-changing", [this, value], null, value);
          }
        }

        this.setValueActual(value);

        if (changed) {
          this.dispatch("cell-value-changed", this);
        }

        return changed;
      }
    }, {
      key: "setValueActual",
      value: function setValueActual(value) {
        this.oldValue = this.value;
        this.value = value;
        this.dispatch("cell-value-save-before", this);
        this.column.setFieldValue(this.row.data, value);
        this.dispatch("cell-value-save-after", this);

        if (this.loaded) {
          this.layoutElement();
        }
      }
    }, {
      key: "layoutElement",
      value: function layoutElement() {
        this._generateContents();

        this.dispatch("cell-layout", this);
      }
    }, {
      key: "setWidth",
      value: function setWidth() {
        this.width = this.column.width;
        this.element.style.width = this.column.widthStyled;
      }
    }, {
      key: "clearWidth",
      value: function clearWidth() {
        this.width = "";
        this.element.style.width = "";
      }
    }, {
      key: "getWidth",
      value: function getWidth() {
        return this.width || this.element.offsetWidth;
      }
    }, {
      key: "setMinWidth",
      value: function setMinWidth() {
        this.minWidth = this.column.minWidth;
        this.element.style.minWidth = this.column.minWidthStyled;
      }
    }, {
      key: "setMaxWidth",
      value: function setMaxWidth() {
        this.maxWidth = this.column.maxWidth;
        this.element.style.maxWidth = this.column.maxWidthStyled;
      }
    }, {
      key: "checkHeight",
      value: function checkHeight() {
        // var height = this.element.css("height");
        this.row.reinitializeHeight();
      }
    }, {
      key: "clearHeight",
      value: function clearHeight() {
        this.element.style.height = "";
        this.height = null;
        this.dispatch("cell-height", this, "");
      }
    }, {
      key: "setHeight",
      value: function setHeight() {
        this.height = this.row.height;
        this.element.style.height = this.row.heightStyled;
        this.dispatch("cell-height", this, this.row.heightStyled);
      }
    }, {
      key: "getHeight",
      value: function getHeight() {
        return this.height || this.element.offsetHeight;
      }
    }, {
      key: "show",
      value: function show() {
        this.element.style.display = this.column.vertAlign ? "inline-flex" : "";
      }
    }, {
      key: "hide",
      value: function hide() {
        this.element.style.display = "none";
      }
    }, {
      key: "delete",
      value: function _delete() {
        this.dispatch("cell-delete", this);

        if (!this.table.rowManager.redrawBlock && this.element.parentNode) {
          this.element.parentNode.removeChild(this.element);
        }

        this.element = false;
        this.column.deleteCell(this);
        this.row.deleteCell(this);
        this.calcs = {};
      }
    }, {
      key: "getIndex",
      value: function getIndex() {
        return this.row.getCellIndex(this);
      } //////////////// Object Generation /////////////////

    }, {
      key: "getComponent",
      value: function getComponent() {
        if (!this.component) {
          this.component = new CellComponent(this);
        }

        return this.component;
      }
    }]);

    return Cell;
  }(CoreFeature);

  var Column = /*#__PURE__*/function (_CoreFeature) {
    _inherits(Column, _CoreFeature);

    var _super = _createSuper(Column);

    function Column(def, parent) {
      var _this;

      _classCallCheck(this, Column);

      _this = _super.call(this, parent.table);
      _this.definition = def; //column definition

      _this.parent = parent; //hold parent object

      _this.type = "column"; //type of element

      _this.columns = []; //child columns

      _this.cells = []; //cells bound to this column

      _this.element = _this.createElement(); //column header element

      _this.contentElement = false;
      _this.titleHolderElement = false;
      _this.titleElement = false;
      _this.groupElement = _this.createGroupElement(); //column group holder element

      _this.isGroup = false;
      _this.hozAlign = ""; //horizontal text alignment

      _this.vertAlign = ""; //vert text alignment
      //multi dimensional filed handling

      _this.field = "";
      _this.fieldStructure = "";
      _this.getFieldValue = "";
      _this.setFieldValue = "";
      _this.titleDownload = null;
      _this.titleFormatterRendered = false;

      _this.mapDefinitions();

      _this.setField(_this.definition.field);

      _this.modules = {}; //hold module variables;

      _this.width = null; //column width

      _this.widthStyled = ""; //column width pre-styled to improve render efficiency

      _this.maxWidth = null; //column maximum width

      _this.maxWidthStyled = ""; //column maximum pre-styled to improve render efficiency

      _this.maxInitialWidth = null;
      _this.minWidth = null; //column minimum width

      _this.minWidthStyled = ""; //column minimum pre-styled to improve render efficiency

      _this.widthFixed = false; //user has specified a width for this column

      _this.visible = true; //default visible state

      _this.component = null; //initialize column

      if (_this.definition.columns) {
        _this.isGroup = true;

        _this.definition.columns.forEach(function (def, i) {
          var newCol = new Column(def, _assertThisInitialized(_this));

          _this.attachColumn(newCol);
        });

        _this.checkColumnVisibility();
      } else {
        parent.registerColumnField(_assertThisInitialized(_this));
      }

      _this._initialize();

      return _this;
    }

    _createClass(Column, [{
      key: "createElement",
      value: function createElement() {
        var el = document.createElement("div");
        el.classList.add("tabulator-col");
        el.setAttribute("role", "columnheader");
        el.setAttribute("aria-sort", "none");

        switch (this.table.options.columnHeaderVertAlign) {
          case "middle":
            el.style.justifyContent = "center";
            break;

          case "bottom":
            el.style.justifyContent = "flex-end";
            break;
        }

        return el;
      }
    }, {
      key: "createGroupElement",
      value: function createGroupElement() {
        var el = document.createElement("div");
        el.classList.add("tabulator-col-group-cols");
        return el;
      }
    }, {
      key: "mapDefinitions",
      value: function mapDefinitions() {
        var defaults = this.table.options.columnDefaults; //map columnDefaults onto column definitions

        if (defaults) {
          for (var key in defaults) {
            if (typeof this.definition[key] === "undefined") {
              this.definition[key] = defaults[key];
            }
          }
        }

        this.definition = this.table.columnManager.optionsList.generate(Column.defaultOptionList, this.definition);
      }
    }, {
      key: "checkDefinition",
      value: function checkDefinition() {
        var _this2 = this;

        Object.keys(this.definition).forEach(function (key) {
          if (Column.defaultOptionList.indexOf(key) === -1) {
            console.warn("Invalid column definition option in '" + (_this2.field || _this2.definition.title) + "' column:", key);
          }
        });
      }
    }, {
      key: "setField",
      value: function setField(field) {
        this.field = field;
        this.fieldStructure = field ? this.table.options.nestedFieldSeparator ? field.split(this.table.options.nestedFieldSeparator) : [field] : [];
        this.getFieldValue = this.fieldStructure.length > 1 ? this._getNestedData : this._getFlatData;
        this.setFieldValue = this.fieldStructure.length > 1 ? this._setNestedData : this._setFlatData;
      } //register column position with column manager

    }, {
      key: "registerColumnPosition",
      value: function registerColumnPosition(column) {
        this.parent.registerColumnPosition(column);
      } //register column position with column manager

    }, {
      key: "registerColumnField",
      value: function registerColumnField(column) {
        this.parent.registerColumnField(column);
      } //trigger position registration

    }, {
      key: "reRegisterPosition",
      value: function reRegisterPosition() {
        if (this.isGroup) {
          this.columns.forEach(function (column) {
            column.reRegisterPosition();
          });
        } else {
          this.registerColumnPosition(this);
        }
      } //build header element

    }, {
      key: "_initialize",
      value: function _initialize() {
        var def = this.definition;

        while (this.element.firstChild) {
          this.element.removeChild(this.element.firstChild);
        }

        if (def.headerVertical) {
          this.element.classList.add("tabulator-col-vertical");

          if (def.headerVertical === "flip") {
            this.element.classList.add("tabulator-col-vertical-flip");
          }
        }

        this.contentElement = this._buildColumnHeaderContent();
        this.element.appendChild(this.contentElement);

        if (this.isGroup) {
          this._buildGroupHeader();
        } else {
          this._buildColumnHeader();
        }

        this.dispatch("column-init", this);
      } //build header element for header

    }, {
      key: "_buildColumnHeader",
      value: function _buildColumnHeader() {
        var _this3 = this;

        var def = this.definition;
        this.dispatch("column-layout", this); //set column visibility

        if (typeof def.visible != "undefined") {
          if (def.visible) {
            this.show(true);
          } else {
            this.hide(true);
          }
        } //assign additional css classes to column header


        if (def.cssClass) {
          var classNames = def.cssClass.split(" ");
          classNames.forEach(function (className) {
            _this3.element.classList.add(className);
          });
        }

        if (def.field) {
          this.element.setAttribute("tabulator-field", def.field);
        } //set min width if present


        this.setMinWidth(parseInt(def.minWidth));

        if (def.maxInitialWidth) {
          this.maxInitialWidth = parseInt(def.maxInitialWidth);
        }

        if (def.maxWidth) {
          this.setMaxWidth(parseInt(def.maxWidth));
        }

        this.reinitializeWidth(); //set horizontal text alignment

        this.hozAlign = this.definition.hozAlign;
        this.vertAlign = this.definition.vertAlign;
        this.titleElement.style.textAlign = this.definition.headerHozAlign;
      }
    }, {
      key: "_buildColumnHeaderContent",
      value: function _buildColumnHeaderContent() {
        var contentElement = document.createElement("div");
        contentElement.classList.add("tabulator-col-content");
        this.titleHolderElement = document.createElement("div");
        this.titleHolderElement.classList.add("tabulator-col-title-holder");
        contentElement.appendChild(this.titleHolderElement);
        this.titleElement = this._buildColumnHeaderTitle();
        this.titleHolderElement.appendChild(this.titleElement);
        return contentElement;
      } //build title element of column

    }, {
      key: "_buildColumnHeaderTitle",
      value: function _buildColumnHeaderTitle() {
        var _this4 = this;

        var def = this.definition;
        var titleHolderElement = document.createElement("div");
        titleHolderElement.classList.add("tabulator-col-title");

        if (def.editableTitle) {
          var titleElement = document.createElement("input");
          titleElement.classList.add("tabulator-title-editor");
          titleElement.addEventListener("click", function (e) {
            e.stopPropagation();
            titleElement.focus();
          });
          titleElement.addEventListener("change", function () {
            def.title = titleElement.value;

            _this4.dispatchExternal("columnTitleChanged", _this4.getComponent());
          });
          titleHolderElement.appendChild(titleElement);

          if (def.field) {
            this.langBind("columns|" + def.field, function (text) {
              titleElement.value = text || def.title || "&nbsp;";
            });
          } else {
            titleElement.value = def.title || "&nbsp;";
          }
        } else {
          if (def.field) {
            this.langBind("columns|" + def.field, function (text) {
              _this4._formatColumnHeaderTitle(titleHolderElement, text || def.title || "&nbsp;");
            });
          } else {
            this._formatColumnHeaderTitle(titleHolderElement, def.title || "&nbsp;");
          }
        }

        return titleHolderElement;
      }
    }, {
      key: "_formatColumnHeaderTitle",
      value: function _formatColumnHeaderTitle(el, title) {
        var contents = this.chain("column-format", [this, title, el], null, function () {
          return title;
        });

        switch (_typeof(contents)) {
          case "object":
            if (contents instanceof Node) {
              el.appendChild(contents);
            } else {
              el.innerHTML = "";
              console.warn("Format Error - Title formatter has returned a type of object, the only valid formatter object return is an instance of Node, the formatter returned:", contents);
            }

            break;

          case "undefined":
            el.innerHTML = "";
            break;

          default:
            el.innerHTML = contents;
        }
      } //build header element for column group

    }, {
      key: "_buildGroupHeader",
      value: function _buildGroupHeader() {
        var _this5 = this;

        this.element.classList.add("tabulator-col-group");
        this.element.setAttribute("role", "columngroup");
        this.element.setAttribute("aria-title", this.definition.title); //asign additional css classes to column header

        if (this.definition.cssClass) {
          var classNames = this.definition.cssClass.split(" ");
          classNames.forEach(function (className) {
            _this5.element.classList.add(className);
          });
        }

        this.titleElement.style.textAlign = this.definition.headerHozAlign;
        this.element.appendChild(this.groupElement);
      } //flat field lookup

    }, {
      key: "_getFlatData",
      value: function _getFlatData(data) {
        return data[this.field];
      } //nested field lookup

    }, {
      key: "_getNestedData",
      value: function _getNestedData(data) {
        var dataObj = data,
            structure = this.fieldStructure,
            length = structure.length,
            output;

        for (var i = 0; i < length; i++) {
          dataObj = dataObj[structure[i]];
          output = dataObj;

          if (!dataObj) {
            break;
          }
        }

        return output;
      } //flat field set

    }, {
      key: "_setFlatData",
      value: function _setFlatData(data, value) {
        if (this.field) {
          data[this.field] = value;
        }
      } //nested field set

    }, {
      key: "_setNestedData",
      value: function _setNestedData(data, value) {
        var dataObj = data,
            structure = this.fieldStructure,
            length = structure.length;

        for (var i = 0; i < length; i++) {
          if (i == length - 1) {
            dataObj[structure[i]] = value;
          } else {
            if (!dataObj[structure[i]]) {
              if (typeof value !== "undefined") {
                dataObj[structure[i]] = {};
              } else {
                break;
              }
            }

            dataObj = dataObj[structure[i]];
          }
        }
      } //attach column to this group

    }, {
      key: "attachColumn",
      value: function attachColumn(column) {
        if (this.groupElement) {
          this.columns.push(column);
          this.groupElement.appendChild(column.getElement());
          column.columnRendered();
        } else {
          console.warn("Column Warning - Column being attached to another column instead of column group");
        }
      } //vertically align header in column

    }, {
      key: "verticalAlign",
      value: function verticalAlign(alignment, height) {
        //calculate height of column header and group holder element
        var parentHeight = this.parent.isGroup ? this.parent.getGroupElement().clientHeight : height || this.parent.getHeadersElement().clientHeight; // var parentHeight = this.parent.isGroup ? this.parent.getGroupElement().clientHeight : this.parent.getHeadersElement().clientHeight;

        this.element.style.height = parentHeight + "px";
        this.dispatch("column-height", this, this.element.style.height);

        if (this.isGroup) {
          this.groupElement.style.minHeight = parentHeight - this.contentElement.offsetHeight + "px";
        } //vertically align cell contents
        // if(!this.isGroup && alignment !== "top"){
        // 	if(alignment === "bottom"){
        // 		this.element.style.paddingTop = (this.element.clientHeight - this.contentElement.offsetHeight) + "px";
        // 	}else{
        // 		this.element.style.paddingTop = ((this.element.clientHeight - this.contentElement.offsetHeight) / 2) + "px";
        // 	}
        // }


        this.columns.forEach(function (column) {
          column.verticalAlign(alignment);
        });
      } //clear vertical alignment

    }, {
      key: "clearVerticalAlign",
      value: function clearVerticalAlign() {
        this.element.style.paddingTop = "";
        this.element.style.height = "";
        this.element.style.minHeight = "";
        this.groupElement.style.minHeight = "";
        this.columns.forEach(function (column) {
          column.clearVerticalAlign();
        });
        this.dispatch("column-height", this, "");
      } //// Retrieve Column Information ////
      //return column header element

    }, {
      key: "getElement",
      value: function getElement() {
        return this.element;
      } //return column group element

    }, {
      key: "getGroupElement",
      value: function getGroupElement() {
        return this.groupElement;
      } //return field name

    }, {
      key: "getField",
      value: function getField() {
        return this.field;
      }
    }, {
      key: "getTitleDownload",
      value: function getTitleDownload() {
        return this.titleDownload;
      } //return the first column in a group

    }, {
      key: "getFirstColumn",
      value: function getFirstColumn() {
        if (!this.isGroup) {
          return this;
        } else {
          if (this.columns.length) {
            return this.columns[0].getFirstColumn();
          } else {
            return false;
          }
        }
      } //return the last column in a group

    }, {
      key: "getLastColumn",
      value: function getLastColumn() {
        if (!this.isGroup) {
          return this;
        } else {
          if (this.columns.length) {
            return this.columns[this.columns.length - 1].getLastColumn();
          } else {
            return false;
          }
        }
      } //return all columns in a group

    }, {
      key: "getColumns",
      value: function getColumns(traverse) {
        var columns = [];

        if (traverse) {
          this.columns.forEach(function (column) {
            columns.push(column);
            columns = columns.concat(column.getColumns(true));
          });
        } else {
          columns = this.columns;
        }

        return columns;
      } //return all columns in a group

    }, {
      key: "getCells",
      value: function getCells() {
        return this.cells;
      } //retrieve the top column in a group of columns

    }, {
      key: "getTopColumn",
      value: function getTopColumn() {
        if (this.parent.isGroup) {
          return this.parent.getTopColumn();
        } else {
          return this;
        }
      } //return column definition object

    }, {
      key: "getDefinition",
      value: function getDefinition(updateBranches) {
        var colDefs = [];

        if (this.isGroup && updateBranches) {
          this.columns.forEach(function (column) {
            colDefs.push(column.getDefinition(true));
          });
          this.definition.columns = colDefs;
        }

        return this.definition;
      } //////////////////// Actions ////////////////////

    }, {
      key: "checkColumnVisibility",
      value: function checkColumnVisibility() {
        var visible = false;
        this.columns.forEach(function (column) {
          if (column.visible) {
            visible = true;
          }
        });

        if (visible) {
          this.show();
          this.dispatchExternal("columnVisibilityChanged", this.getComponent(), false);
        } else {
          this.hide();
        }
      } //show column

    }, {
      key: "show",
      value: function show(silent, responsiveToggle) {
        if (!this.visible) {
          this.visible = true;
          this.element.style.display = "";

          if (this.parent.isGroup) {
            this.parent.checkColumnVisibility();
          }

          this.cells.forEach(function (cell) {
            cell.show();
          });

          if (!this.isGroup && this.width === null) {
            this.reinitializeWidth();
          }

          this.table.columnManager.verticalAlignHeaders();
          this.dispatch("column-show", this, responsiveToggle);