changes to match v4.0.0 of ag-Grid

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -34,8 +34,8 @@
   "dependencies": {
     "react": "0.14.6",
     "react-dom": "0.14.6",
-    "ag-grid": "4.0.x",
-    "ag-grid-enterprise": "4.0.x",
-    "ag-grid-react": "4.0.x"
+    "ag-grid": "4.1.x",
+    "ag-grid-enterprise": "4.1.x",
+    "ag-grid-react": "4.1.x"
   }
 }

src/myApp.css

@@ -16,7 +16,6 @@ label {
 
 .div-percent-value {
     position: absolute;
-    z-index: 1;
     padding-left: 4px;
     font-weight: bold;
     font-size: 13px;

src/myApp.jsx

@@ -6,6 +6,9 @@ import RowDataFactory from './RowDataFactory';
 import ColDefFactory from './ColDefFactory.jsx';
 import './MyApp.css';
 
+// take this line out if you do not want to use ag-Grid-Enterprise
+import 'ag-grid-enterprise';
+
 export default class MyApp extends React.Component {
 
     constructor() {
@@ -55,7 +58,7 @@ export default class MyApp extends React.Component {
         this.setState({showToolPanel: event.target.checked});
     }
 
-    onReady(params) {
+    onGridReady(params) {
         this.api = params.api;
         this.columnApi = params.columnApi;
     }
@@ -91,34 +94,6 @@ export default class MyApp extends React.Component {
         });
     }
 
-    render() {
-        return (
-            // ag-Grid comes with a React Component waiting to be used
-            <AgGridReact
-
-                // listen for events with React callbacks
-                onRowSelected={this.onRowSelected.bind(this)}
-                onCellClicked={this.onCellClicked.bind(this)}
-
-                // binding to properties within React State or Props
-                showToolPanel={this.state.showToolPanel}
-                quickFilterText={this.state.quickFilterText}
-                icons={this.state.icons}
-
-                // column definitions and row data are immutable, the grid
-                // will update when these lists change
-                columnDefs={this.state.columnDefs}
-                rowData={this.state.rowData}
-
-                // or provide props the old way with no binding
-                rowSelection="multiple"
-                enableSorting="true"
-                enableFilter="true"
-                rowHeight="22"
-            />
-        );
-    }
-
     render() {
         var gridTemplate;
         var bottomHeaderTemplate;
@@ -172,7 +147,7 @@ export default class MyApp extends React.Component {
                         gridOptions={this.gridOptions}
 
                         // listening for events
-                        onReady={this.onReady.bind(this)}
+                        onGridReady={this.onGridReady.bind(this)}
                         onRowSelected={this.onRowSelected.bind(this)}
                         onCellClicked={this.onCellClicked.bind(this)}