JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<body class="tundra">
    <div data-dojo-type="dijit/layout/TabContainer">
        <div data-dojo-type="dijit/layout/ContentPane" title="Tab 1">
            <div id="grid"></div>
            <span id="grid_button"></span>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" title="Tab 2">
            <span id="button"></span>
        </div>
    </div>
</body>

JavaScript

require({
    packages: [{
        name: 'dgrid',
        location: 'https://rawgit.com/SitePen/dgrid/v0.4.0',
    },
    {
        name: 'dstore',
        location: 'https://rawgit.com/SitePen/dstore/v1.1.0'
    },
    {
        name: 'put-selector',
        location: 'https://rawgit.com/kriszyp/put-selector/v0.3.6'
    },
    {
        name: 'xstyle',
        location: 'https://rawgit.com/kriszyp/xstyle/v0.2.1'
    }]
}, [
    'dgrid/OnDemandGrid',
    'dstore/Memory',
    'dojo/dom',
    'dijit/form/Button',
    'dijit/layout/TabContainer',
    'dijit/layout/ContentPane',
    'dojo/domReady!'
], function(Grid, Memory, dom, Button) {
    var store = new Memory(),
        grid = new Grid({
            collection: store,
            sort: [{property: 'a'}],
            columns: [
                {field: 'a'},
                {field: 'b'}
            ]
        });
    
    dom.byId('grid').appendChild(grid.domNode);
    
    grid.startup();
    
    for (var i = 0; i < 10; i++) {
        store.putSync({
            'a': i,
            'b': i * 10
        });
    }    
    
    grid.refresh();
    
    function update() {
        var sort = grid.get('sort');
        store.putSync({
            'a': 'hello',
            'b': 'world'
        });
        grid.set('sort', sort);
    }
    
    
    var button = new Button({
            label: 'Update Grid'
        }),
        grid_button = new Button({
            label: 'Resize Grid'
        });
    
    button.on('click', update);
    grid_button.on('click', grid.resize.bind(grid));
    
    dom.byId('button').appendChild(button.domNode);
    dom.byId('grid_button').appendChild(grid_button.domNode);
});