JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.min.css">
<table id="list"></table>

JavaScript

$(document).ready(function() {
    var grid = $('#list');
    var mydata = [
        { id: 1, name: 'Oleg', surname: 'A', age: '30'},
        { id: 2, name: 'Oleg', surname: 'B', age: '30'},
        { id: 3, name: 'Zakhar', surname: 'A', age: '25'},
        { id: 4, name: 'Olga', surname: null, age: '25'},
        { id: 5, name: 'Olga', surname: 'C', age: '28'},
    ];
    grid.jqGrid({
        data: mydata,
        pgbuttons: false,
        pgtext: null,
        viewrecords: true,
        reloadingDuringEditing: 'save',
        guiStyle: "bootstrap",
        iconSet: "fontAwesome",
        toppager: true,
        sortname: 'id',
        colNames: ['Name', 'Surname', 'Age'],
        colModel: [
            { name: 'name' },
            { name: 'surname' },
            { name: 'age' },
        ],
		cmTemplate: {
		    width: 100,
			autoResizable: true,
			stype: 'select',
			searchoptions: {
				generateValue: true,
				noFilterText: "(All)"
			}
		},
		autoResizing: { compact: true, resetWidthOrg: true },
        caption: 'Filters',
        multiselect: true,
        navOptions: {
            refreshstate: 'current',
            search: false,
            del: false,
            add: false,
            refresh: false,
            edit: false
        },
		loadComplete () {
		    var $self = $(this), p = $self.jqGrid("getGridParam");
			if (p.recreateFilter) {
				$self.jqGrid('destroyFilterToolbar');
			}
		    if (!p.ftoolbar) {
				$self.jqGrid('filterToolbar');
			}
		}
    }).jqGrid('navGrid');
})