JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css">
<script src="http://trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js"></script>
<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.js"></script>
<table id="listROvertime"></table>
<div id="pListROvertime"></div>

JavaScript

$(document).ready(function () {
	$('#listROvertime')
		.jqGrid({           
			//url: 'http://localhost/bison/rovertime/listing',
			datatype: 'json',
			mtype: 'post',
			colNames: ["NIK","Nama","Divisi","Jam","Tarif","Total"],
			colModel: [
				{name:"rovertime_nik",index:"rovertime_nik",width:100,
					frozen:true,
					key:true,
					searchoptions:{
						sopt:["eq","ne","bw","bn","ew","en","cn","nc"]
					}
				},
				{name:"rovertime_name",index:"rovertime_name",width:260,
					frozen:true,
					searchoptions:{
						sopt:["eq","ne","bw","bn","ew","en","cn","nc"]
					}
				},
				{name:"rovertime_div",index:"rovertime_div",width:120,
					frozen:true,
					search:false
				},
				{name:"rovertime_ocount",index:"rovertime_ocount",width:70,align:"right",
					formatter:"currency",
					formatoptions:{thousandsSeparator:","},
					search:false,
					sortable:false
				},
				{name:"rovertime_oprice",index:"rovertime_oprice",width:110,align:"right",
					formatter:"currency",
					formatoptions:{thousandsSeparator:","},
					search:false,
					sortable:false
				},
				{name:"rovertime_over",index:"rovertime_over",width:110,align:"right",
					formatter:"currency",
					formatoptions:{thousandsSeparator:","},
					search:false,
					sortable:false
				}
			],
			autowidth: true,			
			caption: 'Laporan Lembur'
		}).jqGrid('setGroupHeaders', {
			useColSpanStyle: true,
			groupHeaders: [
				{startColumnName: 'rovertime_ocount', numberOfColumns: 3, titleText: '<center>Lembur</center>'}
			]
		}).jqGrid('setFrozenColumns');
});