tabulator-tables 6.5.0 → 6.5.1

package/src/js/modules/Format/defaults/formatters/link.js

@@ -0,0 +1,82 @@
+import Helpers from '../../../../core/tools/Helpers.js';
+
+
+export default function(cell, formatterParams, onRendered){
+	var value = cell.getValue(),
+	urlPrefix = formatterParams.urlPrefix || "",
+	download = formatterParams.download,
+	label = value,
+	el = document.createElement("a"),
+	data;
+
+	function labelTraverse(path, data){
+		var item = path.shift(),
+		value = data[item];
+		
+		if(path.length && typeof value === "object"){
+			return labelTraverse(path, value);
+		}
+
+		return value;
+	}
+
+	if(formatterParams.labelField){
+		data = cell.getData();
+		label = labelTraverse(formatterParams.labelField.split(this.table.options.nestedFieldSeparator), data);
+	}
+
+	if(formatterParams.label){
+		switch(typeof formatterParams.label){
+			case "string":
+				label = formatterParams.label;
+				break;
+
+			case "function":
+				label = formatterParams.label(cell);
+				break;
+		}
+	}
+
+	if(label){
+		if(formatterParams.urlField){
+			data = cell.getData();
+
+			value = Helpers.retrieveNestedData(this.table.options.nestedFieldSeparator, formatterParams.urlField, data);
+		}
+
+		if(formatterParams.url){
+			switch(typeof formatterParams.url){
+				case "string":
+					value = formatterParams.url;
+					break;
+
+				case "function":
+					value = formatterParams.url(cell);
+					break;
+			}
+		}
+
+		el.setAttribute("href", urlPrefix + value);
+
+		if(formatterParams.target){
+			el.setAttribute("target", formatterParams.target);
+		}
+
+		if(formatterParams.download){
+
+			if(typeof download == "function"){
+				download = download(cell);
+			}else{
+				download = download === true ? "" : download;
+			}
+
+			el.setAttribute("download", download);
+		}
+
+		el.innerHTML = this.emptyToSpace(this.sanitizeHTML(label));
+
+		return el;
+	}else{
+		return " ";
+	}
+}

package/src/js/modules/Format/defaults/formatters/lookup.js

@@ -0,0 +1,10 @@
+export default function (cell, formatterParams, onRendered) {
+	var value = cell.getValue();
+
+	if (typeof formatterParams[value] === "undefined") {
+		console.warn('Missing display value for ' + value);
+		return value;
+	}
+
+	return formatterParams[value];
+}

package/src/js/modules/Format/defaults/formatters/money.js

@@ -0,0 +1,44 @@
+export default function(cell, formatterParams, onRendered){
+	var floatVal = parseFloat(cell.getValue()),
+	sign = "",
+	number, integer, decimal, rgx, value;
+
+	var decimalSym = formatterParams.decimal || ".";
+	var thousandSym = formatterParams.thousand || ",";
+	var negativeSign = formatterParams.negativeSign || "-";
+	var symbol = formatterParams.symbol || "";
+	var after = !!formatterParams.symbolAfter;
+	var precision = typeof formatterParams.precision !== "undefined" ? formatterParams.precision : 2;
+
+	if(Number.isNaN(floatVal)){
+		return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
+	}
+
+	if(floatVal < 0){
+		floatVal = Math.abs(floatVal);
+		sign = negativeSign;
+	}
+
+	number = precision !== false ? floatVal.toFixed(precision) : floatVal;
+	number = String(number).split(".");
+
+	integer = number[0];
+	decimal = number.length > 1 ? decimalSym + number[1] : "";
+
+	if (formatterParams.thousand !== false) {
+		rgx = /(\d+)(\d{3})/;
+
+		while (rgx.test(integer)){
+			integer = integer.replace(rgx, "$1" + thousandSym + "$2");
+		}
+	}
+
+	value = integer + decimal;
+	
+	if(sign === true){
+		value = "(" + value  + ")";
+		return after ? value + symbol : symbol + value;
+	}else{
+		return after ? sign + value + symbol : sign + symbol + value;
+	}
+}

package/src/js/modules/Format/defaults/formatters/plaintext.js

@@ -0,0 +1,3 @@
+export default function(cell, formatterParams, onRendered){
+	return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
+}

package/src/js/modules/Format/defaults/formatters/progress.js

@@ -0,0 +1,133 @@
+import CellComponent from '../../../../core/cell/CellComponent.js';
+
+export default function(cell, formatterParams = {}, onRendered){ //progress bar
+	var value = this.sanitizeHTML(cell.getValue()) || 0,
+	element = cell.getElement(),
+	max = formatterParams.max ? formatterParams.max : 100,
+	min = formatterParams.min ? formatterParams.min : 0,
+	legendAlign = formatterParams.legendAlign ? formatterParams.legendAlign : "center",
+	percent, percentValue, color, legend, legendColor;
+
+	//make sure value is in range
+	percentValue = parseFloat(value) <= max ? parseFloat(value) : max;
+	percentValue = parseFloat(percentValue) >= min ? parseFloat(percentValue) : min;
+
+	//workout percentage
+	percent = (max - min) / 100;
+	percentValue = Math.round((percentValue - min) / percent);
+
+	//set bar color
+	switch(typeof formatterParams.color){
+		case "string":
+			color = formatterParams.color;
+			break;
+		case "function":
+			color = formatterParams.color(value);
+			break;
+		case "object":
+			if(Array.isArray(formatterParams.color)){
+				let unit = 100 / formatterParams.color.length;
+				let index = Math.floor(percentValue / unit);
+
+				index = Math.min(index, formatterParams.color.length - 1);
+				index = Math.max(index, 0);
+				color = formatterParams.color[index];
+				break;
+			}
+		default:
+			color = "#2DC214";
+	}
+
+	//generate legend
+	switch(typeof formatterParams.legend){
+		case "string":
+			legend = formatterParams.legend;
+			break;
+		case "function":
+			legend = formatterParams.legend(value);
+			break;
+		case "boolean":
+			legend = value;
+			break;
+		default:
+			legend = false;
+	}
+
+	//set legend color
+	switch(typeof formatterParams.legendColor){
+		case "string":
+			legendColor = formatterParams.legendColor;
+			break;
+		case "function":
+			legendColor = formatterParams.legendColor(value);
+			break;
+		case "object":
+			if(Array.isArray(formatterParams.legendColor)){
+				let unit = 100 / formatterParams.legendColor.length;
+				let index = Math.floor(percentValue / unit);
+
+				index = Math.min(index, formatterParams.legendColor.length - 1);
+				index = Math.max(index, 0);
+				legendColor = formatterParams.legendColor[index];
+			}
+			break;
+		default:
+			legendColor = "#000";
+	}
+
+	element.style.minWidth = "30px";
+	element.style.position = "relative";
+
+	element.setAttribute("aria-label", percentValue);
+
+	var barEl = document.createElement("div");
+	barEl.style.display = "inline-block";
+	barEl.style.width = percentValue + "%";
+	barEl.style.backgroundColor = color;
+	barEl.style.height = "100%";
+
+	barEl.setAttribute('data-max', max);
+	barEl.setAttribute('data-min', min);
+
+	var barContainer = document.createElement("div");
+	barContainer.style.position = "relative";
+	barContainer.style.width = "100%";
+	barContainer.style.height = "100%";
+
+	if(legend){
+		var legendEl = document.createElement("div");
+		legendEl.style.position = "absolute";
+		legendEl.style.top = 0;
+		legendEl.style.left = 0;
+		legendEl.style.textAlign = legendAlign;
+		legendEl.style.width = "100%";
+		legendEl.style.color = legendColor;
+		legendEl.innerHTML = legend;
+	}
+
+	onRendered(function(){
+
+		//handle custom element needed if formatter is to be included in printed/downloaded output
+		if(!(cell instanceof CellComponent)){
+			var holderEl = document.createElement("div");
+			holderEl.style.position = "absolute";
+			holderEl.style.top = "4px";
+			holderEl.style.bottom = "4px";
+			holderEl.style.left = "4px";
+			holderEl.style.right = "4px";
+
+			element.appendChild(holderEl);
+
+			element = holderEl;
+		}
+
+		element.appendChild(barContainer);
+		barContainer.appendChild(barEl);
+
+		if(legend){
+			barContainer.appendChild(legendEl);
+		}
+	});
+
+	return "";
+}

package/src/js/modules/Format/defaults/formatters/rownum.js

@@ -0,0 +1,14 @@
+export default function(cell, formatterParams, onRendered){
+	var content = document.createElement("span");
+	var row = cell.getRow();
+	var table = cell.getTable();
+
+	row.watchPosition((position) => {
+		if (formatterParams.relativeToPage) {
+			position += table.modules.page.getPageSize() * (table.modules.page.getPage() - 1);
+		}
+		content.innerText = position;
+	});
+	
+	return content;
+}

package/src/js/modules/Format/defaults/formatters/star.js

@@ -0,0 +1,38 @@
+export default function(cell, formatterParams, onRendered){
+	var value = cell.getValue(),
+	element = cell.getElement(),
+	maxStars = formatterParams && formatterParams.stars ? formatterParams.stars : 5,
+	stars = document.createElement("span"),
+	star = document.createElementNS('http://www.w3.org/2000/svg', "svg"),
+	starActive = '<polygon fill="#FFEA00" stroke="#C1AB60" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>',
+	starInactive = '<polygon fill="#D2D2D2" stroke="#686868" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>';
+
+	//style stars holder
+	stars.style.verticalAlign = "middle";
+
+	//style star
+	star.setAttribute("width", "14");
+	star.setAttribute("height", "14");
+	star.setAttribute("viewBox", "0 0 512 512");
+	star.setAttribute("xml:space", "preserve");
+	star.style.padding = "0 1px";
+
+	value = value && !Number.isNaN(value) ? parseInt(value) : 0;
+
+	value = Math.max(0, Math.min(value, maxStars));
+
+	for(var i=1;i<= maxStars;i++){
+		var nextStar = star.cloneNode(true);
+		nextStar.innerHTML = i <= value ? starActive : starInactive;
+
+		stars.appendChild(nextStar);
+	}
+
+	element.style.whiteSpace = "nowrap";
+	element.style.overflow = "hidden";
+	element.style.textOverflow = "ellipsis";
+
+	element.setAttribute("aria-label", value);
+
+	return stars;
+}

package/src/js/modules/Format/defaults/formatters/textarea.js

@@ -0,0 +1,4 @@
+export default function(cell, formatterParams, onRendered){
+	cell.getElement().style.whiteSpace = "pre-wrap";
+	return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
+}

package/src/js/modules/Format/defaults/formatters/tickCross.js

@@ -0,0 +1,22 @@
+export default function(cell, formatterParams, onRendered){
+	var value = cell.getValue(),
+	element = cell.getElement(),
+	empty = formatterParams.allowEmpty,
+	truthy = formatterParams.allowTruthy,
+	trueValueSet = Object.keys(formatterParams).includes("trueValue"),
+	tick = typeof formatterParams.tickElement !== "undefined" ? formatterParams.tickElement : '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path class="tabulator-tick" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34  c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351  l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07  l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>',
+	cross = typeof formatterParams.crossElement !== "undefined" ? formatterParams.crossElement : '<svg enable-background="new 0 0 24 24" height="14" width="14"  viewBox="0 0 24 24" xml:space="preserve" ><path class="tabulator-cross" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272  c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0  l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269  c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73  L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"/></svg>';
+
+	if((trueValueSet && value === formatterParams.trueValue) || (!trueValueSet && ((truthy && value) || (value === true || value === "true" || value === "True" || value === 1 || value === "1")))){
+		element.setAttribute("aria-checked", true);
+		return tick || "";
+	}else{
+		if(empty && (value === "null" || value === "" || value === null || typeof value === "undefined")){
+			element.setAttribute("aria-checked", "mixed");
+			return "";
+		}else{
+			element.setAttribute("aria-checked", false);
+			return cross || "";
+		}
+	}
+}

package/src/js/modules/Format/defaults/formatters/toggle.js

@@ -0,0 +1,48 @@
+export default function(cell, formatterParams, onRendered){
+	var value = cell.getValue(),
+	size = formatterParams.size ||15,
+	sizePx = size + "px",
+	containEl, switchEl,
+	onValue = formatterParams.hasOwnProperty("onValue") ? formatterParams.onValue : true,
+	offValue = formatterParams.hasOwnProperty("offValue") ? formatterParams.offValue : false,
+
+
+	state = formatterParams.onTruthy ? value : value === onValue;
+
+	
+	containEl = document.createElement("div");
+	containEl.classList.add("tabulator-toggle");
+
+	if(state){
+		containEl.classList.add("tabulator-toggle-on");
+		containEl.style.flexDirection = "row-reverse";
+
+		if(formatterParams.onColor){
+			containEl.style.background = formatterParams.onColor;
+		}
+	}else{
+		if(formatterParams.offColor){
+			containEl.style.background = formatterParams.offColor;
+		}
+	}
+
+	containEl.style.width = (2.5 * size) + "px";
+	containEl.style.borderRadius = sizePx;
+
+	if(formatterParams.clickable){
+		containEl.addEventListener("click", (e) => {
+			cell.setValue(state ? offValue : onValue);
+		});
+	}
+
+	switchEl = document.createElement("div");
+	switchEl.classList.add("tabulator-toggle-switch");
+
+	switchEl.style.height = sizePx;
+	switchEl.style.width = sizePx;
+	switchEl.style.borderRadius = sizePx;
+	
+	containEl.appendChild(switchEl);
+	
+	return containEl;
+}

package/src/js/modules/Format/defaults/formatters/traffic.js

@@ -0,0 +1,47 @@
+export default function(cell, formatterParams, onRendered){
+	var value = this.sanitizeHTML(cell.getValue()) || 0,
+	el = document.createElement("span"),
+	max = formatterParams && formatterParams.max ? formatterParams.max : 100,
+	min = formatterParams && formatterParams.min ? formatterParams.min : 0,
+	colors = formatterParams && typeof formatterParams.color !== "undefined" ? formatterParams.color : ["red", "orange", "green"],
+	color = "#666666",
+	percent, percentValue;
+
+	if(Number.isNaN(value) || typeof cell.getValue() === "undefined"){
+		return;
+	}
+
+	el.classList.add("tabulator-traffic-light");
+
+	//make sure value is in range
+	percentValue = parseFloat(value) <= max ? parseFloat(value) : max;
+	percentValue = parseFloat(percentValue) >= min ? parseFloat(percentValue) : min;
+
+	//workout percentage
+	percent = (max - min) / 100;
+	percentValue = Math.round((percentValue - min) / percent);
+
+	//set color
+	switch(typeof colors){
+		case "string":
+			color = colors;
+			break;
+		case "function":
+			color = colors(value);
+			break;
+		case "object":
+			if(Array.isArray(colors)){
+				var unit = 100 / colors.length;
+				var index = Math.floor(percentValue / unit);
+
+				index = Math.min(index, colors.length - 1);
+				index = Math.max(index, 0);
+				color = colors[index];
+				break;
+			}
+	}
+
+	el.style.backgroundColor = color;
+
+	return el;
+}

package/src/js/modules/Format/defaults/formatters.js

@@ -0,0 +1,47 @@
+import plaintext from './formatters/plaintext.js';
+import html from './formatters/html.js';
+import textarea from './formatters/textarea.js';
+import money from './formatters/money.js';
+import link from './formatters/link.js';
+import image from './formatters/image.js';
+import tickCross from './formatters/tickCross.js';
+import datetime from './formatters/datetime.js';
+import datetimediff from './formatters/datetimediff.js';
+import lookup from './formatters/lookup.js';
+import star from './formatters/star.js';
+import traffic from './formatters/traffic.js';
+import progress from './formatters/progress.js';
+import color from './formatters/color.js';
+import buttonTick from './formatters/buttonTick.js';
+import buttonCross from './formatters/buttonCross.js';
+import toggle from './formatters/toggle.js';
+import rownum from './formatters/rownum.js';
+import handle from './formatters/handle.js';
+import adaptable from './formatters/adaptable.js';
+import array from './formatters/array.js';
+import json from './formatters/json.js';
+
+export default {
+	plaintext:plaintext,
+	html:html,
+	textarea:textarea,
+	money:money,
+	link:link,
+	image:image,
+	tickCross:tickCross,
+	datetime:datetime,
+	datetimediff:datetimediff,
+	lookup:lookup,
+	star:star,
+	traffic:traffic,
+	progress:progress,
+	color:color,
+	buttonTick:buttonTick,
+	buttonCross:buttonCross,
+	toggle:toggle,
+	rownum:rownum,
+	handle:handle,
+	adaptable:adaptable,
+	array:array,
+	json:json,
+};