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,
        "make": "toyota",
        "model": "corolla",
        "fuelusagecity": "17",
        "fuelusagehwy": "12",
        "salesaboveavg": false,
        "totalnumberofsales": 120000.0000,
        "highsalestext": null,
        "salesdate": "2010-12-01"
    }, {
        "id": 2,
        "make": "toyota",
        "model": "corolla",
        "fuelusagecity": "10",
        "fuelusagehwy": "14",
        "salesaboveavg": false,
        "totalnumberofsales": 100000.0000,
        "highsalestext": "HIGH",
        "salesdate": "2010-12-15"
    }, {
        "id": 3,
        "make": "toyota",
        "model": "belta",
        "fuelusagecity": "15",
        "fuelusagehwy": "10",
        "salesaboveavg": true,
        "totalnumberofsales": 200000.0000,
        "highsalestext": null,
        "salesdate": "2011-01-10"
    }, {
        "id": 4,
        "make": "toyota",
        "model": "camry",
        "fuelusagecity": "13",
        "fuelusagehwy": "10",
        "salesaboveavg": false,
        "totalnumberofsales": 300000.0000,
        "highsalestext": "HIGH",
        "salesdate": "2011-04-23"
    }, {
        "id": 5,
        "make": "nissan",
        "model": "skyline",
        "fuelusagecity": "14",
        "fuelusagehwy": "9",
        "salesaboveavg": true,
        "totalnumberofsales": 500000.0000,
        "highsalestext": "HIGH",
        "salesdate": "2010-09-10"
    }, {
        "id": 6,
        "make": "nissan",
        "model": "zx300",
        "fuelusagecity": "10",
        "fuelusagehwy": "8",
        "salesaboveavg": false,
        "totalnumberofsales": 400000.0000,
        "highsalestext": null,
        "salesdate": "2012-01-06"
    }];

/* convert the salesdate in  */
var i, item, dateParts;
for (i = 0; i < data.length; i++) {
	item = data[i];
	if (typeof item.salesdate === "string") {
		dateParts = item.salesdate.split("-");
        item.salesYear = dateParts[0];
        item.salesMonth = dateParts[1];
        item.salesDay =...