JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/ui.multiselect.js"></script>
<table id="showCSVList"></table>
<div id="showCSVPager"></div>

JavaScript

var json = {
    "Header": ["Name", "Party", "Province", "Age", "Gender"],
    "data": [{
        "Name": "Mourani, Maria",
        "Age": "43",
        "Gender": "Female",
        "Party": "BlocQuebecois",
        "Province": "Quebec"
    }, {
        "Name": "Sellah,Djaouida",
        "Age": "30",
        "Gender": "Female",
        "Party": "NDP",
        "Province": "Quebec"
    }, {
        "Name": "St-Denis,Lise",
        "Age": "72",
        "Gender": "Female",
        "Party": "NDP",
        "Province": "Quebec"
    }]
};

function showJQgrid(Data)
{
    $("#showCSVList").jqGrid("clearGridData");
    var grid = $('#showCSVList');
    if (grid[0].grid == undefined) 
    {
    } 
    else 
    {
        delete grid;
        $('#showCSVList').GridUnload('#showCSVList');
    }        
    //var parse = Data;
    //global = Data;
    var Jsj = Data;
    var colNames = new Array();
    var colModel = new Array();
    var j = 0;
    for ( var i = 0; i < Jsj.Header.length; i++) 
    {
        colNames.push(Jsj.Header[i]);
        colModel.push({
            name : Jsj.Header[i],
            index : Jsj.Header[i],
            width : '75%',
            align : 'left',
            editable : true
        });
    }
    $('#showCSVList').jqGrid({
        datatype : 'local',
        colNames : colNames,
        colModel : colModel,
        scrollOffset : 0,
        pager : '#showCSVPager',
        rowNum : 5,
        loadonce : true,
        multiselect : true,
        rowList : [ 5, 10, 20, 50 ],
        viewrecords : true
        
    });
    for ( var i = 0; i < Jsj.data.length; i++) 
    {
        jQuery("#showCSVList").jqGrid('addRowData', i+1, Jsj.data[i]);
    }
    
    $("#showCSVList").jqGrid('setGridHeight', $("#center").height());
    $("#showCSVList").navGrid("#showCSVPager", {
        edit : false,
        add : false,
        del : true
    });
    $("#showCSVList").jqGrid('inlineNav', "#showCSVPager");

};

showJQgrid(json);