AG-2490 Regression Testing - Header component example isn't working

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!

config/webpack.config.examples.js

@@ -3,42 +3,49 @@ 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-community": path.resolve('./node_modules/ag-grid-community'),
             "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": path.resolve('./node_modules/ag-grid-community'),
             "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": path.resolve('./node_modules/ag-grid-community'),
             "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": "17.1.0",
+  "version": "20.0.0",
   "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",
@@ -37,39 +37,36 @@
   },
   "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",
+    "@babel/core": "7.2.2",
+    "babel-loader": "8.0.4",
+    "@babel/preset-env": "7.2.3",
+    "@babel/preset-react": "7.0.0",
+    "@babel/plugin-proposal-class-properties": "7.2.3",
+    "@babel/plugin-proposal-function-bind": "7.2.0",
+    "css-loader": "2.1.0",
+    "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.6.2",
+    "rimraf": "~2.6.2",
+    "style-loader": "~0.23.0",
+    "webpack": "4.28.3",
+    "webpack-cli": "3.2.0",
+    "webpack-dev-server": "3.1.14"
   },
   "dependencies": {
-    "ag-grid": "^18.0.0",
-    "ag-grid-enterprise": "^18.0.0",
-    "ag-grid-react": "^18.0.0",
-    "bootstrap": "3.3.7",
+    "ag-grid-community": "^20.0.0",
+    "ag-grid-enterprise": "^20.0.0",
+    "ag-grid-react": "^20.0.0",
+    "bootstrap": "4.1.3",
     "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.7.0",
+    "react-dom": "16.7.0",
+    "react-redux": "6.0.0",
+    "react-router-dom": "4.3.1",
+    "redux": "4.0.1"
   }
-}
+}

src-examples/App.jsx

@@ -8,7 +8,7 @@ import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/Simp
 
 const SideBar = () => (
     <div style={{float: "left", width: 335, marginRight: 25}}>
-        <ul className="nav nav-pills nav-stacked">
+        <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>
         </ul>

src-examples/NavItem.jsx

@@ -6,8 +6,8 @@ import {Link, Route} from 'react-router-dom'
 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

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <script type="text/javascript" src="../dist/react-examples.js" charset="utf-8"></script>
     <!-- Example uses font awesome icons -->
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
 
     <style>
         html, body {
@@ -16,6 +16,10 @@
             line-height: 1
         }
 
+        h1 {
+            font-size: 1.5rem;
+        }
+
         div.card-body > a {
             margin-top: 5px
         }

src-examples/index.js

@@ -4,8 +4,8 @@ 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/ag-theme-balham.css";
+import "ag-grid-community/dist/styles/ag-grid.css";
+import "ag-grid-community/dist/styles/ag-theme-balham.css";
 import "../node_modules/bootstrap/dist/css/bootstrap.css";
 
 import App from "./App";

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/RichGridDeclarativeExample.jsx

@@ -22,15 +22,15 @@ export default class RichGridDeclarativeExample extends Component {
 
         this.state = {
             quickFilterText: null,
-            showToolPanel: false,
+            sideBar: false,
             rowData: new RowDataFactory().createRowData(),
             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"/>',
-                groupExpanded: '<i class="fa fa-minus-square-o"/>',
-                groupContracted: '<i class="fa fa-plus-square-o"/>'
+                sortAscending: '<i class="fa fa-long-arrow-alt-down"/>',
+                sortDescending: '<i class="fa fa-long-arrow-alt-up"/>',
+                groupExpanded: '<i class="far fa-minus-square"/>',
+                groupContracted: '<i class="far fa-plus-square"/>'
             }
         };
     }
@@ -50,8 +50,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() {
@@ -142,8 +142,8 @@ export default class RichGridDeclarativeExample extends Component {
                     <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
+                                <input type="checkbox" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
+                                Show Side Bar
                             </label>
                         </div>
                         <div style={{float: "left", marginLeft: 20}}>
@@ -157,7 +157,7 @@ export default class RichGridDeclarativeExample extends Component {
                             <button onClick={this.invokeSkillsFilterMethod}
                                     className="btn btn-primary">Invoke Skills Filter Method
                             </button>
-                            <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß
+                            <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000
                             </button>
                         </div>
                     </div>
@@ -169,7 +169,7 @@ export default class RichGridDeclarativeExample extends Component {
                             onCellClicked={this.onCellClicked}
 
                             // binding to simple properties
-                            showToolPanel={this.state.showToolPanel}
+                            sideBar={this.state.sideBar}
                             quickFilterText={this.state.quickFilterText}
 
                             // binding to an object property
@@ -179,12 +179,9 @@ export default class RichGridDeclarativeExample extends Component {
                             rowData={this.state.rowData}
 
                             // 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
 
@@ -193,6 +190,9 @@ export default class RichGridDeclarativeExample extends Component {
 
                             // setting default column properties
                             defaultColDef={{
+                                resizable: true,
+                                sortable: true,
+                                filter: true,
                                 headerComponentFramework: SortableHeaderComponent,
                                 headerComponentParams: {
                                     menuIcon: 'fa-bars'
@@ -200,7 +200,7 @@ export default class RichGridDeclarativeExample extends Component {
                             }}
                         >
                             <AgGridColumn headerName="#" width={30}
-                                          checkboxSelection suppressSorting suppressMenu suppressFilter pinned>
+                                          checkboxSelection sortable={false} suppressMenu filter={false} pinned>
                             </AgGridColumn>
                             <AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
                                 <AgGridColumn field="name" width={150}
@@ -218,10 +218,10 @@ export default class RichGridDeclarativeExample extends Component {
                                               cellRenderer={RichGridDeclarativeExample.dateCellRenderer}/>
                             </AgGridColumn>
                             <AgGridColumn headerName="IT Skills">
-                                <AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting
+                                <AgGridColumn field="skills" width={120} enableRowGroup enablePivot sortable={false}
                                               cellRendererFramework={SkillsCellRenderer}
                                               filterFramework={SkillsFilter}/>
-                                <AgGridColumn field="proficiency" width={135} enableValue
+                                <AgGridColumn field="proficiency" width={160} enableValue
                                               cellRendererFramework={ProficiencyCellRenderer}
                                               filterFramework={ProficiencyFilter}/>
                             </AgGridColumn>
@@ -232,7 +232,7 @@ export default class RichGridDeclarativeExample extends Component {
                             </AgGridColumn>
                         </AgGridReact>
                     </div>
-                    <div>
+                    <div style={{marginTop: 10}}>
                         <div className="row">
                             <div className="col-sm-12"><h1>Rich Grid with Declarative Markup Example</h1></div>
                         </div>
@@ -247,10 +247,10 @@ export default class RichGridDeclarativeExample extends Component {
                                     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,
+                                <p><span style={{fontWeight: 500}}>Toggle The Side Bar</span>: Let your users Pivot,
                                     Group
                                     and
-                                    Aggregate using the Tool Panel</p>
+                                    Aggregate using the Side Bar</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
@@ -322,12 +322,11 @@ export default class RichGridDeclarativeExample extends Component {
                             <div className="col-sm-4">
                                 <div className="card">
                                     <div className="card-body">
-                                        <h4 className="card-title">Tool Panel</h4>
+                                        <h4 className="card-title">Side Bar</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>
+                                            Side Bar</p>
+                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-side-bar/"
+                                           className="btn btn-primary">Side Bar</a>
                                     </div>
                                 </div>
                             </div>

src-examples/richGridDeclarativeExample/SortableHeaderComponent.jsx

@@ -30,10 +30,10 @@ export default class SortableHeaderComponent extends React.Component {
 
             sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass}
                                    onClick={this.onSortRequested.bind(this, 'desc')}><i
-                className="fa fa-long-arrow-down"/></div>);
+                className="fa fa-long-arrow-alt-down"/></div>);
             sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass}
                                    onClick={this.onSortRequested.bind(this, 'asc')}><i
-                className="fa fa-long-arrow-up"/></div>);
+                className="fa fa-long-arrow-alt-up"/></div>);
             sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass}
                                    onClick={this.onSortRequested.bind(this, '')}><i
                 className="fa fa-times"/></div>)

src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from "react";
+import {connect} from "react-redux";
 
 import {AgGridReact} from "ag-grid-react";
-import {connect} from "react-redux";
 
 import PriceRenderer from "./PriceRenderer";
 
@@ -45,6 +45,8 @@ class GridComponent extends Component {
                     columnDefs={this.state.columnDefs}
                     rowData={this.props.rowData}
 
+                    reactNext={true}
+
                     // events
                     onGridReady={this.onGridReady}>
                 </AgGridReact>

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 GridOptions.reactNext
 )(PriceRenderer);

src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx

@@ -9,6 +9,8 @@ import GridComponent from "./GridComponent";
 
 import gridData from "./gridDataReducer";
 
+import FontContext from './fontContext'
+
 let store = createStore(gridData);
 
 /*
@@ -26,7 +28,9 @@ export default class SimpleReduxExample extends Component {
                 <div>
                     <h1>Simple Redux Example using Connected React Components</h1>
                     <HeaderComponent/>
-                    <GridComponent/>
+                    <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-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/dist/styles/ag-grid.css';
+import 'ag-grid-community/dist/styles/ag-theme-fresh.css';
 
 // waiting for dom to load before booting react. we could alternatively
 // put the index.js reference at the end fo the index.html, but i prefer this way.

src-large-data/largeGrid.jsx

@@ -61,7 +61,7 @@ export default class MyApp extends Component {
 
     render() {
         return (
-            <div style={{height: '100%'}} className="ag-fresh">
+            <div style={{height: '100%'}} className="ag-theme-fresh">
                 <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData}/>
             </div>
         );

src-trader-dashboard/components/FxQuoteMatrix.jsx

@@ -3,9 +3,6 @@ import {connect} from "react-redux";
 
 import {AgGridReact} from "ag-grid-react";
 
-import assign from "lodash/assign";
-import uniq from "lodash/uniq";
-
 class FxQuoteMatrix extends Component {
     constructor(props) {
         super(props);
@@ -35,37 +32,41 @@ 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-fresh">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
-                    enableSorting="false"
-                    enableFilter="false"
+                    defaultColDef={{
+                        sortable: false,
+                        filter: false
+                    }}
 
                     // callbacks
                     getRowNodeId={this.getRowNodeId}
@@ -81,7 +82,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

@@ -24,21 +24,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,11 +151,13 @@ export default class extends Component {
     render() {
         return (
             <div style={{height: 410, width: 800}}
-                 className="ag-fresh">
+                 className="ag-theme-fresh">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
-                    enableSorting="true"
+                    defaultColDef={{
+                        sortable: true
+                    }}
                     rowSelection="single"
 
                     // callbacks

src-trader-dashboard/components/TopMoversGrid.jsx

@@ -17,21 +17,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,13 +62,15 @@ class TopMoversGrid extends Component {
     render() {
         return (
             <div style={{height: 410, width: 400}}
-                 className="ag-fresh">
+                 className="ag-theme-fresh">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
                     rowData={this.props.rowData}
-                    enableSorting
-                    enableFilter="false"
+                    defaultColDef={{
+                        sortable: true,
+                        filter: false
+                    }}
                     animateRows
                     deltaRowDataMode
                     getRowNodeId={this.getRowNodeId}
@@ -84,7 +86,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,8 +5,8 @@ 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 "ag-grid-community/dist/styles/ag-grid.css";
+import "ag-grid-community/dist/styles/ag-theme-fresh.css";
 
 import StoreService from './services/StoreService';
 import TraderDashboard from "./components/TraderDashboard.jsx";

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',