JSFiddle - React, Tailwind, and code Playground

by Charlie Vaughan

HTML

<table></table>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
}
table {
    width:100%;
    border:0;
    background:#eee;
    border-collapse: collapse;
}
td {
    width:31.3%;
    text-transform:capitalize;
    padding:0.5em 1%;
    display:block;
    float:left;
}
td:first-child {
    font-weight:bold;
}
tr:nth-child(even) {
    background:#ddd;
}

JavaScript

var productData = '[{"id":1,"name":"Retro","price":10,"color":"blue"},{"id":2,"name":"Designer","price":12,"color":"red"},{"id":3,"name":"Classic","price":14,"color":"yellow"},{"id":1,"name":"Retro","price":10,"color":"blue"},{"id":4,"name":"Rimless","price":14,"color":"purple"},{"id":5,"name":"Glam & Sparkle","price":8,"color":"grey"}]';


var table = {
    root: $('table'),
    json: $.parseJSON(productData),
    init: function () {

        var products = this.json,
            number = products.length;

        for (i = 0; i <= number; i++) {

            var result = $.grep(products, function (e) {
                    return e.id == i - 1;
                }),
                results = result.length;

            if (result.length >= 1) {

                var product = result[0];

                this.root.append('<tr><td>&pound;' + product.price + '</td><td>' + product.name + '</td><td>' + product.color + '</td></tr>');

            }

        }
    }
}

table.init(productData);