JSFiddle - React, Tailwind, and code Playground

by Mani Deep

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.min.css">
<script src="//rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<table id="YTDSummary"></table>

JavaScript

var mydata = [
    {"ComponentType":"","Year":"2015","Period":"Jan-15","Value":"0.00"},{"ComponentType":"Deduction","ComponentName":"Income Tax","Year":"2015","Period":"Feb-15","Value":"200.00"},{"ComponentType":"Deduction","ComponentName":"Meal Deduction","Year":"2015","Period":"Feb-15","Value":"570.00"},{"ComponentType":"Income","ComponentName":"Basic Pay","Year":"2015","Period":"Feb-15","Value":"5000.00"},{"ComponentType":"Income","ComponentName":"Food Allowance","Year":"2015","Period":"Feb-15","Value":"800.00"},{"ComponentType":"Income","ComponentName":"Fuel Allowance","Year":"2015","Period":"Feb-15","Value":"2000.00"},{"ComponentType":"Income","ComponentName":"Meal Allowance","Year":"2015","Period":"Feb-15","Value":"600.00"},{"ComponentType":"Deduction","ComponentName":"Income Tax","Year":"2015","Period":"Mar-15","Value":"200.00"},{"ComponentType":"Deduction","ComponentName":"Meal Deduction","Year":"2015","Period":"Mar-15","Value":"570.00"},{"ComponentType":"Income","ComponentName":"Basic Pay","Year":"2015","Period":"Mar-15","Value":"5000.00"},{"ComponentType":"Income","ComponentName":"Food Allowance","Year":"2015","Period":"Mar-15","Value":"800.00"},{"ComponentType":"Benefit","ComponentName":"Fuel Allowance","Year":"2015","Period":"Mar-15","Value":"2000.00"},{"ComponentType":"Benefit","ComponentName":"Meal...