tabulator-tables 5.6.0 → 6.0.0

package/src/js/modules/Spreadsheet/GridCalculator.js

@@ -0,0 +1,64 @@
+export default class GridCalculator{
+	constructor(columns, rows){
+		this.columnCount = columns;
+		this.rowCount = rows;
+
+		this.columnString = [];
+		this.columns = [];
+		this.rows = [];
+	}
+
+	genColumns(data){
+		var colCount = Math.max(this.columnCount, Math.max(...data.map(item => item.length)));
+
+		this.columnString = [];
+		this.columns = [];
+
+		for(let i = 1; i <= colCount; i++){
+			this.incrementChar(this.columnString.length - 1);
+			this.columns.push(this.columnString.join(""));
+		}
+
+		return this.columns;
+	}
+
+	genRows(data){
+		var rowCount = Math.max(this.rowCount, data.length);
+
+		this.rows = [];
+
+		for(let i = 1; i <= rowCount; i++){
+			this.rows.push(i);
+		}
+		
+		return this.rows;
+	}
+
+	incrementChar(i){
+		let char = this.columnString[i];
+
+		if(char){
+			if(char !== "Z"){
+				this.columnString[i] = String.fromCharCode(this.columnString[i].charCodeAt(0) + 1);
+			}else{
+				this.columnString[i] = "A";
+				
+				if(i){
+					this.incrementChar(i-1);
+				}else{
+					this.columnString.push("A");
+				}
+			}
+		}else{
+			this.columnString.push("A");
+		}
+	}
+
+	setRowCount(count){
+		this.rowCount = count;
+	}
+
+	setColumnCount(count){
+		this.columnCount = count;
+	}
+}

package/src/js/modules/Spreadsheet/Sheet.js

@@ -0,0 +1,243 @@
+import CoreFeature from '../../core/CoreFeature.js';
+import GridCalculator from "./GridCalculator";
+import SheetComponent from "./SheetComponent";
+
+export default class Sheet extends CoreFeature{
+	constructor(spreadsheetManager, definition) {
+		super(spreadsheetManager.table);
+		
+		this.spreadsheetManager = spreadsheetManager;
+		this.definition = definition;
+		
+		this.title = this.definition.title || "";
+		this.key = this.definition.key || this.definition.title;
+		this.rowCount = this.definition.rows;
+		this.columnCount = this.definition.columns;
+		this.data = this.definition.data || [];
+		this.element = null;
+		this.isActive = false;
+		
+		this.grid = new GridCalculator(this.columnCount, this.rowCount);
+		
+		this.defaultColumnDefinition = {width:100, headerHozAlign:"center", headerSort:false};
+		this.columnDefinition = Object.assign(this.defaultColumnDefinition, this.options("spreadsheetColumnDefinition"));
+		
+		this.columnDefs = [];
+		this.rowDefs = [];
+		this.columnFields = [];
+		this.columns = [];
+		this.rows = [];
+		
+		this.scrollTop = null;
+		this.scrollLeft = null;
+		
+		this.initialize();
+		
+		this.dispatchExternal("sheetAdded", this.getComponent());
+	}
+	
+	///////////////////////////////////
+	///////// Initialization //////////
+	///////////////////////////////////
+	
+	initialize(){
+		this.initializeElement();
+		this.initializeColumns();
+		this.initializeRows();
+	}
+	
+	reinitialize(){
+		this.initializeColumns();
+		this.initializeRows();
+	}
+	
+	initializeElement(){
+		this.element = document.createElement("div");
+		this.element.classList.add("tabulator-spreadsheet-tab");
+		this.element.innerText = this.title;
+		
+		this.element.addEventListener("click", () => {
+			this.spreadsheetManager.loadSheet(this);
+		});
+	}
+	
+	initializeColumns(){
+		this.grid.setColumnCount(this.columnCount);
+		this.columnFields = this.grid.genColumns(this.data);
+		
+		this.columnDefs = [];
+		
+		this.columnFields.forEach((ref) => {
+			var def = Object.assign({}, this.columnDefinition);
+			def.field = ref;
+			def.title = ref;
+			
+			this.columnDefs.push(def);
+		});
+	}
+	
+	initializeRows(){
+		var refs;
+		
+		this.grid.setRowCount(this.rowCount);
+		
+		refs = this.grid.genRows(this.data);
+		
+		this.rowDefs = [];
+		
+		refs.forEach((ref, i) => {
+			var def = {"_id":ref};
+			var data = this.data[i];
+			
+			if(data){
+				data.forEach((val, j) => {
+					var field = this.columnFields[j];
+					
+					if(field){
+						def[field] = val;
+					}
+				});
+			}
+			
+			this.rowDefs.push(def);
+		});
+	}
+	
+	unload(){
+		this.isActive = false;
+		this.scrollTop = this.table.rowManager.scrollTop;
+		this.scrollLeft = this.table.rowManager.scrollLeft;
+		this.data = this.getData(true);
+		this.element.classList.remove("tabulator-spreadsheet-tab-active");
+	}
+	
+	load(){
+		
+		var wasInactive = !this.isActive;
+		
+		this.isActive = true;
+		this.table.blockRedraw();
+		this.table.setData([]);
+		this.table.setColumns(this.columnDefs);
+		this.table.setData(this.rowDefs);
+		this.table.restoreRedraw();
+		
+		if(wasInactive && this.scrollTop !== null){
+			this.table.rowManager.element.scrollLeft = this.scrollLeft;
+			this.table.rowManager.element.scrollTop = this.scrollTop;
+		}
+		
+		this.element.classList.add("tabulator-spreadsheet-tab-active");
+		
+		this.dispatchExternal("sheetLoaded", this.getComponent());
+	}
+	
+	///////////////////////////////////
+	//////// Helper Functions /////////
+	///////////////////////////////////
+	
+	getComponent(){
+		return new SheetComponent(this);
+	}
+	
+	getDefinition(){
+		return {
+			title:this.title,
+			key:this.key,
+			rows:this.rowCount,
+			columns:this.columnCount,
+			data:this.getData(),
+		};
+	}
+	
+	getData(full){
+		var output = [], 
+		rowWidths,
+		outputWidth, outputHeight;
+		
+		//map data to array format
+		this.rowDefs.forEach((rowData) => {
+			var row = [];
+			
+			this.columnFields.forEach((field) => {
+				row.push(rowData[field]);
+			});
+			
+			output.push(row);
+		});
+		
+		//trim output
+		if(!full && !this.options("spreadsheetOutputFull")){
+			
+			//calculate used area of data
+			rowWidths = output.map(row => row.findLastIndex(val => typeof val !== 'undefined') + 1);
+			outputWidth = Math.max(...rowWidths);
+			outputHeight = rowWidths.findLastIndex(width => width > 0) + 1;
+			
+			output = output.slice(0, outputHeight);
+			output = output.map(row => row.slice(0, outputWidth));
+		}
+		
+		return output;
+	}
+	
+	setData(data){
+		this.data = data;
+		this.reinitialize();
+		
+		this.dispatchExternal("sheetUpdated", this.getComponent());
+		
+		if(this.isActive){
+			this.load();
+		}
+	}
+	
+	clear(){
+		this.setData([]);
+	}
+	
+	setTitle(title){
+		this.title = title;
+		this.element.innerText = title;
+		
+		this.dispatchExternal("sheetUpdated", this.getComponent());
+	}
+	
+	setRows(rows){
+		this.rowCount = rows;
+		this.initializeRows();
+		
+		this.dispatchExternal("sheetUpdated", this.getComponent());
+		
+		if(this.isActive){
+			this.load();
+		}
+	}
+	
+	setColumns(columns){
+		this.columnCount = columns;
+		this.reinitialize();
+		
+		this.dispatchExternal("sheetUpdated", this.getComponent());
+		
+		if(this.isActive){
+			this.load();
+		}
+	}
+	
+	remove(){
+		this.spreadsheetManager.removeSheet(this);
+	}
+	
+	destroy(){
+		if(this.element.parentNode){
+			this.element.parentNode.removeChild(this.element);
+		}
+		
+		this.dispatchExternal("sheetRemoved", this.getComponent());
+	}
+	
+	active(){
+		this.spreadsheetManager.loadSheet(this);
+	}
+}

package/src/js/modules/Spreadsheet/SheetComponent.js

@@ -0,0 +1,59 @@
+export default class SheetComponent {
+	constructor(sheet) {
+		this._sheet = sheet;
+
+		return new Proxy(this, {
+			get: function (target, name, receiver) {
+				if (typeof target[name] !== "undefined") {
+					return target[name];
+				} else {
+					return target._sheet.table.componentFunctionBinder.handle("sheet", target._sheet, name);
+				}
+			},
+		});
+	}
+
+	getTitle(){
+		return this._sheet.title;
+	}
+
+	getKey(){
+		return this._sheet.key;
+	}
+
+	getDefinition(){
+		return this._sheet.getDefinition();
+	}
+
+	getData() {
+		return this._sheet.getData();
+	}
+
+	setData(data) {
+		return this._sheet.setData(data);
+	}
+
+	clear(){
+		return this._sheet.clear();
+	}
+
+	remove(){
+		return this._sheet.remove();
+	}
+	
+	active(){
+		return this._sheet.active();
+	}
+
+	setTitle(title){
+		return this._sheet.setTitle(title);
+	}
+
+	setRows(rows){
+		return this._sheet.setRows(rows);
+	}
+
+	setColumns(columns){
+		return this._sheet.setColumns(columns);
+	}
+}

package/src/js/modules/Spreadsheet/Spreadsheet.js

@@ -0,0 +1,309 @@
+import Module from '../../core/Module.js';
+import Sheet from "./Sheet";
+import SheetComponent from "./SheetComponent";
+
+export default class Spreadsheet extends Module{
+	
+	static moduleName = "spreadsheet";
+	
+	constructor(table){
+		super(table);
+		
+		this.sheets = [];
+		this.element = null;
+		
+		this.registerTableOption("spreadsheet", false); 
+		this.registerTableOption("spreadsheetRows", 50); 
+		this.registerTableOption("spreadsheetColumns", 50); 
+		this.registerTableOption("spreadsheetColumnDefinition", {}); 
+		this.registerTableOption("spreadsheetOutputFull", false); 
+		this.registerTableOption("spreadsheetData", false); 
+		this.registerTableOption("spreadsheetSheets", false); 
+		this.registerTableOption("spreadsheetSheetTabs", false); 
+		this.registerTableOption("spreadsheetSheetTabsElement", false); 
+		
+		this.registerTableFunction("setSheets", this.setSheets.bind(this));
+		this.registerTableFunction("addSheet", this.addSheet.bind(this));
+		this.registerTableFunction("getSheets", this.getSheets.bind(this));
+		this.registerTableFunction("getSheetDefinitions", this.getSheetDefinitions.bind(this));
+		this.registerTableFunction("setSheetData", this.setSheetData.bind(this));
+		this.registerTableFunction("getSheet", this.getSheet.bind(this));
+		this.registerTableFunction("getSheetData", this.getSheetData.bind(this));
+		this.registerTableFunction("clearSheet", this.clearSheet.bind(this));
+		this.registerTableFunction("removeSheet", this.removeSheetFunc.bind(this));
+		this.registerTableFunction("activeSheet", this.activeSheetFunc.bind(this));
+	}
+	
+	///////////////////////////////////
+	////// Module Initialization //////
+	///////////////////////////////////
+	
+	
+	initialize(){
+		if(this.options("spreadsheet")){	
+			this.subscribe("table-initialized", this.tableInitialized.bind(this));
+			this.subscribe("data-loaded", this.loadRemoteData.bind(this));
+			
+			this.table.options.index = "_id";
+			
+			if(this.options("spreadsheetData") && this.options("spreadsheetSheets")){
+				console.warn("You cannot use spreadsheetData and spreadsheetSheets at the same time, ignoring spreadsheetData");
+				
+				this.table.options.spreadsheetData = false;
+			}
+			
+			this.compatibilityCheck();
+			
+			if(this.options("spreadsheetSheetTabs")){
+				this.initializeTabset();
+			}
+		}
+	}
+	
+	compatibilityCheck(){
+		if(this.options("data")){
+			console.warn("Do not use the data option when working with spreadsheets, use either spreadsheetData or spreadsheetSheets to pass data into the table");
+		}
+		
+		if(this.options("pagination")){
+			console.warn("The spreadsheet module is not compatible with the pagination module");
+		}
+		
+		if(this.options("groupBy")){
+			console.warn("The spreadsheet module is not compatible with the row grouping module");
+		}
+		
+		if(this.options("responsiveCollapse")){
+			console.warn("The spreadsheet module is not compatible with the responsive collapse module");
+		}
+	}
+	initializeTabset(){
+		this.element = document.createElement("div");
+		this.element.classList.add("tabulator-spreadsheet-tabs");
+		var altContainer = this.options("spreadsheetSheetTabsElement");
+		
+		if(altContainer && !(altContainer instanceof HTMLElement)){
+			altContainer = document.querySelector(altContainer);
+			
+			if(!altContainer){
+				console.warn("Unable to find element matching spreadsheetSheetTabsElement selector:", this.options("spreadsheetSheetTabsElement"));
+			}
+		}
+		
+		if(altContainer){
+			altContainer.appendChild(this.element);
+		}else{
+			this.footerAppend(this.element);
+		}
+	}
+	
+	tableInitialized(){
+		if(this.sheets.length){
+			this.loadSheet(this.sheets[0]);
+		}else{
+			
+			if(this.options("spreadsheetSheets")){
+				this.loadSheets(this.options("spreadsheetSheets"));
+			}else if(this.options("spreadsheetData")){
+				this.loadData(this.options("spreadsheetData"));
+			}
+		}
+	}
+
+	///////////////////////////////////
+	/////////// Ajax Parsing //////////
+	///////////////////////////////////
+
+	loadRemoteData(data, data1, data2){
+		console.log("data", data, data1, data2);
+
+		if(Array.isArray(data)){
+
+			this.table.dataLoader.clearAlert();
+			this.dispatchExternal("dataLoaded", data);
+
+			if(!data.length || Array.isArray(data[0])){
+				this.loadData(data);
+			}else{
+				this.loadSheets(data);
+			}
+		}else{
+			console.error("Spreadsheet Loading Error - Unable to process remote data due to invalid data type \nExpecting: array \nReceived: ", typeof data, "\nData:     ", data);
+		}
+
+		return false;
+	}
+
+	///////////////////////////////////
+	///////// Sheet Management ////////
+	///////////////////////////////////
+	
+	
+	loadData(data){
+		var def = {
+			data:data,
+		};
+		
+		this.loadSheet(this.newSheet(def));
+	}
+	
+	destroySheets(){
+		this.sheets.forEach((sheet) => {
+			sheet.destroy();
+		});
+		
+		this.sheets = [];
+		this.activeSheet = null;
+	}
+	
+	loadSheets(sheets){	
+		if(!Array.isArray(sheets)){
+			sheets = [];
+		}
+		
+		this.destroySheets();
+		
+		sheets.forEach((def) => {
+			this.newSheet(def);
+		});
+		
+		this.loadSheet(this.sheets[0]);
+	}
+	
+	loadSheet(sheet){
+		if(this.activeSheet !== sheet){
+			if(this.activeSheet){
+				this.activeSheet.unload();
+			}
+			
+			this.activeSheet = sheet;
+			
+			sheet.load();
+		}
+	}
+	
+	newSheet(definition = {}){
+		var sheet;
+		
+		if(!definition.rows){
+			definition.rows = this.options("spreadsheetRows");
+		}
+		
+		if(!definition.columns){
+			definition.columns = this.options("spreadsheetColumns");
+		}
+		
+		sheet = new Sheet(this, definition);
+		
+		this.sheets.push(sheet);
+		
+		if(this.element){
+			this.element.appendChild(sheet.element);
+		}
+		
+		return sheet;
+	}
+	
+	removeSheet(sheet){
+		var index = this.sheets.indexOf(sheet),
+		prevSheet;
+		
+		if(this.sheets.length > 1){
+			if(index > -1){
+				this.sheets.splice(index, 1);
+				sheet.destroy();
+				
+				if(this.activeSheet === sheet){
+					
+					prevSheet = this.sheets[index - 1] || this.sheets[0];
+					
+					if(prevSheet){
+						this.loadSheet(prevSheet);
+					}else{
+						this.activeSheet = null;
+					}
+				}
+			}
+		}else{
+			console.warn("Unable to remove sheet, at least one sheet must be active");
+		}
+	}
+	
+	lookupSheet(key){
+		if(!key){
+			return this.activeSheet;
+		}else if(key instanceof Sheet){
+			return key;
+		}else if(key instanceof SheetComponent){
+			return key._sheet;
+		}else{
+			return this.sheets.find(sheet => sheet.key === key) || false;
+		}
+	}
+	
+	
+	///////////////////////////////////
+	//////// Public Functions /////////
+	///////////////////////////////////
+	
+	setSheets(sheets){
+		this.loadSheets(sheets);
+
+		return this.getSheets();
+	}
+
+	addSheet(sheet){
+		return this.newSheet(sheet).getComponent();
+	}
+	
+	getSheetDefinitions(){
+		return this.sheets.map(sheet => sheet.getDefinition());
+	}
+	
+	getSheets(){
+		return this.sheets.map(sheet => sheet.getComponent());
+	}
+	
+	getSheet(key){
+		var sheet = this.lookupSheet(key);
+		
+		return sheet ? sheet.getComponent() : false;
+	}
+	
+	setSheetData(key, data){
+		if (key && !data){
+			data = key;
+			key = false;
+		}
+		
+		var sheet = this.lookupSheet(key);
+		
+		return sheet ? sheet.setData(data) : false;	
+	}
+	
+	getSheetData(key){
+		var sheet = this.lookupSheet(key);
+		
+		return sheet ? sheet.getData() : false;	
+	}
+	
+	clearSheet(key){
+		var sheet = this.lookupSheet(key);
+		
+		return sheet ? sheet.clear() : false;
+	}
+	
+	removeSheetFunc(key){
+		var sheet = this.lookupSheet(key);
+		
+		if(sheet){
+			this.removeSheet(sheet);
+		}
+	}
+	
+	activeSheetFunc(key){
+		var sheet = this.lookupSheet(key);
+		
+		return sheet ? this.loadSheet(sheet) : false;
+	}
+}

package/src/js/modules/Tooltip/Tooltip.js

@@ -1,7 +1,9 @@
 import Module from '../../core/Module.js';
 import Cell from '../../core/cell/Cell.js';
 
-class Tooltip extends Module{
+export default class Tooltip extends Module{
+
+	static moduleName = "tooltip";
 	
 	constructor(table){
 		super(table);
@@ -12,7 +14,7 @@ class Tooltip extends Module{
 		this.timeout = null;
 		this.popupInstance = null;
 		
-		this.registerTableOption("tooltipGenerationMode", undefined);  //deprecated
+		// this.registerTableOption("tooltipGenerationMode", undefined);  //deprecated
 		this.registerTableOption("tooltipDelay", 300); 
 		
 		this.registerColumnOption("tooltip");
@@ -26,7 +28,7 @@ class Tooltip extends Module{
 	}
 	
 	deprecatedOptionsCheck(){
-		this.deprecationCheckMsg("tooltipGenerationMode", "This option is no longer needed as tooltips are always generated on hover now");
+		// this.deprecationCheckMsg("tooltipGenerationMode", "This option is no longer needed as tooltips are always generated on hover now");
 	}	
 	
 	initializeColumn(column){
@@ -123,8 +125,4 @@ class Tooltip extends Module{
 			this.dispatchExternal("TooltipOpened", component.getComponent());
 		}
 	}
-}
-
-Tooltip.moduleName = "tooltip";
-
-export default Tooltip;
+}