dgrid + dstore + Tree

An OnDemandGrid with Tree plugins for both grid and store.

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<body class="tundra">
  <div id="grid"></div>
</body>

SCSS

#grid .dgrid {
  .dgrid-cell-padding {
    padding: 10px 5px 4px;
  }

  .dgrid-header .dgrid-cell-padding {
    padding: 4px 5px;
  }  
}

body {
    margin: 10px;
}

Babel + JSX

require({
    packages: [{
        name: 'dgrid',
        location: 'https://rawgit.com/SitePen/dgrid/v0.4.0',
    },
    {
        name: 'dstore',
        location: 'https://rawgit.com/SitePen/dstore/v1.1.0'
    },
    {
        name: 'put-selector',
        location: 'https://rawgit.com/kriszyp/put-selector/v0.3.6'
    },
    {
        name: 'xstyle',
        location: 'https://rawgit.com/kriszyp/xstyle/v0.2.1'
    }]
}, [
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dstore/Memory',
    'dojo/dom',
    'dgrid/Tree',
    'dstore/Tree',
    'dstore/Trackable',
    'dojo/domReady!'
], function(declare, Grid, Memory, dom, Tree, TreeStore, Trackable) {
  const LONG_TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales ut dui id auctor. Nam sit amet dolor quis purus pretium tempor. In et quam laoreet, tincidunt massa eu, congue dolor. Proin id vestibulum metus. Pellentesque vehicula pellentesque hendrerit. Etiam interdum turpis eu nisl varius porta. Mauris ligula sapien, consectetur laoreet sagittis et, pulvinar sit amet felis. Etiam efficitur porttitor consectetur. Ut mi neque, cursus id dapibus ut, euismod ac enim.`;
  
  let store = new declare([Memory, Trackable, TreeStore])({
  data: [], 
  idProperty: 'ip',
  }),
      grid = new declare([Grid, Tree])({
        collection: store.getRootCollection(),
        keepScrollPosition: true,
        sort: [{property: 'b'}],
        columns: [
          {field: 'a', sortable: true, renderExpando: true},
          {field: 'b', sortable: true},
          {field: 'c', sortable: true, label: 'c-a-longer-label'}
        ]
      });

  dom.byId('grid').appendChild(grid.domNode);

  grid.startup();
  
  store.putSync({
    ip: '__ok',
    parent: null,
    hasChildren: true,
    a: 999,
    b: 999,
    c: 999
  });

  for (let i = 0; i < 10; i++) {
    store.putSync({
      ip: i,
      a: i,
      b: i * 10,
      c: LONG_TEXT,
      parent: '__ok',
      hasChildren: false
    });
  }   ...