JSFiddle - React, Tailwind, and code Playground

by Fareez Ahmed

HTML

<div id="table_container"></div>

JavaScript

function jsonTable() {
    var data = {
        headers: ["First Name", "Last Name", "Age"],
        rows: [
            ["John", "Doe", 30],
            ["Jane", "Doe", 27],
            ["Mac", "Smith", 52]
        ]
    };
    var container = document.getElementById("table_container");
    var tableElem = document.createElement('table');
    var tableContainer = document.getElementById('table_container');
    tableContainer.appendChild(tableElem);
    
    var tHeadElem = document.createElement('thead');
    tableElem.appendChild(tHeadElem);
    
    var tHeadRowElem = document.createElement('tr');
    tHeadElem.appendChild(tHeadRowElem);
    
    data.headers.map(function(val, k) {
        var thElem = document.createElement('th');
        thElem.innerHTML = data.headers[k];
        tHeadRowElem.appendChild(thElem);
    });
    
    var tBodyElement = document.createElement('tbody');
    tableElem.appendChild(tBodyElement);
    
    data.rows.map(function(val, k){
        console.log('val:', val);
        var trElem = document.createElement('tr');
        val.map(function(celval, j){
            var tdElem = document.createElement('td');
            tdElem.innerHTML = celval;
            trElem.appendChild(tdElem);
        });
        tBodyElement.appendChild(trElem);
    });
}

jsonTable();