@refinitiv-ui/efx-grid 6.0.0-next.0

package/lib/tr-grid-util/es6/Table.js

@@ -0,0 +1,790 @@
+import { Dom } from "./Dom.js";
+import { Ext } from "./Ext.js";
+import { ElementWrapper } from "./ElementWrapper.js";
+import { SubTable } from "./SubTable.js";
+
+
+/** Table represents table (tag) element which can host multiple tbody, thead, tfoot elements at the same time
+* @constructor
+* @extends {ElementWrapper}
+* @param {(Element|number)=} elem Element is a place holder element (e.g. div). This should not be a table (tag) element. Column count may be placed here and if so, opt_colCount becomes row count.
+* @param {(number|Object)=} opt_colCount options
+* @param {number=} opt_rowCount
+*/
+var Table = function(elem, opt_colCount, opt_rowCount) {
+	var t = this;
+
+	if(elem && elem.nodeType === 1) {
+		t._elem = /** @type{Element} */(elem);
+	} else {
+		t._elem = Dom.create("div", "inline-table");
+		if(typeof elem == "number") {
+			if(typeof opt_colCount === "number") {
+				opt_rowCount = opt_colCount;
+			}
+			opt_colCount = elem;
+			elem = null;
+		}
+	}
+	t._elem.classList.add("js-table"); // Auto-generated class for generic styling
+
+	t._table = Dom.create("table");
+	// t._table.style.borderCollapse = "collapse"; // Collapse border by default
+	t._colgroup = document.createElement("colgroup");
+
+	t._tbody = new SubTable("tbody");
+	t._subs = [t._tbody]; // tbody will always be the first item
+
+	var options = null;
+	if(opt_colCount && typeof opt_colCount !== "number") {
+		options = /** @type{Object} */(opt_colCount);
+		opt_colCount = 0;
+	}
+	if(opt_colCount > 0) {
+		t.addColumns(opt_colCount);
+	}
+	if(opt_rowCount > 0) {
+		t.addRows(opt_rowCount);
+	}
+	t._table.appendChild(t._colgroup);
+	t._table.appendChild(t._tbody.getElement());
+
+	t.fixateTableWidth(); // By default, table should be able to overflow its container if it has a fixed size
+
+	t.init(options);
+
+	t._elem.appendChild(t._table); // Append the entire table last to save some page reflow
+};
+Ext.inherits(Table, ElementWrapper);
+
+/** @type {!Element}
+* @private
+*/
+Table.prototype._table;
+/** @type {!Element}
+* @private
+*/
+Table.prototype._colgroup;
+/** @type {number}
+* @private
+*/
+Table.prototype._colCount = 0;
+/** @type {number|null}
+* @private
+*/
+Table.prototype._defaultRowHeight = null;
+
+/** @type {number|null}
+* @private
+*/
+Table.prototype._defaultColumnWidth = null;
+/** @type {boolean}
+* @private
+*/
+Table.prototype._autoWidthUpdate = false;
+
+/** @type {!SubTable}
+* @private
+*/
+Table.prototype._tbody;
+/** @type {SubTable}
+* @private
+*/
+Table.prototype._thead;
+/** @type {SubTable}
+* @private
+*/
+Table.prototype._tfoot;
+/** @type {!Array.<SubTable>}
+* @private
+*/
+Table.prototype._subs;
+
+
+/** @public
+* @return {Element}
+*/
+Table.prototype.getTableElement = function() {
+	return this._table;
+};
+/** @public
+* @param {number} col
+* @param {number} row
+* @param {number} width
+* @param {number} height
+*/
+Table.prototype.setCRWH = function(col, row, width, height) {
+	this.setColumnCount(col);
+	this.setRowCount(row);
+	this.setSize(width, height);
+};
+/** @public
+* @param {Object} options
+*/
+Table.prototype.init = function(options) {
+	if(!options) {
+		return;
+	}
+
+	var colWidth = options["colWidth"] || options["cellWidth"];
+	if(colWidth) {
+		this.setDefaultColumnWidth(colWidth);
+	}
+	var rowHeight = options["rowHeight"] || options["cellHeight"];
+	if(rowHeight) {
+		this.setDefaultRowHeight(rowHeight);
+	}
+
+	var colCount = options["colCount"];
+	if(colCount) {
+		this.setColumnCount(colCount);
+	}
+	var rowCount = options["rowCount"];
+	if(rowCount) {
+		this.setRowCount(rowCount);
+	}
+
+	var tableWidth = options["width"] || options["tableWidth"];
+	if(tableWidth && this._colCount) { // TODO: Move this to setWidth() method
+		this.setDefaultColumnWidth((tableWidth / this._colCount) | 0);
+	}
+
+	var tableHeight = options["height"] || options["tableHeight"];
+	if(tableHeight) { // TODO: Move this to setHeight() method
+		rowCount = this.getRowCount();
+		if(rowCount) {
+			this.setDefaultRowHeight((tableHeight / rowCount) | 0);
+		}
+	}
+};
+
+/** @public
+* @param {number=} opt_count
+* @return {Array.<Element>} Array of col elements (not td or cell)
+*/
+Table.prototype.addColumns = function(opt_count) {
+	if(opt_count == null) { opt_count = 1; }
+	else if(opt_count <= 0) { return null; }
+
+	var cols = [];
+	var c;
+	for(c = opt_count; --c >= 0;) {
+		var col = document.createElement("col");
+		this._colgroup.appendChild(col);
+		cols[c] = col;
+	}
+	this._colCount += opt_count;
+
+	if(this._defaultColumnWidth != null) {
+		var minWidth = this._defaultColumnWidth + "px";
+		for(c = opt_count; --c >= 0;) {
+			cols[c].style.width = minWidth;
+		}
+	}
+
+	for(var i = this._subs.length; --i >= 0;) {
+		this._subs[i].addColumns(opt_count);
+	}
+	this._updateTableWidth();
+	return cols;
+};
+/** @public
+* @param {number=} opt_count
+*/
+Table.prototype.removeColumns = function(opt_count) {
+	if(opt_count == null || opt_count >= this._colCount) {
+		this.removeAllColumns();
+		return;
+	}
+	if(opt_count <= 0) { return; }
+
+	this._colCount -= opt_count;
+	Dom.removeChildren(this._colgroup, opt_count);
+
+	for(var i = this._subs.length; --i >= 0;) {
+		this._subs[i].removeColumns(opt_count);
+	}
+	this._updateTableWidth();
+};
+/** @public */
+Table.prototype.removeAllColumns = function() {
+	if(this._colCount <= 0) { return; }
+	this._colCount = 0;
+	Dom.removeChildren(this._colgroup);
+
+	for(var i = this._subs.length; --i >= 0;) {
+		this._subs[i].removeAllColumns(); // Removing all column will also remove all rows
+	}
+	this._updateTableWidth();
+};
+/** @public
+* @param {number} val
+*/
+Table.prototype.setColumnCount = function(val) {
+	if(val >= this._colCount) {
+		this.addColumns(val - this._colCount);
+	} else {
+		this.removeColumns(this._colCount - val);
+	}
+};
+
+/** @public
+* @param {number=} opt_count
+* @return {!Array.<Element>} Array of tr (HTMLTableRowElement) elements
+*/
+Table.prototype.addRows = function(opt_count) {
+	return this._tbody.addRows(opt_count);
+};
+/** @public
+* @param {number=} opt_count
+*/
+Table.prototype.removeRows = function(opt_count) {
+	this._tbody.removeRows(opt_count);
+};
+/** @public */
+Table.prototype.removeAllRows = function() {
+	this._tbody.removeAllRows();
+};
+/** @public
+* @param {number} val
+*/
+Table.prototype.setRowCount = function(val) {
+	this._tbody.setRowCount(val);
+};
+
+/** @public
+* @return {number}
+*/
+Table.prototype.getColumnCount = function() { return this._colCount; };
+/** @public
+* @return {number}
+*/
+Table.prototype.getRowCount = function() { return this._tbody.getRowCount(); };
+/** @public
+* @param {number} c
+* @param {number} r
+* @return {Element}
+*/
+Table.prototype.getCell = function(c, r) { return this._tbody.getCell(c, r); };
+/** @public
+* @param {number} c
+* @return {Array.<Element>} Array of td (HTMLTableCellElement) elements
+*/
+Table.prototype.getCellsInColumn = function(c) { return this._tbody.getCellsInColumn(c); };
+/** @public
+* @param {number} r
+* @return {Array.<Element>} Array of td (HTMLTableCellElement) elements
+*/
+Table.prototype.getCellsInRow = function(r) { return this._tbody.getCellsInRow(r); };
+/** @public
+* @return {!Array.<Element>} Array of td (HTMLTableCellElement) elements
+*/
+Table.prototype.getAllCells = function() { return this._tbody.getAllCells(); };
+/** @public
+* @return {!Array.<Element>} Array of tr (HTMLTableRowElement) elements
+*/
+Table.prototype.getAllRows = function() { return this._tbody.getAllRows(); };
+/** @public
+* @return {!Array<Element>} Array of tr (HTMLTableRowElement) elements
+*/
+Table.prototype.getRows = Table.prototype.getAllRows;
+/** @public
+* @param {number} r
+* @return {Element} Array of tr (HTMLTableRowElement) elements
+*/
+Table.prototype.getRow = function(r) { return this._tbody.getRow(r); };
+
+/** @public
+* @param {number} c1
+* @param {number} c2
+* @param {number} r1
+* @param {number} r2
+* @return {Element} Top left cell element
+*/
+Table.prototype.spanBlock = function(c1, c2, r1, r2) { return this._tbody.spanBlock(c1, c2, r1, r2); };
+/** Horizontally span the cell from the first column to cover the entire row. This is useful for creating header row
+* @public
+* @param {number} r
+* @param {boolean} bool
+* @return {Element} Top left cell element
+*/
+Table.prototype.spanHorizontally = function(r, bool) {
+	return this._tbody.spanBlock(0, (bool !== false) ? this._colCount : 0, r, r);
+};
+
+/** @public
+* @param {number|string|Array.<string|number>} val
+* @param {number=} opt_at
+*/
+Table.prototype.setColMinWidths = function(val, opt_at) {
+	this._setColStyle("width", val, opt_at);
+	this._updateTableWidth();
+};
+/** @public
+* @function
+* @param {number|string|Array.<string|number>} val
+* @param {number=} opt_at
+*/
+Table.prototype.setColumnWidths = Table.prototype.setColMinWidths;
+/** @public
+* @param {string|Array.<string>} val
+* @param {number=} opt_at
+*/
+Table.prototype.setColBackgroundColors = function(val, opt_at) {
+	this._setColStyle("background-color", val, opt_at);
+};
+/** @public
+* @function
+* @param {string|Array.<string>} val
+* @param {number=} opt_at
+*/
+Table.prototype.setColBGColors = Table.prototype.setColBackgroundColors; // Alias
+/** @public
+* @param {number|string|Array.<number|string>} val
+* @param {number=} opt_at
+*/
+Table.prototype.setColBorders = function(val, opt_at) {
+	this._setColStyle("border", val, opt_at);
+};
+
+/** @public
+* @param {number} width
+* @param {number} height
+*/
+Table.prototype.setSize = function(width, height) {
+	if(this._colCount < 0) { this.addColumns(); }
+	if(this.getRowCount() < 0) { this.addRows(); }
+
+	this.setCellSize((width / this._colCount) | 0, (height / this.getRowCount()) | 0);
+};
+/** @public
+* @param {number} defaultWidth
+* @param {number} defaultHeight
+*/
+Table.prototype.setCellSize = function(defaultWidth, defaultHeight) {
+	this.setDefaultColumnWidth(defaultWidth);
+	this.setDefaultRowHeight(defaultHeight);
+};
+/** @public
+* @param {(number|null)=} val
+*/
+Table.prototype.setDefaultColumnWidth = function(val) {
+	if(!val) { val = null; }
+	if(val === this._defaultColumnWidth) { return; }
+
+	this._defaultColumnWidth = val;
+	if(this._colCount > 0) {
+		this._setColStyle("width", this._defaultColumnWidth || "");
+	}
+	this._updateTableWidth();
+};
+/** @public
+* @param {(number|null)=} val
+*/
+Table.prototype.setDefaultRowHeight = function(val) {
+	if(!val) { val = null; }
+	if(val === this._defaultRowHeight) { return; }
+
+	this._defaultRowHeight = val;
+
+	for(var i = this._subs.length; --i >= 0;) {
+		this._subs[i].setDefaultRowHeight(val);
+	}
+};
+/** Distribute columns based on their textContent length
+* @public
+*/
+Table.prototype.distributeColumnWidth = function() {
+	if(this._colCount <= 1) {
+		return;
+	}
+	var txtRows = this._tbody.getTextContents();
+	var rowCount = txtRows.length;
+	if(!rowCount) {
+		return;
+	}
+	var maxWidths = new Array(this._colCount);
+	var txtRow = txtRows[0];
+	for(var c = 0; c < this._colCount; ++c) {
+		maxWidths[c] = txtRow[c].length;
+	}
+	for(var r = 1; r < rowCount; ++r) {
+		txtRow = txtRows[r];
+		for(c = 0; c < this._colCount; ++c) {
+			if(maxWidths[c] < txtRow[c].length) {
+				maxWidths[c] = txtRow[c].length;
+			}
+		}
+	}
+	var longestColumn = 0;
+	var maxWidth = maxWidths[0];
+	for(c = this._colCount; --c >= 1;) {
+		if(maxWidth < maxWidths[c]) {
+			maxWidth = maxWidths[c];
+			longestColumn = c;
+		}
+	}
+	for(c = this._colCount; --c >= 0;) {
+		maxWidths[c] = Math.floor(maxWidths[c] / maxWidth * 100) + "%";
+	}
+	maxWidths[longestColumn] = "";
+	this.setColumnWidths(maxWidths);
+};
+
+/** @public
+* @param {number=} opt_rowLimit
+*/
+Table.prototype.log = function(opt_rowLimit) {
+	var trs = this.getRows();
+	var rowCount = trs.length;
+	if(!opt_rowLimit || opt_rowLimit <= 0) { opt_rowLimit = rowCount; }
+
+	var c;
+	var colNames = new Array(this._colCount);
+	for(c = 0; c < this._colCount; ++c) {
+		var hCell = this.getHeaderCell(c, 0);
+		var hStr = hCell ? hCell.textContent : "";
+		colNames[c] = hStr || ("" + c);
+	}
+
+	var rows = [];
+	for(var r = 0; r < rowCount; ++r) {
+		var cols = {};
+		for(c = 0; c < this._colCount; ++c) {
+			cols[colNames[c]] = trs[r].cells[c].textContent;
+		}
+		if(rows.length < opt_rowLimit) {
+			rows.push(cols);
+		} else {
+			break;
+		}
+	}
+	console.table(rows);
+};
+/** @public
+* @return {!Array.<Array.<string>>}
+*/
+Table.prototype.getTextContents = function() { return this._tbody.getTextContents(); };
+/** @public
+* @param {number} c
+* @param {number} r
+* @return {string}
+*/
+Table.prototype.getCellTextContent = function(c, r) { return this._tbody.getCellTextContent(c, r); };
+/** @public
+* @param {number} c
+* @return {string}
+*/
+Table.prototype.getColumnTextContent = function(c) { return this._tbody.getColumnTextContent(c); };
+/** @public
+* @param {number} r
+* @return {string}
+*/
+Table.prototype.getRowTextContent = function(r) { return this._tbody.getRowTextContent(r); };
+/** @public
+* @return {string}
+*/
+Table.prototype.getTableTextContent = function() { return this._tbody.getTableTextContent(); };
+
+/** Try to make table to have fixed size. Table may not have a fixed size, if one of its column has no width (dynamic width).
+* @public
+* @function
+* @param {boolean=} opt_bool
+*/
+Table.prototype.fixateTableWidth = function(opt_bool) {
+	this._autoWidthUpdate = (opt_bool !== false);
+	if(this._autoWidthUpdate) {
+		this._updateTableWidth();
+	} else if(this._table.style.width) {
+		this._table.style.width = "";
+	}
+};
+/** Opposite of {@link Table#fixateTableWidth}
+* @public
+* @param {boolean=} opt_bool
+*/
+Table.prototype.loosenTableWidth = function(opt_bool) {
+	this.fixateTableWidth(opt_bool === false);
+};
+
+/** @public
+* @param {number=} opt_count
+* @return {!Array.<Element>} Array of tr (HTMLTableRowElement) elements
+*/
+Table.prototype.addHeaderRows = function(opt_count) {
+	this._addHeader();
+
+	return this._thead.addRows(opt_count);
+};
+/** @public
+* @param {number} c
+* @param {number} r
+* @return {Element}
+*/
+Table.prototype.getHeaderCell = function(c, r) {
+	if(this._thead) {
+		return this._thead.getCell(c, r);
+	}
+	return null;
+};
+/** @public
+* @return {!Array.<Element>} Array of td (HTMLTableCellElement) elements
+*/
+Table.prototype.getAllHeaderCells = function() {
+	if(!this._thead) { return []; }
+
+	return this._thead.getAllCells();
+};
+/** @public
+* @param {number=} opt_count
+*/
+Table.prototype.removeHeaderRows = function(opt_count) {
+	if(this._thead) {
+		this._thead.removeRows(opt_count);
+	}
+};
+
+/** @public
+* @param {number=} opt_count
+* @return {!Array.<Element>} Array of tr (HTMLTableRowElement) elements
+*/
+Table.prototype.addFooterRows = function(opt_count) {
+	this._addFooter();
+
+	return this._tfoot.addRows(opt_count);
+};
+/** @public
+* @param {number} c
+* @param {number} r
+* @return {Element}
+*/
+Table.prototype.getFooterCell = function(c, r) {
+	if(this._tfoot) {
+		return this._tfoot.getCell(c, r);
+	}
+	return null;
+};
+/** @public
+* @return {!Array.<Element>} Array of td (HTMLTableCellElement) elements
+*/
+Table.prototype.getAllFooterCells = function() {
+	if(!this._tfoot) { return []; }
+
+	return this._tfoot.getAllCells();
+};
+/** @public
+* @param {number=} opt_count
+*/
+Table.prototype.removeFooterRows = function(opt_count) {
+	if(this._tfoot) {
+		this._tfoot.removeRows(opt_count);
+	}
+};
+
+/** @public
+* @param {Event} e
+* @return {number}
+*/
+Table.prototype.getColumnIndex = function(e) {
+	return this._tbody.getColumnIndex(e);
+};
+/** @public
+* @param {Event} e
+* @return {number}
+*/
+Table.prototype.getRowIndex = function(e) {
+	return this._tbody.getRowIndex(e);
+};
+/** @public
+* @param {number} colIndex
+* @param {number=} rowIndex
+* @return {number}
+*/
+Table.prototype.getColumnLeft = function(colIndex, rowIndex) {
+	return this._tbody.getColumnLeft(colIndex, rowIndex);
+};
+/** @public
+* @param {number|Element} rowRef
+* @return {number}
+*/
+Table.prototype.getRowTop = function(rowRef) {
+	return this._tbody.getRowTop(rowRef) + this._tbody.getElement().offsetTop;
+};
+/** @public
+* @param {Element} cell
+* @param {Object=} ret_obj
+* @return {!Object} Object with x and y property
+*/
+Table.prototype.getCellPosition = function(cell, ret_obj) {
+	ret_obj = this._tbody.getCellPosition(cell, ret_obj);
+	ret_obj["y"] += this._tbody.getElement().offsetTop;
+	return ret_obj;
+};
+
+/** This will change size of the table
+* @public
+* @param {Element} tblElem
+*/
+Table.prototype.cloak = function(tblElem) {
+	if(!tblElem) { return; }
+	if(!tblElem.parentElement) { return; }
+	if(tblElem.tagName !== "TABLE") { return; }
+	this._elem = tblElem.parentElement;
+	this._elem.classList.add("js-table");
+
+	this._table = tblElem;
+	var elems = tblElem.getElementsByTagName("COLGROUP");
+	this._colgroup = (elems[0]) ? elems[0] : document.createElement("colgroup");
+
+	elems = tblElem.getElementsByTagName("TR");
+	this._colCount = elems[0] ? elems[0].children.length : 0;
+	this._autoWidthUpdate = this._table.getAttribute("width") ? true : false;
+
+	elems = tblElem.getElementsByTagName("TBODY");
+	if(elems[0]) {
+		this._tbody.cloak(elems[0]);
+	}
+	elems = tblElem.getElementsByTagName("THEAD");
+	if(elems[0]) {
+		this._addHeader(elems[0]);
+	}
+	elems = tblElem.getElementsByTagName("TFOOT");
+	if(elems[0]) {
+		this._addFooter(elems[0]);
+	}
+};
+
+/** @public
+* @return {SubTable}
+*/
+Table.prototype.getBody = function() {
+	return this._tbody;
+};
+/** @public
+* @return {SubTable}
+*/
+Table.prototype.getHeader = function() {
+	return this._thead;
+};
+/** @public
+* @return {SubTable}
+*/
+Table.prototype.getFooter = function() {
+	return this._tfoot;
+};
+
+
+/** @private
+* @param {Element=} opt_elem
+*/
+Table.prototype._addHeader = function(opt_elem) {
+	var t = this;
+	if(!t._thead) {
+		t._thead = new SubTable((opt_elem) ? opt_elem : "thead");
+		t._subs.push(t._thead);
+
+		t._thead.setColumnCount(t._colCount);
+		t._thead.setDefaultRowHeight(t._defaultRowHeight);
+		t._table.insertBefore(t._thead.getElement(), t._tbody.getElement());
+	} else if(opt_elem) {
+		t._thead.cloak(opt_elem);
+	}
+};
+/** @private
+* @param {Element=} opt_elem
+*/
+Table.prototype._addFooter = function(opt_elem) {
+	var t = this;
+	if(!t._tfoot) {
+		t._tfoot = new SubTable((opt_elem) ? opt_elem : "tfoot");
+		t._subs.push(t._tfoot);
+
+		t._tfoot.setColumnCount(t._colCount);
+		t._tfoot.setDefaultRowHeight(t._defaultRowHeight);
+		t._table.appendChild(t._tfoot.getElement());
+	} else if(opt_elem) {
+		t._tfoot.cloak(opt_elem);
+	}
+};
+
+/** Only four styles available for colgroup which are border, background, width, and visibility
+* @private
+* @param {string} prop
+* @param {number|string|Array.<number|string>} val
+* @param {number=} opt_at
+*/
+Table.prototype._setColStyle = function(prop, val, opt_at) {
+	if(val == null) { val = ""; }
+	var c, col;
+	if(val instanceof Array) {
+		var count = (val.length < this._colCount) ? val.length : this._colCount;
+		for(c = count; --c >= 0;) {
+			var str = val[c];
+			if(typeof str === "number") { str = str + "px"; }
+			if(str) {
+				col = this._colgroup.children[c];
+				col.style[prop] = str;
+			}
+		}
+	} else {
+		if(typeof val === "number") { val = val + "px"; }
+		if(typeof opt_at === "number") {
+			col = this._colgroup.children[opt_at];
+			if(col) {
+				col.style[prop] = val;
+			}
+		} else {
+			for(c = this._colCount; --c >= 0;) {
+				col = this._colgroup.children[c];
+				col.style[prop] = val;
+			}
+		}
+	}
+};
+/** @private */
+Table.prototype._updateTableWidth = function() {
+	if(!this._autoWidthUpdate) { return; }
+
+	var fixedWidth = true;
+	var totalWidth = 0;
+	for(var c = this._colCount; --c >= 0;) {
+		var col = this._colgroup.children[c];
+		var str = col.style.width;
+		if(!str) {
+			fixedWidth = false;
+			break;
+		}
+		totalWidth += parseFloat(str);
+	}
+
+	if(fixedWidth && totalWidth > 0) {
+		this._table.style.width = totalWidth + "px";
+	} else if(this._table.style.width) {
+		this._table.style.width = "";
+	}
+};
+/** @private
+* @param {Array.<Array>} ary
+* @return {number}
+*/
+Table.prototype._adjustColCount = function(ary) {
+	if(this._colCount > 0) {
+		return this._colCount;
+	}
+
+	var colCount = 0;
+	var rowCount = ary.length;
+
+	for(var r = 0; r < rowCount; ++r) {
+		var cols = ary[r];
+		if(cols.length > colCount) {
+			colCount = cols.length;
+		}
+	}
+
+	this.setColumnCount(colCount);
+	return colCount;
+};
+
+export default Table;
+export { Table };