tabulator-tables 5.4.3 → 5.5.0

package/src/js/core/rendering/Renderer.js

@@ -1,204 +1,204 @@
-import CoreFeature from '../CoreFeature.js';
-import Helpers from '../tools/Helpers.js';
-
-export default class Renderer extends CoreFeature{
-	constructor(table){
-		super(table);
-
-		this.elementVertical = table.rowManager.element;
-		this.elementHorizontal = table.columnManager.element;
-		this.tableElement =  table.rowManager.tableElement;
-
-		this.verticalFillMode = "fit"; // used by row manager to determine how to size the render area ("fit" - fits container to the contents, "fill" - fills the container without resizing it)
-	}
-
-
-	///////////////////////////////////
-	/////// Internal Bindings /////////
-	///////////////////////////////////
-
-	initialize(){
-		//initialize core functionality
-	}
-
-	clearRows(){
-		//clear down existing rows layout
-	}
-
-	clearColumns(){
-		//clear down existing columns layout
-	}
-
-
-	reinitializeColumnWidths(columns){
-		//resize columns to fit data
-	}
-
-
-	renderRows(){
-		//render rows from a clean slate
-	}
-
-	renderColumns(){
-		//render columns from a clean slate
-	}
-
-	rerenderRows(callback){
-		// rerender rows and keep position
-		if(callback){
-			callback();
-		}
-	}
-
-	rerenderColumns(update, blockRedraw){
-		//rerender columns
-	}
-
-	renderRowCells(row){
-		//render the cells in a row
-	}
-
-	rerenderRowCells(row, force){
-		//rerender the cells in a row
-	}
-
-	scrollColumns(left, dir){
-		//handle horizontal scrolling
-	}
-
-	scrollRows(top, dir){
-		//handle vertical scrolling
-	}
-
-	resize(){
-		//container has resized, carry out any needed recalculations (DO NOT RERENDER IN THIS FUNCTION)
-	}
-
-	scrollToRow(row){
-		//scroll to a specific row
-	}
-
-	scrollToRowNearestTop(row){
-		//determine weather the row is nearest the top or bottom of the table, return true for top or false for bottom
-	}
-
-	visibleRows(includingBuffer){
-		//return the visible rows
-		return [];
-	}
-
-	///////////////////////////////////
-	//////// Helper Functions /////////
-	///////////////////////////////////
-
-	rows(){
-		return this.table.rowManager.getDisplayRows();
-	}
-
-	styleRow(row, index){
-		var rowEl = row.getElement();
-
-		if(index % 2){
-			rowEl.classList.add("tabulator-row-even");
-			rowEl.classList.remove("tabulator-row-odd");
-		}else{
-			rowEl.classList.add("tabulator-row-odd");
-			rowEl.classList.remove("tabulator-row-even");
-		}
-	}
-
-	///////////////////////////////////
-	/////// External Triggers /////////
-	/////// (DO NOT OVERRIDE) /////////
-	///////////////////////////////////
-
-	clear(){
-		//clear down existing layout
-		this.clearRows();
-		this.clearColumns();
-	}
-
-	render(){
-		//render from a clean slate
-		this.renderRows();
-		this.renderColumns();
-	}
-
-	rerender(callback){
-		// rerender and keep position
-		this.rerenderRows();
-		this.rerenderColumns();
-	}
-
-	scrollToRowPosition(row, position, ifVisible){
-		var rowIndex = this.rows().indexOf(row),
-		rowEl = row.getElement(),
-		offset = 0;
-
-		return new Promise((resolve, reject) => {
-			if(rowIndex > -1){
-
-				if(typeof ifVisible === "undefined"){
-					ifVisible = this.table.options.scrollToRowIfVisible;
-				}
-
-				//check row visibility
-				if(!ifVisible){
-					if(Helpers.elVisible(rowEl)){
-						offset = Helpers.elOffset(rowEl).top - Helpers.elOffset(this.elementVertical).top;
-						
-						if(offset > 0 && offset < this.elementVertical.clientHeight - rowEl.offsetHeight){
-							resolve();
-							return false;
-						}
-					}
-				}
-
-				if(typeof position === "undefined"){
-					position = this.table.options.scrollToRowPosition;
-				}
-
-				if(position === "nearest"){
-					position = this.scrollToRowNearestTop(row) ? "top" : "bottom";
-				}
-
-				//scroll to row
-				this.scrollToRow(row);
-
-				//align to correct position
-				switch(position){
-					case "middle":
-					case "center":
-
-						if(this.elementVertical.scrollHeight - this.elementVertical.scrollTop == this.elementVertical.clientHeight){
-							this.elementVertical.scrollTop = this.elementVertical.scrollTop + (rowEl.offsetTop - this.elementVertical.scrollTop) - ((this.elementVertical.scrollHeight - rowEl.offsetTop) / 2);
-						}else{
-							this.elementVertical.scrollTop = this.elementVertical.scrollTop - (this.elementVertical.clientHeight / 2);
-						}
-
-						break;
-
-					case "bottom":
-
-						if(this.elementVertical.scrollHeight - this.elementVertical.scrollTop == this.elementVertical.clientHeight){
-							this.elementVertical.scrollTop = this.elementVertical.scrollTop - (this.elementVertical.scrollHeight - rowEl.offsetTop) + rowEl.offsetHeight;
-						}else{
-							this.elementVertical.scrollTop = this.elementVertical.scrollTop - this.elementVertical.clientHeight + rowEl.offsetHeight;
-						}
-
-						break;
-
-					case "top":
-						this.elementVertical.scrollTop = rowEl.offsetTop;					
-						break;
-				}
-
-				resolve();
-
-			}else{
-				console.warn("Scroll Error - Row not visible");
-				reject("Scroll Error - Row not visible");
-			}
-		});
-	}
+import CoreFeature from '../CoreFeature.js';
+import Helpers from '../tools/Helpers.js';
+
+export default class Renderer extends CoreFeature{
+	constructor(table){
+		super(table);
+
+		this.elementVertical = table.rowManager.element;
+		this.elementHorizontal = table.columnManager.element;
+		this.tableElement =  table.rowManager.tableElement;
+
+		this.verticalFillMode = "fit"; // used by row manager to determine how to size the render area ("fit" - fits container to the contents, "fill" - fills the container without resizing it)
+	}
+
+
+	///////////////////////////////////
+	/////// Internal Bindings /////////
+	///////////////////////////////////
+
+	initialize(){
+		//initialize core functionality
+	}
+
+	clearRows(){
+		//clear down existing rows layout
+	}
+
+	clearColumns(){
+		//clear down existing columns layout
+	}
+
+
+	reinitializeColumnWidths(columns){
+		//resize columns to fit data
+	}
+
+
+	renderRows(){
+		//render rows from a clean slate
+	}
+
+	renderColumns(){
+		//render columns from a clean slate
+	}
+
+	rerenderRows(callback){
+		// rerender rows and keep position
+		if(callback){
+			callback();
+		}
+	}
+
+	rerenderColumns(update, blockRedraw){
+		//rerender columns
+	}
+
+	renderRowCells(row){
+		//render the cells in a row
+	}
+
+	rerenderRowCells(row, force){
+		//rerender the cells in a row
+	}
+
+	scrollColumns(left, dir){
+		//handle horizontal scrolling
+	}
+
+	scrollRows(top, dir){
+		//handle vertical scrolling
+	}
+
+	resize(){
+		//container has resized, carry out any needed recalculations (DO NOT RERENDER IN THIS FUNCTION)
+	}
+
+	scrollToRow(row){
+		//scroll to a specific row
+	}
+
+	scrollToRowNearestTop(row){
+		//determine weather the row is nearest the top or bottom of the table, return true for top or false for bottom
+	}
+
+	visibleRows(includingBuffer){
+		//return the visible rows
+		return [];
+	}
+
+	///////////////////////////////////
+	//////// Helper Functions /////////
+	///////////////////////////////////
+
+	rows(){
+		return this.table.rowManager.getDisplayRows();
+	}
+
+	styleRow(row, index){
+		var rowEl = row.getElement();
+
+		if(index % 2){
+			rowEl.classList.add("tabulator-row-even");
+			rowEl.classList.remove("tabulator-row-odd");
+		}else{
+			rowEl.classList.add("tabulator-row-odd");
+			rowEl.classList.remove("tabulator-row-even");
+		}
+	}
+
+	///////////////////////////////////
+	/////// External Triggers /////////
+	/////// (DO NOT OVERRIDE) /////////
+	///////////////////////////////////
+
+	clear(){
+		//clear down existing layout
+		this.clearRows();
+		this.clearColumns();
+	}
+
+	render(){
+		//render from a clean slate
+		this.renderRows();
+		this.renderColumns();
+	}
+
+	rerender(callback){
+		// rerender and keep position
+		this.rerenderRows();
+		this.rerenderColumns();
+	}
+
+	scrollToRowPosition(row, position, ifVisible){
+		var rowIndex = this.rows().indexOf(row),
+		rowEl = row.getElement(),
+		offset = 0;
+
+		return new Promise((resolve, reject) => {
+			if(rowIndex > -1){
+
+				if(typeof ifVisible === "undefined"){
+					ifVisible = this.table.options.scrollToRowIfVisible;
+				}
+
+				//check row visibility
+				if(!ifVisible){
+					if(Helpers.elVisible(rowEl)){
+						offset = Helpers.elOffset(rowEl).top - Helpers.elOffset(this.elementVertical).top;
+						
+						if(offset > 0 && offset < this.elementVertical.clientHeight - rowEl.offsetHeight){
+							resolve();
+							return false;
+						}
+					}
+				}
+
+				if(typeof position === "undefined"){
+					position = this.table.options.scrollToRowPosition;
+				}
+
+				if(position === "nearest"){
+					position = this.scrollToRowNearestTop(row) ? "top" : "bottom";
+				}
+
+				//scroll to row
+				this.scrollToRow(row);
+
+				//align to correct position
+				switch(position){
+					case "middle":
+					case "center":
+
+						if(this.elementVertical.scrollHeight - this.elementVertical.scrollTop == this.elementVertical.clientHeight){
+							this.elementVertical.scrollTop = this.elementVertical.scrollTop + (rowEl.offsetTop - this.elementVertical.scrollTop) - ((this.elementVertical.scrollHeight - rowEl.offsetTop) / 2);
+						}else{
+							this.elementVertical.scrollTop = this.elementVertical.scrollTop - (this.elementVertical.clientHeight / 2);
+						}
+
+						break;
+
+					case "bottom":
+
+						if(this.elementVertical.scrollHeight - this.elementVertical.scrollTop == this.elementVertical.clientHeight){
+							this.elementVertical.scrollTop = this.elementVertical.scrollTop - (this.elementVertical.scrollHeight - rowEl.offsetTop) + rowEl.offsetHeight;
+						}else{
+							this.elementVertical.scrollTop = this.elementVertical.scrollTop - this.elementVertical.clientHeight + rowEl.offsetHeight;
+						}
+
+						break;
+
+					case "top":
+						this.elementVertical.scrollTop = rowEl.offsetTop;					
+						break;
+				}
+
+				resolve();
+
+			}else{
+				console.warn("Scroll Error - Row not visible");
+				reject("Scroll Error - Row not visible");
+			}
+		});
+	}
 }

package/src/js/core/rendering/renderers/BasicHorizontal.js

@@ -1,20 +1,25 @@
-import Renderer from '../Renderer.js';
-
-export default class BasicHorizontal extends Renderer{
-	constructor(table){
-		super(table);
-	}
-
-	renderRowCells(row){
-		row.cells.forEach((cell) => {
-			row.element.appendChild(cell.getElement());
-			cell.cellRendered();
-		});
-	}
-
-	reinitializeColumnWidths(columns){
-		columns.forEach(function(column){
-			column.reinitializeWidth();
-		});
-	}
+import Renderer from '../Renderer.js';
+
+export default class BasicHorizontal extends Renderer{
+	constructor(table){
+		super(table);
+	}
+
+	renderRowCells(row) {
+		const rowFrag = document.createDocumentFragment();
+		row.cells.forEach((cell) => {
+			rowFrag.appendChild(cell.getElement());
+		});
+		row.element.appendChild(rowFrag);
+
+		row.cells.forEach((cell) => {
+			cell.cellRendered();
+		});
+	}
+
+	reinitializeColumnWidths(columns){
+		columns.forEach(function(column){
+			column.reinitializeWidth();
+		});
+	}
 }

package/src/js/core/rendering/renderers/BasicVertical.js

@@ -1,79 +1,83 @@
-import Renderer from '../Renderer.js';
-import Helpers from '../../tools/Helpers.js';
-
-export default class BasicVertical extends Renderer{
-	constructor(table){
-		super(table);
-
-		this.verticalFillMode = "fill";
-
-		this.scrollTop = 0;
-		this.scrollLeft = 0;
-
-		this.scrollTop = 0;
-		this.scrollLeft = 0;
-	}
-
-	clearRows(){
-		var element = this.tableElement;
-
-		// element.children.detach();
-		while(element.firstChild) element.removeChild(element.firstChild);
-
-		element.scrollTop = 0;
-		element.scrollLeft = 0;
-
-		element.style.minWidth = "";
-		element.style.minHeight = "";
-		element.style.display = "";
-		element.style.visibility = "";
-	}
-
-	renderRows(){
-		var element = this.tableElement,
-		onlyGroupHeaders = true;
-
-		this.rows().forEach((row, index) => {
-			this.styleRow(row, index);
-			element.appendChild(row.getElement());
-			row.initialize(true);
-
-			if(row.type !== "group"){
-				onlyGroupHeaders = false;
-			}
-		});
-
-		if(onlyGroupHeaders){
-			element.style.minWidth = this.table.columnManager.getWidth() + "px";
-		}else{
-			element.style.minWidth = "";
-		}
-	}
-
-
-	rerenderRows(callback){
-		this.clearRows();
-		this.renderRows();
-
-		if(callback){
-			callback();
-		}
-	}
-
-	scrollToRowNearestTop(row){
-		var rowTop = Helpers.elOffset(row.getElement()).top;
-
-		return !(Math.abs(this.elementVertical.scrollTop - rowTop) > Math.abs(this.elementVertical.scrollTop + this.elementVertical.clientHeight - rowTop));
-	}
-
-	scrollToRow(row){
-		var rowEl = row.getElement();
-
-		this.elementVertical.scrollTop = Helpers.elOffset(rowEl).top - Helpers.elOffset(this.elementVertical).top + this.elementVertical.scrollTop;
-	}
-
-	visibleRows(includingBuffer){
-		return this.rows();
-	}
-
-}
+import Renderer from '../Renderer.js';
+import Helpers from '../../tools/Helpers.js';
+
+export default class BasicVertical extends Renderer{
+	constructor(table){
+		super(table);
+
+		this.verticalFillMode = "fill";
+
+		this.scrollTop = 0;
+		this.scrollLeft = 0;
+
+		this.scrollTop = 0;
+		this.scrollLeft = 0;
+	}
+
+	clearRows(){
+		var element = this.tableElement;
+
+		// element.children.detach();
+		while(element.firstChild) element.removeChild(element.firstChild);
+
+		element.scrollTop = 0;
+		element.scrollLeft = 0;
+
+		element.style.minWidth = "";
+		element.style.minHeight = "";
+		element.style.display = "";
+		element.style.visibility = "";
+	}
+
+	renderRows() {
+		var element = this.tableElement,
+		onlyGroupHeaders = true,
+		tableFrag = document.createDocumentFragment();
+
+		this.rows().forEach((row, index) => {
+			this.styleRow(row, index);
+			row.initialize(true);
+
+			if (row.type !== "group") {
+				onlyGroupHeaders = false;
+			}
+
+			tableFrag.appendChild(row.getElement());
+		});
+		element.appendChild(tableFrag);
+
+		if(onlyGroupHeaders){
+			element.style.minWidth = this.table.columnManager.getWidth() + "px";
+		}else{
+			element.style.minWidth = "";
+		}
+	}
+
+
+	rerenderRows(callback){	
+		this.clearRows();
+
+		if(callback){
+			callback();
+		}
+
+		this.renderRows();
+	}
+
+	scrollToRowNearestTop(row){
+		var rowTop = Helpers.elOffset(row.getElement()).top;
+
+		return !(Math.abs(this.elementVertical.scrollTop - rowTop) > Math.abs(this.elementVertical.scrollTop + this.elementVertical.clientHeight - rowTop));
+	}
+
+	scrollToRow(row){
+		var rowEl = row.getElement();
+
+		this.elementVertical.scrollTop = Helpers.elOffset(rowEl).top - Helpers.elOffset(this.elementVertical).top + this.elementVertical.scrollTop;
+	}
+
+	visibleRows(includingBuffer){
+		return this.rows();
+	}
+
+}