Merge pull request #6 from ModusCreateOrg/grid-features-2

light syncing with article example updates

Author: mschwartz

10-grid-features/a-controlling-cell-data/src/App.js

@@ -1,10 +1,38 @@
 import React, { Component } from 'react';
-import Grid from './Grid';
+import { AgGridReact } from 'ag-grid-react';
+import getData from './data';
+import 'ag-grid/dist/styles/ag-grid.css';
+import 'ag-grid/dist/styles/ag-theme-material.css';
+
+const { data } = getData();
 
 class App extends Component {
-  render() {
+  columns = [
+    {
+      headerName: 'Name',
+      field: 'name'
+    },
+    {
+      headerName: 'Company',
+      field: 'company'
+    },
+    {
+      headerName: 'Email',
+      field: 'email',
+      cellRenderer: params => {
+        return `<a href="mailto:${params.value}">${params.value}</a>`;
+      }
+    }
+  ]
+  render () {
     return (
-      <Grid />
+      <div className="ag-theme-material">
+        <AgGridReact
+          containerStyle={{height: '400px'}}
+          columnDefs={this.columns}
+          rowData={data}
+        />
+      </div>
     );
   }
 }

10-grid-features/a-controlling-cell-data/src/Grid.js

@@ -1,11 +1,36 @@
 import React, { Component } from 'react';
-import Grid from './Grid';
-import './App.css';
+import { AgGridReact } from 'ag-grid-react';
+import getData from './data';
+import 'ag-grid/dist/styles/ag-grid.css';
+import 'ag-grid/dist/styles/ag-theme-material.css';
+
+const { data } = getData();
 
 class App extends Component {
-  render() {
+  columns = [
+    {
+      headerName: 'Name',
+      field: 'name',
+      pinned: 'left'
+    },
+    {
+      headerName: 'Company',
+      field: 'company'
+    },
+    {
+      headerName: 'Email',
+      field: 'email'
+    }
+  ]
+  render () {
     return (
-      <Grid />
+      <div className="ag-theme-material">
+        <AgGridReact
+          containerStyle={{height: '400px', width: '400px'}}
+          columnDefs={this.columns}
+          rowData={data}
+        />
+      </div>
     );
   }
 }

10-grid-features/b-column-locking/src/App.js

@@ -1,11 +1,36 @@
 import React, { Component } from 'react';
-import Grid from './Grid';
-import './App.css';
+import { AgGridReact } from 'ag-grid-react';
+import getData from './data';
+import 'ag-grid/dist/styles/ag-grid.css';
+import 'ag-grid/dist/styles/ag-theme-material.css';
+
+const { data } = getData();
 
 class App extends Component {
-  render() {
+  columns = [
+    {
+      headerName: 'Name',
+      field: 'name',
+      editable: true
+    },
+    {
+      headerName: 'Company',
+      field: 'company'
+    },
+    {
+      headerName: 'Email',
+      field: 'email'
+    }
+  ]
+  render () {
     return (
-      <Grid/>
+      <div className="ag-theme-material">
+        <AgGridReact
+          containerStyle={{height: '400px'}}
+          columnDefs={this.columns}
+          rowData={data}
+        />
+      </div>
     );
   }
 }

10-grid-features/b-column-locking/src/Grid.js

@@ -1,11 +1,40 @@
 import React, { Component } from 'react';
-import Grid from './Grid';
-import './App.css';
+import { AgGridReact } from 'ag-grid-react';
+import getData from './data';
+import CustomEditor from './CustomEditor';
+import 'ag-grid/dist/styles/ag-grid.css';
+import 'ag-grid/dist/styles/ag-theme-material.css';
+
+const { data } = getData();
 
 class App extends Component {
-  render() {
+  columns = [
+    {
+      headerName: 'Name',
+      field: 'name',
+      editable: true
+    },
+    {
+      headerName: 'Company',
+      field: 'company'
+    },
+    {
+      headerName: 'Email',
+      field: 'email',
+      editable: true,
+      cellEditorFramework: CustomEditor
+    }
+  ]
+  
+  render () {
     return (
-      <Grid/>
+      <div className="ag-theme-material">
+        <AgGridReact
+          containerStyle={{height: '400px'}}
+          columnDefs={this.columns}
+          rowData={data}
+        />
+      </div>
     );
   }
 }

10-grid-features/c-cell-editing/src/App.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
+
 class CustomEditor extends Component {
   state = {}
+
   componentDidMount () {
     this.refs.input.addEventListener('blur', this.onBlur);
     this.focus();
@@ -11,13 +13,15 @@ class CustomEditor extends Component {
   componentWillUnmount () {
     this.refs.input.removeEventListener('blur', this.onBlur);
   }
+
   focus () {
     // focus the input slightly after dbl-click
     setTimeout(() => {
       const { refs: { input } } = this;
       input.focus();
     });
   }
+
   get value () {
     let {
       props,
@@ -39,6 +43,7 @@ class CustomEditor extends Component {
       value: event.target.value
     });
   }
+  
   render () {
     return <input
       ref="input"
@@ -49,5 +54,6 @@ class CustomEditor extends Component {
     />;
   }
 }
+
 export default CustomEditor;