JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<table id="grid"></table>

JavaScript

var serverResponse = [
    {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({
    url: "/echo/json/", // use JSFiddle echo service
    postData: {
        json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
    },
    mtype: "POST", // needed for JSFiddle echo service
    datatype: "json",
    colNames: ["Label", "Value"],
    colModel: [
        {name: "label", width: 70, template: "integer" },
        {name: "value", width: 200 }	
    ],
    loadonce: true,
    pager: true,
    rowNum: 10,
    rowList: [5, 10, "10000:All"],
    iconSet: "fontAwesome",
    cmTemplate: { autoResizable: true },
    shrinkToFit: false,
    autoResizing: { compact: true },
    beforeProcessing: function (data) {
        var labelMap = {}, valueMap = {}, i, item, labels = ":All", values = [], $self = $(this);
        for (i = 0; i < data.length; i++) {
            item = data[i];
            if (!labelMap[item.label]) {
                labelMap[item.label] = true;
                labels += ";" + item.label + ":" + item.label;
            }
            if (!valueMap[item.value]) {
                valueMap[item.value] = true;
                values.push(item.value);
            }
        }
        $self.jqGrid("setColProp", "label", {
            stype: "select",
            searchoptions: {
                value: labels,
                sopt: ["eq"]
            }
        });
       ...