Merge branch 'latest' into 13.0.0

# Conflicts:
#	package.json

README.md

@@ -4,7 +4,14 @@ ag-Grid React Example
 
 Examples of running ag-Grid inside React application.
 
-See the [www.ag-grid.com](http://www.ag-grid.com).
+See [www.ag-grid.com](http://www.ag-grid.com) for an overview and full documentation.
+
+Frameworks Supported
+====================
+Framework specific Getting Started guides:
+[Angular 1](https://www.ag-grid.com/best-angularjs-data-grid/) | [Angular 2](https://www.ag-grid.com/best-angular-2-data-grid/) | [Aurelia](https://www.ag-grid.com/best-aurelia-data-grid/)
+[Javascript](https://www.ag-grid.com/best-javascript-data-grid/) | [React](https://www.ag-grid.com/best-react-data-grid/) | [TypeScript](https://www.ag-grid.com/ag-grid-typescript-webpack-2/)
+[VueJS](https://www.ag-grid.com/best-vuejs-data-grid/) | [Web Components](https://www.ag-grid.com/best-web-component-data-grid/)
 
 There are two examples:
 
@@ -18,5 +25,5 @@ Building
 To build:
 - `npm install`
 - `npm install webpack -g`
-- `npm run standard` or `npm run large`
-- navigate to localhost:8080
+- `npm run example`, `npm run large` or `npm run trader`
+- navigate to localhost:8080

gulpfile.js

@@ -0,0 +1,26 @@
+const gulp = require('gulp');
+const gulpTypescript = require('gulp-typescript');
+const merge = require('merge2');
+
+gulp.task('watch', watchTask);
+gulp.task('rebuild-ag-grid-react', rebuildAgGridReact);
+
+const tsConfig = '../ag-grid-react/tsconfig.json';
+const tsProject = gulpTypescript.createProject(tsConfig);
+
+function rebuildAgGridReact() {
+    const tsResult = gulp
+        .src('../ag-grid-react/src/**/*.ts')
+        .pipe(tsProject());
+
+    return merge([
+        tsResult.dts
+            .pipe(gulp.dest('node_modules/ag-grid-react/lib')),
+        tsResult.js
+            .pipe(gulp.dest('node_modules/ag-grid-react/lib'))
+    ]);
+}
+
+function watchTask() {
+    gulp.watch(['../ag-grid-react/src/**/*'], rebuildAgGridReact);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "11.0.0",
+  "version": "13.0.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -12,17 +12,18 @@
     "copy-examples": "ncp images dist/examples/images && ncp src/index.html dist/examples/index.html && ncp dist/react-examples.js dist/examples/dist/react-examples.js && ncp src dist/examples/src",
     "copy-trader": "ncp src-trader-dashboard/index.html dist/trader/index.html && ncp dist/react-trader.js dist/trader/dist/react-trader.js",
     "copy": "npm run copy-examples && npm run copy-trader",
+    "build-large": "webpack --config webpack.config.large.js --progress --profile --bail",
     "build-examples": "webpack --config webpack.config.examples.js --progress --profile --bail",
     "build-dashboard": "webpack --config webpack.config.trader.js --progress --profile --bail",
     "build-all": "npm run build-examples && npm run build-dashboard",
     "build": "npm run clean && npm run mkdirs && npm run build-all && npm run copy",
-    "copy-to-docs": "ncp dist/examples ../ag-grid-docs/src/react-examples/examples && ncp dist/trader ../ag-grid-docs/src/react-examples/trader",
+    "copy-to-docs": "ncp dist/examples ../ag-grid-docs/src/framework-examples/react-examples/examples && ncp dist/trader ../ag-grid-docs/src/framework-examples/react-examples/trader",
     "build-to-docs": "npm run build && npm run copy-to-docs",
     "start": "npm run examples"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ceolter/ag-grid-react-example.git"
+    "url": "https://github.com/ag-grid/ag-grid-react-example.git"
   },
   "keywords": [
     "react",
@@ -33,7 +34,7 @@
   "author": "Niall Crosby <niall.crosby@gmail.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ceolter/ag-grid-react-example/issues"
+    "url": "https://github.com/ag-grid/ag-grid-react-example/issues"
   },
   "homepage": "http://www.ag-grid.com/",
   "devDependencies": {
@@ -43,29 +44,32 @@
     "babel-preset-react": "6.24.x",
     "babel-preset-stage-0": "6.24.x",
     "babel-preset-stage-1": "6.24.x",
-    "prop-types": "15.5.x",
     "css-loader": "0.23.x",
     "mkdirp": "0.5.1",
     "ncp": "2.0.0",
+    "prop-types": "15.5.x",
     "rimraf": "2.5.x",
     "style-loader": "0.13.x",
     "webpack": "1.12.x",
-    "webpack-dev-server": "1.14.x"
+    "webpack-dev-server": "1.14.x",
+    "gulp": "3.9.x",
+    "gulp-typescript": "3.1.x",
+    "merge2": "1.0.x",
+    "typescript": "2.3.x"
   },
   "dependencies": {
     "bootstrap": "3.3.7",
     "d3": "4.9.1",
     "file-loader": "0.11.1",
     "lodash": "4.17.4",
-    "react": "15.5.x",
-    "react-dom": "15.5.x",
+    "react": "15.6.x",
+    "react-dom": "15.6.x",
+    "react-dom-factories": "1.0.0",
     "react-redux": "5.0.x",
     "redux": "3.6.x",
     "url-search-params-polyfill": "1.2.0",
-    "ag-grid": "11.0.x",
-    "ag-grid-enterprise": "11.0.x",
-    "ag-grid-react": "11.0.x"
+    "ag-grid": "13.0.x",
+    "ag-grid-enterprise": "13.0.x",
+    "ag-grid-react": "13.0.x"
   }
 }
-
-

src-trader-dashboard/components/PriceChangesGrid.jsx

@@ -23,21 +23,21 @@ export default class extends Component {
                 {
                     field: 'price',
                     headerName: 'Price',
-                    cellFormatter: this.numberFormatter,
+                    valueFormatter: this.numberFormatter,
                     cellRenderer: 'animateShowChange',
                     cellStyle: {'text-align': 'right'}
                 },
                 {
                     field: 'bid',
                     headerName: 'Bid',
-                    cellFormatter: this.numberFormatter,
+                    valueFormatter: this.numberFormatter,
                     cellRenderer: 'animateShowChange',
                     cellStyle: {'text-align': 'right'}
                 },
                 {
                     field: 'ask',
                     headerName: 'Ask',
-                    cellFormatter: this.numberFormatter,
+                    valueFormatter: this.numberFormatter,
                     cellRenderer: 'animateShowChange',
                     cellStyle: {'text-align': 'right'}
                 }

src/App.jsx

@@ -6,12 +6,13 @@ import DynamicComponentsExample from "./dynamicComponentExample/DynamicComponent
 import RichGridExample from "./richGridExample/RichGridExample";
 import RichComponentsExample from "./richComponentExample/RichComponentsExample";
 import EditorComponentsExample from "./editorComponentExample/EditorComponentsExample";
-import FloatingRowComponentExample from "./floatingRowExample/FloatingRowComponentExample";
+import PinnedRowComponentExample from "./pinnedRowExample/PinnedRowComponentExample";
 import FullWidthComponentExample from "./fullWidthExample/FullWidthComponentExample";
 import GroupedRowInnerRendererComponentExample from "./groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample";
 import FilterComponentExample from "./filterComponentExample/FilterComponentExample";
 import MasterDetailExample from "./masterDetailExample/MasterDetailExample";
 import SimpleReduxExample from "./simpleReduxExample/SimpleReduxExample";
+import FloatingFilterGridExample from "./floatingFilter/FloatingFilterGridExample";
 
 class App extends Component {
     constructor(props) {
@@ -44,10 +45,11 @@ class App extends Component {
                     <li role="presentation" className={this.state.example === 'dynamic' ? 'active' : null} onClick={() => this.setExample("dynamic")}><a href="#">Dynamic React Component Example</a></li>
                     <li role="presentation" className={this.state.example === 'rich-dynamic' ? 'active' : null} onClick={() => this.setExample("rich-dynamic")}><a href="#">Dynamic React Components - Richer Example</a></li>
                     <li role="presentation" className={this.state.example === 'editor' ? 'active' : null} onClick={() => this.setExample("editor")}><a href="#">Cell Editor Component Example</a></li>
-                    <li role="presentation" className={this.state.example === 'floating-row' ? 'active' : null} onClick={() => this.setExample("floating-row")}><a href="#">Floating Row Renderer Example</a></li>
+                    <li role="presentation" className={this.state.example === 'pinned-row' ? 'active' : null} onClick={() => this.setExample("pinned-row")}><a href="#">Pinned Row Renderer Example</a></li>
                     <li role="presentation" className={this.state.example === 'full-width' ? 'active' : null} onClick={() => this.setExample("full-width")}><a href="#">Full Width Renderer Example</a></li>
                     <li role="presentation" className={this.state.example === 'group-row' ? 'active' : null} onClick={() => this.setExample("group-row")}><a href="#">Grouped Row Inner Renderer Example</a></li>
                     <li role="presentation" className={this.state.example === 'filter' ? 'active' : null} onClick={() => this.setExample("filter")}><a href="#">Filters Component Example</a></li>
+                    <li role="presentation" className={this.state.example === 'floating-filter' ? 'active' : null} onClick={() => this.setExample("floating-filter")}><a href="#">Floating Filters</a></li>
                     <li role="presentation" className={this.state.example === 'master-detail' ? 'active' : null} onClick={() => this.setExample("master-detail")}><a href="#">Master Detail Example</a></li>
                     <li role="presentation" className={this.state.example === 'simple-redux' ? 'active' : null} onClick={() => this.setExample("simple-redux")}><a href="#">Simple Redux Example</a></li>
                 </ul>)
@@ -64,8 +66,8 @@ class App extends Component {
             case 'editor':
                 example = <EditorComponentsExample/>;
                 break;
-            case 'floating-row':
-                example = <FloatingRowComponentExample/>;
+            case 'pinned-row':
+                example = <PinnedRowComponentExample/>;
                 break;
             case 'full-width':
                 example = <FullWidthComponentExample/>;
@@ -82,6 +84,9 @@ class App extends Component {
             case 'simple-redux':
                 example = <SimpleReduxExample/>;
                 break;
+            case 'floating-filter':
+                example = <FloatingFilterGridExample/>;
+                break;
             default:
                 example = <RichGridExample/>;
         }

src/editorComponentExample/MoodEditor.jsx

@@ -18,9 +18,21 @@ export default class MoodEditor extends Component {
     }
 
     componentDidMount() {
+        this.refs.container.addEventListener('keydown', this.checkAndToggleMoodIfLeftRight);
         this.focus();
     }
 
+    componentWillUnmount() {
+        this.refs.container.removeEventListener('keydown', this.checkAndToggleMoodIfLeftRight);
+    }
+
+    checkAndToggleMoodIfLeftRight = (event) => {
+        if ([37, 39].indexOf(event.keyCode) > -1) { // left and right
+            this.toggleMood();
+            event.stopPropagation();
+        }
+    }
+
     componentDidUpdate() {
         this.focus();
     }
@@ -75,12 +87,11 @@ export default class MoodEditor extends Component {
             background: "#e6e6e6",
             padding: 15,
             textAlign: "center",
-            display: "inline-block",
-            // outline: "none"
+            display: "inline-block"
         };
 
         let unselected = {
-            paddingLleft: 10,
+            paddingLeft: 10,
             paddingRight: 10,
             border: "1px solid transparent",
             padding: 4
@@ -93,12 +104,14 @@ export default class MoodEditor extends Component {
             padding: 4
         };
 
-        let happyStyle = this.state.value === 'Happy' ? selected : unselected;
-        let sadStyle = this.state.value !== 'Happy' ? selected : unselected;
+        let happyStyle = this.state.happy ? selected : unselected;
+        let sadStyle = !this.state.happy  ? selected : unselected;
 
         return (
             <div ref="container"
-                 style={mood}>
+                 style={mood}
+                 tabIndex={1} // important - without this the keypresses wont be caught
+            >
                 <img src="images/smiley.png" onClick={this.onHappyClick} style={happyStyle}/>
                 <img src="images/smiley-sad.png" onClick={this.onSadClick} style={sadStyle}/>
             </div>

src/editorComponentExample/NumericEditor.jsx

@@ -16,6 +16,7 @@ export default class MoodEditor extends Component {
     }
 
     componentDidMount() {
+        this.refs.input.addEventListener('keydown', this.onKeyDown);
         this.focus();
     }
 
@@ -23,6 +24,10 @@ export default class MoodEditor extends Component {
         this.focus();
     }
 
+    componentWillUnmount() {
+        this.refs.input.removeEventListener('keydown', this.onKeyDown);
+    }
+
     focus() {
         setTimeout(() => {
             let container = ReactDOM.findDOMNode(this.refs.input);
@@ -47,11 +52,20 @@ export default class MoodEditor extends Component {
     };
 
     onKeyDown(event) {
+        if(this.isLeftOrRight(event)) {
+            event.stopPropagation();
+            return;
+        }
+
         if (!this.isKeyPressedNumeric(event)) {
             if (event.preventDefault) event.preventDefault();
         }
     }
 
+    isLeftOrRight(event) {
+        return [37, 39].indexOf(event.keyCode) > -1;
+    }
+
     handleChange(event) {
         this.setState({value: event.target.value});
     }
@@ -75,7 +89,6 @@ export default class MoodEditor extends Component {
         return (
             <input ref="input"
                    value={this.state.value}
-                   onKeyDown={this.onKeyDown}
                    onChange={this.handleChange}
             />
         );

src/floatingFilter/FloatingFilterGridExample.jsx

@@ -0,0 +1,69 @@
+import React, {Component} from "react";
+import {AgGridReact} from "ag-grid-react";
+import FloatingFilter from "./floatingFilter";
+import overrideStyle from "./floatingFilter.css";
+
+export default class FloatingFilterGridExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            columnDefs: this.createColumnDefs(),
+            rowData: this.createRowData()
+        }
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    createColumnDefs() {
+        return [
+            {
+                headerName: "Make",
+                field: "make",
+                floatingFilterComponentFramework: FloatingFilter,
+                filter: 'set'
+            },
+            {headerName: "Model", field: "model"},
+            {headerName: "Price", field: "price"}
+        ];
+    }
+
+    createRowData() {
+        return [
+            {make: "Toyota", model: "Celica", price: 35000},
+            {make: "Ford", model: "Mondeo", price: 32000},
+            {make: "Porsche", model: "Boxter", price: 72000}
+        ];
+    }
+
+    render() {
+        let divStyle = {
+            height: 400,
+            width: 945
+        };
+
+        // combine the styles
+        const style = Object.assign({}, divStyle, overrideStyle);
+
+        return (
+            <div style={style} className="ag-fresh">
+                <h1>Floating Filter Example</h1>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    floatingFilter={true}
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        )
+    }
+};

src/floatingFilter/floatingFilter.css

@@ -0,0 +1,3 @@
+.ag-floating-filter-button button {
+    margin: 0
+}

src/floatingFilter/floatingFilter.jsx

@@ -0,0 +1,39 @@
+import React, {Component} from "react";
+
+export default class FloatingFilter extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            parentModel: null
+        }
+    }
+
+    // when does this get called? how to test this?
+    onParentModelChanged(parentModel) {
+        this.setState({
+            parentModel: parentModel
+        })
+    }
+
+    remove(item) {
+        this.props.onFloatingFilterChanged({
+            model: this.state.parentModel.filter(it => it !== item)
+        });
+    }
+
+    render() {
+        if (!this.state.parentModel) return null;
+
+        // as the backing filter is a set filter what we're doing here is rendering the list in the set
+        // and when the [x] removing the selected item, thereby effectively hiding it
+        let options = this.state.parentModel.map((item, i) => {
+            let removeMeListener = () => {
+                this.remove(item)
+            };
+            let removeMeElement = <a onClick={removeMeListener}>[x]</a>;
+            return <span key={i}>{item}{removeMeElement}</span>;
+        });
+
+        return <div>{options}</div>;
+    }
+}

src/index.js

@@ -9,6 +9,10 @@ import "../node_modules/bootstrap/dist/css/bootstrap.css";
 
 import App from "./App";
 
+// only required when using enterprise features
+// import {LicenseManager} from "ag-grid-enterprise/main";
+// LicenseManager.setLicenseKey("<your license key>");
+
 document.addEventListener('DOMContentLoaded', () => {
     render(
         <App/>,

src/pinnedRowExample/PinnedRowComponentExample.jsx

@@ -3,7 +3,7 @@ import React, {Component} from "react";
 import {AgGridReact} from "ag-grid-react";
 import StyledRenderer from "./StyledRenderer";
 
-export default class FloatingRowComponentExample extends Component {
+export default class PinnedRowComponentExample extends Component {
     constructor(props) {
         super(props);
 
@@ -13,8 +13,8 @@ export default class FloatingRowComponentExample extends Component {
             rowData: this.createRowData(),
             columnDefs: this.createColumnDefs(),
 
-            topFloatingRowData: [{row: "Top Row", number: "Top Number"}],
-            bottomFloatingRowData: [{row: "Bottom Row", number: "Bottom Number"}]
+            pinnedTopRowData: [{row: "Top Row", number: "Top Number"}],
+            pinnedBottomRowData: [{row: "Bottom Row", number: "Bottom Number"}]
         };
 
         this.onGridReady = this.onGridReady.bind(this);
@@ -33,8 +33,8 @@ export default class FloatingRowComponentExample extends Component {
                 headerName: "Row",
                 field: "row",
                 width: 400,
-                floatingCellRendererFramework: StyledRenderer,
-                floatingCellRendererParams: {
+                pinnedRowCellRendererFramework: StyledRenderer,
+                pinnedRowCellRendererParams: {
                     style: {'fontWeight': 'bold'}
                 }
             },
@@ -42,8 +42,8 @@ export default class FloatingRowComponentExample extends Component {
                 headerName: "Number",
                 field: "number",
                 width: 399,
-                floatingCellRendererFramework: StyledRenderer,
-                floatingCellRendererParams: {
+                pinnedRowCellRendererFramework: StyledRenderer,
+                pinnedRowCellRendererParams: {
                     style: {'fontStyle': 'italic'}
                 }
             },
@@ -67,14 +67,14 @@ export default class FloatingRowComponentExample extends Component {
         return (
             <div style={{height: 400, width: 945}}
                  className="ag-fresh">
-                <h1>Floating Row Renderer Example</h1>
+                <h1>Pinned Row Renderer Example</h1>
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
                     rowData={this.state.rowData}
 
-                    floatingTopRowData={this.state.topFloatingRowData}
-                    floatingBottomRowData={this.state.bottomFloatingRowData}
+                    pinnedTopRowData={this.state.pinnedTopRowData}
+                    pinnedBottomRowData={this.state.pinnedBottomRowData}
 
                     // events
                     onGridReady={this.onGridReady}>

src/richGridExample/ColDefFactory.jsx

@@ -9,46 +9,85 @@ import HeaderGroupComponent from './HeaderGroupComponent.jsx';
 export default class ColDefFactory {
 
     createColDefs() {
-
-        var columnDefs = [
-            {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
-                suppressMenu: true, pinned: true},
+        return [
+            {
+                headerName: '#',
+                width: 30,
+                checkboxSelection: true,
+                suppressSorting: true,
+                suppressMenu: true,
+                pinned: true,
+                icons: {
+                    checkboxChecked: '<i class="fa fa-arrow-left"/>',
+                    checkboxUnchecked: '<i class="fa fa-arrow-right"/>',
+                    checkboxIndeterminate: '<i class="fa fa-arrow-up"/>'
+                }
+            },
             {
                 headerName: 'Employee',
                 headerGroupComponentFramework: HeaderGroupComponent,
                 children: [
                     {
-                        headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
-                        width: 150, pinned: true, editable: true,
+                        headerName: "Name",
+                        field: "name",
+                        enableRowGroup: true,
+                        enablePivot: true,
+                        width: 150,
+                        pinned: true,
+                        editable: true,
                         // use a React cellEditor
                         cellEditorFramework: NameCellEditor
                     }, {
-                        headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
+                        headerName: "Country",
+                        field: "country",
+                        width: 150,
+                        enableRowGroup: true,
+                        enablePivot: true,
                         // an example of using a non-React cell renderer
-                        cellRenderer: countryCellRenderer, pinned: true,
+                        cellRenderer: countryCellRenderer,
+                        pinned: true,
                         filterParams: {
-                            cellRenderer: countryCellRenderer, cellHeight: 20
-                        }, columnGroupShow: 'open'
+                            cellRenderer: countryCellRenderer,
+                            cellHeight: 20
+                        },
+                        columnGroupShow: 'open'
                     }, {
-                        headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date',
-                        pinned: true, cellRenderer: function(params) {
-                            return  pad(params.value.getDate(), 2) + '/' +
-                                    pad(params.value.getMonth() + 1, 2)+ '/' +
-                                    params.value.getFullYear();
-                        }, columnGroupShow: 'open'
+                        headerName: "DOB",
+                        field: "dob",
+                        width: 110,
+                        enableRowGroup: true,
+                        enablePivot: true,
+                        filter: 'date',
+                        pinned: true,
+                        cellRenderer: function (params) {
+                            return pad(params.value.getDate(), 2) + '/' +
+                                pad(params.value.getMonth() + 1, 2) + '/' +
+                                params.value.getFullYear();
+                        },
+                        columnGroupShow: 'open'
                     }
                 ]
             },
             {
                 headerName: 'IT Skills',
                 children: [
-                    {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
+                    {
+                        headerName: "Skills",
+                        width: 125,
+                        suppressSorting: true,
+                        field: 'skills',
+                        enableRowGroup: true,
+                        enablePivot: true,
                         // supply a React component
                         cellRendererFramework: SkillsCellRenderer,
                         // supply a React component
                         filterFramework: SkillsFilter
                     },
-                    {headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true,
+                    {
+                        headerName: "Proficiency",
+                        field: "proficiency",
+                        width: 135,
+                        enableValue: true,
                         // supply a React component
                         cellRendererFramework: ProficiencyCellRenderer,
                         // supply a React component
@@ -65,7 +104,6 @@ export default class ColDefFactory {
                 ]
             }
         ];
-        return columnDefs;
     }
 }
 
@@ -73,7 +111,7 @@ export default class ColDefFactory {
 // need to use React for it.
 function countryCellRenderer(params) {
     if (params.value) {
-        var flag = "<img border='0' width='15' height='10' " +
+        const 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;

src/richGridExample/RichGridExample.jsx

@@ -76,10 +76,6 @@ export default class RichGridExample extends Component {
         this.columnApi = params.columnApi;
     }
 
-    selectAll() {
-        this.api.selectAll();
-    }
-
     deselectAll() {
         this.api.deselectAll();
     }
@@ -156,7 +152,8 @@ export default class RichGridExample extends Component {
                     <div style={{padding: 4}} className={'toolbar'}>
                         <span>
                             Grid API:
-                            <button onClick={this.selectAll.bind(this)}>Select All</button>
+                            {/* use ref to access the api in selectAll */}
+                            <button onClick={() => { this.refs.myGrid.api.selectAll() }}>Select All</button>
                             <button onClick={this.deselectAll.bind(this)}>Clear Selection</button>
                         </span>
                         <span style={{marginLeft: 20}}>
@@ -186,6 +183,7 @@ export default class RichGridExample extends Component {
             gridTemplate = (
                 <div style={{height: 400, width: 945}} className="ag-fresh">
                     <AgGridReact
+                        ref="myGrid"
                         // gridOptions is optional - it's possible to provide
                         // all values as React props
                         gridOptions={this.gridOptions}

src/richGridExample/SortableHeaderComponent.jsx

@@ -7,7 +7,8 @@ export default class SortableHeaderComponent extends React.Component {
     constructor(props) {
         super(props);
 
-        this.props.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
+        // this.sortChanged = this.onSortChanged.bind(this);
+        this.props.column.addEventListener('sortChanged', this.onSortChanged);
 
         //The state of this component contains the current sort state of this column
         //The possible values are: 'asc', 'desc' and ''
@@ -16,6 +17,9 @@ export default class SortableHeaderComponent extends React.Component {
         }
     }
 
+    componentWillUnmount() {
+        this.props.column.removeEventListener('sortChanged', this.onSortChanged);
+    }
 
     render() {
         let sortElements = [];
@@ -51,7 +55,7 @@ export default class SortableHeaderComponent extends React.Component {
         this.props.setSort(order, event.shiftKey);
     };
 
-    onSortChanged() {
+    onSortChanged = () => {
         if (this.props.column.isSortAscending()) {
             this.setState({
                 sorted: 'asc'