JSFiddle - React, Tailwind, and code Playground

by Mithlesh Kumar

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
<script src="http://amd.egoworx.com/package/dgrid-0.3.3.js"></script>
<script src="http://amd.egoworx.com/package/put-selector-0.3.2.js"></script>
<script src="http://amd.egoworx.com/package/xstyle-0.0.5.js"></script>
<div id="content" class="claro">
    <input type="text" data-dojo-type="dijit/form/TextBox" id="search" placeholder="Search..." />
    <div id="addButton"><button id="add"></button></div>
    <div id="dgrid"></div>
</div>

CSS

body{
    width: 100%;
    margin: 0 auto;
    outline: none;
    font-family: arial;
}
#addButton{
    float: right;
}			
.dgrid{
    width: 100%;
}
.claro * {
    outline: none;
}
#addFrom > input{
    display: block;
    margin: 5px;
}

JavaScript

dojoConfig = {
    parseOnLoad: false,
    async: true
};
require([
    "dojo/_base/declare",
    "dojo/request",
    "dojo/store/Memory",
    "dgrid/Grid",
    "dgrid/editor",
    "dgrid/extensions/Pagination",
    "dgrid/Selection",
    "dgrid/Keyboard",
    "dijit/form/Button",
    "dojo/dom",
    "dojo/on",
    "dojo/parser", 
    "dijit/registry",
    "dijit/form/TextBox",
    "dijit/Dialog",
    "dojo/domReady!"
], function (
    declare, 
    request, 
    Memory, 
    Grid, 
    editor,
    Pagination, 
    Selection, 
    Keyboard, 
    Button, 
    dom, 
    on, 
    parser, 
    Registry, 
    TextBox,
    Dialog
) {
    
    parser.parse();
    
    /*request("data.json", {
        handleAs: "json"
    }).then(function (data) {*/
        
        //console.log(Math.max.apply(Math,data.map(function(o){return o.id;})));
        
    var data = [
	{
		"id": 1,
		"name": "Rahul Desai",
		"email": "rahuldesai209@gmail.com",
		"mobile": 1234567890,
		"DOB": "20-05-1987",
		"address": "Porvorim"
	},
	{
		"id": 2,
		"name": "Nilesh Gaikwad",
		"email": "nileshgaikwad@gmail.comrahul",
		"mobile": 1234567890,
		"DOB": "20-05-1982",
		"address": "Ponda"
	},
	{
		"id": 3,
		"name": "Amey Kinalekar",
		"email": "ameykinalekar@gmail.com",
		"mobile": 1234567890,
		"DOB": "20-05-1984",
		"address": "Mapusa"
	},
	{
		"id": 4,
		"name": "Mithlesh",
		"email": "naveen@gmail.com",
		"mobile": 1234567890,
		"DOB": "20-05-1984",
		"address": "Mapusa"
	}
];
    
    
        // load the dgrid
        var memoryStore = new Memory({ data: data });
        
        var dgrid = new (declare([Grid, Pagination, Selection, Keyboard]))({
            store: memoryStore,
            loadingMessage: "Loading data...",
            noDataMessage: "No results found.",
            columns: [
                editor({
                    label: "ID",
                    field: "id",
                    editor: "text",
                    editOn: "dblclick"
                }),
             ...