JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<div id="tablePlaceHolder"></div>

JavaScript

tableObject = {
    0: { 'color': 'red', 'size' : 'large', 'sex' : 'men\'s'},
    1: { 'color': 'blue', 'size' : 'large', 'sex' : 'men\'s'},
    2: { 'color': 'orange', 'size' : 'large', 'sex' : 'men\'s'},
    3: { 'color': 'red', 'size' : 'medium', 'sex' : 'men\'s'}    
};

function buildTableHeaders(data){
    var tableHeaderOutput = '<thead><tr>';
    for(var i=0; i<Object.keys(data).length; i++){
        tableHeaderOutput += '<th>'+data[i]+'</th>';
    }
    tableHeaderOutput += '</tr></thead>';
    return tableHeaderOutput;
}

function buildTableRow(data){
    console.log(data);
    var tableRowOutput = '<tr>';
    for(var i=0; i<Object.keys(data).length; i++){
        var key = Object.keys(data)[i];
        tableRowOutput += '<td>'+data[key]+'</td>';
    }
    tableRowOutput += '</tr>';
    return tableRowOutput;
}    

function buildTableFromObject(data){
    var tableHeaders = Object.keys(data[0]);
    var outputHTML = '<table>';
    outputHTML += buildTableHeaders(tableHeaders);
    outputHTML += '<tbody>';
    for(var i=0; i<Object.keys(data).length; i++){
        outputHTML += buildTableRow(data[i]);
    }
    outputHTML += '</tbody>';
    outputHTML += '</table>';
    return outputHTML;
}

function drawTableFromObject(data, placeHolder){
    var tablePlaceHolder = document.getElementById(placeHolder);
    tablePlaceHolder.innerHTML = buildTableFromObject(data);
}

drawTableFromObject(tableObject, 'tablePlaceHolder');