JSFiddle - React, Tailwind, and code Playground

by LijoCheeran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<body>
    <table id="grid"><tr><td/></tr></table>
    <div id="pager2"></div>

</body>

JavaScript

function clickme(rowID) {
        alert("hi");
    }
    
     var myData = [
                
                { "id": "35", "firstname": null, "codeval": "G", "note": "xx7866", "amount": "23" },
                { "id": "73", "firstname": null, "codeval": "W", "note": "dd1047", "amount": "34" },
                { "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323", "amount": "56" },
                { "id": "95", "firstname": "EST", "codeval": "M", "note": "gg574", "amount": "55" }
                ]
                
    $(document).ready(function() {
        $("#grid").jqGrid({
             datatype:'local',
             data: myData,
             ajaxGridOptions: {
                contentType: 'application/json; charset=utf-8'
            },
            serializeGridData: function(postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                repeatitems: false,
                root: function(obj) {
                    return obj.d;
                }
            },
            colNames: ['id', 'firstname', 'codeval',  'Join'],
            colModel: [{
                name: 'id',
                index: 'id'
            }, 
            {
                name: 'firstname',
                index: 'firstname'
            }, 
            {
                name: 'codeval',
                index: 'codeval'
            }, 
            {
                name: 'Join',
                index: 'GameID',
                width: 30,
                formatter: function(cellvalue, options, rowObject) {
                    return '<span class="ui-icon ui-icon-folder-open app-custom-button-join"  title="click to open" onclick="clickme(' + options.rowId + ') ;"></span>';
                }
            }],
            rowNum: 10,
            /*rowList: [10, 20, 30],*/
            pager: '#pager2',
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            gridview: true,
     ...