JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<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>
<table id="resize"></table>
<div id="presize"></div>
<div id="navGrid"></div>
<div id="gridResize"></div>
<div id="pcolr"></div>
JavaScript
var mydata = [
{name: "Toronto", country: "Canada", continent: "North America" },
{name: "New York City", country: "USA", continent: "North America"},
{name: "Silicon Valley", country: "USA", continent: "North America"},
{name: "Paris", country: "France", continent: "Europe"}
];
$(document).ready(function (){
jQuery("#resize").jqGrid({
//url:'http://localhost/temp-1.json',
//datatype: "json",
//mtype: 'GET',
datatype: "local",
data: mydata,
colNames: ["Name", "Country", "Continent"],
colModel: [
{name: 'name', index: 'name', editable: true,},
{name: 'country', index: 'country', editable: true,},
{name: 'continent', index: 'continent', editable: true,}
],
rowNum:10,
width:700,
rowList:[10,20,30],
pager: '#presize',
//pager: jQuery('#gridpager'),
'cellEdit': true,
'cellsubmit' : 'clientArray',
//editurl: 'clientArray',
//editurl:"/jqGridModel?model=Wine"
sortname: 'invdate',
viewrecords: true,
sortorder: "desc",
caption:"New API Example"
}).navGrid('#gridpager');
jQuery("#resize").jqGrid('navGrid','#presize',{edit:false,add:false,del:false});
jQuery("#resize").jqGrid('gridResize',{minWidth:350,maxWidth:800,minHeight:80, maxHeight:350});
//$("#resize").jqGrid('gridResize', { minWidth: 800, minHeight: 100 });
//jQuery("#resize").jqGrid('gridResize',{minWidth:350, maxWidth:800, minHeight:80, maxHeight:350});
//jQuery("#resize").gridResize();
//jQuery("#list").jqGrid('gridResize');
jQuery("#resize").jqGrid('gridDnD');
//
/*
<table id="resize"></table>
<div id="gridpager"></div>
*/
/*
RESIZE ON WINDOW...