JSFiddle - React, Tailwind, and code Playground

HTML

<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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>

JavaScript

jQuery(document).ready(function(){
$("table tbody").on("change", "input[type=checkbox]", function (e) {		
    
    var currentCB = $(this);
    var grid = jQuery('#grid');
	var isChecked = this.checked;
	if (currentCB.is(".groupHeader")) {	//if group header is checked, to check all child checkboxes						
		var checkboxes = currentCB.closest('tr').
          nextUntil('tr.gridghead_0').find('.cbox[type="checkbox"]');
		checkboxes.each(function(){
		    if (!this.checked || !isChecked)                   
                grid.setSelection($(this).closest('tr').attr('id'), true); 
		});			
	} else {  //when child checkbox is checked
			var allCbs = currentCB.closest('tr').prevAll("tr.gridghead_0:first").
                            nextUntil('tr.gridghead_0').andSelf().find('[type="checkbox"]');
			var allSlaves = allCbs.filter('.cbox');
			var master = allCbs.filter(".groupHeader");
												
			var allChecked = !isChecked ? false : allSlaves.filter(":checked").length === allSlaves.length;
			master.prop("checked", allChecked);
		}
	});	
});

var mydata = [ 
				{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
				{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"}, 
				{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"}, 
				{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"}, 
				{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"}, 
				{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"}, 
				{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"}, 
				{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"}
			];

jQuery("#grid").jqGrid({ 
    data: mydata, 
    datatype: "local", 
    height: 'auto',     
    colNames:[         
        'Client', 
        'Inv No',
        'Date',
        'Amount',
     ...