JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://jeelabs.org/pub/js/jquery.jqGrid.locale-en.js"></script>
<script src="//cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script>
<table id="grid"></table>
<div id="pager"></div>

JavaScript

var container = $("#grid");
var containerPager = $("#pager");

$("#grid").jqGrid({
    datatype: 'jsonstring',
    datastr: '{ "page": 1, "total": 1, "recors": 2, "rows": [ {"idproduct":"1", "fuel":1, "factor":"300", dateStart:"2013-06-01", dateEnd:"2014-03-01"}, {"idproduct":"2", "fuel":3, "factor":"100", dateStart:"2013-11-30", dateEnd: "2014-02-30"} ] }',
    width: 440,
    height: 260,
    colNames: ["Id", "Combustible", "Factor", "Fecha Inicio", "Fecha Fin"],
    colModel: [{
        name: 'idproduct',
        index: 'idproduct',
        width: 25,
        sortable: false,
        align: 'center',
        editable: true,
        editoptions: {
            maxlength: 5
        }
    }, {
        name: 'fuel',
        index: 'fuel',
        width: 60,
        formatter: 'select',
        sortable: false,
        align: 'center',
        editable: true,
        edittype: "select",
        editoptions: {
            value: "1:Magna;2:Premium;3:Diesel"
        }
    }, {
        name: 'factor',
        index: 'factor',
        width: 30,
        sortable: false,
        align: 'center',
        editable: true,
        editoptions: {
            maxlength: 5
        }
    }, {
        name: 'dateStart',
        index: 'dateStart',
        formatter: 'date',
        width: 200,
        sortable: false,
        align: 'right',
        editable: true,
        editoptions: {
            size: 20,
            maxlengh: 10,
            dataInit: function (element) {
                $(element).datepicker({
                    dateFormat: 'dd-mm-yy',
                    constrainInput: false,
                    showOn: 'button',
                    buttonText: '...'
                });
            }
        },
        formatoptions: {
            newformat: "d-M-Y"
        }
    },

    {
        name: 'dateEnd',
        index: 'dateEnd',
        formatter: 'date',
        sortable: false,
        width: 200,
        align: 'right',
        editable: true,
       ...