JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

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 {
  .ui-icon {
    position: absolute;
    margin-left: -15px;
  }

  .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'
    }]
}, [
    'dgrid/OnDemandGrid',
    'dstore/Memory',
    'dojo/dom',
    'dojo/domReady!'
], function(Grid, Memory, dom) {
  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 Memory(),
      grid = new Grid({
        collection: store,
        sort: [{property: 'b'}],
        columns: [
          {field: 'a', sortable: true},
          {field: 'b', sortable: true},
          {field: 'c', sortable: true, label: 'c-a-longer-label'}
        ]
      });

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

  grid.startup();

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

  grid.refresh();

 });