JSFiddle - React, Tailwind, and code Playground
JavaScript
var data = {
celulas: ['relacao', 'flecha', 'ciclo'],
idLinhas: ['linha1', 'linha2', 'linha3' /*, ...etc*/ ]
}
var table = document.createElement('table');
// cabeçalho da table
var tr = document.createElement('tr');
var th = document.createElement('th');
tr.appendChild(th); // vazia
data.celulas.forEach(function (celula) {
var th = document.createElement('th');
th.innerHTML = celula;
tr.appendChild(th);
});
table.appendChild(tr);
// corpo
data.idLinhas.forEach(function (id) {
// criar nova linha
var tr = document.createElement('tr');
tr.dataset.id = id;
// primeira célula com nome da linha
var td = document.createElement('td');
td.innerHTML = id;
tr.appendChild(td);
// percorrer array de TDs
data.celulas.forEach(function (celula) {
var td = document.createElement('td');
var input = document.createElement('input');
input.type = 'checkbox';
input.name = celula + []; // * - Nota a)
td.appendChild(input);
tr.appendChild(td);
});
table.appendChild(tr);
});
// adicionar tabela ao documento
document.body.appendChild(table);