JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.src.js"></script>
<table id="list483"></table>

CSS

.group-text {
    text-transform: uppercase;
    font-weight: bold;
}

JavaScript

var data = [{
        "id": 1,            
        "deadline":"Deadline",
        "AgreedD":"Agredd Deadline",
        "labelD":"Date",
        "Agreed":"2018-02-11",
        
        
    },{
     "id": 2,
      "deadline":"Deadline",
    "EstimatedD":"Estimated Deadline",
    "labelD":"Date",
    "Estimated":"2018-02-15"
    }
    /*, {
        "id": 2,
       "deadline":"DaysLeft",
        "UAD":"25",
        "UED":"33"
    },
     {
        "id": 3,
       "deadline":"Participants",
        "RequiredP":"120",
        "WRec":"88"
    },
     {
        "id": 4,
       "deadline":"Utterences",
        "RequiredU":"6000",
        "RecordedU":"4800"
    },{
        "id": 5,
       "deadline":"Throughput",
        "RequiredT":"400",
        "ActualT":"12"
    },*/
    
    ];

/* convert the salesdate in  */


$("#list483").jqGrid("jqPivot",
	data,
    {
        frozenStaticCols: true,
        skipSortByX: true,
        useColSpanStyle: true,
        //defaultFormatting: false,
        xDimension: [
        		{dataName:"deadline"},
            {dataName: "AgreedD" },
            {dataName: "EstimatedD" },
            /*{dataName: "WRec", sortorder: "desc" },
            {dataName: "UED", sortorder: "desc" },
            {dataName: "Estimated", sortorder: "desc" },*/
             
        ],
        yDimension: [
            
             //{ dataName: "Agreed", width: 100, label: "Agreed" },
             //{ dataName: "Estimated", width: 100, label: "Estimated" },
						/*	{dataName:"RequiredP", width: 100, label: "RequiredP"},
             {dataName:"UAD", width: 100, label: "UAD"},
             {dataName:"RequiredU", width: 100, label: "RequiredU"},*/
           /*,
            { dataName: "salesYear", sorttype: "integer" },
            { dataName: "salesMonth", sorttype: "integer" }*/],
        aggregates: [{
            //member: "Agreed",
            
            //template: "number",
            //template: "integer", //myIntTemplate,
            
       ...