JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table id="sg1"></table>
<div id="psg1"></div>

CSS

.ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-hdiv { overflow: hidden; }
 .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        overflow: hidden;
        height: auto;
        vertical-align: middle;
        padding-top: 3px;
        padding-bottom: 3px
    }

JavaScript

var $thisGrid = jQuery("#sg1");
$thisGrid.jqGrid({
	datatype: "local",
    gridview: true,
    loadonce: true,
    shrinkToFit: false,
    autoencode: true,
	height: 'auto',
    width: 400,
    viewrecords: true,
    sortorder: "desc",
    scrollrows: true,
    loadui: 'disable',
   	colNames:["", 'Inv No', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
        {
            name: "Symbol", index: "Symbol", width: 70, align: 'center', frozen: true,
                formatter: function (cellValue, options, rowObject) {
                    return '<button class="btn btn-info btn-xs update" type="button" title="Update" >' +
                            '<span class="glyphicon glyphicon-remove-circle"></span> Update</button>';
                }
            },
   		{name:'id',width:60, sorttype:"int"},   
   		{name:'name', width:100},
   		{name:'amount', width:80, align:"right",sorttype:"float"},
   		{name:'tax', width:80, align:"right",sorttype:"float"},		
   		{name:'total', width:80,align:"right",sorttype:"float"},		
   		{name:'note', width:150}		
   	],
   	caption: "Test Data",
        onCellSelect: function (rowid,
        iCol,
        cellcontent,
        e) {
            if (iCol == 0) {
                var newdata = [
                {id:"1",name:"new test1 name for testing purpose",note:"new note1",amount:"500.00",tax:"50.00",total:"510.00"},    
		        ];
                $thisGrid.jqGrid('setRowData', 1, newdata[0]);
            }               
        }
}).jqGrid('setFrozenColumns');

var mydata = [
    {id:"1",name:"test1",note:"note1",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"2",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"3",name:"test3",note:"note3",amount:"400.00",tax:"25.00",total:"360.00"},
    {id:"4",name:"test4",note:"note4",amount:"500.00",tax:"60.00",total:"350.00"},
    {id:"5",name:"test5",note:"note5",amount:"600.00",tax:"70.00",total:"340.00"}
		];

for(var...