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>
<div id="mydiv">
<table id="list"><tr><td /></tr></table>
</div>
<div id="pager"></div>
JavaScript
$(function () {
'use strict';
var mydata = [
{
"State_0": "AR",
"d0_key": 1,
"d1_key": 8,
"City_1": "Conway",
"QtySold_3": "3,086",
"GrossSales_2": "4,670.51"
},
{
"State_0": "IL",
"d0_key": 2,
"d1_key": 5,
"City_1": "Chicago",
"QtySold_3": "2,718",
"GrossSales_2": "3,939.24"
},
{
"State_0": "IL",
"d0_key": 2,
"d1_key": 29,
"City_1": "Streamwood",
"QtySold_3": "4,243",
"GrossSales_2": "5,885.59"
},
{
"State_0": "IN",
"d0_key": 3,
"d1_key": 15,
"City_1": "Indianapolis",
"QtySold_3": "2,116",
"GrossSales_2": "3,039.98"
},
{
"State_0": "KY",
"d0_key": 4,
"d1_key": 14,
"City_1": "Highland Heights",
"QtySold_3": "3,819",
"GrossSales_2": "5,934.33"
},
{
"State_0": "MI",
"d0_key": 5,
"d1_key": 13,
"City_1": "Grand Rapids",
"QtySold_3": "2,555",
"GrossSales_2": "3,783.85"
},
{
"State_0": "MN",
"d0_key": 6,
"d1_key": 1,
"City_1": "Bloomington",
"QtySold_3": "2,969",
"GrossSales_2": "4,134.26"
},
{
"State_0": "MN",
"d0_key": 6,
"d1_key": 2,
"City_1": "Burnsville",
"QtySold_3": "2,451",
"GrossSales_2": "3,772.54"
},
{
"State_0": "MN",
"d0_key": 6,
"d1_key": 10,
"City_1": "Falcon Heights",
"QtySold_3": "3,930",
"GrossSales_2": "5,447.34"
},
{
"State_0":...