JSFiddle - React, Tailwind, and code Playground
Starting point with Dojo 1.10 + dgrid 0.4.0 Claro + Dijit Claro
by keemor
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://cdn.rawgit.com/SitePen/dgrid/v0.4.0/css/skins/claro.css">
<div id="grid"></div>
CSS
html, body, #grid {
border: none;
height: 100%;
}
JavaScript
require({
packages: [{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.4.0'
}, {
name: 'dstore',
location: '//cdn.rawgit.com/SitePen/dstore/v1.0.2'
}, {
name: 'xstyle',
location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
}, {
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.6'
}]
}, [
'dgrid/OnDemandGrid',
'dstore/Memory',
'dojo/domReady!'
], function (OnDemandGrid, Memory) {
var grid = new OnDemandGrid({
columns: {
id: 'ID',
value: 'Value'
},
collection: new Memory({ data: [
{ id: '1', value: '-0.11' },
{ id: '22', value: '-7.15' },
{ id: '3', value: '0.12' },
{ id: '44', value: '1.25' },
{ id: '5', value: '10.9' },
{ id: '11', value: '2.02' }
] }),
sort: function (a, b) {
return a.id.localeCompare(b.id, undefined, {numeric: true, sensitivity: 'base'});
}
}, 'grid');
//grid.set('sort',[{property: 'id', descending: false}]);
});