ark-table
Version:
Simple js library to build table from json
180 lines (176 loc) • 7.01 kB
JavaScript
class TableBuilder {
options = {
//title: "Sync Setup",
title: 'Lord Jesus my Master',
data: [
{
TableGroupUID: 'Group Name 1',
TableName: "Table Name 1",
FullSyncQuery: "Full Sync Query",
DeltaSyncQuery: "Delta Sync Query"
}
],
config: {
roweditable: true,
},
columns: [
{
Property: "TableGroupUID",
Display: "Group Name"
},
{
Property: "TableName",
Display: "Table Name"
},
{
Property: "FullSyncQuery",
Display: "Full SYnc",
Overflow: "ellipsis"
},
{
Property: "DeltaSyncQuery",
Display: "Delta Sync",
Overflow: "ellipsis"
},
{
Property: "CustomProperty",
Display: "Sync",
type: 'Button',
onevent: (col, data) => {
}
}
],
onrowclick: (data) => {
}
}
constructor(option) {
this.options = util.extend(true, this.options, option);
this.buildBase();
}
buildBase = () => {
this.template.build();
}
buildTitle = () => {
this.template.section.dom.append(this.template.title.dom);
this.template.title.dom.innerHTML = this.options.title;
}
buildHeader = () => {
this.template.section.dom.append(this.template.header.dom);
this.template.header.dom.querySelector(".t-head").append(this.template.rowheader());
}
buildBody = () => {
this.template.section.dom.append(this.template.body.dom);
(this.options.data || []).forEach(t => {
this.template.section.dom.querySelector(".t-body").append(this.template.rowitem(t));
});
}
destroy = () => {
this.template.section.dom.remove();
}
template = {
title: { content: `<h1 class='head-r'></h1>` },
section: { content: `<section class='sec-contain'></section>` },
header: {
content: `<div class="tbl-header">
<table cellpadding="0" cellspacing="0" border="1">
<thead class="t-head">
</thead>
</table>
</div>` },
body: {
content: `<div class="tbl-content">
<table cellpadding="0" cellspacing="0" border="1">
<tbody class="t-body">
</tbody>
</table>
</div>` },
rowheader: () => {
var trdom = util.textToDom(`<tr></tr>`);
(this.options.columns || []).forEach(t => {
trdom.append(util.textToDom(`<td>${t.Display}</td>`));
});
if (this.options.config.roweditable) {
var td = util.textToDom(`<td> Save/Cancel </td>`);
trdom.append(td);
}
return trdom;
},
rowitem: (data) => {
const customPropertyBuilder = function (t) {
var atd = util.textToDom(`<td></td>`);
if (t.type == 'Button') {
var btd = util.textToDom(`<button>${t.Display}</button>`);
btd.onclick = (evt) => {
evt.preventDefault();
evt.cancelBubble = true;
if (t.onevent) t.onevent(t, data);
};
atd.append(btd);
}
return atd;
}
const linkPropertyBuilder = function (t) {
var atd = util.textToDom(`<td></td>`);
//if (t.type == 'Link') {
var btd;
if (t.template)
btd = util.textToDom(t.template(t, data));
else
btd = util.textToDom(`<a href='${data[t.LinkTo]}'>${data[t.Display]}</a>`);
btd.onclick = (evt) => {
evt.preventDefault();
evt.cancelBubble = true;
if (t.onevent) t.onevent(t, data);
};
atd.append(btd);
//}
return atd;
}
var trdom = util.textToDom(`<tr></tr>`);
trdom.onclick = () => this.options.onrowclick(data);
(this.options.columns || []).forEach(t => {
if (t.Property == 'CustomProperty') {
trdom.append(customPropertyBuilder(t));
}
else if (t.Property == 'LinkProperty') {
trdom.append(linkPropertyBuilder(t));
}
else {
var td = util.textToDom(`<td ${(this.options.config.roweditable ? 'contenteditable' : '')} class='${(t.Overflow || '') == 'ellipsis' ? 'td-ellipsis' : ''}'>${data[t.Property]}</td>`)
td.addEventListener('focus', (event) => {
event.target.style.background = 'cadetblue';
event.target.dataset.origval = event.target.innerHTML;
});
td.addEventListener('blur', (event) => {
event.target.style.background = '';
if (event.target.dataset.origval == event.target.innerHTML) {
td.closest("tr").querySelector(".btn-sve").setAttribute("disabled", "disabled");
td.closest("tr").querySelector(".btn-cancel").setAttribute("disabled", "disabled");
}
});
td.addEventListener('keypress', (event) => {
td.closest("tr").querySelector(".btn-sve").removeAttribute("disabled");
td.closest("tr").querySelector(".btn-cancel").removeAttribute("disabled");
});
trdom.append(td);
}
});
if (this.options.config.roweditable) {
var td = util.textToDom(`<td> <button class='btn-sve' disabled>save</button><button class='btn-cancel' disabled>cancel</button> </td>`);
trdom.append(td);
}
return trdom;
},
build: () => {
(Object.keys(this.template) || []).forEach(t => {
if (this.template[t].content)
this.template[t].dom = util.textToDom(this.template[t].content);
});
this.buildTitle();
this.buildHeader();
this.buildBody();
document.body.append(this.template.section.dom);
}
}
}
//var tb = new TableBuilder();