JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

CSS

table { border-collapse: collapse; border: 1px solid #eee; }
table tr {}
table tr td { border: 1px solid #eee; padding: 10px; }

JavaScript

// is this a response from an ajax call?
var jsonObj = {response:{pagination:{total:18,page:0,pageSize:25,from:0},sorting:{sortableColumns:[{columnIndex:7,ascending:false}],sortBy:7,sortOrder:"D"},items:[{id:8389,version:3,jobName:"jobnamecron",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}},{id:8384,version:3,jobName:"jobnamecron",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}},{id:8589,version:3,jobName:"multiple",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}},{id:8379,version:3,jobName:"acronym",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}},{id:8189,version:3,jobName:"scalable",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}},{id:2389,version:3,jobName:"scalable",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}},{id:4389,version:3,jobName:"nscalable",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}},{id:9389,version:3,jobName:"nscalable",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}},{id:9189,version:3,jobName:"dimmer",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}},{id:2189,version:3,jobName:"jobnamecron",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}},{id:2389,version:3,jobName:"ndimmer",status:"COMPLETED",tag1:"335-331-9863",parameters:{startDate:"2013-12-07",customerId:"335-331-9863"}}]},status:"SUCCESS"};

var template = ['<table>'];
var headers = ['Tag Number', 'Job Type', 'Date']

// table header (watch browser support here)
$.each(headers, function(index, thItem) {
    template.push('<th>' + thItem + '</th>');
});

// table...