@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

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

@@ -0,0 +1,832 @@
+import { Dom } from "./Dom.js";
+import { Ext } from "./Ext.js";
+import { ElementWrapper } from "./ElementWrapper.js";
+import { SubTable } from "./SubTable.js";
+
+/** @typedef {Object} Table~Options
+* @description Options for Table initialization
+* @property {number=} colCount=0 Number of columns
+* @property {number=} rowCount=0 Number of rows in content table (tbody)
+* @property {number=} cellWidth Default cell width of each column
+* @property {number=} cellHeight Default cell height of each row
+* @property {number=} width Total width of the table. If it is specified, it will override cellWidth
+* @property {number=} height Total height of the table. If it is specified, it will override cellHeight
+* @property {number=} header=0 Number of header rows
+* @property {number=} footer=0 Number of footer rows
+*/
+
+/** Table represents table (tag) element which can host multiple tbody, thead, tfoot elements at the same time
+* @constructor
+* @extends {ElementWrapper}
+* @param {Element=} elem Element is a place holder element (e.g., div). This should not be a table (tag) element.
+* @param {Table~Options=} options
+* @example
+* let elem = document.getElementById("table_div");
+* // Create a table element with 2 columns and 3 rows inside the given element
+* let tbl = new Table(elem, {colCount: 2, rowCount: 3});
+*/
+let Table = function(elem, options) {
+	let t = this;
+
+	let colCount = 0;
+	let rowCount = 0;
+	if(elem && elem.nodeType === 1) {
+		t._elem = /** @type{Element} */(elem);
+	} else {
+		t._elem = Dom.create("div", "inline-table");
+		if(typeof elem == "number") {
+			if(typeof options === "number") {
+				rowCount = options;
+				options = null;
+			}
+			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
+
+	let configObj = null;
+	if(options) {
+		if(typeof options == "number") {
+			colCount = options;
+		} else {
+			configObj = /** @type{Object} */(options);
+		}
+	}
+	if(colCount > 0) {
+		t.addColumns(colCount);
+	}
+	if(rowCount > 0) {
+		t.addRows(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(configObj);
+
+	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 {Table~Options} options
+*/
+Table.prototype.init = function(options) {
+	if(!options) {
+		return;
+	}
+
+	let colWidth = options["colWidth"] || options["cellWidth"];
+	if(colWidth) {
+		this.setDefaultColumnWidth(colWidth);
+	}
+	let rowHeight = options["rowHeight"] || options["cellHeight"];
+	if(rowHeight) {
+		this.setDefaultRowHeight(rowHeight);
+	}
+
+	let colCount = options["colCount"];
+	if(colCount) {
+		this.setColumnCount(colCount);
+	}
+	let rowCount = options["rowCount"];
+	if(rowCount) {
+		this.setRowCount(rowCount);
+	}
+
+	let tableWidth = options["width"] || options["tableWidth"];
+	if(tableWidth && this._colCount) { // TODO: Move this to setWidth() method
+		this.setDefaultColumnWidth((tableWidth / this._colCount) | 0);
+	}
+
+	let tableHeight = options["height"] || options["tableHeight"];
+	if(tableHeight) { // TODO: Move this to setHeight() method
+		rowCount = this.getRowCount();
+		if(rowCount) {
+			this.setDefaultRowHeight((tableHeight / rowCount) | 0);
+		}
+	}
+
+	let header = options["header"];
+	if(header != null) {
+		if(header) {
+			rowCount = (typeof header === "number") ? header : 1;
+
+			this._addHeader();
+			this._thead.setRowCount(rowCount);
+		} else if(this._thead) {
+			Dom.removeParent(this._thead.getElement());
+			this._thead = null;
+		}
+	}
+
+	let footer = options["footer"];
+	if(footer != null) {
+		if(footer) {
+			rowCount = (typeof footer === "number") ? footer : 1;
+
+			this._addFooter();
+			this._tfoot.setRowCount(rowCount);
+		} else if(this._tfoot) {
+			Dom.removeParent(this._tfoot.getElement());
+			this._tfoot = null;
+		}
+	}
+};
+
+/** @public
+* @param {number=} count=1
+* @return {Array.<Element>} Array of col elements (not td or cell)
+*/
+Table.prototype.addColumns = function(count) {
+	if(count == null) { count = 1; }
+	else if(count <= 0) { return null; }
+
+	let cols = [];
+	let c;
+	for(c = count; --c >= 0;) {
+		let col = document.createElement("col");
+		this._colgroup.appendChild(col);
+		cols[c] = col;
+	}
+	this._colCount += count;
+
+	if(this._defaultColumnWidth != null) {
+		let minWidth = this._defaultColumnWidth + "px";
+		for(c = count; --c >= 0;) {
+			cols[c].style.width = minWidth;
+		}
+	}
+
+	for(let i = this._subs.length; --i >= 0;) {
+		this._subs[i].addColumns(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(let 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(let 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=} count=1
+* @return {!Array.<Element>} Array of tr (HTMLTableRowElement) elements
+*/
+Table.prototype.addRows = function(count) {
+	return this._tbody.addRows(count);
+};
+/** @public
+* @param {number=} count Number of rows to be removed. If count is not specified, all rows are removed
+*/
+Table.prototype.removeRows = function(count) {
+	this._tbody.removeRows(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
+* @function
+* @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 Starting column index
+* @param {number} c2 Destination column index
+* @param {number} r1 Starting row index
+* @param {number} r2 Destination row index
+* @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=} colIndex Column index
+*/
+Table.prototype.setColMinWidths = function(val, colIndex) {
+	this._setColStyle("width", val, colIndex);
+	this._updateTableWidth();
+};
+/** @public
+* @function
+* @param {number|string|Array.<string|number>} val
+* @param {number=} colIndex Column index
+*/
+Table.prototype.setColumnWidths = Table.prototype.setColMinWidths;
+/** @public
+* @param {string|Array.<string>} val
+* @param {number=} colIndex Column index
+*/
+Table.prototype.setColBackgroundColors = function(val, colIndex) {
+	this._setColStyle("background-color", val, colIndex);
+};
+/** @public
+* @function
+* @param {string|Array.<string>} val
+* @param {number=} colIndex Column index
+*/
+Table.prototype.setColBGColors = Table.prototype.setColBackgroundColors; // Alias
+/** @public
+* @param {number|string|Array.<number|string>} val
+* @param {number=} colIndex Column index
+*/
+Table.prototype.setColBorders = function(val, colIndex) {
+	this._setColStyle("border", val, colIndex);
+};
+
+/** @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
+* @return {number|null}
+*/
+Table.prototype.getDefaultColumnWidth = function() {
+	return this._defaultColumnWidth;
+};
+/** @public
+* @param {(number|null)=} val
+*/
+Table.prototype.setDefaultRowHeight = function(val) {
+	if(!val) { val = null; }
+	if(val === this._defaultRowHeight) { return; }
+
+	this._defaultRowHeight = val;
+
+	for(let i = this._subs.length; --i >= 0;) {
+		this._subs[i].setDefaultRowHeight(val);
+	}
+};
+/** @public
+* @return {number|null}
+*/
+Table.prototype.getDefaultRowHeight = function() {
+	return this._defaultRowHeight;
+};
+/** Distribute columns based on their textContent length
+* @public
+*/
+Table.prototype.distributeColumnWidth = function() {
+	if(this._colCount <= 1) {
+		return;
+	}
+	let txtRows = this._tbody.getTextContents();
+	let rowCount = txtRows.length;
+	if(!rowCount) {
+		return;
+	}
+	let maxWidths = new Array(this._colCount);
+	let txtRow = txtRows[0];
+	let c;
+	for(c = 0; c < this._colCount; ++c) {
+		maxWidths[c] = txtRow[c].length;
+	}
+	for(let 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;
+			}
+		}
+	}
+	let longestColumn = 0;
+	let 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
+* @return {Array<Object>} Array of rows that just log in console
+*/
+Table.prototype.log = function(opt_rowLimit) {
+	let trs = this.getRows();
+	let rowCount = trs.length;
+	if(!opt_rowLimit || opt_rowLimit <= 0) { opt_rowLimit = rowCount; }
+
+	let c;
+	let colNames = new Array(this._colCount);
+	for(c = 0; c < this._colCount; ++c) {
+		let hCell = this.getHeaderCell(c, 0);
+		let hStr = hCell ? hCell.textContent : "";
+		colNames[c] = hStr || ("" + c);
+	}
+
+	let rows = [];
+	for(let r = 0; r < rowCount; ++r) {
+		let 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);
+	return rows; // Debug
+};
+/** @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;
+	let 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=} elem
+*/
+Table.prototype._addHeader = function(elem) {
+	let t = this;
+	if(!t._thead) {
+		t._thead = new SubTable(elem ? 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(elem) {
+		t._thead.cloak(elem);
+	}
+};
+/** @private
+* @param {Element=} elem
+*/
+Table.prototype._addFooter = function(elem) {
+	let t = this;
+	if(!t._tfoot) {
+		t._tfoot = new SubTable(elem ? 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(elem) {
+		t._tfoot.cloak(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 = ""; }
+	let c, col;
+	if(val instanceof Array) {
+		let count = (val.length < this._colCount) ? val.length : this._colCount;
+		for(c = count; --c >= 0;) {
+			let 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; }
+
+	let fixedWidth = true;
+	let totalWidth = 0;
+	for(let c = this._colCount; --c >= 0;) {
+		let col = this._colgroup.children[c];
+		let 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 = "";
+	}
+};
+
+
+export default Table;
+export { Table };