iteration

package.json

@@ -26,6 +26,8 @@
     "webpack": "1.12.11",
     "react": "0.14.6",
     "react-dom": "0.14.6",
+    "css-loader": "0.23.1",
+    "style-loader": "0.13.0",
     "babel-loader": "6.2.1",
     "babel-preset-react": "6.3.13",
     "babel-preset-es2015": "6.3.13"

src/index.js

@@ -3,6 +3,8 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import {MyApp} from './myApp.jsx';
+import 'ag-grid-root/ag-grid.css';
+import 'ag-grid-root/theme-fresh.css';
 
 document.addEventListener('DOMContentLoaded', ()=> {
     var container = document.getElementById('myAppContainer');

src/myApp.css

@@ -0,0 +1,29 @@
+
+.ag-cell {
+    padding-top: 2px !important;
+    padding-bottom: 2px !important;
+}
+
+label {
+    font-weight: normal !important;
+}
+
+.div-percent-bar {
+    display: inline-block;
+    height: 100%;
+    position: relative;
+}
+
+.div-percent-value {
+    position: absolute;
+    z-index: 1;
+    padding-left: 4px;
+    font-weight: bold;
+    font-size: 13px;
+}
+
+.div-outer-div {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+}

src/myApp.jsx

@@ -1,6 +1,7 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import AgGrid from 'ag-grid';
+import './myApp.css';
 
 var firstNames = ["Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella",
     "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby",
@@ -136,7 +137,7 @@ export class MyApp extends React.Component {
                 </div>
                 <div style={{clear: 'both'}}/>
             </div>
-            <MyGrid mouse="white" style={{width: '100%', height: '400px'}}></MyGrid>
+            <MyGrid style={{width: '100%', height: '400px'}} className="ag-fresh"></MyGrid>
         </div>;
     }
 }
@@ -169,7 +170,7 @@ class MyGrid extends React.Component {
     }
 
     render() {
-        return <div style={this.props.style} />;
+        return <div style={this.props.style} className={this.props.className} />;
     }
 
     createRowData() {
@@ -237,8 +238,7 @@ class MyGrid extends React.Component {
 
 MyGrid.propTypes = {
     'style': React.PropTypes.object,
-    'class': React.PropTypes.string,
-    mouse: React.PropTypes.string
+    'className': React.PropTypes.string
 };
 
     var btBringGridBack;
@@ -337,12 +337,12 @@ MyGrid.propTypes = {
     }
 
     var SKILL_TEMPLATE =
-        '<label style="border: 1px solid lightgrey; margin: 4px; padding: 4px;">' +
+        '<label style="border: 1px solid lightgrey; margin: 4px; padding: 4px; display: inline-block;">' +
         '  <span>' +
         '    <div style="text-align: center;">SKILL_NAME</div>' +
         '    <div>' +
         '      <input type="checkbox"/>' +
-        '      <img src="/images/skills/SKILL.png" width="30px"/>' +
+        '      <img src="images/skills/SKILL.png" width="30px"/>' +
         '    </div>' +
         '  </span>' +
         '</label>';
@@ -368,6 +368,7 @@ MyGrid.propTypes = {
 
     SkillFilter.prototype.getGui = function () {
         var eGui = document.createElement('div');
+        eGui.style.width = '380px';
         var eInstructions = document.createElement('div');
         eInstructions.innerHTML = FILTER_TITLE.replace('TITLE_NAME', 'Custom Skills Filter');
         eGui.appendChild(eInstructions);

webpack.config.js

@@ -20,6 +20,9 @@ module.exports = {
         ]
     },
     resolve: {
-        alias: {"ag-grid" : __dirname + "/node_modules/ag-grid/dist/ag-grid.js"}
+        alias: {
+            "ag-grid" : __dirname + "/node_modules/ag-grid/dist/ag-grid.js",
+            "ag-grid-root" : __dirname + "/node_modules/ag-grid/dist"
+        }
     }
 };