JSFiddle - React, Tailwind, and code Playground

by Vikash Kumar Gupta

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<div class="pull-right form-inline" >			          
	  <input 	id="details-bs-gridgraph-switch"
					type="checkbox" 
					data-size="small" 
					data-handle-width="24px" 
					data-handle-height="50px"
					data-label-width="22px" 
					data-on-color="info" 
					data-off-color="info" 
          data-off-text="<span class='glyphicon glyphicon-th'></span>" 
          data-on-text="<span class='glyphicon glyphicon-picture'></span>" 
          checked="true">
  </div>
  <!-- ko if:showGrid -->
  <div class="form-inline pull-right" data-bind="foreach: detailsColumnCB">
    <input type="checkbox" data-bind=" attr:{'id': $data.id}, value: $data.id">
    <label style="padding-right:10px;padding-top:5px;" data-bind="text: $data.title, attr:{'for':$data.id}">
    </label>
  </div>
  <!-- /ko -->

<div class="panel-body" style="padding: 0px; padding-top: 5px;">
  <div >			          
			<table id="violationTable" class="table table-striped table-bordered table-hover table-condensed">
				<thead>
					<tr data-bind="foreach: violationGridHeader">
						<!-- ko if: $index() === 0 -->
            <th class="text-center" rowspan="2" data-bind="text: $data.headerText"></th>
            <!-- /ko -->
            <!-- ko if: $index() !== 0 -->
            <th class="text-center" data-bind="text: $data.headerText, attr:{'colspan': $parents[0].detailsColumnCB().length}"></th>
            <!-- /ko -->
					</tr>
          <tr...

JavaScript

$("#details-bs-gridgraph-switch").bootstrapSwitch();
var cbObjArray = [
	{'id':'violationCol', 'title': 'Violations'},
  {'id':'avgRespTimeCol', 'title': 'Average Response Time'},
  {'id':'volumeCol', 'title': 'Volume'}
];
var vm = {
	showGrid: ko.observable(false),
  showGraph: ko.observable(true),
	detailsColumnCB : ko.observableArray(cbObjArray),
  violationGridHeader : ko.observableArray([ {"headerText": "Time"},
                                            {"headerText": "Txn1"}, 
                                            {"headerText": "Txn2"}, 
                                            {"headerText": "Txn3"}
		])
};

$("#details-bs-gridgraph-switch").on('switchChange.bootstrapSwitch', function (event, state) {
	            if(state){ 
	            	console.log("Graph View");
	            	vm.showGraph(true);
	            	vm.showGrid(false);	            
	            }
	            else{ 
	            	console.log("Grid View");
	            	vm.showGraph(false);
	            	vm.showGrid(true);
	            }
            });	       
ko.applyBindings(vm);