JSFiddle - React, Tailwind, and code Playground

by schlomm

HTML

<link rel="stylesheet" href="http://dojofoundation.org/packages/dgrid/js/dgrid/css/dgrid.css">
<link rel="stylesheet" href="http://dojofoundation.org/packages/dgrid/js/dgrid/css/skins/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" data-dojo-config="async:1"></script>
<div id="grid" class="claro"></div>

CSS

#grid {
    height: 200px;
}
.dgrid-column-0 {
    width: 28px;
}

JavaScript

require({
    baseUrl: 'http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/',
    packages: [{
        name: 'dojo',
        location: 'dojo'
    }, {
        name: 'dgrid',
        location: 'http://dojofoundation.org/packages/dgrid/js/dgrid'
    }, {
        name: 'put-selector',
        location: 'http://dojofoundation.org/packages/dgrid/js/put-selector'
    }, {
        name: 'xstyle',
        location: 'http://dojofoundation.org/packages/dgrid/js/xstyle'
    }]
}, [
    'dojo/_base/declare',
    'dojo/store/Memory',
    'dgrid/OnDemandGrid',
    'dgrid/Selection',
    'dgrid/Selector'
], function (declare, MemoryStore, OnDemandGrid, Selection, selector) {
    var SelectionGrid = declare([OnDemandGrid, Selection]);
    
    var data = [{
        id: 0,
        firstName: 'Bob',
        lastName: 'Smith'
    }, {
        id: 1,
        firstName: 'Tom',
        lastName: 'Anderson'
    }, {
        id: 2,
        firstName: 'Mark',
        lastName: 'Hall'
    }, {
        id: 3,
        firstName: 'Dave',
        lastName: 'Booker'
    }, {
        id: 4,
        firstName: 'Philip',
        lastName: 'Cook'
    }, {
        id: 5,
        firstName: 'Don',
        lastName: 'Harris'
    }];
    
   var data = new MemoryStore({data: data});
   var grid = new SelectionGrid({
    		collection: data,
        columns: [
            selector({ label: '' }),
            { field: 'firstName', label: 'First Name', sortable: false },
            { field: 'lastName', label: 'Last Name', sortable: false }
        ],
        selectionMode: 'none'
    }, 'grid');
    
    grid.startup(); 


});