const tablesData;
function createTables() {
const tablesTag = [...document.getElementsByTagName('inject-table')];
for (const table of tablesTag) {
const columns = [...table.getElementsByTagName('inject-column')];
const newTable = document.createElement('table');
const classAttribute = table.getAttribute('class');
if (classAttribute != null) {
newTable.className = classAttribute;
}
const idAttribute = table.getAttribute('id');
if (idAttribute != null) {
newTable.id = idAttribute;
}
const styleAttribute = table.getAttribute('style');
if (styleAttribute != null) {
newTable.style = styleAttribute;
}
const itemAttribute = table.getAttribute('items');
if (itemAttribute != null) {
newTable.setAttribute('items', itemAttribute);
}
const head = newTable.createTHead().insertRow();
for (const column of columns.values()) {
const cell = document.createElement('th');
cell.style = column.getAttribute('style');
if (column.className !== '') {
cell.className = column.className;
}
if (column.id !== '') {
cell.id = column.id;
}
if (column.getAttribute('prop') != null) {
cell.setAttribute('prop', column.getAttribute('prop'));
}
cell.innerText = column.getAttribute('label');
if (column.getAttribute('label') == null) {
cell.style.display = 'none';
}
head.appendChild(cell);
}
table.replaceWith(newTable);
populateTable(newTable);
}
}
function populateTable(table) {
const data = Reflect.get(tablesData, table.getAttribute('items'));
const headColumns = [...table.tHead.rows[0].cells];
const body = table.createTBody();
for (const item of data) {
const newRow = body.insertRow();
headColumns.forEach((column) => {
let val = Reflect.get(item, column.getAttribute('prop').split('.')[0]);
if (val != null && typeof val === 'object') {
const nestedProps = column.getAttribute('prop').split('.').slice(1);
let nestedVal = val;
nestedProps.forEach((prop) => {
nestedVal = Reflect.get(nestedVal, prop);
});
val = nestedVal;
}
newRow.insertCell().innerHTML = val ?? '';
});
}
}
createTables();