JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

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"}
    ],
    buildUniqueValues = function (data, propName) {
        var i, item, valueMap = {}, values = [":All"], dataLength = data.length, value, lowCaseValue;
        for (i = 0; i < dataLength; i++) {
        	value = data[i][propName];
            if (value !== undefined) {
            	lowCaseValue = typeof value === "string" ? value.toLowerCase() : value;
                if (valueMap[lowCaseValue] === undefined) {
                    valueMap[lowCaseValue] = lowCaseValue;
                    values.push(lowCaseValue + ":" + value);
                }
            }
        }
        return values.join(";");
    };
    
    $("#grid").jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["Label", "Value"],
        colModel: [
            { name: "label", width: 70, template: "integer",
            	stype: "select",
                searchoptions: {
                    value: buildUniqueValues(mydata, "label"),
                    sopt: ["eq", "ne"]
                } },
            { name: "value", width: 200,stype: "select",
                searchoptions: {
                    value: buildUniqueValues(mydata, "value"),
                    sopt: ["eq", "ne"]
                } }    
        ],
        pager: true,
        rowNum: 10,
       ...