release 5.3.2

release 5.3.0
2016-09-02 16:43:50 +01:00 · 2016-09-02 16:43:20 +01:00 · 2016-08-30 17:14:43 +01:00 · 2016-08-18 09:38:28 +01:00 · 2016-08-12 17:09:29 +01:00 · 2016-07-28 16:10:08 +01:00
18 changed files with 172 additions and 25 deletions
--- 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
-
--- a/index.html
+++ b/index.html
@@ -1,5 +1,8 @@
 <html>

+    <!-- This index file is common for both the standard and large examples. As to which project you are running
+        depends on whether you use 'npm run standard' or 'npm run large' -->
+
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
 {
  "name": "ag-grid-react-example",
-  "version": "5.0.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",
@@ -34,8 +35,8 @@
  "dependencies": {
    "react": "0.14.6",
    "react-dom": "0.14.6",
-    "ag-grid": "~5.0.0",
-    "ag-grid-enterprise": "~5.0.0",
-    "ag-grid-react": "~5.0.0"
+    "ag-grid": "~5.3.0",
+    "ag-grid-enterprise": "~5.3.0",
+    "ag-grid-react": "~5.3.2"
  }
 }
--- a/src-large/index.js
+++ 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
+    );
+});
--- a/src-large/largeGrid.jsx
+++ 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 (
+            <div style={{height: '100%'}} className="ag-fresh">
+                    <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} />
+            </div>
+        );
+    }
+
+}
--- a/src-large/simpleCellRenderer.jsx
+++ 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 (
+            <span className="simple-cell-renderer">{params.value}</span>
+        );
+    }
+}
+
+SimpleCellRenderer.propTypes = {
+    params: React.PropTypes.object
+};
--- a/src-standard/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,
@@ -16,9 +16,9 @@ export default class ColDefFactory {
            {
                headerName: 'Employee',
                children: [
-                    {headerName: "Name", field: "name",
+                    {headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
                        width: 150, pinned: true},
-                    {headerName: "Country", field: "country", width: 150,
+                    {headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
                        // not bothering with React for country, as it's a simple HTML string
                        cellRenderer: countryCellRenderer, pinned: true,
                        filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}},
@@ -27,17 +27,17 @@ export default class ColDefFactory {
            {
                headerName: 'IT Skills',
                children: [
-                    {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills',
+                    {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,
+                    {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)}
                ]
            },
            {
@@ -56,8 +56,12 @@ export default class ColDefFactory {
 // this is a simple cell renderer, putting together static html, no
 // need to use React for it.
 function countryCellRenderer(params) {
-    var flag = "<img border='0' width='15' height='10' " +
-        "style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/"
-        + RefData.COUNTRY_CODES[params.value] + ".png'>";
-    return flag + " " + params.value;
+    if (params.value) {
+        var flag = "<img border='0' width='15' height='10' " +
+            "style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/"
+            + RefData.COUNTRY_CODES[params.value] + ".png'>";
+        return flag + " " + params.value;
+    } else {
+        return null;
+    }
 }
--- a/src-standard/ProficiencyCellRenderer.jsx
+++ b/src-standard/ProficiencyCellRenderer.jsx
--- a/src-standard/ProficiencyFilter.jsx
+++ b/src-standard/ProficiencyFilter.jsx
--- a/src-standard/RefData.js
+++ b/src-standard/RefData.js
--- a/src-standard/RowDataFactory.js
+++ b/src-standard/RowDataFactory.js
--- a/src-standard/SkillsCellRenderer.jsx
+++ b/src-standard/SkillsCellRenderer.jsx
@@ -7,7 +7,7 @@ export default class SkillsCellRenderer extends React.Component {
        var skills = [];
        var rowData = this.props.params.data;
        RefData.IT_SKILLS.forEach( (skill) => {
-            if (rowData.skills[skill]) {
+            if (rowData && rowData.skills && rowData.skills[skill]) {
                skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill} />);
            }
        });
--- a/src-standard/SkillsFilter.jsx
+++ b/src-standard/SkillsFilter.jsx
--- a/src-standard/index.js
+++ b/src-standard/index.js
--- a/src-standard/myApp.css
+++ b/src-standard/myApp.css
--- a/src-standard/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: '<i class="fa fa-remove"/>',
                filter: '<i class="fa fa-filter"/>',
--- a/webpack.config.large.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"
--- a/webpack.config.standard.js
+++ 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"
+        }
+    }
+};
Author	SHA1	Message	Date
ceolter	eee08a9284	release 5.3.2	2016-09-02 16:43:50 +01:00
ceolter	68ba430896	release 5.3.2	2016-09-02 16:43:20 +01:00
ceolter	5a8da199c2	release 5.3.0	2016-08-30 17:14:43 +01:00
ceolter	bc2a8d959c	release 5.2.x	2016-08-18 09:38:28 +01:00
ceolter	3fb8e85645	release 5.1.x	2016-08-12 17:09:29 +01:00
ceolter	46aeeb228a	fixed rendering issues when grouping was set	2016-07-28 16:10:08 +01:00