Minimal spreadsheet javascript component

Install it from npm

npm install importabular

Instantiate it on a dom node

import Importabular from "importabular";

const sheet = new Importabular({
node: document.getElementById("editor"),
columns: [
{
label: "Contact name",
},
{
label: "Phone number",
},
{
label: "Email address",
},
],
});

Manipulate the sheet programmatically

sheet.getData();
sheet.setData([['First','line','text']);
sheet.destroy()

More complete example

import Importabular from "importabular";

const sheet = new Importabular({
node: document.getElementById("with-checks"),
columns: [
{
label: "Contact name",
title: "Full name",
placeholder: "John Doe",
},
{
label: "Phone number",
title: "In the international format",
placeholder: "+33XXXXXXX",
},
{
label: "Email address",
placeholder: "xxxx@yyyy.zzz",
},
],
data: [
["Name", "+333555555", "email@adress"],
["Bad data", "33366666", "email@"],
["", "", "missing@name"],
],
checks: checkData,
css: `
td>div{
border-right:2px solid transparent;
}
td.invalid >div{
border-right:2px solid red;
background:rgba(255,0,0,0.1);
}
td.valid > div{
border-right:2px solid green;

}

`,
onChange(data) {
console.table(data);
},
});

function checkData(data) {
// Generate tooltip content for each problem
const titles = data.map((line) => [
checkName(line),
checkPhone(line),
checkEmail(line),
]);

// Display the cell as invalid if there's a problem
const classNames = data.map((line, index) => [
titles[index][0] ? "invalid" : line[0] && "valid",
titles[index][1] ? "invalid" : line[1] && "valid",
titles[index][2] ? "invalid" : line[2] && "valid",
]);

return { titles, classNames };
}

function checkName([name, phone, email]) {
if (!name && (phone || email)) {
return "Name is required";
}
}
function checkPhone([name, phone, email]) {
if (phone && !phone.match(/\+[0-9]+/)) return "Invalid phone number";
}

function checkEmail([name, phone, email]) {
if (name && !email) return "Email is required";

if (!email.match(/[a-z0-9.-]+@[a-z0-9.-]+/gi)) {
return "Invalid email address";
}
}

Goals and limitations

I've created this lib because I was tired of having to remove 90% of the features offered by the very few open source libs for web spreadsheets.

So for this reinventing the wheel to make sense, I should not add any extra features to this core.

The lib is fresh and not battle tested, probably has some bugs. The API is not stable yet. Feel free to create an issue if you find a bug.

Fork me on GitHub