JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css">
<script src="http://dojofoundation.org/packages/dgrid/js/dojo/dojo.js"></script>
<body class="tundra">
    <h2>A grid with a tree column</h2>
    <div tabIndex="2" id="tree"></div>
	<div tabIndex="1" id="list"></div>
</body>

JavaScript

require(["dojo/on",
         "dgrid/List",
         "dgrid/OnDemandGrid",
         "dgrid/tree",
         "dgrid/editor",
         "dgrid/Selection",
         "dgrid/Keyboard",
         "dojo/_base/declare",
         "dijit/form/DateTextBox",
         "dijit/form/HorizontalSlider",
         "dijit/form/NumberSpinner",
         "dgrid/test/data/base",
         "dojo/domReady!"
], function(on, List, Grid, tree, editor, Selection, Keyboard, declare, DateTextBox, Slider, NumberSpinner, testStore){
    var StandardGrid = declare([Grid, Selection, Keyboard]);
    
    var tree_grid = new StandardGrid({
        store: testCountryStore,
        selectionMode: "single",
        columns: {
            name: tree({label:'Name', sortable: false}),
            bool: editor({label: 'A CheckBox', sortable: false}, "checkbox"),
            type: {label: 'Type', sortable: false},
            population: 'Population',
            timezone: 'Timezone'
        },
        showHeader: false
    }, "tree");
});