JSFiddle - React, Tailwind, and code Playground

by JasonMore

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<!-- Nesting Summary -->
                    <div>
                        <ul data-bind="foreach: Components">
                          <li>
                            <span data-bind="text: Name"></span>
                          <ul data-bind="foreach: $data.Crews">
                              <li data-bind="text: Name"></li>
                          </ul>
                        </li>
                      </ul>
                        <button type="submit" data-bind="click: loadJson">Load Data</button>
                    </div>
                    
                    <!-- Table Fun Times -->
                    <table id="crews">
                        <thead>
                            <tr>
                                <th rowspan="2" colspan="2">Name</th>
                                <th rowspan="2" colspan="2">Totals</th>
                                <th colspan="4">Monday</th>
                                <th colspan="3">Tuesday</th>
                                <th colspan="3">Wednesday</th>
                                <th colspan="2">Thursday</th>
                                <th rowspan="2">Controls</th>
                            </tr>
                            <tr>
                                <th>Breakfast</th><th>Lunch</th><th>Dinner</th><th>Special 1</th>                        
                                <th>Breakfast</th><th>Lunch</th><th>Dinner</th>
                                <th>Breakfast</th><th>Lunch</th><th>Dinner</th>
                                <th>Breakfast</th><th>Lunch</th>
                            </tr>
                        </thead>
                        <tbody data-bind="template: {name: 'tableRowTemplate', foreach: Components}">
                        </tbody>
                   ...

CSS

td,th {border: 1px solid blue}
td {text-align: center;}
td input {width: 3em; text-align: center;}
li {margin-left: 2em;}

JavaScript

$(document).ready(function () {

    // lots of JSON, scroll down!
    var sampleJson = {
    "Crews": {
        "Id" : 1000,
        "Name" : "Level 1 Crew",
        "HasChildren" : 1,
        "Allocated": 
            {
                "Total": 20,
                "Values": { "node1" : 4 , "node2" : 2 , "node3" : 3  , "node4" : 4 , "node5" : 5  , "node6" : 6 , "node7" : 7  , "node8" : 8 , "node9" : 9 , "node10" : 10  , "node11" : 11 , "node12" : 12 }        
            },
        "Allocation": 
            {
                "Total": 20,
                "Values": { "node1" : 4 , "node2" : 2 , "node3" : 3  , "node4" : 4 , "node5" : 5  , "node6" : 6 , "node7" : 7  , "node8" : 8 , "node9" : 9 , "node10" : 10  , "node11" : 11 , "node12" : 12 }        
            },
        "Redeemed": 
            {
                "Total": 0,
                "Values": { "node1" : 1 , "node2" : 2 , "node3" : 3  , "node4" : 4 , "node5" : 5  , "node6" : 6 , "node7" : 7  , "node8" : 8 , "node9" : 9 , "node10" : 10  , "node11" : 11 , "node12" : 12 }    
            },
        "Crews" : 
        [
            {
                "Id": 1000,
                "Name": "Toilet Crew1", 
                "HasChildren" : 0,
                "Allocated": 
                    {
                        "Total": 20,
                        "Values": { "node1" : 4 , "node2" : 2 , "node3" : 3  , "node4" : 4 , "node5" : 5  , "node6" : 6 , "node7" : 7  , "node8" : 8 , "node9" : 9 , "node10" : 10  , "node11" : 11 , "node12" : 12 }        
                    },
                "Allocation": 
                    {
                        "Total": 20,
                        "Values": { "node1" : 4 , "node2" : 2 , "node3" : 3  , "node4" : 4 , "node5" : 5  , "node6" : 6 , "node7" : 7  , "node8" : 8 , "node9" : 9 , "node10" : 10  , "node11" : 11 , "node12" : 12 }        
                    },
                "Redeemed": 
                    {
                        "Total": 0,
                       ...