JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>
<table id="Grid4"></table>

JavaScript

// Example from Stackoverflow: 
// see: https://stackoverflow.com/q/48647827/1016343

// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {
  var gridSampleData = [
        { id: 10, firstName: "Jane", lastName: "Doe1"},
        { id: 20, firstName: "Justin", lastName: "Time1" },
        { id: 30, firstName: "Jane", lastName: "Doe2"},
        { id: 40, firstName: "Justin", lastName: "Time2" },
        { id: 11, firstName: "Jane", lastName: "Doe3"},
        { id: 21, firstName: "Justin", lastName: "Time3" },
        { id: 31, firstName: "Jane", lastName: "Doe4"},
        { id: 41, firstName: "Justin", lastName: "Time4" }
      ];
  
  $("#Grid4").jqGrid({
    pager: true,
    rowNum: 4,
    viewrecords: true,
    pagerLeftWidth: 0,
    pagerRightWidth: 80,
    colNames: ['First name', 'Last name'],
    colModel: [{name: "firstName"}, {name: "lastName"}],
    datatype: "json",
		jsonReader: {
      repeatitems: false
		},
    serializeGridData: function (request) {
      var start = (request.page - 1) * request.rows;
    	return {
      	json: JSON.stringify({
  				page: request.page,
          total: gridSampleData.length/request.rows,
          records: gridSampleData.length,
          rows: gridSampleData.slice(start, start + request.rows)
  			})
      }
    },
    mtype: 'POST',
    url: '/echo/json/'
  });
});