JSFiddle - React, Tailwind, and code Playground
HTML
<div id="gridContainer4" style="width: 400px; height: 200px;"></div>
CSS
/*@import "//ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojox/grid/resources/Grid.css";*/
@import "//ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojox/grid/resources/soriaGrid.css";
.dojoxGrid table {
margin: 0;
}
.dojoxGrid {
position: relative;
background-color:#9e9e9e;
font-family: Geneva, Arial, Helvetica, sans-serif;
-moz-outline-style: none;
outline: none;
overflow: hidden;
height: 0;
}
.dojoxGridHeader {
background-color: #9e9e9e;
}
JavaScript
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.data.CsvStore");
dojo.ready(function(){
// our test data store for this example:
/*var store4 = new dojox.data.CsvStore({ url: '//ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojox/grid/tests/support/movies.csv' });*/
var csvData = "Title,Year,Producer,IsCheckBox\n";
csvData += "City of God,2002,Katia Lund,true\n";
csvData += "Rain, ,Christine Jeffs,false\n";
csvData += "2001: A Space Odyssey, ,Stanley Kubrick,true\n";
csvData += "This is a 'fake' movie title,1957,Sidney Lumet,false\n";
csvData += "Alien,1979,Ridley Scott,true\n";
var store4 = new dojox.data.CsvStore({identifier: "Title", data: csvData});
addCheckBox:function (val) {
var checkbox = "<input type='checkbox' name='myfields' value='" + val + "/>";
return checkbox;
},
// set the layout structure:
var layout4 = [
{ field: 'Title', name: 'Title of Movie', width: '200px' },
{ field: 'Year', name: 'Year', width: '50px' },
{ field: 'Producer', name: 'Producer', width: 'auto' }
{ field: 'IsCheckBox', name: 'IsCheckBox', width: 'auto', formatter:this.addCheckBox}
];
// create a new grid:
var grid4 = new dojox.grid.DataGrid({
query: { Title: '*' },
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, document.createElement('div'));
// append the new grid to the div "gridContainer4":
dojo.byId("gridContainer4").appendChild(grid4.domNode);
// Call startup, in order to render the grid:
grid4.startup();
});