JSFiddle - React, Tailwind, and code Playground

by Mani Deep

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/OK/ui.jqgrid.css">
<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/i18n/grid.locale-en.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/jquery.jqGrid.src.js"></script>
<table id="YTDSummary"></table>

JavaScript

var mydata = [
    {"ComponentType":"","Period":"Jan-15"},{"ComponentType":"Deduction","ComponentName":"Income Tax","Period":"Feb-15","Value":"200.00"},{"ComponentType":"Deduction","ComponentName":"Meal Deduction","Period":"Feb-15","Value":"570.00"},{"ComponentType":"Income","ComponentName":"Basic Pay","Period":"Feb-15","Value":"5000.00"},{"ComponentType":"Income","ComponentName":"Food Allowance","Period":"Feb-15","Value":"800.00"},{"ComponentType":"Income","ComponentName":"Fuel Allowance","Period":"Feb-15","Value":"2000.00"},{"ComponentType":"Income","ComponentName":"Meal Allowance","Period":"Feb-15","Value":"600.00"},{"ComponentType":"Deduction","ComponentName":"Income Tax","Period":"Mar-15","Value":"200.00"},{"ComponentType":"Deduction","ComponentName":"Meal Deduction","Period":"Mar-15","Value":"570.00"},{"ComponentType":"Income","ComponentName":"Basic Pay","Period":"Mar-15","Value":"5000.00"},{"ComponentType":"Income","ComponentName":"Food Allowance","Period":"Mar-15","Value":"800.00"},{"ComponentType":"Income","ComponentName":"Fuel Allowance","Period":"Mar-15","Value":"2000.00"},{"ComponentType":"Income","ComponentName":"Meal Allowance","Period":"Mar-15","Value":"600.00"},{"ComponentType":"","Period":"Apr-15"},{"ComponentType":"","Period":"May-15"},{"ComponentType":"","Period":"Jun-15"},{"ComponentType":"","Period":"Jul-15"},{"ComponentType":"","Period":"Aug-15"},{"ComponentType":"","Period":"Sep-15"},{"ComponentType":"","Period":"Oct-15"},{"ComponentType":"","Period":"Nov-15"},{"ComponentType":"","Period":"Dec-15"},{"ComponentType":"AD","ComponentName":"Working Days","Period":"Jan-15"},{"ComponentType":"AD","ComponentName":"Working Days","Period":"Feb-15","Value":"28"},{"ComponentType":"AD","ComponentName":"Working Days","Period":"Mar-15","Value":"31"},{"ComponentType":"AD","ComponentName":"Working Days","Period":"Apr-15"},{"ComponentType":"AD","ComponentName":"Working Days","Period":"May-15"},{"ComponentType":"AD","ComponentName":"Working...