Merge branch 'b23.0.2' into latest

AG-2417 Issue with React 6: withRef is removed. To access the wrapped instance, use a ref on the connected component
AG-2439 Add support for react-redux v6

h/t @hrgui - thanks!

.gitignore

@@ -1,2 +1,4 @@
 /node_modules
 /dist
+package-lock.json
+*.nosync

README.md

@@ -1,29 +1,18 @@
-
 ag-Grid React Example
 ==============
 
-Examples of running ag-Grid inside React application.
-
-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:
+## Examples
 
 1. standard - shows a typical grid demonstrating many ag-Grid features
 
 2. large - shows a very large grid (767 columns and 1,000 rows) using React cell renderers
 
+See [www.ag-grid.com](http://www.ag-grid.com) for full documentation and examples.
+
 Building
 ==============
 
 To build:
 - `npm install`
-- `npm install webpack -g`
 - `npm run examples`, `npm run large` or `npm run trader`
 - navigate to localhost:8080

config/webpack.config.examples.js

@@ -3,42 +3,50 @@ const path = require('path');
 const SRC_DIR = path.resolve(__dirname, '../src-examples');
 
 module.exports = {
+    mode: 'production',
     entry: SRC_DIR + "/index.js",
     output: {
         path: path.resolve(__dirname, '../'),
         filename: "dist/react-examples.js"
     },
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.css$/,
-                loader: "style!css"
+                loader: "style-loader!css-loader"
             },
             {
                 test: /\.js$|\.jsx$/,
                 include: SRC_DIR,
                 loader: 'babel-loader',
                 query: {
-                    presets: ['react', 'es2015', 'stage-0']
+                    presets: ['@babel/preset-react', '@babel/preset-env'],
+                    plugins: [
+                        require('@babel/plugin-proposal-function-bind'),
+                        require('@babel/plugin-proposal-class-properties')
+                    ]
                 }
             },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-                loader: 'file?name=[path]/[name].[ext]'
+                loader: 'file-loader?name=[path]/[name].[ext]'
             }
         ]
     },
     resolve: {
         alias: {
-            "ag-grid": path.resolve('./node_modules/ag-grid'),
-            "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
+            // "@ag-grid-community/core/modules": path.resolve('./node_modules/@ag-grid-community/core/dist/es2015/modules'),
+            "@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'),
+            // "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
             react: path.resolve('./node_modules/react')
         },
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
+    },
+    performance: {
+        hints: false
     },
     devServer: {
-        historyApiFallback: true,
-        contentBase: './',
-        hot: true
+        port: 8080,
+        historyApiFallback: true
     }
 };

config/webpack.config.large.js

@@ -3,33 +3,44 @@ const path = require('path');
 const SRC_DIR = path.resolve(__dirname, '../src-large-data');
 
 module.exports = {
+    mode: 'production',
     entry: SRC_DIR + "/index.js",
     output: {
         path: path.resolve(__dirname, '../'),
         filename: "dist/react-large.js"
     },
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.css$/,
-                loader: "style!css"
+                loader: "style-loader!css-loader"
             },
             {
                 test: /\.js$|\.jsx$/,
                 include: SRC_DIR,
                 loader: 'babel-loader',
                 query: {
-                    presets: ['react', 'es2015', 'stage-0']
+                    presets: ['@babel/preset-react', '@babel/preset-env'],
+                    plugins: [
+                        require('@babel/plugin-proposal-function-bind'),
+                        require('@babel/plugin-proposal-class-properties')
+                    ]
                 }
             }
         ]
     },
     resolve: {
         alias: {
-            "ag-grid": path.resolve('./node_modules/ag-grid'),
+            "@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'),
             "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
             react: path.resolve('./node_modules/react')
         },
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
+    },
+    performance: {
+        hints: false
+    },
+    devServer: {
+        port: 8080,
     }
 };

config/webpack.config.trader.js

@@ -3,33 +3,44 @@ const path = require('path');
 const SRC_DIR = path.resolve(__dirname, '../src-trader-dashboard');
 
 module.exports = {
+    mode: 'production',
     entry: SRC_DIR + "/index.js",
     output: {
         path: path.resolve(__dirname, '../'),
         filename: "dist/react-trader.js"
     },
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.css$/,
-                loader: "style!css"
+                loader: "style-loader!css-loader"
             },
             {
                 test: /\.js$|\.jsx$/,
                 include: SRC_DIR,
                 loader: 'babel-loader',
                 query: {
-                    presets: ['react', 'es2015', 'stage-0']
+                    presets: ['@babel/preset-react', '@babel/preset-env'],
+                    plugins: [
+                        require('@babel/plugin-proposal-function-bind'),
+                        require('@babel/plugin-proposal-class-properties')
+                    ]
                 }
             }
         ]
     },
     resolve: {
         alias: {
-            "ag-grid": path.resolve('./node_modules/ag-grid'),
+            "@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'),
             "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
             react: path.resolve('./node_modules/react')
         },
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
+    },
+    performance: {
+        hints: false
+    },
+    devServer: {
+        port: 8080,
     }
 };

package.json

@@ -1,12 +1,12 @@
 {
   "name": "ag-grid-react-example",
-  "version": "18.0.0",
+  "version": "23.0.2",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
-    "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --progress --colors --hot --inline",
-    "examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --progress --colors --hot --inline",
-    "large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --progress --colors --hot --inline",
+    "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --mode development --open",
+    "examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --mode development --open",
+    "large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --mode development --open",
     "clean": "rimraf dist",
     "mkdirs": "mkdirp dist/trader/dist dist/examples/dist",
     "copy-examples": "ncp src-examples/images dist/examples/images && ncp src-examples/index.html dist/examples/index.html && ncp dist/react-examples.js dist/examples/dist/react-examples.js && ncp src-examples/ dist/examples/src",
@@ -17,14 +17,14 @@
     "build-dashboard": "webpack --config 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/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"
+    "start": "npm run examples",
+    "test": "./ts-tests/runTsTests.sh"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ag-grid/ag-grid-react-example.git"
   },
+  "private": true,
   "keywords": [
     "react",
     "grid",
@@ -38,39 +38,39 @@
   },
   "homepage": "http://www.ag-grid.com/",
   "devDependencies": {
-    "babel-core": "6.24.x",
-    "babel-loader": "6.4.x",
-    "babel-preset-es2015": "6.24.x",
-    "babel-preset-react": "6.24.x",
-    "babel-preset-stage-0": "6.24.x",
-    "babel-preset-stage-1": "6.24.x",
-    "css-loader": "0.23.x",
+    "@ag-grid-community/core": "~23.0.0",
+    "@babel/core": "7.4.4",
+    "@babel/plugin-proposal-class-properties": "7.4.4",
+    "@babel/plugin-proposal-function-bind": "7.2.0",
+    "@babel/preset-env": "7.4.4",
+    "@babel/preset-react": "7.0.0",
+    "@types/react": "16.9.2",
+    "@types/react-dom": "16.9.0",
+    "babel-loader": "8.0.6",
+    "css-loader": "2.1.1",
+    "file-loader": "3.0.1",
+    "gulp": "3.9.1",
+    "merge2": "1.2.3",
     "mkdirp": "0.5.1",
     "ncp": "2.0.0",
-    "prop-types": "15.6.0",
-    "rimraf": "2.5.x",
-    "style-loader": "0.13.x",
-    "webpack": "1.12.x",
-    "webpack-dev-server": "1.14.x",
-    "gulp": "3.9.x",
-    "gulp-typescript": "3.1.x",
-    "merge2": "1.0.x",
-    "typescript": "2.3.x"
+    "prop-types": "15.7.2",
+    "rimraf": "2.6.3",
+    "style-loader": "0.23.1",
+    "typescript": "3.4.5",
+    "webpack": "4.31.0",
+    "webpack-cli": "3.3.2",
+    "webpack-dev-server": "3.4.1"
   },
   "dependencies": {
-    "ag-grid": "^18.0.0",
-    "ag-grid-enterprise": "^18.0.0",
-    "ag-grid-react": "^18.0.0",
-    "bootstrap": "3.3.7",
+    "@ag-grid-enterprise/all-modules": "~23.0.0",
+    "@ag-grid-community/react": "~23.0.0",
+    "bootstrap": "4.4.1",
     "d3": "4.9.1",
-    "file-loader": "0.11.1",
-    "lodash": "4.17.4",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
-    "react-dom-factories": "1.0.2",
-    "react-redux": "5.0.x",
-    "react-router-dom": "4.2.x",
-    "redux": "3.6.x",
-    "url-search-params-polyfill": "1.2.0"
+    "lodash": "4.17.11",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "react-redux": "7.0.3",
+    "react-router-dom": "5.0.0",
+    "redux": "4.0.1"
   }
 }

src-examples/App.jsx

@@ -2,17 +2,18 @@ import React, {Component} from "react";
 import {Redirect, Route, Switch} from "react-router-dom";
 
 import NavItem from "./NavItem";
-
 import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDeclarativeExample";
 import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
+import SimpleReduxHookExample from "./simpleReduxHooksExample/SimpleReduxHookExample";
 
 const SideBar = () => (
-        <div style={{float: "left", width: 335, marginRight: 25}}>
-            <ul className="nav nav-pills nav-stacked">
-                <NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
-                <NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
-            </ul>
-        </div>
+    <div style={{float: "left", width: 335, marginRight: 25}}>
+        <ul className="nav nav-pills">
+            <NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
+            <NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
+            <NavItem to='/simple-redux-hook'>Simple React Hook Component Example</NavItem>
+        </ul>
+    </div>
 );
 
 class App extends Component {
@@ -25,6 +26,7 @@ class App extends Component {
                         <Redirect from="/" exact to="/rich-grid-declarative"/>
                         <Route exact path='/rich-grid-declarative' component={RichGridDeclarativeExample}/>
                         <Route exact path='/simple-redux-dynamic' component={SimpleReduxDynamicExample}/>
+                        <Route exact path='/simple-redux-hook' component={SimpleReduxHookExample}/>
                     </Switch>
                 </div>
             </div>

src-examples/NavItem.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import * as PropTypes from 'prop-types';
-import {Route, Link} from 'react-router-dom'
+import {Link, Route} from 'react-router-dom'
 
 // for bootstrap li active functionality
 export default function NavItem({children, to, exact}) {
     return (
         <Route path={to} exact={exact} children={({match}) => (
-            <li className={match ? 'active' : null}>
-                <Link to={to}>{children}</Link>
+            <li className="nav-item">
+                <Link className={match ? 'nav-link active' : 'nav-link'} to={to}>{children}</Link>
             </li>
         )}/>
     )

src-examples/index.html

@@ -16,6 +16,10 @@
             line-height: 1
         }
 
+        h1 {
+            font-size: 1.5rem;
+        }
+
         div.card-body > a {
             margin-top: 5px
         }

src-examples/index.js

@@ -4,14 +4,14 @@ import React from "react";
 import {render} from "react-dom";
 import {BrowserRouter} from "react-router-dom";
 
-import "ag-grid/dist/styles/ag-grid.css";
-import "ag-grid/dist/styles/theme-fresh.css";
+import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css";
+import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css";
 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";
+// import {LicenseManager} from "@ag-grid-enterprise/all-modules";
 // LicenseManager.setLicenseKey("<your license key>");
 
 document.addEventListener('DOMContentLoaded', () => {

src-examples/richGridDeclarativeExample/DateComponent.jsx

@@ -51,11 +51,11 @@ export default class DateComponent extends React.Component {
         return (
             <div style={filterStyle}>
                 <span style={resetStyle} onClick={this.resetDate.bind(this)}>x</span>
-                <input onInput={this.onDateChanged.bind(this)} ref="dd" placeholder="dd" style={ddStyle}
+                <input onChange={this.onDateChanged.bind(this)} ref="dd" placeholder="dd" style={ddStyle}
                        value={this.state.textBoxes.dd} maxLength="2"/>/
-                <input onInput={this.onDateChanged.bind(this)} ref="mm" placeholder="mm" style={mmStyle}
+                <input onChange={this.onDateChanged.bind(this)} ref="mm" placeholder="mm" style={mmStyle}
                        value={this.state.textBoxes.mm} maxLength="2"/>/
-                <input onInput={this.onDateChanged.bind(this)} ref="yyyy" placeholder="yyyy" style={yyyyStyle}
+                <input onChange={this.onDateChanged.bind(this)} ref="yyyy" placeholder="yyyy" style={yyyyStyle}
                        value={this.state.textBoxes.yyyy} maxLength="4"/>
             </div>
         );

src-examples/richGridDeclarativeExample/ProficiencyFilter.jsx

@@ -54,7 +54,7 @@ export default class ProficiencyFilter extends React.Component {
         PROFICIENCY_NAMES.forEach((name) => {
             const selected = this.state.selected === name;
             rows.push(
-                <div key={name}>
+                <div key={name} style={{marginTop: 3}}>
                     <label style={{paddingLeft: 4}}>
                         <input type="radio" checked={selected} name={Math.random()}
                                onChange={this.onButtonPressed.bind(this, name)}/>

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {AgGridColumn, AgGridReact} from "ag-grid-react";
+import React, { Component } from "react";
+import { AgGridColumn, AgGridReact } from "@ag-grid-community/react";
 import RowDataFactory from "./RowDataFactory";
 import DateComponent from "./DateComponent.jsx";
 import SkillsCellRenderer from './SkillsCellRenderer.jsx';
@@ -13,20 +13,23 @@ import SortableHeaderComponent from './SortableHeaderComponent.jsx';
 
 import "./RichGridDeclarativeExample.css";
 
-// take this line out if you do not want to use ag-Grid-Enterprise
-import "ag-grid-enterprise";
+// for community features
+// import {AllCommunityModules} from "@ag-grid-community/all-modules";
+
+// for enterprise features
+import { AllModules } from "@ag-grid-enterprise/all-modules";
 
 export default class RichGridDeclarativeExample extends Component {
-
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             quickFilterText: null,
-            showToolPanel: false,
+            sideBar: false,
             rowData: new RowDataFactory().createRowData(),
+            rowCount: null,
             icons: {
-                columnRemoveFromGroup: '<i class="fa fa-remove"/>',
+                columnRemoveFromGroup: '<i class="fa fa-times"/>',
                 filter: '<i class="fa fa-filter"/>',
                 sortAscending: '<i class="fa fa-long-arrow-down"/>',
                 sortDescending: '<i class="fa fa-long-arrow-up"/>',
@@ -40,6 +43,8 @@ export default class RichGridDeclarativeExample extends Component {
     onGridReady = (params) => {
         this.api = params.api;
         this.columnApi = params.columnApi;
+
+        this.calculateRowCount();
     };
 
     onCellClicked = (event) => {
@@ -51,8 +56,8 @@ export default class RichGridDeclarativeExample extends Component {
     };
 
     /* Demo related methods */
-    onToggleToolPanel = (event) => {
-        this.setState({showToolPanel: event.target.checked});
+    onToggleSidebar = (event) => {
+        this.setState({ sideBar: event.target.checked });
     };
 
     deselectAll() {
@@ -60,7 +65,7 @@ export default class RichGridDeclarativeExample extends Component {
     }
 
     onQuickFilterText = (event) => {
-        this.setState({quickFilterText: event.target.value});
+        this.setState({ quickFilterText: event.target.value });
     };
 
     onRefreshData = () => {
@@ -70,22 +75,37 @@ export default class RichGridDeclarativeExample extends Component {
     };
 
     invokeSkillsFilterMethod = () => {
-        let skillsFilter = this.api.getFilterInstance('skills');
-        let componentInstance = skillsFilter.getFrameworkComponentInstance();
-        componentInstance.helloFromSkillsFilter();
+        this.api.getFilterInstance('skills', (instance) => {
+            let componentInstance = instance.getFrameworkComponentInstance();
+            componentInstance.helloFromSkillsFilter();
+        });
     };
 
     dobFilter = () => {
-        let dateFilterComponent = this.api.getFilterInstance('dob');
-        dateFilterComponent.setFilterType('equals');
-        dateFilterComponent.setDateFrom('2000-01-01');
+        this.api.getFilterInstance('dob', (dateFilterComponent) => {
+            dateFilterComponent.setModel({
+                type: 'equals',
+                dateFrom: '2000-01-01'
+            });
 
-        // as the date filter is a React component, and its using setState internally, we need
-        // to allow time for the state to be set (as setState is an async operation)
-        // simply wait for the next tick
-        setTimeout(() => {
-            this.api.onFilterChanged();
-        }, 0)
+            // as the date filter is a React component, and its using setState internally, we need
+            // to allow time for the state to be set (as setState is an async operation)
+            // simply wait for the next tick
+            setTimeout(() => {
+                this.api.onFilterChanged();
+            });
+        });
+    };
+
+    calculateRowCount = () => {
+        if (this.api && this.state.rowData) {
+            const model = this.api.getModel();
+            const totalRows = this.state.rowData.length;
+            const processedRows = model.getRowCount();
+            this.setState({
+                rowCount: processedRows.toLocaleString() + ' / ' + totalRows.toLocaleString()
+            });
+        }
     };
 
     static countryCellRenderer(params) {
@@ -110,56 +130,67 @@ export default class RichGridDeclarativeExample extends Component {
 
     render() {
         return (
-            <div style={{width: '900px'}}>
+            <div style={{ width: '900px' }}>
                 <h1>Rich Grid with Declarative Markup Example</h1>
-                <div style={{display: "inline-block", width: "100%"}}>
-                    <div style={{float: "left"}}>
-                        <b>Employees Skills and Contact Details</b><span id="rowCount"/>
+                <div style={{ display: "inline-block", width: "100%" }}>
+                    <div style={{ float: "left" }}>
+                        <b>Employees Skills and Contact Details: </b>{this.state.rowCount}
                     </div>
                 </div>
-                <div style={{marginTop: 10}}>
+                <div style={{ marginTop: 10 }}>
                     <div>
                         <span>
                             Grid API:
-                            <button onClick={() => { this.api.selectAll() }} className="btn btn-primary">Select All</button>
-                            <button onClick={() => { this.api.deselectAll() }} className="btn btn-primary">Clear Selection</button>
+                            <button onClick={() => {
+                                this.api.selectAll();
+                            }} className="btn btn-primary">Select All</button>
+                            <button onClick={() => {
+                                this.api.deselectAll();
+                            }} className="btn btn-primary">Clear Selection</button>
                         </span>
-                        <span style={{float: "right"}}>
+                        <span style={{ float: "right" }}>
                             Column API:
-                            <button onClick={() => { this.columnApi.setColumnVisible('country', false) }} className="btn btn-primary">Hide Country Column</button>
-                            <button onClick={() => { this.columnApi.setColumnVisible('country', true) }} className="btn btn-primary">Show Country Column</button>
+                            <button onClick={() => {
+                                this.columnApi.setColumnVisible('country', false);
+                            }} className="btn btn-primary">Hide Country Column</button>
+                            <button onClick={() => {
+                                this.columnApi.setColumnVisible('country', true);
+                            }} className="btn btn-primary">Show Country Column</button>
                         </span>
                     </div>
-                    <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
-                        <div style={{float: "left"}}>
-                            <label>
-                                <input type="checkbox" onChange={this.onToggleToolPanel} style={{marginRight: 5}}/>
-                                Show Tool Panel
-                            </label>
-                        </div>
-                        <div style={{float: "left", marginLeft: 20}}>
+                    <div style={{ display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10 }}>
+                        <div style={{ float: "left" }}>
                             <button onClick={this.onRefreshData} className="btn btn-primary">Refresh Data</button>
                         </div>
-                        <div style={{float: "left", marginLeft: 20}}>
-                            <input type="text" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
-                        </div>
-                        <div style={{float: "right"}}>
+                        <div style={{ float: "right" }}>
                             Filter API:
                             <button onClick={this.invokeSkillsFilterMethod}
-                                    className="btn btn-primary">Invoke Skills Filter Method
+                                className="btn btn-primary">Invoke Skills Filter Method
+                            </button>
+                            <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000
                             </button>
-                            <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß</button>
                         </div>
                     </div>
-                    <div style={{height: 400, width: 900}} className="ag-fresh">
+                    <div style={{ display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10 }}>
+                        <div style={{ float: "left" }}>
+                            <label htmlFor="sideBarToggle">Show Side Bar&nbsp;</label>
+                            <input type="checkbox" id="sideBarToggle" onChange={this.onToggleSidebar} style={{ marginRight: 5 }} />
+                        </div>
+                        <div style={{ float: "right", marginLeft: 20 }}>
+                            <label htmlFor="quickFilter">Quick Filter:&nbsp;</label>
+                            <input type="text" id="quickFilter" onChange={this.onQuickFilterText} placeholder="Type text to filter..." />
+                        </div>
+                    </div>
+                    <div style={{ height: 400, width: 900 }} className="ag-theme-balham">
                         <AgGridReact
                             // listening for events
                             onGridReady={this.onGridReady}
                             onRowSelected={this.onRowSelected}
                             onCellClicked={this.onCellClicked}
+                            onModelUpdated={this.calculateRowCount}
 
                             // binding to simple properties
-                            showToolPanel={this.state.showToolPanel}
+                            sideBar={this.state.sideBar}
                             quickFilterText={this.state.quickFilterText}
 
                             // binding to an object property
@@ -168,169 +199,61 @@ export default class RichGridDeclarativeExample extends Component {
                             // binding to array properties
                             rowData={this.state.rowData}
 
+                            // register all modules (row model, csv/excel, row grouping etc)
+                            modules={AllModules}
+
                             // no binding, just providing hard coded strings for the properties
-                            // boolean properties will default to true if provided (ie enableColResize => enableColResize="true")
+                            // boolean properties will default to true if provided (ie suppressRowClickSelection => suppressRowClickSelection="true")
                             suppressRowClickSelection
                             rowSelection="multiple"
-                            enableColResize
-                            enableSorting
-                            enableFilter
-                            floatingFilter
                             groupHeaders
-                            rowHeight="22"
 
                             // setting grid wide date component
                             dateComponentFramework={DateComponent}
 
                             // setting default column properties
                             defaultColDef={{
+                                resizable: true,
+                                sortable: true,
+                                filter: true,
                                 headerComponentFramework: SortableHeaderComponent,
                                 headerComponentParams: {
                                     menuIcon: 'fa-bars'
                                 }
-                            }}
-                        >
-                            <AgGridColumn headerName="#" width={30} checkboxSelection suppressSorting suppressMenu suppressFilter pinned></AgGridColumn>
+                            }}>
+                            <AgGridColumn headerName="#" width={40}
+                                checkboxSelection sortable={false} suppressMenu filter={false} pinned>
+                            </AgGridColumn>
                             <AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
-                                <AgGridColumn field="name" width={150} enableRowGroup enablePivot pinned editable cellEditorFramework={NameCellEditor}></AgGridColumn>
-                                <AgGridColumn field="country" width={150} enableRowGroup enablePivot pinned editable cellRenderer={RichGridDeclarativeExample.countryCellRenderer} filterParams={{cellRenderer: RichGridDeclarativeExample.countryCellRenderer, cellHeight:20}}></AgGridColumn>
-                                <AgGridColumn field="dob" width={145} headerName="DOB" filter="date" pinned columnGroupShow="open" cellRenderer={RichGridDeclarativeExample.dateCellRenderer}></AgGridColumn>
+                                <AgGridColumn field="name" width={150}
+                                    cellEditorFramework={NameCellEditor}
+                                    enableRowGroup enablePivot pinned editable />
+                                <AgGridColumn field="country" width={150}
+                                    cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
+                                    filterParams={{
+                                        cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
+                                        cellHeight: 20
+                                    }}
+                                    enableRowGroup enablePivot pinned editable />
+                                <AgGridColumn field="dob" width={175} headerName="DOB" filter="agDateColumnFilter"
+                                    pinned columnGroupShow="open"
+                                    cellRenderer={RichGridDeclarativeExample.dateCellRenderer} />
                             </AgGridColumn>
                             <AgGridColumn headerName="IT Skills">
-                                <AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting cellRendererFramework={SkillsCellRenderer} filterFramework={SkillsFilter}></AgGridColumn>
-                                <AgGridColumn field="proficiency" width={135} enableValue cellRendererFramework={ProficiencyCellRenderer} filterFramework={ProficiencyFilter}></AgGridColumn>
+                                <AgGridColumn field="skills" width={120} enableRowGroup enablePivot sortable={false}
+                                    cellRendererFramework={SkillsCellRenderer}
+                                    filterFramework={SkillsFilter} />
+                                <AgGridColumn field="proficiency" width={160} enableValue
+                                    cellRendererFramework={ProficiencyCellRenderer}
+                                    filterFramework={ProficiencyFilter} />
                             </AgGridColumn>
                             <AgGridColumn headerName="Contact">
-                                <AgGridColumn field="mobile" width={150} filter="text"></AgGridColumn>
-                                <AgGridColumn field="landline" width={150} filter="text"></AgGridColumn>
-                                <AgGridColumn field="address" width={500} filter="text"></AgGridColumn>
+                                <AgGridColumn field="mobile" width={150} filter="text" />
+                                <AgGridColumn field="landline" width={150} filter="text" />
+                                <AgGridColumn field="address" width={500} filter="text" />
                             </AgGridColumn>
                         </AgGridReact>
                     </div>
-                    <div>
-                        <div className="row">
-                            <div className="col-sm-12"><h1>Rich Grid with Declarative Markup Example</h1></div>
-                        </div>
-                        <div className="row">
-                            <div className="col-sm-12">
-                                <h5>This example demonstrates many features of ag-Grid, with Grid and Column Definition defined declaratively (i.e. with markup).</h5>
-                                <p><span style={{fontWeight: 500}}>Select All/Clear Selection</span>: Select or Deselect
-                                    All
-                                    Rows</p>
-                                <p><span style={{fontWeight: 500}}>Hide/Show Country Column</span>: Select or Deselect
-                                    All
-                                    Rows
-                                    (expand the Employee column to show the Country column first)</p>
-                                <p><span style={{fontWeight: 500}}>Toggle The Tool Panel</span>: Let your users Pivot,
-                                    Group
-                                    and
-                                    Aggregate using the Tool Panel</p>
-                                <p><span style={{fontWeight: 500}}>Refresh Data</span>: Dynamically Update Grid Data</p>
-                                <p><span style={{fontWeight: 500}}>Quick Filter</span>: Perform Quick Grid Wide
-                                    Filtering
-                                    with
-                                    the Quick Filter</p>
-                                <p><span style={{fontWeight: 500}}>DOB Filter</span>: Set the DOB filter to 01/01/2000
-                                    using
-                                    the
-                                    Filter API (expand the Employee column to show the DOB column)</p>
-                                <p><span style={{fontWeight: 500}}>Custom Headers</span>: Sort, Filter and Render
-                                    Headers
-                                    using
-                                    Header Components</p>
-                            </div>
-                        </div>
-                        <div className="row">
-                            <div className="col-sm-4">
-                                <div className="card">
-                                    <div className="card-body">
-                                        <h4 className="card-title">Grid & Column API</h4>
-                                        <p className="card-text">Utilise Grid Features Programmatically Using the APIs
-                                            Available</p>
-                                        <a target="_blank" href="https://www.ag-grid.com/javascript-grid-api/"
-                                           className="btn btn-primary">Grid API</a>
-                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-column-api/"
-                                           className="btn btn-primary">Column API</a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="col-sm-4">
-                                <div className="card">
-                                    <div className="card-body">
-                                        <h4 className="card-title">Header Components</h4>
-                                        <p className="card-text">Customer the Header with React Components</p>
-                                        <a target="_blank"
-                                           href="https://www.ag-grid.com//javascript-grid-header-rendering/#headerComponent"
-                                           className="btn btn-primary">Header Component</a>
-                                        <a target="_blank"
-                                           href="https://www.ag-grid.com//javascript-grid-header-rendering/#headerGroupComponent"
-                                           className="btn btn-primary">Header Group Component</a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="col-sm-4">
-                                <div className="card">
-                                    <div className="card-body">
-                                        <h4 className="card-title">Filters</h4>
-                                        <p className="card-text">Filter with Quick Filters, Floating Filters, Built In
-                                            Filters
-                                            or Using the
-                                            Filter API</p>
-                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-filter-quick/"
-                                           className="btn btn-primary">Quick
-                                            Filter</a>
-                                        <a target="_blank"
-                                           href="https://www.ag-grid.com//javascript-grid-floating-filter-component/"
-                                           className="btn btn-primary">Floating Filters</a>
-                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-filtering/"
-                                           className="btn btn-primary">Built in
-                                            Filters</a>
-                                        <a target="_blank"
-                                           href="https://www.ag-grid.com//javascript-grid-filtering/#accessing-filter-component-instances"
-                                           className="btn btn-primary">Filter API</a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="row">
-                            <div className="col-sm-4">
-                                <div className="card">
-                                    <div className="card-body">
-                                        <h4 className="card-title">Tool Panel</h4>
-                                        <p className="card-text">Let your users Pivot, Group and Aggregate using the
-                                            Tool
-                                            Panel</p>
-                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-tool-panel/"
-                                           className="btn btn-primary">Tool Panel</a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="col-sm-8">
-                                <div className="card">
-                                    <div className="card-body">
-                                        <h4 className="card-title">The Rest</h4>
-                                        <p className="card-text">Pinned Columns, Checkbox Selection, Customer Renderers,
-                                            Data
-                                            Updates</p>
-                                        <a target="_blank"
-                                           href="https://www.ag-grid.com/best-react-data-grid/?framework=react"
-                                           className="btn btn-primary">React with ag-Grid</a>
-                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-pinning/"
-                                           className="btn btn-primary">Pinned Column</a>
-                                        <a target="_blank"
-                                           href="https://www.ag-grid.com//javascript-grid-selection/#checkboxSelection"
-                                           className="btn btn-primary">Checkbox Selection</a>
-                                        <a target="_blank"
-                                           href="https://www.ag-grid.com//javascript-grid-cell-rendering/"
-                                           className="btn btn-primary">Cell
-                                            Renderers</a>
-                                        <a target="_blank" href="https://www.ag-grid.com/javascript-grid-data-update/"
-                                           className="btn btn-primary">Updating Data</a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </div>
         );

src-examples/richGridDeclarativeExample/SkillsFilter.jsx

@@ -56,7 +56,7 @@ export default class SkillsFilter extends React.Component {
         return passed;
     };
 
-    getModel() {
+    getModelAsString() {
         return ''
     }
 
@@ -83,7 +83,6 @@ export default class SkillsFilter extends React.Component {
 
         const skillsTemplates = [];
         RefData.IT_SKILLS.forEach((skill, index) => {
-
             const skillName = RefData.IT_SKILLS_NAMES[index];
             const template = (
                 <label key={skill}

src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from "react";
-
-import {AgGridReact} from "ag-grid-react";
 import {connect} from "react-redux";
+import {AgGridReact} from "@ag-grid-community/react";
+import {AllModules} from "@ag-grid-enterprise/all-modules";
 
 import PriceRenderer from "./PriceRenderer";
 
@@ -39,11 +39,12 @@ class GridComponent extends Component {
     render() {
         return (
             <div style={{height: 400, width: 900, marginTop: 15}}
-                 className="ag-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
                     rowData={this.props.rowData}
+                    modules={AllModules}
 
                     // events
                     onGridReady={this.onGridReady}>

src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx

@@ -1,9 +1,6 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 
-// take this line out if you do not want to use ag-Grid-Enterprise
-import "ag-grid-enterprise";
-
 import {setCurrency, updateRowData} from "./gridDataActions";
 
 /*
@@ -26,8 +23,8 @@ class HeaderComponent extends Component {
     render() {
         return (
             <div style={{marginTop: 15}}>
-                <button onClick={this.setCurrency.bind(this, '£', 1)}>Set Currency to GBP</button>
-                <button onClick={this.setCurrency.bind(this, '$', 1.29)}>Set Currency to USD</button>
+                <button onClick={this.setCurrency.bind(this, '£', 1)} className="btn btn-primary">Set Currency to GBP</button>
+                <button onClick={this.setCurrency.bind(this, '$', 1.29)} className="btn btn-primary">Set Currency to USD</button>
             </div>
         )
     }

src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx

@@ -1,6 +1,8 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 
+import FontContext from './fontContext'
+
 class PriceRenderer extends Component {
     constructor(props) {
         super(props);
@@ -18,7 +20,10 @@ class PriceRenderer extends Component {
 
     render() {
         return (
-            <span>{this.props.currencySymbol}{this.state.convertedValue}</span>
+            <FontContext.Consumer>
+                {fontWeight => <span
+                    style={{fontWeight}}> {this.props.currencySymbol}{this.state.convertedValue}</span>}
+            </FontContext.Consumer>
         );
     }
 
@@ -33,5 +38,8 @@ export default connect(
             currencySymbol: state.currencySymbol,
             exchangeRate: state.exchangeRate
         }
-    }
+    },
+    null,
+    null,
+    {forwardRef: true} // must be supplied for react/redux when using AgGridReact
 )(PriceRenderer);

src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx

@@ -2,14 +2,13 @@ import React, {Component} from "react";
 import {Provider} from "react-redux";
 import {createStore} from "redux";
 
-// take this line out if you do not want to use ag-Grid-Enterprise
-import "ag-grid-enterprise";
-
 import HeaderComponent from "./HeaderComponent";
 import GridComponent from "./GridComponent";
 
 import gridData from "./gridDataReducer";
 
+import FontContext from './fontContext'
+
 let store = createStore(gridData);
 
 /*
@@ -26,8 +25,10 @@ export default class SimpleReduxExample extends Component {
             <Provider store={store}>
                 <div>
                     <h1>Simple Redux Example using Connected React Components</h1>
-                    <HeaderComponent />
-                    <GridComponent />
+                    <HeaderComponent/>
+                    <FontContext.Provider value="bold">
+                        <GridComponent/>
+                    </FontContext.Provider>
                 </div>
             </Provider>
         )

src-examples/simpleReduxDynamicComponentExample/fontContext.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export default React.createContext('normal');

src-examples/simpleReduxDynamicComponentExample/gridDataActions.jsx

@@ -4,6 +4,7 @@ export function updateRowData(rowData) {
         rowData
     }
 }
+
 export function setCurrency(currencySymbol, exchangeRate) {
     return {
         type: 'CURRENCY_CHANGED',

src-examples/simpleReduxHooksExample/GridComponent.jsx

@@ -0,0 +1,34 @@
+import React, {useContext} from "react";
+import {Context} from "./store";
+import {AgGridReact} from "@ag-grid-community/react";
+import {AllModules} from "@ag-grid-enterprise/all-modules";
+
+/*
+ * This component serves to display the row data (provided by redux)
+ */
+export default function GridComponent() {
+    const {store, dispatch} = useContext(Context);
+    const {columnDefs, rowData} = store;
+
+    const onGridReady = (params) => {
+        params.api.sizeColumnsToFit();
+    };
+
+    // row data will be provided via redux on this.props.rowData
+    return (
+        <div style={{height: 400, width: 900, marginTop: 15}}
+             className="ag-theme-balham">
+            <AgGridReact
+                // properties
+                columnDefs={columnDefs}
+                rowData={rowData}
+                modules={AllModules}
+
+                defaultColDef={{filter: true}}
+
+                // events
+                onGridReady={onGridReady}>
+            </AgGridReact>
+        </div>
+    )
+}

src-examples/simpleReduxHooksExample/PriceEditor.jsx

@@ -0,0 +1,18 @@
+import React, {useEffect, forwardRef, useImperativeHandle, useRef} from "react";
+
+export default forwardRef((props, ref) => {
+    const inputRef = useRef();
+    useImperativeHandle(ref, () => {
+        return {
+            getValue: () => {
+                return inputRef.current.value;
+            }
+        };
+    });
+
+    useEffect(() => {
+        // https://github.com/facebook/react/issues/7835#issuecomment-395504863
+        setTimeout(() => inputRef.current.focus(), 10)
+    }, []);
+    return <input type="text" ref={inputRef} defaultValue={props.value}/>;
+})

src-examples/simpleReduxHooksExample/PriceFilter.jsx

@@ -0,0 +1,18 @@
+import React, {forwardRef, useImperativeHandle, useRef} from "react";
+
+export default forwardRef((props, ref) => {
+    const inputRef = useRef();
+    useImperativeHandle(ref, () => {
+        return {
+            isFilterActive() {
+                return inputRef.current.value !== '';
+            },
+
+            doesFilterPass: (params) => {
+                return params.data.price.toString() === inputRef.current.value;
+            }
+        };
+    });
+
+    return <input type="text" ref={inputRef} onChange={() => props.filterChangedCallback()}/>;
+})

src-examples/simpleReduxHooksExample/PriceRenderer.jsx

@@ -0,0 +1,13 @@
+import React, {Component} from "react";
+
+export default class PriceRenderer extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <span>{this.props.value}</span>
+        );
+    }
+}

src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx

@@ -0,0 +1,18 @@
+import React, {useReducer} from "react";
+import GridComponent from "./GridComponent";
+
+import {Context, initialState, reducer} from "./store";
+
+export default function SimpleReduxHookExample() {
+    const [store, dispatch] = useReducer(reducer, initialState);
+
+    return (
+        <Context.Provider value={{store, dispatch}}>
+            <div>
+                <h1>Simple Example using Hooks (with useContext and useReducer)</h1>
+                <button onClick={() => dispatch({type: "SET_ROW_DATA"})} className="btn btn-primary">Populate Row Data</button>
+                <GridComponent/>
+            </div>
+        </Context.Provider>
+    )
+}

src-examples/simpleReduxHooksExample/gridDataActions.jsx

@@ -0,0 +1,14 @@
+export function updateRowData(rowData) {
+    return {
+        type: 'ROW_DATA_CHANGED',
+        rowData
+    }
+}
+
+export function setCurrency(currencySymbol, exchangeRate) {
+    return {
+        type: 'CURRENCY_CHANGED',
+        currencySymbol,
+        exchangeRate
+    }
+}

src-examples/simpleReduxHooksExample/store.js

@@ -0,0 +1,81 @@
+import React from "react";
+import PriceRenderer from "./PriceRenderer";
+import PriceEditor from "./PriceEditor";
+import PriceFilter from "./PriceFilter";
+
+export const initialState = {
+    rowData: [],
+    columnDefs: [
+        {
+            field: 'symbol',
+            editable: true
+        },
+        {
+            field: 'price',
+            cellClass: 'align-right',
+            editable: true,
+            cellEditorFramework: PriceEditor,
+            filterFramework: PriceFilter,
+            cellRendererFramework: PriceRenderer
+        }
+    ]
+};
+
+export const reducer = (state = {rowData: []}, action) => {
+    switch (action.type) {
+        case 'SET_ROW_DATA':
+            return {
+                ...state,
+                rowData: createRowData()
+            };
+        default:
+            return state;
+    }
+};
+
+export const Context = React.createContext();
+
+
+// for test data
+// the following methods are for creating dummy row data
+const createRowData = () => {
+    let rowData = [];
+
+    for (let i = 0; i < 14; i++) {
+        let newItem = createItem(rowData);
+        rowData.push(newItem);
+    }
+
+    return rowData;
+};
+
+const createItem = (rowData) => {
+    return {
+        symbol: createUniqueRandomSymbol(rowData),
+        price: Math.floor(Math.random() * 100)
+    };
+};
+
+// creates a unique symbol, eg 'ADG' or 'ZJD'
+const createUniqueRandomSymbol = (rowData) => {
+    let symbol;
+    let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+    let isUnique = false;
+    while (!isUnique) {
+        symbol = '';
+        // create symbol
+        for (let i = 0; i < 3; i++) {
+            symbol += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
+        // check uniqueness
+        isUnique = true;
+        rowData.forEach(function (oldItem) {
+            if (oldItem.symbol === symbol) {
+                isUnique = false;
+            }
+        });
+    }
+
+    return symbol;
+};

src-large-data/index.js

@@ -4,8 +4,8 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import LargeGrid from './largeGrid.jsx';
 
-import 'ag-grid/dist/styles/ag-grid.css';
-import 'ag-grid/dist/styles/theme-fresh.css';
+import '@ag-grid-community/core/dist/styles/ag-grid.css';
+import '@ag-grid-community/core/dist/styles/ag-theme-balham.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.

src-large-data/largeGrid.jsx

@@ -1,10 +1,12 @@
 import React, {Component} from 'react';
 import SimpleCellRenderer from './simpleCellRenderer.jsx';
+import {AgGridReact} from '@ag-grid-community/react';
 
-import {AgGridReact} from 'ag-grid-react';
+// for community features
+import {AllModules} from "@ag-grid-enterprise/all-modules";
 
-// put this line in to use ag-Grid enterprise
-// import 'ag-grid-enterprise';
+// for enterprise features
+// import {AllModules} from "@ag-grid-enterprise/all-modules";
 
 export default class MyApp extends Component {
 
@@ -61,8 +63,8 @@ export default class MyApp extends Component {
 
     render() {
         return (
-            <div style={{height: '100%'}} className="ag-fresh">
-                <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData}/>
+            <div style={{height: '100%'}} className="ag-theme-balham">
+                <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} modules={AllModules}/>
             </div>
         );
     }

src-trader-dashboard/components/FxQuoteMatrix.jsx

@@ -1,10 +1,9 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 
-import {AgGridReact} from "ag-grid-react";
+import {AgGridReact} from "@ag-grid-community/react";
 
-import assign from "lodash/assign";
-import uniq from "lodash/uniq";
+import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules";
 
 class FxQuoteMatrix extends Component {
     constructor(props) {
@@ -35,41 +34,47 @@ class FxQuoteMatrix extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        const newRowData = nextProps.rowData;
+        if (this.gridApi) {
+            const newRowData = nextProps.rowData;
 
-        const updatedRows = [];
+            const updatedRows = [];
 
-        for (let i = 0; i < newRowData.length; i++) {
-            let newRow = newRowData[i];
-            let currentRowNode = this.gridApi.getRowNode(newRow.symbol);
+            for (let i = 0; i < newRowData.length; i++) {
+                let newRow = newRowData[i];
+                let currentRowNode = this.gridApi.getRowNode(newRow.symbol);
 
-            const {data} = currentRowNode;
-            for (const def of this.state.columnDefs) {
-                if (data[def.field] !== newRow[def.field]) {
-                    updatedRows.push(newRow);
-                    break;
+                const {data} = currentRowNode;
+                for (const def of this.state.columnDefs) {
+                    if (data[def.field] !== newRow[def.field]) {
+                        updatedRows.push(newRow);
+                        break;
+                    }
                 }
             }
+
+
+            this.gridApi.updateRowData({update: updatedRows});
         }
 
-
-        this.gridApi.updateRowData({update: updatedRows});
-
     }
 
     render() {
         return (
             <div style={{height: 410, width: 800}}
-                 className="ag-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
-                    enableSorting="false"
-                    enableFilter="false"
+                    defaultColDef={{
+                        sortable: false,
+                        filter: false
+                    }}
 
                     // callbacks
                     getRowNodeId={this.getRowNodeId}
 
+                    modules={[ClientSideRowModelModule]}
+
                     // events
                     onGridReady={this.onGridReady}>
                 </AgGridReact>
@@ -81,7 +86,7 @@ class FxQuoteMatrix extends Component {
 export default connect(
     (state) => {
         return {
-            rowData: state.fxData
+            rowData: state ? state.fxData : null
         }
     }
 )(FxQuoteMatrix);

src-trader-dashboard/components/PriceChangesGrid.jsx

@@ -1,6 +1,7 @@
 import React, {Component} from "react";
 
-import {AgGridReact} from "ag-grid-react";
+import {AgGridReact} from "@ag-grid-community/react";
+import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules";
 
 import map from "lodash/map";
 import difference from "lodash/difference";
@@ -24,21 +25,21 @@ export default class extends Component {
                     field: 'price',
                     headerName: 'Price',
                     valueFormatter: this.numberFormatter,
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellStyle: {'text-align': 'right'}
                 },
                 {
                     field: 'bid',
                     headerName: 'Bid',
                     valueFormatter: this.numberFormatter,
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellStyle: {'text-align': 'right'}
                 },
                 {
                     field: 'ask',
                     headerName: 'Ask',
                     valueFormatter: this.numberFormatter,
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellStyle: {'text-align': 'right'}
                 }
             ]
@@ -151,13 +152,17 @@ export default class extends Component {
     render() {
         return (
             <div style={{height: 410, width: 800}}
-                 className="ag-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
-                    enableSorting="true"
+                    defaultColDef={{
+                        sortable: true
+                    }}
                     rowSelection="single"
 
+                    modules={[ClientSideRowModelModule]}
+
                     // callbacks
                     getRowNodeId={this.getRowNodeId}
 

src-trader-dashboard/components/TopMoversGrid.jsx

@@ -1,7 +1,8 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 
-import {AgGridReact} from "ag-grid-react";
+import {AgGridReact} from "@ag-grid-community/react";
+import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules";
 
 class TopMoversGrid extends Component {
     constructor(props) {
@@ -17,21 +18,21 @@ class TopMoversGrid extends Component {
                     field: 'last',
                     headerName: 'Last',
                     headerClass: 'align-right',
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellClass: 'align-right'
                 },
                 {
                     field: 'net',
                     headerName: 'Net',
                     headerClass: 'align-right',
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellClass: 'align-right'
                 },
                 {
                     field: 'pct_net_change',
                     headerName: '% NC',
                     headerClass: 'align-right',
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                     cellClass: 'align-right',
                     sort: 'desc',
                     valueFormatter(params) {
@@ -62,17 +63,21 @@ class TopMoversGrid extends Component {
     render() {
         return (
             <div style={{height: 410, width: 400}}
-                 className="ag-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
                     rowData={this.props.rowData}
-                    enableSorting
-                    enableFilter="false"
+                    defaultColDef={{
+                        sortable: true,
+                        filter: false
+                    }}
                     animateRows
                     deltaRowDataMode
                     getRowNodeId={this.getRowNodeId}
 
+                    modules={[ClientSideRowModelModule]}
+
                     // events
                     onGridReady={this.onGridReady}>
                 </AgGridReact>
@@ -84,7 +89,7 @@ class TopMoversGrid extends Component {
 export default connect(
     (state) => {
         return {
-            rowData: state.fxTopMovers
+            rowData: state ? state.fxTopMovers : null
         }
     }
 )(TopMoversGrid);

src-trader-dashboard/index.js

@@ -5,12 +5,12 @@ import {render} from "react-dom";
 
 import {Provider} from "react-redux";
 
-import "ag-grid/dist/styles/ag-grid.css";
-import "ag-grid/dist/styles/theme-fresh.css";
-
 import StoreService from './services/StoreService';
 import TraderDashboard from "./components/TraderDashboard.jsx";
 
+import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css";
+import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css";
+
 let store = StoreService.STORE;
 
 document.addEventListener('DOMContentLoaded', () => {

src-trader-dashboard/services/FxDataService.jsx

@@ -120,7 +120,7 @@ const FX_DELTA_HEADERS = [
         field: 'last',
         headerName: 'Last',
         headerClass: 'align-right',
-        cellRenderer: 'animateShowChange',
+        cellRenderer: 'agAnimateShowChangeCellRenderer',
         cellClass: 'align-right',
         width: 100
     },
@@ -128,7 +128,7 @@ const FX_DELTA_HEADERS = [
         field: 'net',
         headerName: 'Net',
         headerClass: 'align-right',
-        cellRenderer: 'animateShowChange',
+        cellRenderer: 'agAnimateShowChangeCellRenderer',
         cellClass: 'align-right',
         width: 90
     },
@@ -145,7 +145,7 @@ const FX_DELTA_HEADERS = [
         headerName: symbol,
         width: 67,
         cellClass: 'align-right',
-        cellRenderer: 'animateShowChange',
+        cellRenderer: 'agAnimateShowChangeCellRenderer',
         cellClassRules: {
             'fx-positive': 'x > 0.8',
             'fx-null': 'x === null',

ts-tests/InvalidGridProperty.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import {AgGridReact} from '@ag-grid-community/react';
+
+export const App: React.FunctionComponent = () => <AgGridReact invalidProperty columnDefs={[]} rowData={[]}/>;

ts-tests/SimpleFunctionalGrid.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import {AgGridReact} from '@ag-grid-community/react';
+
+export const App: React.FunctionComponent = () => <AgGridReact columnDefs={[]} rowData={[]}/>;

ts-tests/runTsTests.sh

@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+
+# here as a quick ts test for use in the CI
+# in time this will be removed the full battery of tests be moved to a centralised location
+
+error_found=false
+
+# has an invalid property - should complain
+./node_modules/.bin/tsc --target "ES5" --module 'commonjs' --lib esnext,dom --allowSyntheticDefaultImports --jsx 'preserve' --noEmit --strict ts-tests/InvalidGridProperty.tsx &> /dev/null
+if [ $? -ne 1 ]; then
+    echo "ag-grid-react grid with invalid property should throw a compiler error"
+    error_found=true
+fi
+
+# a valid grid - no errors should be emitted
+./node_modules/.bin/tsc --target "ES5" --module 'commonjs' --lib esnext,dom --allowSyntheticDefaultImports --jsx 'preserve' --noEmit --strict ts-tests/SimpleFunctionalGrid.tsx &> /dev/null
+if [ $? -ne 0 ]; then
+    echo "valid ag-grid-react grid should compile"
+    error_found=true
+fi
+
+if [ "$error_found" = true ]; then
+    exit 1
+fi
+
+exit 0