Beefed up Grid playground

Author: bvaughn

playground/grid.html

@@ -11,11 +11,27 @@
       margin: 0;
       padding: 0;
     }
+    .cell {
+      display: flex;
+      flex-direction: row;
+    }
+    .button {
+      appearance: none;
+      border: none;
+      background-color: #DDD;
+      border-radius: 4px;
+      display: flex;
+      align-content: center;
+    }
     .input {
-      width: 100%;
+      width: 50px;
       height: 100%;
       box-sizing: border-box;
     }
+    .image {
+      height: 20px;
+      width: auto;
+    }
   </style>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

playground/grid.js

@@ -1,9 +1,26 @@
+var REACT_VIRTUALIZED_BANNER = 'https://cloud.githubusercontent.com/assets/29597/11737732/0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png'
+
 function renderCell (params) {
-  return React.DOM.input({
+  var key = `c:${params.columnIndex}, r:${params.rowIndex}`
+  var input = React.DOM.input({
     className: 'input',
-    onChange: function () {},
-    defaultValue: `column:${params.columnIndex}, row:${params.rowIndex}`
+    defaultValue: key,
+    key: 'input',
+    onChange: function () {}
+  })
+  var button = React.DOM.button({
+    className: 'button',
+    key: 'button'
+  }, key)
+  var image = React.DOM.img({
+    className: 'image',
+    key: 'image',
+    src: REACT_VIRTUALIZED_BANNER
   })
+
+  return React.DOM.div({
+    className: 'cell'
+  }, [input, button, image])
 }
 
 var App = React.createClass({