JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<div>
    <div id="controls">
        <fieldset>
            <legend>Time Period - Month</legend>
            <input id="timePeriodCurrent" name="timePeriod" type="radio" value="201310" checked />
            <label for="timePeriodCurrent">Current</label>
            <input id="timePeriodPrior" name="timePeriod" type="radio" value="201309" />
            <label for="timePeriodPrior">Prior</label>
        </fieldset>
    </div>
    <div id="grid"></div>
</div>

CSS

/* 

grey rgb(229,229,229)
borderblue rgb(0,109,132)
blue rgb(0,137,184)
gradientgrey1 rgb(192,192,192)
gradientgrey2 rgb(245,245,245)
bordergrey rgb(194,194,194)

*/
@import url(http://fonts.googleapis.com/css?family=PT%20Sans%20Caption);


body { font-family: "PT Sans Caption";}


#controls fieldset {
    float: left;
    font-size: 1em;
    border: 1px solid #aaa;
    margin-bottom: 5px;
    padding: 4px;
    border-radius: 6px;
}

legend {
    color: #067ab4;
    margin: 0 0 0 3px;
    font-size: .95em;
}

   
#dataTable .GREEN td:first-child,
#dataTable .YELLOW td:first-child,
#dataTable .RED td:first-child  {
    background-repeat: no-repeat;
    padding-left: 30px;
    background-position: 3px center;
}

#dataTable .GREEN td:first-child {
    background-image: url(http://www.gregframe.com/pubimage/iconGreenArrowUp.png);
}

#dataTable .RED td:first-child {
    background-image: url(http://www.gregframe.com/pubimage/iconYellowArrowRt.png);
}

#dataTable .YELLOW td:first-child {
    background-image: url(http://www.gregframe.com/pubimage/iconRedArrowDown.png);
}

#grid{
 display: block;   
    clear: both;
}
#dataTable {
}
#dataTable th, #dataTable td {
    padding:  5px;
    /*white-space: nowrap;
    text-overflow: ellipse;
    overflow: hidden;*/
}

#dataTable td {
    border-left: solid 1px grey;
    text-align: right;
}

#dataTable .kpi {text-align: left;}
#dataTable tr:nth-child(even){
    background-color: #eee;
}
.attain-high {background-color: rgb(179,255,155);}
.attain-med {background-color: rgb(254,254,152);}
.attain-low {background-color: rgb(255,46,82); color: #fff;}
#dataTable th { cursor: pointer; }
#controls input, #controls label { cursor: pointer; }

JavaScript

init = function() {
    // Do any initializations.
  
    // Get the data.
    requestData();
};

drawGrid = function(data) {
   
    $('#grid').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="dataTable"></table>' );
    
    $('#dataTable').dataTable({
        "paging"    : false,
        "autoWidth" : false,
        "info" : false,
        "searching" : false,
        "data"      : data.data,
        "columns"   : formatHeaders(data.headers),
        "columnDefs": [ {
           "targets": 0,
            "className": "kpi"
         },{
           "targets": 1,
           "visible": false
         }, {
           "targets": [10,11,12,13],
           "visible": false
         }, {
           "targets": [9,13],
           "createdCell": function (td, cellData, rowData, row, col) {
               var percent = parseFloat(cellData);
               if (percent > 100) {
                   $(td).addClass("attain-high");
               } else if (percent < 95) {
                   $(td).addClass("attain-low");
               } else {
                   $(td).addClass("attain-med");
               }
           }
         }
        ],
        "createdRow": function( row, data, dataIndex ) {
            switch(data[1]){
                case "GREEN" : $(row).addClass( 'GREEN'  ); break;
                case "RED"   : $(row).addClass( 'RED'    ); break;
                case "YELLOW": $(row).addClass( 'YELLOW' ); break;
            }
        }
    });
   
    var salesTable     = $('#dataTable').dataTable().api();
    var columnsCurrent = salesTable.columns( [6,7,8,9] );
    var columnsPrior   = salesTable.columns( [10,11,12,13] );
    $('#controls').on( 'click', "#timePeriodCurrent", function (e) {
        columnsCurrent.visible( true );
        columnsPrior.visible( false );
    } );
    
    $('#controls').on( 'click', "#timePeriodPrior", function (e) {
        columnsCurrent.visible( false );
        columnsPrior.visible( true );
    }...