diff --git a/README.md b/README.md
index 2b568bd..5c53ea6 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,13 @@
ag-Grid React Example
==============
-Example of running ag-Grid inside React application.
+Examples of running ag-Grid inside React application.
See the [www.ag-grid.com](http://www.ag-grid.com).
+There are two examples:
+standard - shows a typical grid demonstrating many ag-Grid features
+large - shows a very large grid (767 columns and 1,000 rows) using React cell renderers
Building
==============
@@ -13,6 +16,5 @@ Building
To build:
- `npm install`
- `npm install webpack -g`
-- `npm start`
+- `npm run standard` or `npm run large`
- navigate to localhost:8080
-
diff --git a/index.html b/index.html
index aefe46b..0ee551e 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,8 @@
+
+
diff --git a/package.json b/package.json
index e45d7b9..2452570 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
{
"name": "ag-grid-react-example",
- "version": "5.3.0",
+ "version": "5.3.2",
"description": "Example Reach applicaiton using ag-Grid.",
"main": "dist/ag-grid-react-example.js",
"scripts": {
- "start": "webpack-dev-server --progress --colors --hot --inline"
+ "standard": "webpack-dev-server --config webpack.config.standard.js --progress --colors --hot --inline",
+ "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline"
},
"repository": {
"type": "git",
diff --git a/src-large/index.js b/src-large/index.js
new file mode 100644
index 0000000..931f4f8
--- /dev/null
+++ b/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
+ );
+});
diff --git a/src-large/largeGrid.jsx b/src-large/largeGrid.jsx
new file mode 100644
index 0000000..443df11
--- /dev/null
+++ b/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 (
+
+ );
+ }
+
+}
diff --git a/src-large/simpleCellRenderer.jsx b/src-large/simpleCellRenderer.jsx
new file mode 100644
index 0000000..54e4a41
--- /dev/null
+++ b/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 (
+ {params.value}
+ );
+ }
+}
+
+SimpleCellRenderer.propTypes = {
+ params: React.PropTypes.object
+};
\ No newline at end of file
diff --git a/src/ColDefFactory.jsx b/src-standard/ColDefFactory.jsx
similarity index 92%
rename from src/ColDefFactory.jsx
rename to src-standard/ColDefFactory.jsx
index d8f714a..3e564f0 100644
--- a/src/ColDefFactory.jsx
+++ b/src-standard/ColDefFactory.jsx
@@ -8,7 +8,7 @@ import ProficiencyFilter from './ProficiencyFilter.jsx';
export default class ColDefFactory {
- createColDefs() {
+ createColDefs(parentReactComponent) {
var columnDefs = [
{headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
@@ -29,15 +29,15 @@ export default class ColDefFactory {
children: [
{headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
// using ag-Grid's React cellRenderer factory
- cellRenderer: reactCellRendererFactory(SkillsCellRenderer),
+ cellRenderer: reactCellRendererFactory(SkillsCellRenderer, parentReactComponent),
// using ag-Grid's React filter factory
- filter: reactFilterFactory(SkillsFilter)
+ filter: reactFilterFactory(SkillsFilter, parentReactComponent)
},
{headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true,
// using ag-Grid's React cellRenderer factory
- cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer),
+ cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer, parentReactComponent),
// using ag-Grid's React filter factory
- filter: reactFilterFactory(ProficiencyFilter)}
+ filter: reactFilterFactory(ProficiencyFilter, parentReactComponent)}
]
},
{
diff --git a/src/ProficiencyCellRenderer.jsx b/src-standard/ProficiencyCellRenderer.jsx
similarity index 100%
rename from src/ProficiencyCellRenderer.jsx
rename to src-standard/ProficiencyCellRenderer.jsx
diff --git a/src/ProficiencyFilter.jsx b/src-standard/ProficiencyFilter.jsx
similarity index 100%
rename from src/ProficiencyFilter.jsx
rename to src-standard/ProficiencyFilter.jsx
diff --git a/src/RefData.js b/src-standard/RefData.js
similarity index 100%
rename from src/RefData.js
rename to src-standard/RefData.js
diff --git a/src/RowDataFactory.js b/src-standard/RowDataFactory.js
similarity index 100%
rename from src/RowDataFactory.js
rename to src-standard/RowDataFactory.js
diff --git a/src/SkillsCellRenderer.jsx b/src-standard/SkillsCellRenderer.jsx
similarity index 100%
rename from src/SkillsCellRenderer.jsx
rename to src-standard/SkillsCellRenderer.jsx
diff --git a/src/SkillsFilter.jsx b/src-standard/SkillsFilter.jsx
similarity index 100%
rename from src/SkillsFilter.jsx
rename to src-standard/SkillsFilter.jsx
diff --git a/src/index.js b/src-standard/index.js
similarity index 100%
rename from src/index.js
rename to src-standard/index.js
diff --git a/src/myApp.css b/src-standard/myApp.css
similarity index 100%
rename from src/myApp.css
rename to src-standard/myApp.css
diff --git a/src/myApp.jsx b/src-standard/myApp.jsx
similarity index 98%
rename from src/myApp.jsx
rename to src-standard/myApp.jsx
index 9722df2..b276de8 100644
--- a/src/myApp.jsx
+++ b/src-standard/myApp.jsx
@@ -18,8 +18,8 @@ export default class MyApp extends React.Component {
quickFilterText: null,
showGrid: true,
showToolPanel: false,
- columnDefs: new ColDefFactory().createColDefs(),
- rowData: new RowDataFactory().createRowData(),
+ columnDefs: new ColDefFactory().createColDefs(this),
+ rowData: new RowDataFactory().createRowData(this),
icons: {
columnRemoveFromGroup: '',
filter: '',
diff --git a/webpack.config.js b/webpack.config.large.js
similarity index 94%
rename from webpack.config.js
rename to webpack.config.large.js
index e613e7f..a4e1475 100644
--- a/webpack.config.js
+++ b/webpack.config.large.js
@@ -1,5 +1,5 @@
module.exports = {
- entry: "./src/index.js",
+ entry: "./src-large/index.js",
output: {
path: __dirname,
filename: "dist/bundle.js"
diff --git a/webpack.config.standard.js b/webpack.config.standard.js
new file mode 100644
index 0000000..6f691d7
--- /dev/null
+++ b/webpack.config.standard.js
@@ -0,0 +1,27 @@
+module.exports = {
+ entry: "./src-standard/index.js",
+ output: {
+ path: __dirname,
+ filename: "dist/bundle.js"
+ },
+ module: {
+ loaders: [
+ {
+ test: /\.css$/,
+ loader: "style!css"
+ },
+ {
+ test: /\.js$|\.jsx$/,
+ loader: 'babel-loader',
+ query: {
+ presets: ['react', 'es2015']
+ }
+ }
+ ]
+ },
+ resolve: {
+ alias: {
+ "ag-grid-root" : __dirname + "/node_modules/ag-grid"
+ }
+ }
+};
\ No newline at end of file