JSFiddle - React, Tailwind, and code Playground

by jleviaguirre

HTML

<style type="text/css">
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css";
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css";
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
    /*@import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";*/
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid_rtl.css";
    
</style>


<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true"></script>


<html>
    
    <body class="claro">
        <div id="gridContainer"></div>
    </body>
</html>

CSS

.dojoxGrid table, button {font-size:smaller; margin: 0; } html, body {font-size:smaller; width: 100%; height: 100%; margin: 0; }
.grayedOut{background:whitesmoke}

JavaScript

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.require("dojo.date.locale");
dojo.require("dijit.form.DateTextBox");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dijit.form.ComboBox");

dojo.addOnLoad(function() {

    var positionStore = new dojo.data.ItemFileReadStore({
        data: {
            items: [
                {
                position: 'employee'},
            {
                position: 'buttler'}]
        }
    });

    var myStore = new dojo.data.ItemFileWriteStore({
        data: {
            label: 'name',
            items: [{
                empId: 823234293,
                name: 'joe',
                position: 'employee',
                manager: 'jack',
                hireDate: '10/10/2011',
                managerAlias: 'the ripper'},
            {
                empId: 3,
                name: 'jack',
                hireDate: '10/31/1913',
                position: 'buttler'}]
        }
    });

    var grid = new dojox.grid.DataGrid({
        store: myStore,
        singleClickEdit: true,
        editable: true,
        formatter: function(date) {
            if (date) return dojo.date.locale.format(date, {
                selector: "date"
            })
        },
        structure: [
        {
            field: "empId"
        },{
            field: "name",
            editable: true,
        },{
            field: "position",
            editable: true,
            cellStyles: 'background:#ffffcc;',
            type: dojox.grid.cells._Widget,
            widgetClass: dijit.form.ComboBox,
            widgetProps: {
                store: positionStore,
                searchAttr: 'position'
            }
        },{
            field: 'hireDate',
            label: 'Fired Date',
            editable: true,
            type: dojox.grid.cells.DateTextBox,
            widgetProps: {
                selector: "date"
            },
           ...