JSFiddle - React, Tailwind, and code Playground

by heyjee

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/tundraGrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css">
<button id="btnAdd" type="button"></button>
<button id="btnSave" type="button"></button>
<br />
<div id="gridContainer" style="width: 100%; height: 100%;"></div>

CSS

body,
html {
  font-family: helvetica, arial, sans-serif;
  font-size: 90%;
}

.dojoxGrid table {
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

JavaScript

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");

dojo.addOnLoad(function() {
  // our test data store for this example:

  var store = new dojo.data.ItemFileWriteStore({
    //url: 'players.json'
    data: {
      label: 'pId',
      items: [{
        "Player": "Wayne Gretzky",
        "Games": "1487",
        "Points": "2857",
        "PPG": "1.92"
      }, {
        "Player": "Mark Messier",
        "Games": "1756",
        "Points": "1887",
        "PPG": "1.07"
      }, {
        "Player": "Gordie Howe",
        "Games": "1767",
        "Points": "1850",
        "PPG": "1.04"
      }, {
        "Player": "Ron Francies",
        "Games": "1731",
        "Points": "1798",
        "PPG": "1.03"
      }, {
        "Player": "Marcel Dionne",
        "Games": "1348",
        "Points": "1771",
        "PPG": "1.31"
      }, {
        "Player": "Steve Yzerman",
        "Games": "1514",
        "Points": "1755",
        "PPG": "1.16"
      }, {
        "Player": "Mario Lemieux",
        "Games": "915",
        "Points": "1723",
        "PPG": "1.88"
      }, {
        "Player": "Joe Sakic",
        "Games": "1378",
        "Points": "1641",
        "PPG": "1.19"
      }, {
        "Player": "Jaromir Jagr",
        "Games": "1273",
        "Points": "1599",
        "PPG": "1.25"
      }, {
        "Player": "Phil Esposito",
        "Games": "1282",
        "Points": "1590",
        "PPG": "1.24"
      }]
    }
  });

  // set the layout structure:
  var layout = [{
    field: 'Player',
    name: 'Player',
    width: '200px',
    styles: "text-align:center;",
    editable: "true"
  }, {
    field: 'Games',
    name: 'Games Played',
    width: '50px',
    styles: "text-align:center;",
    editable: "true"
  }, {
    field: 'Points',
    name: 'Points',
    width: '50px',
    styles: "text-align:center;",
    editable: "true"
  }, {
    field: 'PPG',
   ...