Creating the scaffolding for the ag-grid-react DateComponent

src-standard/MyReactDateComponent.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import RefData from './RefData';
+
+// Date Component to be used in the date filter
+export default class MyReactDateComponent extends React.Component {
+
+    constructor(props) {
+        super(props);
+        // the entire ag-Grid properties are passed as one single object inside the params
+        this.state = {
+            agProps: props
+        };
+    }
+
+
+    render() {
+        return (
+            <span>hello world!</span>
+        );
+    }
+
+
+}
+
+// the grid will always pass in one props called 'params',
+// which is the grid passing you the params for the cellRenderer.
+// this piece is optional. the grid will always pass the 'params'
+// props, so little need for adding this validation meta-data.
+MyReactDateComponent.propTypes = {
+    params: React.PropTypes.object
+};

src-standard/myApp.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import {AgGridReact} from "ag-grid-react";
 import RowDataFactory from "./RowDataFactory";
 import ColDefFactory from "./ColDefFactory.jsx";
+import MyReactDateComponent from "./MyReactDateComponent.jsx";
 import "./myApp.css";
 import "ag-grid-enterprise";
 
@@ -37,6 +38,8 @@ export default class MyApp extends React.Component {
         // you do, the providing the gridOptions as a standalone object is just
         // what you want!
         this.gridOptions = {
+            //We register the react date component that ag-grid will use to render
+            dateComponentFramework:MyReactDateComponent,
             // this is how you listen for events using gridOptions
             onModelUpdated: function () {
                 console.log('event onModelUpdated received');