JSFiddle - React, Tailwind, and code Playground

by Kamal Kumawat

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table id="list483"></table>

CSS

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

.high-marker{
    text-transform: uppercase;
    font-weight: bold;
    background-color:cyan;
    text-decoration:underline;
}

.ui-jqgrid > .ui-jqgrid-view > .ui-userdata {
    height: auto;
}

JavaScript

var data = [{
        "id": 1,
        "make": "toyota",
        "model": "corolla",
        "fuelusagecity": "17",
        "fuelusagehwy": "12",
        "fuelmeasure":'Litre',
        "salesaboveavg": false,
        "totalnumberofsales": 120000.0000,
        "highsalestext": null,
        "salesdate": "2010-12-01",
        "groupheaderorder":"1",
        "childorder":"1"
    }, {
        "id": 2,
        "make": "toyota",
        "model": "corolla",
        "fuelusagecity": "10",
        "fuelusagehwy": "14",
        "salesaboveavg": false,
        "fuelmeasure":'Litre',
        "totalnumberofsales": 100000.0000,
        "highsalestext": "HIGH",
        "salesdate": "2010-12-15",
        "groupheaderorder":"1",
        "childorder":"1"
    }, {
        "id": 3,
        "make": "toyota",
        "model": "belta",
        "fuelusagecity": "15",
        "fuelusagehwy": "10",
        "salesaboveavg": true,
        "fuelmeasure":'Litre',
        "totalnumberofsales": 200000.0000,
        "highsalestext": null,
        "salesdate": "2011-01-10",
        "groupheaderorder":"1",
        "childorder":"2"
    },
        {
            "id": 4,
            "make": "toyota",
            "model": "prius",
            "fuelusagecity": "15",
            "fuelusagehwy": "10",
            "salesaboveavg": true,
            "fuelmeasure":'Litre',
            "totalnumberofsales": 200000.0000,
            "highsalestext": null,
            "salesdate": "2011-01-10",
            "groupheaderorder":"1",
            "childorder":"3"
        },
        {
            "id": 5,
            "make": "toyota",
            "model": "hiace",
            "fuelusagecity": "15",
            "fuelusagehwy": "10",
            "salesaboveavg": true,
            "fuelmeasure":'Litre',
            "totalnumberofsales": 200000.0000,
            "highsalestext": null,
            "salesdate": "2011-01-10",
            "groupheaderorder":"1",
            "childorder":"4"
        },
        {
           ...