JSFiddle - React, Tailwind, and code Playground
by Oleg Kiriljuk
HTML
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//rawgit.com/free-jqgrid/jqGrid/master//css/ui.jqgrid.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="//rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<table id="grid"></table>
CSS
html, body { font-size: 75%; }
JavaScript
var serverResponse = [
{
"tournamentID": 1,
"matchFromDate": 1441477800000,
"matchToDate": 1441477800000,
"categoryName": "MEN",
"tournamentName": "World Cup",
"team1Name": "India",
"team2Name": "Pakistan",
"groundName": "Chepauk",
"manualScorer": true,
"onlineScorer": true,
"noOfDays": 0,
"match_paid_status": 0,
"umpire1_paid_status": 1,
"umpire2_paid_status": 1,
"umpire3_paid_status": 1,
"scorer1_paid_status": 1,
"scorer2_paid_status": 1,
"matchRefree_paid_status": 1,
"matchObserver_paid_status": 1,
"umpire1": "1",
"umpire2": "2",
"trophyCode": 0,
"team1ID": 0,
"team2ID": 0,
"team1Captain": null,
"team2Captain": null,
"team1Points": 0,
"team2Points": 0,
"tossWonCode": 0,
"winnerTeamCode": 0,
"season": null,
"team1_12Man": null,
"team2_12Man": null,
"wicketKeeper1": null,
"wicketKeeper2": null,
"score1": null,
"score2": null,
"lossingTeam": null,
"noofOvers": 0,
"state": null,
"team1_Inn1_LegByes": 0,
"team1_Inn1_Byes": 0,
"team1_Inn2_LegByes": 0,
"team1_Inn2_Byes": 0,
"team1_Inn1_Wides": 0,
"team1_Inn1_NoBalls": 0,
"team1_Inn2_Wides": 0,
"team1_Inn2_NoBalls": 0,
"team1_Inn1_Penalty": 0,
"team1_Inn2_Penalty": 0,
"team2_Inn1_LegByes": 0,
"team2_Inn1_Byes": 0,
"team2_Inn2_LegByes": 0,
"team2_Inn2_Byes": 0,
"team2_Inn1_Wides": 0,
"team2_Inn1_NoBalls": 0,
"team2_Inn2_Wides": 0,
...