JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<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/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-ja.js"></script>
    <table id="sample1"></table>
    <div id="pager1"></div>

JavaScript

$(function() {
        //列の設定
        var colModelSettings= [
            {name:"radio",index:"radio",width:50,align:"center",classes:"radio_class"},
            {name:"no",index:"no",width:70,align:"center",classes:"no_class"},
            {name:"name",index:"name",width:200,align:"center",classes:"name_class"},
            {name:"age",index:"age",width:200,align:"center",classes:"age_class"},
            {name:"local",index:"local",width:200,align:"center",classes:"local_class"},
            {name:"hobby",index:"hobby",width:200,align:"center",classes:"hobby_class"}
        ];

        //列の表示名
        var colNames = ["","No.","name","age","local","hobby"];

        var date = [
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"}

                ];

        //テーブルの作成
        $("#sample1").jqGrid({
            data:date,  //表示したいデータ
            datatype : "local",            //データの種別 他にjsonやxmlも選べます。
                                               //しかし、私はlocalが推奨です。
            colNames : colNames,           //列の表示名
            colModel : colModelSettings,   //列ごとの設定
            rowNum : 10,                   //一ページに表示する行数
            rowList : [1, 10, 20],         //変更可能な1ページ当たりの行数
            caption : "Sample Display",    //ヘッダーのキャプション
            height : 200,                  //高さ
            width :...