JSFiddle - React, Tailwind, and code Playground

by redoak2000

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css">
<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://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<table id="list"></table>
<button type="button" id="idButton">Toggle grid</button>

JavaScript

$(function () {
    var mydata = [
        { id: "10",	 name: "test",	ship_via: "TNT", total: "" },
        { id: "20",	 invdate: "2016-09-01", name: "test2",	note: "note2",	amount: 300.00, tax: 20.00, closed: false, ship_via: "FedEx", total: 320.00 },
        { id: "30",	 invdate: "2016-09-01", name: "test3",	note: "note3",	amount: 400.00, tax: 30.00, closed: false, ship_via: "FedEx", total: 430.00 },
        { id: "40",	 invdate: "2016-10-04", name: "test4",	note: "note4",	amount: 200.00, tax: 10.00, closed: true,  ship_via: "DHL", total: 210.00 },
        { id: "50",	 invdate: "2016-10-31", name: "test5",	note: "note5",	amount: 300.00, tax: 20.00, closed: false, ship_via: "FedEx", total: 320.00 },
        { id: "60",	 invdate: "2016-09-06", name: "test6",	note: "note6",	amount: 400.00, tax: 30.00, closed: false, ship_via: "FedEx", total: 430.00 },
        { id: "70",	 invdate: "2016-10-04", name: "test7",	note: "note7",	amount: 200.00, tax: 10.00, closed: true,  ship_via: "TNT", total: 210.00 },
        { id: "80",	 invdate: "2016-10-03", name: "test8",	note: "note8",	amount: 300.00, tax: 20.00, closed: false, ship_via: "FedEx", total: 320.00 },
        { id: "90",	 invdate: "2016-09-01", name: "test9",	note: "note9",	amount: 400.00, tax: 30.00, closed: false, ship_via: "TNT", total: 430.00 },
        { id: "100", invdate: "2016-09-08", name: "test10", note: "note10", amount: 500.00, tax: 30.00, closed: true,  ship_via: "DHL", total: 530.00 },
        { id: "110", invdate: "2016-09-08", name: "test11", note: "note11", amount: 500.00, tax: 30.00, closed: false, ship_via: "FedEx", total: 530.00 },
        { id: "120", invdate: "2016-09-10", name: "test12", note: "note12", amount: 500.00, tax: 30.00, closed: false, ship_via: "FedEx", total: 530.00 }
    ]

    $("#list").jqGrid({
        data: mydata,
        colNames: [ "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
        colModel: [

            { name: "name", align: "justify"...