JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/ui.multiselect-fixed.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/jquery.jqGrid.src-columnChooser.js"></script>
<table id="list_records"><div id="perpage"></div></table>

CSS

.ui-jqgrid-hdiv{
    overflow-y: hidden
}

JavaScript

var mydata = [
    {id:"1",invdate:"2007-10-01zdfsdf sdfsdfsdf sdfsdfsdf ",name:"test"},
    {id:"2",invdate:"2007-10-02",name:"test2"},
    {id:"3",invdate:"2007-09-01",name:"test3"},
    {id:"4",invdate:"2007-10-04",name:"test"},
    {id:"5",invdate:"2007-10-05",name:"test2"},
    {id:"6",invdate:"2007-09-06",name:"test3"},
    {id:"7",invdate:"2007-10-04",name:"test"},
    {id:"8",invdate:"2007-10-03",name:"test2"},
    {id:"9",invdate:"2007-09-01",name:"test3"},
    {id:"10",invdate:"2007-10-01",name:"test"},
    {id:"11",invdate:"2007-10-02",name:"test2"},
    {id:"12",invdate:"2007-09-01",name:"test3"},
    {id:"13",invdate:"2007-10-04",name:"test"},
    {id:"14",invdate:"2007-10-05",name:"test2"},
    {id:"15",invdate:"2007-09-06",name:"test3"},
    {id:"16",invdate:"2007-10-04",name:"test"},
    {id:"17",invdate:"2007-10-03",name:"test2"},
    {id:"18",invdate:"2007-09-01",name:"test3"}
];

$("#list_records").jqGrid({
    data: mydata,
    datatype: "local",
    colNames:['Inv No','Date', 'Client'],
    colModel: [
        {name:'id',index:'id', key: true, width:70, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:100},
    ],
    pager: "#perpage",
    rowNum: 10,
    rowList: [10,20],
    sortname: "userId",
    sortorder: "asc",
    height: 'auto',
    viewrecords: true,
    gridview: true,
    caption: "test",
    rownumbers:true,
    width: 500
}); 
$("#list_records").jqGrid('navGrid', '#perpage', {add: false, edit: false, del: false, search: false, refresh: false});
$("#list_records").jqGrid('navButtonAdd', '#perpage', {
    caption: "showcolumns",
    buttonicon: "ui-icon-calculator",
    title: "Choose columns",
    onClickButton: function () {
        $(this).jqGrid('columnChooser');
        $("#colchooser_" + $.jgrid.jqID(this.id) + " ul.selected")
        .bind("sortreceive", function (event, ui) {
            alert('column "' + ui.item.text() + '" is choosed');
     ...