tabulator-tables
Version:
Interactive table generation JavaScript library
1,710 lines (1,459 loc) • 801 kB
JavaScript
/* Tabulator v5.1.5 (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 _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
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 _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
height: false,
//height of tabulator
minHeight: false,
//minimum height of tabulator
maxHeight: false,
//maximum height of tabulator
columnHeaderVertAlign: "top",
//vertical alignment of column headers
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
tooltipGenerationMode: "load",
//when to generate tooltips
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,
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) {
return this.table.dataLoader.load(data, undefined, undefined, undefined, silent);
} //////////////////////////////////////////
///////////// 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() {
return this.table.modules.layout.layout();
} //////////////////////////////////////////
/////////////// 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];
} //////////////////////////////////////////
//////////////// 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.renderer.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,
"tooltip": undefined,
"cssClass": undefined,
"variableHeight": undefined,
"headerTooltip": 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");
this.element = this.element;
}
}, {
key: "_configureCell",
value: function _configureCell() {
var _this2 = this;
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);
});
} //update tooltip on mouse enter
if (this.table.options.tooltipGenerationMode === "hover") {
element.addEventListener("mouseenter", function (e) {
_this2._generateTooltip();
});
}
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 _this3 = this;
var val;
val = this.chain("cell-format", this, null, function () {
return _this3.element.innerHTML = _this3.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":
case "null":
this.element.innerHTML = "";
break;
default:
this.element.innerHTML = val;
}
}
}, {
key: "cellRendered",
value: function cellRendered() {
this.dispatch("cell-rendered", this);
} //generate tooltip text
}, {
key: "_generateTooltip",
value: function _generateTooltip() {
var tooltip = this.column.tooltip;
if (tooltip) {
if (tooltip === true) {
tooltip = this.value;
} else if (typeof tooltip == "function") {
tooltip = tooltip(this.getComponent());
if (tooltip === false) {
tooltip = "";
}
}
if (typeof tooltip === "undefined") {
tooltip = "";
}
this.element.setAttribute("title", tooltip);
} else {
this.element.setAttribute("title", "");
}
} //////////////////// 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) {
var changed = this.setValueProcessData(value, mutate);
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) {
var changed = false;
if (this.value !== value) {
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._generateTooltip();
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;
}
}, {
key: "setHeight",
value: function setHeight() {
this.height = this.row.height;
this.element.style.height = 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.tooltip = false; //hold column tooltip
_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 prestyled to improve render efficiency
_this.maxWidth = null; //column maximum width
_this.maxWidthStyled = ""; //column maximum prestyled to improve render efficiency
_this.maxInitialWidth = null;
_this.minWidth = null; //column minimum width
_this.minWidthStyled = ""; //column minimum prestyled 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();
_this.bindModuleColumns();
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");
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);
}
}
}, {
key: "_mapDepricatedFunctionality",
value: function _mapDepricatedFunctionality() {//all previously deprecated functionality removed in the 5.0 release
}
}, {
key: "setTooltip",
value: function setTooltip() {
var _this3 = this;
var def = this.definition; //set header tooltips
var tooltip = def.headerTooltip;
if (tooltip) {
if (tooltip === true) {
if (def.field) {
this.langBind("columns|" + def.field, function (value) {
_this3.element.setAttribute("title", value || def.title);
});
} else {
this.element.setAttribute("title", def.title);
}
} else {
if (typeof tooltip == "function") {
tooltip = tooltip(this.getComponent());
if (tooltip === false) {
tooltip = "";
}
}
this.element.setAttribute("title", tooltip);
}
} else {
this.element.setAttribute("title", "");
}
} //build header element
}, {
key: "_initialize",
value: function _initialize() {
var _this4 = this;
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._bindEvents();
this.contentElement = this._buildColumnHeaderContent();
this.element.appendChild(this.contentElement);
if (this.isGroup) {
this._buildGroupHeader();
} else {
this._buildColumnHeader();
}
this.setTooltip();
this.dispatch("column-init", this); //update header tooltip on mouse enter
this.element.addEventListener("mouseenter", function (e) {
_this4.setTooltip();
});
}
}, {
key: "_bindEvents",
value: function _bindEvents() {
var _this5 = this;
var def = this.definition,
dblTap,
tapHold,
tap; //setup header click event bindings
if (typeof def.headerClick == "function") {
this.element.addEventListener("click", function (e) {
def.headerClick(e, _this5.getComponent());
});
}
if (typeof def.headerDblClick == "function") {
this.element.addEventListener("dblclick", function (e) {
def.headerDblClick(e, _this5.getComponent());
});
}
if (typeof def.headerContext == "function") {
this.element.addEventListener("contextmenu", function (e) {
def.headerContext(e, _this5.getComponent());
});
} //setup header tap event bindings
if (typeof def.headerTap == "function") {
tap = false;
this.element.addEventListener("touchstart", function (e) {
tap = true;
}, {
passive: true
});
this.element.addEventListener("touchend", function (e) {
if (tap) {
def.headerTap(e, _this5.getComponent());
}
tap = false;
});
}
if (typeof def.headerDblTap == "function") {
dblTap = null;
this.element.addEventListener("touchend", function (e) {
if (dblTap) {
clearTimeout(dblTap);
dblTap = null;
def.headerDblTap(e, _this5.getComponent());
} else {
dblTap = setTimeout(function () {
clearTimeout(dblTap);
dblTap = null;
}, 300);
}
});
}
if (typeof def.headerTapHold == "function") {
tapHold = null;
this.element.addEventListener("touchstart", function (e) {
clearTimeout(tapHold);
tapHold = setTimeout(function () {
clearTimeout(tapHold);
tapHold = null;
tap = false;
def.headerTapHold(e, this.getComponent());
}, 1000);
}, {
passive: true
});
this.element.addEventListener("touchend", function (e) {
clearTimeout(tapHold);
tapHold = null;
});
}
} //build header element for header
}, {
key: "_buildColumnHeader",
value: function _buildColumnHeader() {
var _this6 = this;
var def = this.definition,
table = this.table;
this.dispatch("column-layout", this); //set column visibility
if (typeof def.visible != "undefined") {
if (def.visible) {
this.show(true);
} else {
this.hide(true);
}
} //asign additional css classes to column header
if (def.cssClass) {
var classeNames = def.cssClass.split(" ");
classeNames.forEach(function (className) {
_this6.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 tooltip if present
this.tooltip = this.definition.tooltip; //set orizontal 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 def = this.definition,
table = this.table;
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 _this7 = 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;
_this7.dispatchExternal("columnTitleChanged", _this7.getComponent());
});
titleHolderElement.appendChild(titleElement);
if (def.field) {
this.langBind("columns|" + def.field, function (text) {
titleElement.value = text || def.title || " ";
});
} else {
titleElement.value = def.title || " ";
}
} else {
if (def.field) {
this.langBind("columns|" + def.field, function (text) {
_this7._formatColumnHeaderTitle(titleHolderElement, text || def.title || " ");
});
} else {
this._formatColumnHeaderTitle(titleHolderElement, def.title || " ");
}
}
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":
case "null":
el.innerHTML = "";
break;
default:
el.innerHTML = contents;
}
} //build header element for column group
}, {
key: "_buildGroupHeader",
value: function _buildGroupHeader() {
var _this8 = 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 classeNames = this.definition.cssClass.split(" ");
classeNames.forEach(function (className) {
_this8.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());
} 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";
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 alignmenet
}, {
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();
});
}
}, {
key: "bindModuleColumns",
value: function bindModuleColumns() {
//check if rownum formatter is being used on a column
if (this.definition.formatter == "rownum") {
this.table.rowManager.rowNumColumn = this;
}
} //// Retreive Column Information ////
//return column header element
}, {
key: "getElement",
value: function getElement() {
return this.element;
} //return colunm 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) {