JSFiddle - React, Tailwind, and code Playground

by gopinathkathir

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://use.typekit.net/orc8huj.js"></script>
<table id="grid"></table>

CSS

.ui-jqgrid {
  border-width: 0px;
  font-family: museo-sans;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl,
.ui-corner-right,
.ui-corner-tr,
.ui-corner-bottom,
.ui-corner-bl,
.ui-corner-br {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -khtml-border-radius: 0;
}

.ui-jqgrid .ui-jqgrid-labels th.ui-th-column {
  background-color: #DE5C22 !important;
  border-right-color: transparent;
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  background-image: none
}

.ui-jqgrid-jquery-ui.ui-jqgrid .ui-jqgrid-bdiv tr.ui-row-ltr>td {
  border-color: inherit;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.ui-jqgrid .ui-jqgrid-htable th {
  height: 50px;
  padding: 0 2px 0 2px;
}

.ui-jqgrid .ui-jqgrid-htable th:nth-child(3) {
  text-align: left;
  padding-left: 10px;
}

.ui-jqgrid tr.jqgroup>td {
  height: 32px;
}

.ui-jqgrid tr.jqgrow td {
  height: 32px;
}

.ui-jqgrid tr.jqgrow td:nth-child(3) {
  padding-left: 35px;
}

.myDetailRowClass {
  font-family: museo-sans;
  font-size: 13px;
  font-weight: 200;
  padding: 0 10px;
}

.myHeadRowClass {
  font-family: museo-sans;
  font-size: 14px;
  font-weight: 500;
}

JavaScript

var data = [{
    "userGroupName": "Members",
    "appName": "Benefit Admin Tool",
    "pageName": "Home",
    "month": "20-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Members",
    "appName": "Benefit Admin Tool",
    "pageName": "Home",
    "month": "21-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Members",
    "appName": "Benefit Admin Tool",
    "pageName": "Policy search",
    "month": "20-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Members",
    "appName": "Benefit Admin Tool",
    "pageName": "Policy search",
    "month": "21-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Members",
    "appName": "Referral Search",
    "pageName": "Home",
    "month": "20-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Members",
    "appName": "Referral Search",
    "pageName": "Home",
    "month": "21-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Members",
    "appName": "Referral Search",
    "pageName": "Search",
    "month": "20-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Members",
    "appName": "Referral Search",
    "pageName": "Search",
    "month": "21-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Provider",
    "appName": "Claims",
    "pageName": "Claim Detail",
    "month": "20-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Provider",
    "appName": "Claims",
    "pageName": "Claim Detail",
    "month": "21-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Provider",
    "appName": "Member Eligibility",
    "pageName": "Member Detail",
    "month": "20-Dec-2018",
    "click": 4
  },
  {
    "userGroupName": "Provider",
    "appName": "Member Eligibility",
    "pageName": "Member Detail",
    "month": "21-Dec-2018",
    "click": 4
  }

];

jQuery("#grid").jqGrid('jqPivot', data,
  // pivot options
  {
    frozenStaticCols: true,
    skipSortByX: true,
    useColSpanStyle: true,
    xDimension: [{
        dataName: 'userGroupName',
        label: 'User...