JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/bitofsky/jquery.datatable/master/jquery.datatable.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/flick/jquery-ui.css">
<br/>
Key Double Click -> Cell edit mode<br/>
<br/>

CSS

body {
    font-size: 11px; overflow: auto;
}
TD {
    padding: 5px;
}

JavaScript

var data = window.data = {
    
    // Array
    arraaType     : [
        'ArrayIdx 0','ArrayIdx 1','ArrayIdx 2','ArrayIdx 3',
    ],
    
    // Boolean
    booleanTrue   : true,
    booleanFalse  : false,
    
    // HTML DOM Elements
    domElement    : document.createElement('textarea'),
    
    // Function
    functionType  : function(){
        alert('Function!!');
    },
    
    // jQuery Object
    jqueryObject  : $('<span>Span Tag</span>'),    
    
    // Null
    nullType      : null,
    
    // Number
    numberType    : 551123.4535,
    
    // PlainObject
    plainObject   : {
        subkeyA   : 123,
        subkeyB   : 'abc',
        subkeyC   : ['X','Y','Z']
    },
    
    // String
    stringType    : 'String ABCD',

    // Undefined
    undefinedType : undefined
    
};

var oDataTable = $.dataTable(data,{modifier:true,keyEdit:true}),
    oButton    = $('<button type=button />').text('Show Current Data').click(function(){
        console.dir(data);
        alert('Executed console.dir(data);\n\nSee debugger or window.data');
    });

$('BODY').append( oButton, '<br/><br/>', oDataTable );