JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<title>
    <center>My First Grid</center>
</title>
<body>
    <table id="list">
        <tr>
            <td></td>
        </tr>
    </table>
    <div id="pager"></div>
</body>

CSS

html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}

JavaScript

$(function () {
    var mydata = [{
        "country": "US",
            "id": 61,
            "name": "mahabali"
    }, {
        "country": "america",
            "id": 63,
            "name": "swamy"
    }, {
        "country": "hjj",
            "id": 64,
            "name": "fg"
    }, {
        "country": "hjj",
            "id": 65,
            "name": "fg"
    }, {
        "country": "hjj",
            "id": 66,
            "name": "fg"
    }];


    $("#list").jqGrid({
        data: mydata,
        datatype: "local",
        colNames: ["Country", "Id", "Name"],
        colModel: [{
            name: "country",
            width: 300,
            align: "right"
        }, {
            name: "id",
            width: 300,
            align: "right"
        }, {
            name: "name",
            width: 300,
            align: "right"
        }],
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'id',
        sortorder: 'desc',
        height: '300',
        loadonce: true,
        caption: 'My first grid',
        sortable: true
    });
});