JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/css/ui.jqgrid.css">
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/i18n/grid.locale-en.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/jquery.jqGrid.src.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <title>Just simple local grid</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
        />
        
        <body>
            <table id="list">
                <tr>
                    <td />
                </tr>
            </table>
            <div id="pager"></div>
        </body>

</html>

JavaScript

$(document).ready(function () {
            var mydata = [{
                id: "10",
                invdate: "2007-10-02",
                name: "Merge A",
                note: "note",
                amount: "200.00",
                tax: "10.00",
                closed: true,
                ship_via: "TN",
                total: "210.00"
            }, {
                id: "2",
                invdate: "2007-10-02",
                name: "Merge A",
                note: "note2",
                amount: "300.00",
                tax: "20.00",
                closed: true,
                ship_via: "FE",
                total: "320.00"
            }, {
                id: "3",
                invdate: "2007-09-01",
                name: "Merge C",
                note: "note3",
                amount: "400.00",
                tax: "30.00",
                closed: false,
                ship_via: "FE",
                total: "430.00"
            }, {
                id: "4",
                invdate: "2007-10-04",
                name: "Merge B",
                note: "note4",
                amount: "200.00",
                tax: "10.00",
                closed: false,
                ship_via: "TN",
                total: "210.00"
            }, {
                id: "5",
                invdate: "2007-10-31",
                name: "Merge A",
                note: "note5",
                amount: "300.00",
                tax: "20.00",
                closed: false,
                ship_via: "FE",
                total: "320.00"
            }, {
                id: "6",
                invdate: "2007-09-06",
                name: "Merge B",
                note: "note6",
                amount: "400.00",
                tax: "30.00",
                closed: false,
                ship_via: "FE",
                total: "430.00"
            }],
                grid = $("#list");

            grid.jqGrid({
                datatype: 'local',
               ...