release 5.3.2

src-large/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+import LargeGrid from './largeGrid.jsx';
+// is there a better way of doing this?
+import 'ag-grid-root/dist/styles/ag-grid.css';
+import 'ag-grid-root/dist/styles/theme-fresh.css';
+
+// waiting for dom to load before booting react. we could alternatively
+// put the index.js reference at the end fo the index.html, but i prefer this way.
+document.addEventListener('DOMContentLoaded', ()=> {
+    var container = document.getElementById('myAppContainer');
+    ReactDOM.render(
+        React.createElement(LargeGrid),
+        container
+    );
+});

src-large/largeGrid.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {reactCellRendererFactory} from 'ag-grid-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 React.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'}
+        var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
+        this.columnNames = [];
+        alphabet.forEach( letter1 => {
+            alphabet.forEach( letter2 => {
+                this.columnNames.push(letter1 + letter2);
+            });
+        });
+    }
+
+    createRowData() {
+        var rowData = [];
+
+        for (var i = 0; i<1000; i++) {
+            var item = {};
+            this.columnNames.forEach( colName => {
+                item[colName] = '('+colName.toUpperCase()+','+i+')'
+            });
+            rowData.push(item);
+        }
+
+        return rowData;
+    }
+
+    createColumnDefs() {
+        var columnDefs = [];
+
+        // pass in the parent component to use for React component to the cellRenderer.
+        // this is optional. if missing, then react router will not work.
+        var cellRenderer = reactCellRendererFactory(SimpleCellRenderer, this);
+
+        this.columnNames.forEach( colName => {
+            columnDefs.push({
+                headerName: colName.toUpperCase(),
+                field: colName,
+                cellRenderer: cellRenderer,
+                width: 100
+            });
+        });
+
+        return columnDefs;
+    }
+
+    render() {
+        return (
+            <div style={{height: '100%'}} className="ag-fresh">
+                    <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} />
+            </div>
+        );
+    }
+
+}

src-large/simpleCellRenderer.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default class SimpleCellRenderer extends React.Component {
+    render() {
+        var params = this.props.params;
+
+        // the class below does nothing, it's just for testing, so we can inspect the dom of
+        // the result and looking for it, to validate that this cellRenderer is actually getting used.
+        return (
+            <span className="simple-cell-renderer">{params.value}</span>
+        );
+    }
+}
+
+SimpleCellRenderer.propTypes = {
+    params: React.PropTypes.object
+};