JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.src.js"></script>
<table id="list"></table>

JavaScript

var grid = $('#list');
var mydata = [
    {id:1, data1:'data', data2:'data', data3:'data'},
    {id:2, data1:'data', data2:'data', data3:'data'},
    {id:3, data1:'data', data2:'data', data3:'data'},
    {id:4, data1:'data', data2:'data', data3:'data'},
    {id:5, data1:'data', data2:'data', data3:'data'},
    {id:6, data1:'data', data2:'data', data3:'data'},
    {id:7, data1:'data', data2:'data', data3:'data'},
    {id:8, data1:'data', data2:'data', data3:'data'},
    {id:9, data1:'data', data2:'data', data3:'data'},
    {id:10, data1:'data', data2:'data', data3:'data'},
    {id:11, data1:'data', data2:'data', data3:'data'},
    {id:12, data1:'data', data2:'data', data3:'data'},
    {id:13, data1:'data', data2:'data', data3:'data'},
    {id:14, data1:'data', data2:'data', data3:'data'},
    {id:15, data1:'data', data2:'data', data3:'data'},
    {id:16, data1:'data', data2:'data', data3:'data'},
    {id:17, data1:'data', data2:'data', data3:'data'},
];

grid.jqGrid({
    data: mydata,
    multiselect: true,
    width: 500,
    colModel: [
        {name:'data1', width:280}, 
        {name:'data2', width:300},
        {name:'data3', width:300},
    ],
    ajaxSelectOptions: { type: "POST" },
    toppager:true,
    rowNum: 15,
    maxHeight: 330,
    rowList: [10,15,20,30,40,50,75,100,250,500],
    sortname: 'id',
    viewrecords: true,
    caption: 'test_file',
    navOptions: {
        refreshstate:'current',
        del:false,
        add:false,
        refresh:false,
        edit:false
    }
}).jqGrid('navGrid');