JSFiddle - React, Tailwind, and code Playground

JavaScript

<?php

if($_GET['q'] == "true")
{
	$response = new stdClass;
	$response->page = 1;
	$response->total = 1;
	$response->records = 6;
	
	for($i=0;$i<=3;$i++)
	{
		$response->rows[$i]['id'] = substr(md5(rand()), 0, 10);
		$response->rows[$i]['cell'] = Array(1,'bbb');
	}
	for($i=4;$i<=6;$i++)
	{
		$response->rows[$i]['id'] = substr(md5(rand()), 0, 10);
		$response->rows[$i]['cell'] = Array(2,'aaa');
	}	
	echo json_encode($response);
	exit();
}
?>
<!DOCTYPE HTML>
<HTML>
<HEAD>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="/styles/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" href="/js/jquery-ui-1.10.3.custom/css/jquery-ui-1.10.3.custom.min.css" />
	<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
	<SCRIPT TYPE="text/javascript" src="/js/jquery.jqGrid.min.js"></script>
	<SCRIPT TYPE="text/javascript" src="/js/grid.locale-en.js"></script>
	<SCRIPT TYPE="text/javascript">
		$(document).ready(function() {
			$("#list4").jqGrid({
				url:'demo.php?q=true',
				datatype: "json",
				height: 'auto',
				colNames:['Sequence No.','Name'],
				colModel:[
					{name:'sequence',index:'sequence', width:60},
					{name:'name',index:'name', width:90}		
				],
				grouping:true,
				groupingView:
				{
					groupField:['name'],
					groupColumnShow:[true],
					groupCollapse:false,
					groupDataSorted:true,
					groupText:["{0}"]
				},				
			});
		});
	</SCRIPT>
</HEAD>
<BODY>
<TABLE ID="list4"></TABLE>
</BODY>
</HTML>