Improve react examples

src/dynamicComponentExample/DynamicComponentsExample.jsx

@@ -18,13 +18,13 @@ export default class DynamicComponentsExample extends Component {
                 }
             },
 
-            rowData: this.createRowData(),
+            rowData: DynamicComponentsExample.createRowData(),
 
-            columnDefs: this.createColumnDefs()
+            columnDefs: DynamicComponentsExample.createColumnDefs()
         };
 
         this.onGridReady = this.onGridReady.bind(this);
-        this.refreshRowData = this.refreshRowData.bind(this);
+        this.refreshEvenRowsCurrencyData = this.refreshEvenRowsCurrencyData.bind(this);
     }
 
     onGridReady(params) {
@@ -34,22 +34,30 @@ export default class DynamicComponentsExample extends Component {
         this.gridApi.sizeColumnsToFit();
     }
 
-    onCellValueChanged($event) {
-        this.gridApi.refreshCells([$event.node],["cube"]);
-    }
-
     methodFromParent(cell) {
         alert(`Parent Component Method from ${cell}!`);
     }
 
-    createColumnDefs() {
+    refreshEvenRowsCurrencyData() {
+        this.gridApi.forEachNode(rowNode => {
+            if (rowNode.data.value % 2 === 0) {
+                rowNode.setDataValue('currency', rowNode.data.value + Number(Math.random().toFixed(2)))
+            }
+        });
+
+        this.gridApi.refreshCells({
+            columns: ['currency']
+        })
+    }
+
+    static createColumnDefs() {
         return [
             {headerName: "Row", field: "row", width: 100},
             {
                 headerName: "Square",
                 field: "value",
                 cellRendererFramework: SquareRenderer,
-                editable:true,
+                editable: true,
                 colId: "square",
                 width: 100
             },
@@ -71,7 +79,7 @@ export default class DynamicComponentsExample extends Component {
                 headerName: "Currency",
                 field: "currency",
                 cellRendererFramework: CurrencyRenderer,
-                colId: "params",
+                colId: "currency",
                 width: 135
             },
             {
@@ -84,12 +92,7 @@ export default class DynamicComponentsExample extends Component {
         ];
     }
 
-    refreshRowData() {
-        let rowData = this.createRowData();
-        this.gridApi.setRowData(rowData);
-    }
-
-    createRowData() {
+    static createRowData() {
         let rowData = [];
 
         for (let i = 0; i < 15; i++) {
@@ -102,12 +105,13 @@ export default class DynamicComponentsExample extends Component {
 
         return rowData;
     }
+
     render() {
         return (
-            <div style={{height: 400, width: 945}}
+            <div style={{height: 400, width: 900}}
                  className="ag-fresh">
                 <h1>Dynamic React Component Example</h1>
-                <button onClick={this.refreshRowData}>Refresh Data</button>
+                <button onClick={this.refreshEvenRowsCurrencyData} style={{marginBottom: 10}} className="btn btn-primary">Refresh Even Row Currency Data</button>
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
@@ -117,6 +121,32 @@ export default class DynamicComponentsExample extends Component {
                     // events
                     onGridReady={this.onGridReady}>
                 </AgGridReact>
+                <div className="row">
+                    <div className="col-sm-12"><h1>Dynamic React Component Example</h1></div>
+                </div>
+                <div className="row">
+                    <div className="col-sm-12">
+                        <h5>This example demonstrates Dynamic React Components with ag-Grid, Parent/Child Communication (cell component to parent grid component), as well as
+                            dynamic data updates of the <code>Currency</code> column.</h5>
+                        <p><span style={{fontWeight: "bold"}}>Square, Cube, Row Params, Currency and Child/Parent</span>: React Components within the Grid</p>
+                        <p><span style={{fontWeight: "bold"}}>Currency (Pipe)</span>: An React Component mimicking a Currency Pipe, dynamically updated with the button above.</p>
+                        <p><span style={{fontWeight: "bold"}}>Child/Parent</span>: Demonstrates the Child Cell Component communicating with the Parent Grid Component.</p>
+                        <p><span style={{fontWeight: "bold"}}>Refresh Even Row Currency Data</span>: Dynamically Updates Event Rows Currency Value. Only the Currency column will be re-rendered.</p>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-sm-12">
+                        <div className="card">
+                            <div className="card-body">
+                                <h4 className="card-title">React Functionality</h4>
+                                <p className="card-text">Utilise React Components within ag-Grid</p>
+                                <a target="_blank" href="https://www.ag-grid.com/best-react-data-grid/?framework=react" className="btn btn-primary">React with ag-Grid</a>
+                                <a target="_blank" href="https://www.ag-grid.com/javascript-grid-cell-rendering-components/?framework=react" className="btn btn-primary">React Renderers</a>
+                                <a target="_blank" href="https://www.ag-grid.com/javascript-grid-data-update/" className="btn btn-primary">Updating Data</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         );
     }