JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="table-responsive">
    <div id="table-container"></div>
</div>
<script type="text/html" id='table-template'>
    <table id="stbl" class="table table-striped table-condensed table-bordered">
        <tr>
        <%  _.each(headers, function(header,i) { %>
            <th><%= headers[i] %></th>
        <% }) %>
        </tr>
        <% _.each(ts, function(timestamp, i) { %>
        <tr>
        <% _.each(headers, function(header) { %>
            <% if(_.contains(_.find(temp, function(d) { return d.startDate == header;}).timeSlots, timestamp)) { %>
            <td><button class="btn btn-small btn-link"><%= ts[i] %></button></td>
            <% } else { %>
            <td>-</td>
            <% } %>
        <% }) %>
        </tr>
        <% }) %>
    </table>
</script>

CSS

#stbl {
    max-width: 500px;
    font-family: Arial;
    font-weight: normal;
    font-size: 1.2em;
    margin: 20px;
}
#stbl td, #stbl th {
    text-align: center;
}

JavaScript

var temp = [
          {"id":0, "startDate":"04/11/2013", "serviceID":241, "providerID":223, "timeSlots": ["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"]},
          {"id":0, "startDate":"05/11/2013", "serviceID":241, "providerID":223, "timeSlots": ["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"]},
          {"id":0, "startDate":"06/11/2013", "serviceID":241, "providerID":223, "timeSlots": ["09:00","10:00","11:00","12:00","13:00","16:00", "17:00"]},
          {"id":0, "startDate":"07/11/2013", "serviceID":241, "providerID":223, "timeSlots": ["09:00","10:00","11:00","12:00","16:00", "17:00"]}
        ];

var ts;
var headers = _.pluck(temp, "startDate");
        
$(document).ready(function(){
   ts = _.sortBy(_.reduceRight(_.pluck(temp, "timeSlots"), function(num, memo){ return _.union(num, memo);}, []), function(d){ return parseFloat(d.split(":").join("."));})
   var compiled1 = _.template($.trim($("#table-template").html()));
   $("#table-template").remove();
   $("#table-container").html(compiled1({"temp": temp, "headers" : headers, "ts": ts}));
});