JSFiddle - React, Tailwind, and code Playground

by vikrant singh

HTML

<script src="http://www.editablegrid.net/editablegrid/editablegrid-2.0.1.js"></script>
<link rel="stylesheet" href="http://www.editablegrid.net/editablegrid/editablegrid-2.0.1.css">
<div id="tablecontent"></div>

CSS

body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:11px; }
			h1 { font-size: 15px; }
			a { color: #548dc4; text-decoration: none; }
			a:hover { text-decoration: underline; }
			table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 800px; }
			table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
			table.testgrid th { background: #E5E5E5; text-align: left; }
			input.invalid { background: red; color: #FDFDFD; }

JavaScript

var jsonData = {
    "metadata":[
        {"name":"name","label":"NAME","datatype":"string","editable":true},
        {"name":"firstname","label":"FIRSTNAME","datatype":"string","editable":true},
        {"name":"age","label":"AGE","datatype":"integer","editable":true},
        {"name":"height","label":"HEIGHT","datatype":"double(m,2)","editable":true},
        {"name":"country","label":"COUNTRY","datatype":"string","editable":true,"values":
            {
                "Europe":{"be":"Belgium","fr":"France","uk":"Great-Britain","nl":"Nederland"},
                "America":{"br":"Brazil","ca":"Canada","us":"USA"},
                "Africa":{"ng":"Nigeria","za":"South-Africa","zw":"Zimbabwe"}}
            },
        {"name":"email","label":"EMAIL","datatype":"email","editable":true},
        {"name":"freelance","label":"FREELANCE","datatype":"boolean","editable":true},
        {"name":"lastvisit","label":"LAST VISIT","datatype":"date","editable":true}
    ],

    "data":[
        {"id":1, "values":{"country":"uk","age":33,"name":"Duke","firstname":"Patience","height":1.842,"email":"patience.duke@gmail.com","lastvisit":"11\/12\/2002"}},
        {"id":2, "values":["Rogers","Denise",59,1.627,"us","rogers.d@gmail.com","","07\/05\/2003"]},
        {"id":3, "values":{"name":"Dujardin","firstname":"Antoine","age":21,"height":1.73,"country":"fr","email":"felix.compton@yahoo.fr","freelance":true,"lastvisit":"21\/02\/1999"}},
        {"id":4, "values":{"name":"Conway","firstname":"Coby","age":47,"height":1.96,"country":"za","email":"coby@conwayinc.com","freelance":true,"lastvisit":"01\/12\/2007"}},
        {"id":5, "values":{"name":"Shannon","firstname":"Rana","age":24,"height":1.56,"country":"nl","email":"ranna.shannon@hotmail.com","freelance":false,"lastvisit":"07\/10\/2009"}},
        {"id":6, "values":{"name":"Benton","firstname":"Jasmine","age":61,"height":1.71,"country":"ca","email":"jasmine.benton@yahoo.com","freelance":false,"lastvisit":"13\/01\/2009"}},
       ...