Designing and Engineering a Better Tomorrow
Published
Edited
Aug 9, 2022
2 forks
Importers
5 stars
// Formula Demo: https://bossanova.uk/jspreadsheet/v4/examples/spreadsheet-formulas
formulaDemo = {
const spreadsheet = html`<div></div>`;
const data = [
["Crayons Crayola only (No Rose Art)", 2, 5.01, "=B1*C1"],
["Colored Pencils Crayola only", 2, 4.41, "=B2*C2"],
["Expo Dry-erase Markers Wide", 4, 3.0, "=B3*C3"],
["Index Cards Unlined", 3, 6.0, "=B4*C4"],
["Tissues", 10, "1.90", "=B5*C5"],
["Ziploc Sandwich-size Bags", 5, 1.0, "=B6*C6"],
["Thin Markers Crayola only", 2, 3.0, "=B7*C7"],
["Highlighter", 4, 1.2, "=B8*C8"],
["Total", "=SUM(B1:B8)", "=ROUND(SUM(C1:C8), 2)", "=SUM(D1:D8)"]
];
jspreadsheet(spreadsheet, {
data: data,
columns: [
{ type: "text", title: "Product", width: "300" },
{ type: "text", title: "Qtd", width: "80" },
{
type: "text",
title: "Price",
width: "100",
mask: "#.##,00",
decimal: "."
},
{ type: "text", title: "Total", width: "100" }
],
updateTable: function (instance, cell, col, row, val, label, cellName) {
if (cell.innerHTML == "Total") {
cell.parentNode.style.backgroundColor = `${totalRowColor}`;
}
if (col == 3) {
if (parseFloat(label) > 10) {
cell.style.color = "red";
} else {
cell.style.color = "green";
}
}
},
columnSorting: false
}); // jspreadsheet
return spreadsheet;
}
// https://bossanova.uk/jspreadsheet/v4/
// https://github.com/jspreadsheet/ce
// https://observablehq.com/@observablehq/require
// require.resolve("jspreadsheet-ce"): https://cdn.jsdelivr.net/npm/jspreadsheet-ce@4.9.5/dist/index.js
// https://www.jsdelivr.com/package/npm/jspreadsheet-ce
jspreadsheet = require("jspreadsheet-ce@4.9.5")
// https://observablehq.com/@tmcw/how-to-use-libraries-that-need-css?collection=@observablehq/javascript-in-observable
stylesheet = html`<link rel='stylesheet' href='https://jsuites.net/v4/jsuites.css' type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
