JSFiddle - React, Tailwind, and code Playground

HTML

<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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<table id="grid"></table>

JavaScript

var data = [[1, 45, "E123", "1/1/11", "Done", 100], [2, 46, "E124", "1/12/11", "Done", 100]];
    
$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ["SNO", "OrderID", "Location"],
    colModel: [{
        name: 'SNO',
        index: 'SNO',
        width: 60},
    {
        name: 'OrderID',
        index: 'OrderID',
        width: 90},
    {
        name: 'Location',
        index: 'Location',
        formatter:myformatter}
    ],
    caption: "Stack Overflow Example",
});

var names = ["SNO", "OrderID", "Location", "Date", "Status", "Amount"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}
for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

function myformatter ( check, options, rowObject )
{
     return '<input type="checkbox" name="check1"/>' + ' ' + rowObject.Date + ' ' + rowObject.Status;
}