JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

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:"",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', 
				width: 40,
				formatter: 'number',
				align: 'right',
				summaryType: 'sum'
			}
		],
		rowTotals: true,
		colTotals: true
	},
	{
        cmTemplate: { autoResizable: true },
       ...