JSFiddle - React, Tailwind, and code Playground

by Richard Ayotte

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.2/dojo/dojo.xd.js.uncompressed.js"></script>
<!-- I need the Column left to "Column 1" to be delete button instead of select all checkbox -->
<div id="gridDiv"></div>

CSS

#grid {
    height: 40em;
}
.claro .cellover {
    color: red;
}

JavaScript

dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.parser");
dojo.require("dojox.grid._CheckBoxSelector");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Button");

dojo.ready(function () {
    // You should put this in its own module and require it.
    // Something like dojo.require("my.grid._CheckBoxSelector")
    dojo.declare('my.grid._CheckBoxSelector', [dojox.grid._CheckBoxSelector], {
        _headerBuilderClass: dojo.extend(function (view) {
            dojox.grid._HeaderBuilder.call(this, view);
        }, dojox.grid._HeaderBuilder.prototype, {
            generateHtml: function () {
                var w = this.view.contentWidth || 0;
                return '<table style="width:' + w + 'px;" ' +
                    'border="0" cellspacing="0" cellpadding="0" ' +
                    'role="presentation"><tr><th style="text-align: center;">' +
                    '<button data-dojo-type="dijit.form.Button" type="button">x</button><div class="dojoxGridCheckSelector dijitReset dijitInline dijitCheckBox" style="display:none"></div></th></tr></table>';
            },
            doclick: function (e) {
                this.view.grid.removeSelectedRows();
                return true;
            }
        })
    });

    /*set up data store*/
    var data = {
        identifier: 'id',
        items: []
    };
    var data_list = [{
        col1: "normal",
        col2: false,
        col3: 'But are not followed by two hexadecimal',
        col4: 29.91
    }, {
        col1: "important",
        col2: false,
        col3: 'Because a % sign always indicates',
        col4: 9.33
    }, {
        col1: "important",
        col2: false,
        col3: 'Signs can be selectively',
        col4: 19.34
    }];
    var rows = 10;
    for (var i = 0, l = data_list.length; i < rows; i++) {
        data.items.push(dojo.mixin({
            id: i + 1
        }, data_list[i % l]));
    }
    var store = new dojo.data.ItemFileWriteStore({
       ...