diff --git a/package.json b/package.json index b01e16c..06df2ec 100644 --- a/package.json +++ b/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" diff --git a/src/index.js b/src/index.js index 1a96851..0c968d4 100644 --- a/src/index.js +++ b/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'); diff --git a/src/myApp.css b/src/myApp.css new file mode 100644 index 0000000..55d756d --- /dev/null +++ b/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%; +} diff --git a/src/myApp.jsx b/src/myApp.jsx index cd2fe63..63ba992 100644 --- a/src/myApp.jsx +++ b/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 {
- + ; } } @@ -169,7 +170,7 @@ class MyGrid extends React.Component { } render() { - return
; + return
; } 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 = - '