JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/gelo32k/publicFiles/master/jquery-ui-1.11.4.js"></script>
<script src="https://rawgit.com/gelo32k/publicFiles/master/jquery-1.11.2.js"></script>
<link rel="stylesheet" href="https://rawgit.com/gelo32k/publicFiles/master/jquery-ui.css">
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<table id="pvtCrewAttendance" class="scroll"></table>
<div id="nav" class="scroll"></div>

JavaScript

var crewAttendance = { "total": 1, "page": 0, "records": 7,
				"rows": [
					{ "ID": "1", "UserID": "10", "AttendanceTypeID": "6", "AttendanceDate": "04/05/15", "AttendanceDay": "SUN" },
					{ "ID": "21", "UserID": "10", "AttendanceTypeID": "12", "AttendanceDate": "04/06/15", "AttendanceDay": "MON" },
					{ "ID": "41", "UserID": "10", "AttendanceTypeID": "19", "AttendanceDate": "04/07/15", "AttendanceDay": "TUE" },
					{ "ID": "61", "UserID": "10", "AttendanceTypeID": "17", "AttendanceDate": "04/08/15", "AttendanceDay": "WED" },
					{ "ID": "81", "UserID": "10", "AttendanceTypeID": "17", "AttendanceDate": "04/09/15", "AttendanceDay": "THU" },
					{ "ID": "101", "UserID": "10", "AttendanceTypeID": "19", "AttendanceDate": "04/10/15", "AttendanceDay": "FRI" },
					{ "ID": "121", "UserID": "10", "AttendanceTypeID": "19", "AttendanceDate": "04/11/15", "AttendanceDay": "SAT" }
				], "userID": ["10"], "firstName": ["Christopher"]
			}
			// create jqPivot Grid
			var grid = $("#pvtCrewAttendance");
			grid.jqGrid("jqPivot",
				crewAttendance.rows,
				{
					xDimension: [
						{
							isGroupField: false,
							width: 70,
							dataName: 'UserID',
							label: 'UserID'
						}
					],
					yDimension: [
						{
							dataName: 'AttendanceDay'
						},
						{
							dataName: 'AttendanceDate'
						}
					],
					aggregates: [
						{
							aggregator: 'max',
							width: 80,
							member: 'AttendanceTypeID',
							summarytype: 'count',
							sortable: true,
							resizable: false
						}
					],
					groupSummary: false,
					colTotals: true
				},
			// grid options
				{
				height: 'auto',
				pager: '#nav',
				caption: 'Crew Attendance'
			});

			var cm = grid.getGridParam('colModel');
			for (var iCol = 0; iCol < cm.length; iCol++) {
				var cmi = cm[iCol];
				if (cmi.label.length == 3 || cmi.label.length == 0 || cmi.label == '\&nbsp\;') {
					grid.jqGrid('hideCol', cmi.name);
				}
			}

			grid.trigger('reloadGrid');