JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

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'}    
};
makeTag=function(openTag, closeTag){
    return function(content){
        return openTag+content+closeTag;  
    };
};
var tHead=makeTag("<thead>","</thead>");
var tBody=makeTag("<tbody>","</tbody>");
var td=makeTag("<td>","</td>");
var tr=makeTag("<tr>","</tr>");

function buildTableHeaders(data){
    var tableHeadersObject ='';
    $.each(data, function(i, item){
       tableHeadersObject +=  td(item);
    });
    return tableHeadersObject;
}
function getTableHeadersFromObject(data){
 return Object.keys(data[0]); 
}    

function insertBasicTable(data,id){
    $('#'+id).html(
        tHead(
            tr(
                buildTableHeaders(getTableHeadersFromObject(data));
            )
        )+
        tBody(
            $.each(data, function(i, item){
               tr(
                $.each(item, function(i2, item2){
                   td(item2);
                });
               );        
            });
        );
    );
}
insertBasicTable(tableObject,"mytable");