JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.min.css">
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<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,
			createColumnIndex: true,
			searchoptions: {
				sopt: [ "cn", "eq", "bw", "ew", "bn", "nc", "en" ],
				clearSearch: true,
				generateDatalist: true
			}
		},
		autoResizing: { compact: true, resetWidthOrg: true },
        caption: 'Filters',
        multiselect: true,
		searching: {
			defaultSearch: "cn",
			//loadFilterDefaults: false,
			multipleSearch: true,
			multipleGroup: true,
			closeOnEscape: true,
			searchOperators: true,
			searchOnEnter: 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');
})