JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.0.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.3.min.js"></script>
<!-- If View Model is initialized show this -->
<div data-bind="if: initialized">
    <button data-bind="click: refreshData">Refresh</button>
<table id="mainTable" class="paddedTable" data-bind="if: data().length > 0">
            <thead>
                <tr>
                    <th style="width: 70px;">Trip No</th>
                    <th style="width: 26px;"><img src="/images/attachment_header.png" alt="Attachments"/></th>
                    <th style="width: 70px;">PO No</th>
                    <th style="width: 70px;">BOL No</th>
                    <th style="width: 70px;">Shipper No</th>
                    <th style="width: 100px;">From</th>
                    <th style="width: 100px;">To</th>
                    <th style="width: 100px;">Scheduled Pickup</th>
                    <th style="width: 100px;">Scheduled Delivery</th>
                    <th style="width: 120px;">Status</th>
                    <th style="width: 40px;">&nbsp;</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: data">
                <tr class="dataRow">
                    <td data-bind="text: TripId"></td>
                    <td><img src="/images/pdf_icon24.png" alt="PDF Document"/></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>tracking stuff</td>
                    <td><a href="#" class="infoLink"><strong>Info</strong></a></td>
                </tr>    
            </tbody>
    </table>
</div>

<!-- If View Model is not initialized show this -->
<div data-bind="ifnot: initialized">
  Loading...
</div>

JavaScript

// Sample JSON to return for initialization; 2 second delay
var data = {
        json: $.toJSON([
                    { "TripId": '1'},
                    { "TripId": '2'},
                    { "TripId": '3'},
                    { "TripId": '4'},
                    { "TripId": '5'},
                    { "TripId": '6'},
                    { "TripId": '7'},
                    { "TripId": '8'},
                    { "TripId": '9'},
                    { "TripId": '10'},
                    { "TripId": '11'},
                    { "TripId": '12'},
                    { "TripId": '13'},
                    { "TripId": '14'},
                    { "TripId": '15'},
                    { "TripId": '16'},
                    { "TripId": '17'},
                    { "TripId": '18'},
                    { "TripId": '19'},
                    { "TripId": '20'},
                    { "TripId": '21'},
                    { "TripId": '22'},
                    { "TripId": '23'},
                    { "TripId": '24'},
                    { "TripId": '25'},
                    { "TripId": '26'},
                    { "TripId": '27'},
                    { "TripId": '28'},
                    { "TripId": '29'},
                    { "TripId": '30'},
                    { "TripId": '31'},
                    { "TripId": '32'},
                    { "TripId": '33'},
                    { "TripId": '34'},
                    { "TripId": '35'},
                    { "TripId": '36'},
                    { "TripId": '37'},
                    { "TripId": '38'},
                    { "TripId": '39'},
                    { "TripId": '40'},
                    { "TripId": '41'},
                    { "TripId": '42'},
                    { "TripId": '43'},
                    { "TripId": '44'},
                    { "TripId": '45'},
                    { "TripId": '46'},
                    { "TripId": '47'},
                    { "TripId": '48'},
                    { "TripId":...