JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.group-text {
            text-transform: uppercase;
            font-weight: bold;
        }
        .table{
            width:85%;
        }

JavaScript

var data = [{"id":1,"make":"toyota","model":"corolla","fuelusagecity":"17","fuelusagehwy":"12","salesaboveavg":false,"totalnumberofsales":120000,"cellvalue":"10.1","highlight":true,"mark":true,"salesdate":"2012-01-01"},{"id":2,"make":"toyota","model":"corolla","fuelusagecity":"17","fuelusagehwy":"12","salesaboveavg":false,"totalnumberofsales":100000,"cellvalue":"SUPER","highlight":false,"mark":true,"salesdate":"2012-01-20"},{"id":3,"make":"toyota","model":"belta","fuelusagecity":"15","fuelusagehwy":"10","salesaboveavg":true,"totalnumberofsales":200000,"cellvalue":"0.99","highlight":true,"mark":false,"salesdate":"2014-10-10"},{"id":4,"make":"toyota","model":"camry","fuelusagecity":"13","fuelusagehwy":"10","salesaboveavg":false,"totalnumberofsales":300000,"cellvalue":">=MARGIN","highlight":false,"mark":false,"salesdate":"2014-12-12"},{"id":5,"make":"nissan","model":"skyline","fuelusagecity":"14","fuelusagehwy":"9","salesaboveavg":true,"totalnumberofsales":500000,"cellvalue":"7.88","highlight":false,"mark":true,"salesdate":"2014-12-31"},{"id":6,"make":"nissan","model":"zx300","fuelusagecity":"10","fuelusagehwy":"8","salesaboveavg":false,"totalnumberofsales":400000,"cellvalue":"NPP","highlight":true,"mark":true,"salesdate":"2016-01-20"}];


    var myIntTemplate = {
        formatter: "currency",
        align: "right", sorttype: "number",
        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] },
        formatoptions: { defaultValue: ""}};
var prevmake='', prevmodel='';
    $("#list483").jqGrid("jqPivot",
            data,
            {
                frozenStaticCols: true,
                skipSortByX: true, //true,
                useColSpanStyle: true,
                //defaultFormatting: false,
                xDimension: [
                    {/*x0*/ dataName: "make", width: 100, label: "Make" },
                    {/*x1*/ dataName: "model", width: 100, align: "center", skipGrouping: true },
                    {/*x2*/ dataName: "salesaboveavg",...