JSFiddle - React, Tailwind, and code Playground
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>
<h2>dgrid GitHub Issues</h2>
<div id="grid" class="claro"></div>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
}
#grid {
height: 300px;
}
.dgrid-cell {
padding: 6px;
}
.field-user {
width: 200px;
}
.field-number {
width: 70px;
}
.dgrid-no-data {
font-size: 2em;
padding-top: 1em;
text-align: center;
}
}
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/_base/lang',
'dojo/request/script',
'dojo/store/util/QueryResults',
'dgrid/OnDemandGrid'
], function (declare, lang, request, QueryResults, OnDemandGrid) {
var GitHubStore = declare(null, {
target: '',
idProperty: 'number',
constructor: function (options) {
lang.mixin(this, options);
},
get: function (id) {
return request(this.target + '/' + id, {
jsonp: 'callback'
}).then(function (result) {
// The information we want is on the 'data' property of the returned results
return result.data;
});
},
getIdentity: function (object) {
return object[this.idProperty];
},
query: function (query, queryOptions) {
var resultPromise = request(this.target, {
query: query,
jsonp: 'callback'
}).then(function (result) {
// The information we want is on the 'data' property of the returned results
return result.data;
});
// QueryResults will add the 'total' property as well as iteration methods
return QueryResults(resultPromise);
}
});
var store = new GitHubStore({
target: 'https://api.github.com/repos/SitePen/dgrid/issues'
});
var grid = new OnDemandGrid({
store: store,
columns: {
user: {
label: 'Opened by',
get: function (rowObject) {
...