JSFiddle - React, Tailwind, and code Playground

by jwstott

HTML

<script src="http://75.126.106.245:8764/scripts/grid.locale-en.js"></script>
<script src="http://75.126.106.245:8764/scripts//jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://75.126.106.245:8764/css/themes/ui.jqgrid.css">
<script src="http://75.126.106.245:8764/scripts/jquery-ui-1.8.17.custom.min.js"></script>
<link rel="stylesheet" href="http://75.126.106.245:8764/css/themes/redmond/jquery-ui.css">
<!doctype html>
<html>
    <head>
        
    </head
    
    <body>
    
    <table id="list4"></table>


    </body>
    
</html>

CSS

html, body {
    margin: 0;            /* Remove body margin/padding */
    padding: 0;
    overflow: hidden;    /* Remove scroll bars on browser window */    
    font-size: 85%;
}

JavaScript

console.log('loading');

    jQuery("#list4").jqGrid({
        datatype: "local",
        height: 350,
        colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
        colModel: [
            {
            name: 'id',
            index: 'id',
            width: 70,
            sorttype: "int"},
        {
            name: 'invdate',
            index: 'invdate',
            width: 90,
            sorttype: "date"},
        {
            name: 'name',
            index: 'name',
            width: 100},
        {
            name: 'amount',
            index: 'amount',
            width: 80,
            align: "right",
            sorttype: "float"},
        {
            name: 'tax',
            index: 'tax',
            width: 80,
            align: "right",
            sorttype: "float"},
        {
            name: 'total',
            index: 'total',
            width: 80,
            align: "right",
            sorttype: "float"},
        {
            name: 'note',
            index: 'note',
            width: 150,
            sortable: false}
        ],
        multiselect: false,
        caption: "Manipulating Array Data"
    });
    var mydata = [
        {
        id: "1",
        invdate: "2007-10-01",
        name: "test",
        note: "note",
        amount: "200.00",
        tax: "10.00",
        total: "210.00"},
    {
        id: "2",
        invdate: "2007-10-02",
        name: "test2",
        note: "note2",
        amount: "300.00",
        tax: "20.00",
        total: "320.00"},
    {
        id: "3",
        invdate: "2007-09-01",
        name: "test3",
        note: "note3",
        amount: "400.00",
        tax: "30.00",
        total: "430.00"},
    {
        id: "4",
        invdate: "2007-10-04",
        name: "test",
        note: "note",
        amount: "200.00",
        tax: "10.00",
        total: "210.00"},
    {
        id: "5",
        invdate: "2007-10-05",
        name: "test2",
        note: "note2",
 ...