JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<script src="https://rawgit.com/gelo32k/publicFiles/master/jquery-ui-1.11.4.js"></script>
<link rel="stylesheet" href="https://rawgit.com/gelo32k/publicFiles/master/jquery-ui.css">
<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>
<script src="//rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<table id="pvtCrewAttendance"></table>

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'
            }
        ],
        groupSummary: false,
        colTotals: true
    },
    // grid options
    {
        pager: true,
        iconSet: "fontAwesome",
        cmTemplate: { autoResizable: true },
        shrinkToFit: false,
        autoresizeOnLoad: true,
        autoResizing: { compact: true },
        caption: 'Crew Attendance'
    }
).jqGrid("gridResize");