JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/css/ui.jqgrid.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js"></script>
<table id="grid"></table>

JavaScript

$(function () {
	"use strict";
    var mydata = [
        {id: 10,  label: 10, value: "Abc"},
        {id: 20,  label: 20, value: "Xyz"},
        {id: 30,  label: 30, value: "Abc"},
        {id: 40,  label: 40, value: "Xyz"},
        {id: 50,  label: 50, value: "Abc"},
        {id: 60,  label: 60, value: "Abc"},
        {id: 70,  label: 70, value: "Xyz"},
        {id: 80,  label: 90, value: "Abc"},
        {id: 90,  label: 10, value: "Xyz"},
        {id: 100, label: 20, value: "Abc"},
        {id: 110, label: 10, value: "Abc"},
        {id: 120, label: 30, value: "Xyz"},
        {id: 130, label: 10, value: "Abc"},
        {id: 140, label: 60, value: "Xyz"},
        {id: 150, label: 10, value: "Abc"}
    ];
    
    $("#grid").jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["Label", "Value"],
        colModel: [
            {name: "label", width: 70, template: "integer" },
            {name: "value", width: 200 }    
        ],
        pager: true,
        rowNum: 10,
        rowList: [5, 10, "10000:All"],
        iconSet: "fontAwesome",
        cmTemplate: { autoResizable: true },
        shrinkToFit: false,
        autoResizing: { compact: true }
    }).jqGrid("filterToolbar");
});