JSFiddle - React, Tailwind, and code Playground

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>
<div id="pager" class="scroll" style="text-align: center;"></div>

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":"Income","ComponentName":"Fuel Allowance","Year":"2015","Period":"Mar-15","Value":"2000.00"},{"ComponentType":"Income","ComponentName":"Meal Allowance","Year":"2015","Period":"Mar-15","Value":"600.00"},
    {"ComponentType":"","Year":"2015","Period":"Apr-15","Value":"0.00"}
];

jQuery("#YTDSummary").jqGrid('jqPivot', 
			mydata,
			// pivot options
			{
				xDimension : [
					{
						dataName: 'ComponentType', 
						label: 'Component Type',
						width:50
					},{
						dataName: 'ComponentName',
						label: 'Component Name',
                        width:50
					}
				],
				yDimension : [
					{
						dataName: 'Year'
					},{
						dataName: 'Period'
					}
				],
				aggregates : [
					{ 
						label:'Value',
						member : 'Value', 
						name: 'Value',
						aggregator : 'sum',...