JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<div id="content"></div>

CSS

table {
    width: 100%;
    border-collapse:collapse;
}
table tr td {
    border: 1px solid silver;
}
.boltons .name::before {
    content:"--->   ";
}
thead tr td{
    font-weight:bold;
}

JavaScript

var mockdata = [{
    "name": "Home",
        "description": "W14 0PR",
        "price": "£239.39",
        "expiry": "2015-02-25T09:19:32.893Z",
        "documentationLink": [{
        "name": "Key facts",
            "url": "https://policyexpert.co.uk/keyfacts/code/something/doc.pdf"
    }, {
        "name": "Schedule",
            "url": "https://policyexpert.co.uk/schedule/code/something/doc.pdf"
    }, {
        "name": "Wording",
            "url": "https://policyexpert.co.uk/wording/code/something/doc.pdf"
    }],
        "boltOns": [{
        "name": "Home legal",
            "description": "",
            "price": "£25.00",
            "expiry": "2015-02-25T09:19:32.870Z",
            "documentationLink": [{
            "name": "Key facts",
                "url": "https://policyexpert.co.uk/keyfacts/code/something/doc.pdf"
        }, {
            "name": "Schedule",
                "url": "https://policyexpert.co.uk/schedule/code/something/doc.pdf"
        }, {
            "name": "Wording",
                "url": "https://policyexpert.co.uk/wording/code/something/doc.pdf"
        }],
            "boltOns": []
    }]
}];

function createTable(data) {
    var output = [];

    function handleRow(output, data, customClass) {
        colspan = data.description == ''
        output.push(customClass ? '<tr class="' + customClass + '">' : '<tr>',
            '<td class="name"', colspan ? ' colspan=2 ' : '', '>', data.name, '</td>',
            colspan ? '' : '<td>' + data.description + '</td>',
            '<td>', data.price, '</td>',
            '<td>', data.expiry, '</td>',
            '</tr>')
    }

    output.push('<table>',
                '<thead><tr><td>Name</td><td>Description</td><td>Price</td><td>Expiry</td></tr></thead>',
                '<tbody>')
    for (var i = 0, max = data.length; i < max; i++) {
        var currentRow = data[i]
        handleRow(output, currentRow)

        for (var b = 0, bmax = currentRow.boltOns.length; b < bmax; b++) {
...