AG-1053 Tidy react examples, make more idiomatic

src-large-data/largeGrid.jsx

@@ -0,0 +1,70 @@
+import React, {Component} from 'react';
+import SimpleCellRenderer from './simpleCellRenderer.jsx';
+
+import {AgGridReact} from 'ag-grid-react';
+
+// put this line in to use ag-Grid enterprise
+// import 'ag-grid-enterprise';
+
+export default class MyApp extends Component {
+
+    constructor() {
+        super();
+
+        this.createColumnNames();
+
+        this.state = {
+            columnDefs: this.createColumnDefs(),
+            rowData: this.createRowData()
+        };
+    }
+
+    createColumnNames() {
+        // creates column names by iterating the alphabet twice, eg {'aa','ab','ac',.....'zz'}
+        const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
+        this.columnNames = [];
+        alphabet.forEach(letter1 => {
+            alphabet.forEach(letter2 => {
+                this.columnNames.push(letter1 + letter2);
+            });
+        });
+    }
+
+    createRowData() {
+        const rowData = [];
+
+        for (let i = 0; i < 1000; i++) {
+            const item = {};
+            this.columnNames.forEach(colName => {
+                item[colName] = '(' + colName.toUpperCase() + ',' + i + ')'
+            });
+            rowData.push(item);
+        }
+
+        return rowData;
+    }
+
+    createColumnDefs() {
+        const columnDefs = [];
+
+        this.columnNames.forEach(colName => {
+            columnDefs.push({
+                headerName: colName.toUpperCase(),
+                field: colName,
+                cellRendererFramework: SimpleCellRenderer,
+                width: 100
+            });
+        });
+
+        return columnDefs;
+    }
+
+    render() {
+        return (
+            <div style={{height: '100%'}} className="ag-fresh">
+                <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData}/>
+            </div>
+        );
+    }
+
+}