JSFiddle - React, Tailwind, and code Playground

by KevinGabbert

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/dark-hive/jquery-ui.css">
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js"></script>
<html>
    <head>
        <title>Events</title>
    </head>    
    <body class="ui-widget-content">
        
        <h3>Events - jQgrid Version</h3>
        <div id="jqgrid">
            <table id="grid"></table>
            <div id="pager"></div>
        </div>
        
        <p>Note: This table uses jQgrid plugin to provide advanced grid features. Data should be retrieved via AJAX calls, though jQgrid is quite flexible with data sources. This demo uses local data - krams</p>
        
        <div id="dialog" title="Feature not supported" style="display:none">
            <p>That feature is not supported.</p>
        </div>
    </body>
</html>

CSS

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/dark-hive/images/ui-icons_cccccc_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/dark-hive/images/ui-icons_cccccc_256x240.png); }

JavaScript

// Showcases jQgrid table

var localdata = [{
            "name": "Birthday",
            "id": 1,
            "date": 1284393600000,
            "description": "John's 20th",
            "participants": 30},
        {
            "name": "New Year",
            "id": 2,
            "date": 1294329600000,
            "description": "2011 New Year",
            "participants": 50},
        {
            "name": "Christmas",
            "id": 3,
            "date": 1324742400000,
            "description": "Once per year",
            "participants": 100}
        ];

// Prepare jQgrid
$("#grid").jqGrid({
    url: '/jqgrid/event/getall',
    datatype: 'local',
    data: localdata,
    mtype: 'POST',
    colNames: ['Id',
              'Name',
              'Description',
              'Participants',
              'Date'],
    colModel: [
        {
        name: 'id',
        index: 'id',
        width: 55,
        editable: false},
    {
        name: 'name',
        index: 'name',
        width: 90,
        editable: true},
    {
        name: 'description',
        index: 'description',
        width: 90,
        editable: true},
    {
        name: 'participants',
        index: 'participants',
        editable: true},
    {
        name: 'date',
        index: 'date',
        width: 90,
        editable: false,
        formatter: 'date',
        formatoptions: {
            newformat: 'd/M/Y'
        },
        editable: true}
    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    autowidth: false,
    width: 600,
    rownumbers: true,
    pager: '#pager',
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    caption: "Events",
    emptyrecords: "Empty records",
    loadonce: false,
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        cell: "cell",
        id: "id"
    }
});

$("#grid").jqGrid('navGrid', '#pager', {
    edit: false,
    add: false,
   ...