JSFiddle - React, Tailwind, and code Playground

by Thor Arne Johansen

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
    <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
        <div id="cellbegineditevent"></div>
        <div style="margin-top: 10px;" id="cellendeditevent"></div>
    </div>
</div>

JavaScript

// prepare the data
var data = [
    { firstname: "Thor Arne",
     lastname: "Johansen",
     productname: "eple",
     available: true,
     quantity: 10,
     price: 12,
     date: Date()
     
}];
    var source = {
        localdata: data,
        datatype: "array",
        updaterow: function (rowid, rowdata, commit) {
            // synchronize with the server - send update command
            // call commit with parameter true if the synchronization with the server is successful 
            // and with parameter false if the synchronization failder.
            commit(true);
        },
        datafields: [{
            name: 'firstname',
            type: 'string'
        }, {
            name: 'lastname',
            type: 'string'
        }, {
            name: 'productname',
            type: 'string'
        }, {
            name: 'available',
            type: 'bool'
        }, {
            name: 'quantity',
            type: 'number'
        }, {
            name: 'price',
            type: 'number'
        }, {
            name: 'date',
            type: 'date'
        }]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid({
        width: 850,
        source: dataAdapter,
        editable: true,
        enabletooltips: true,
        selectionmode: 'multiplecellsadvanced',
        columns: [{
            text: 'First Name',
            columntype: 'textbox',
            datafield: 'firstname',
            width: 120
        }, {
            text: 'Last Name',
            datafield: 'lastname',
            columntype: 'textbox',
            width: 120
        }, {
            text: 'Product',
            columntype: 'dropdownlist',
            datafield: 'productname',
            width: 195
        }, {
            text: 'Available',
            datafield: 'available',
            columntype: 'checkbox',
            width: 67
        }, {
            text: 'Ship Date',
           ...