JSFiddle - React, Tailwind, and code Playground

by amiramix

HTML

<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>
<button id="editButton" type="button">Edit</button>
<div id="grid"></div>

CSS

#grid {
    line-height: 30px;
}

.mySelect {
    border: 1px solid #b5bcc7;
    background-color: #ffffff;
 
    height: 17px;
 
    /* Make this position: relative so our arrow is positioned within */
    position: relative;
    padding: 0;
}
.mySelect .label {
    line-height: 17px;
    vertical-align: middle;
}
.mySelect .arrow {
    /* Position the arrow on the right-hand side */
    position: absolute;
    top: 0;
    right: 0;
 
    /* Use claro's arrow image */
    background-image: url("https://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/form/images/commonFormArrows.png");
    background-position: -35px 70%;
    background-repeat: no-repeat;
 
    /* 16x16 with a white border and a gray background */
    width: 16px;
    height: 16px;
    border: 1px solid #ffffff;
    border-top: none;
    background-color: #efefef;
}

.mySelect .dgrid {
    position: absolute;
    top: 17px;
    left: -1px;
    width: 100%;
    display: none;
}
.mySelect .opened {
    display: block;
}

JavaScript

require([
    "dojo/_base/declare",
    "dojo/on",
    "dgrid/OnDemandList",
    "dgrid/OnDemandGrid",
    "dgrid/Selection",
    "dgrid/Keyboard",
    "dojo/store/Memory",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/dom-class",
    "put-selector/put",
    "dojo/domReady!"
    ], function(declare, on, List, OnDemandGrid, Selection, Keyboard, Memory, dom, domConstruct, domClass, put) {

    var store = new Memory({
        identifier: "id",
        data: [
            {
            id: 0,
            name: "One",
            color: "blue",
            value: 1},
        {
            id: 1,
            name: "Two",
            color: "red",
            value: 2},
        {
            id: 2,
            name: "Three",
            color: "green",
            value: 3},
        {
            id: 3,
            name: "Four",
            color: "orange",
            value: 4}
        ]
    });

    var dataStore = new Memory({
        identifier: "id",
        data: [
            {
            id: 0,
            name: "OneOne",
            value: "OneTwo"},
        {
            id: 1,
            name: "TwoOne",
            value: "TwoTwo"}
        ]
    });

    var DropDown = declare([List, Selection, Keyboard]);
    var Grid = declare([OnDemandGrid, Keyboard]);

    var newGrid = new Grid({
        store: dataStore,
        columns: {
            name: {
                label: "Name"
            },
            value: {
                label: "Value",
                renderCell: function(object, value, td, options) {
                    put(td, "div#id-" + object.id, object.name);
                }
            }
        }
    }, "grid");

    on(dom.byId("editButton"), "click", function(e) {

        var ref = dom.byId("id-0");
        ref.innerHTML = "";
        put(ref, "#select.mySelect");
        put(ref, "div.label.button", "choose...");
        put(ref, "div.arrow.button");

        var dropDown = new DropDown({
            selectionMode: "single",
  ...