JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css">
<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.15.0/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.0/jquery.jqgrid.min.js"></script>
<table id="grid"></table>

JavaScript

$(function () {
    var data = { FaultCategoryDetails: [
    		{FaultCategoryDetailId: 10, Description: "some text"},
    		{FaultCategoryDetailId: 20, Description: "another text"},
        ]};
    
     $("#grid").jqGrid({
        data: data.FaultCategoryDetails,
        colNames: ["Fault"],
        colModel: [
            { name: "Description", width: 500,
            align: "center", editable: true }
        ],
        cmTemplate: { autoResizable: true, align: "center" },
        prmNames: { id: "FaultCategoryDetailId" },
        localReader: { id: "FaultCategoryDetailId" },
        editurl: "someUrl",
        rowNum: 20,
        pager: true,
        shrinkToFit: true,
        rownumbers: true,
        sortname: "Description",
        viewrecords: true,
        inlineEditing: {
            keys: true
        },
        onSelectRow: function (rowid) {
            var $self = $(this), i,
                // savedRows array is not empty if some row is in inline editing mode
                savedRows = $self.jqGrid("getGridParam", "savedRow");
            for (i = 0; i < savedRows.length; i++) {
                if (savedRows[i].id !== rowid) {
                    // save currently editing row
                    // one can replace saveRow to restoreRow in the next line
                    $self.jqGrid("restoreRow", savedRows[i].id);
                }
            }
            $self.jqGrid("editRow", rowid);
        }
    }).jqGrid("filterToolbar")
    	.jqGrid("gridResize");
});