JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
<div id="content" class="claro">
    <input type="text" id="search" placeholder="Search..." />
    <button id="add"></button>
    <div id="dgrid"></div>
</div>

CSS

body{
    width: 60%;
    margin: 0 auto;
    outline: none;
    font-family: arial;
}
.dijitToggleButton, .dijitButton, .dijitDropDownButton, .dijitComboButton {
    float: right;
}			
.dgrid{
    width: 100%;
}

JavaScript

dojoConfig = {
    parseOnLoad: true,
    async: true
};

require([
    "dojo/_base/declare",
    "dojo/request",
    "dojo/store/Memory",
    "dgrid/Grid",
    "dgrid/extensions/Pagination",
    "dgrid/Selection",
    "dgrid/Keyboard",
    "dijit/form/Button",
    "dojo/domReady!"
], function (declare, request, Memory, Grid, Pagination, Selection, Keyboard, Button) {
    
    var addButton = new Button({
        label: "+ Add",
        onClick: function(){
            alert("onClick is working!");
        }
    }, "add");
    
    request("data.json", {
        handleAs: "json"
    }).then(function (data) {
        var store = new Memory({ data: data });
        var grid = new (declare([Grid, Pagination, Selection, Keyboard]))({
            store: store,
            loadingMessage: "Loading data...",
            noDataMessage: "No results found.",
            columns: {
                id: "ID",
                name: "Name",
                email: "Email",
                mobile: "Mobile",
                DOB: "DOB",
                address: "Address"
            }
        }, "dgrid");
        
        grid.startup();
    });
});