JSFiddle - React, Tailwind, and code Playground

by Bhushan Kawadkar

HTML

<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/i18n/grid.locale-en.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css">
<table id="grid"></table>
    <div id="pager"></div>

JavaScript

var myData = [{ "firstName":"John" , "lastName":"Doe" },
                { "firstName":"Anna" , "lastName":"Smith" },
                { "firstName":"Peter" , "lastName":"Jones" }];

      $("#grid").jqGrid({
          data: myData,
        datatype: 'local',
        colModel:[
          {name:'firstName', label: 'First name', width: 300},
          {name:'lastName', label: 'Last Name', width: 200}
        ],
        caption: "ReportingEmployees",
        pager : '#pager',
        height: 'auto'
      }).navGrid('#pager', {edit:false,add:false,del:false, search: false});