7.3.0

2017-01-18 16:33:09 +00:00
106 changed files with 580 additions and 3536 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,2 @@
 /node_modules
 /dist
-package-lock.json
-*.nosync
--- a/README.md
+++ b/README.md
@@ -1,18 +1,22 @@
+
 ag-Grid React Example
 ==============

-## Examples
+Examples of running ag-Grid inside React application.
+
+See the [www.ag-grid.com](http://www.ag-grid.com).
+
+There are two 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 run examples`, `npm run large` or `npm run trader`
+- `npm install webpack -g`
+- `npm run standard` or `npm run large`
 - navigate to localhost:8080
--- a/config/webpack.config.examples.js
+++ b/config/webpack.config.examples.js
@@ -1,52 +0,0 @@
-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: {
-        rules: [
-            {
-                test: /\.css$/,
-                loader: "style-loader!css-loader"
-            },
-            {
-                test: /\.js$|\.jsx$/,
-                include: SRC_DIR,
-                loader: 'babel-loader',
-                query: {
-                    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-loader?name=[path]/[name].[ext]'
-            }
-        ]
-    },
-    resolve: {
-        alias: {
-            // "@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']
-    },
-    performance: {
-        hints: false
-    },
-    devServer: {
-        port: 8080,
-        historyApiFallback: true
-    }
-};
--- a/config/webpack.config.large.js
+++ b/config/webpack.config.large.js
@@ -1,46 +0,0 @@
-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: {
-        rules: [
-            {
-                test: /\.css$/,
-                loader: "style-loader!css-loader"
-            },
-            {
-                test: /\.js$|\.jsx$/,
-                include: SRC_DIR,
-                loader: 'babel-loader',
-                query: {
-                    presets: ['@babel/preset-react', '@babel/preset-env'],
-                    plugins: [
-                        require('@babel/plugin-proposal-function-bind'),
-                        require('@babel/plugin-proposal-class-properties')
-                    ]
-                }
-            }
-        ]
-    },
-    resolve: {
-        alias: {
-            "@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']
-    },
-    performance: {
-        hints: false
-    },
-    devServer: {
-        port: 8080,
-    }
-};
--- a/config/webpack.config.trader.js
+++ b/config/webpack.config.trader.js
@@ -1,46 +0,0 @@
-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: {
-        rules: [
-            {
-                test: /\.css$/,
-                loader: "style-loader!css-loader"
-            },
-            {
-                test: /\.js$|\.jsx$/,
-                include: SRC_DIR,
-                loader: 'babel-loader',
-                query: {
-                    presets: ['@babel/preset-react', '@babel/preset-env'],
-                    plugins: [
-                        require('@babel/plugin-proposal-function-bind'),
-                        require('@babel/plugin-proposal-class-properties')
-                    ]
-                }
-            }
-        ]
-    },
-    resolve: {
-        alias: {
-            "@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']
-    },
-    performance: {
-        hints: false
-    },
-    devServer: {
-        port: 8080,
-    }
-};
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,26 +0,0 @@
-const gulp = require('gulp');
-const gulpTypescript = require('gulp-typescript');
-const merge = require('merge2');
-
-gulp.task('watch', watchTask);
-gulp.task('rebuild-ag-grid-react', rebuildAgGridReact);
-
-const tsConfig = '../ag-grid-react/tsconfig.json';
-const tsProject = gulpTypescript.createProject(tsConfig);
-
-function rebuildAgGridReact() {
-    const tsResult = gulp
-        .src('../ag-grid-react/src/**/*.ts')
-        .pipe(tsProject());
-
-    return merge([
-        tsResult.dts
-            .pipe(gulp.dest('node_modules/ag-grid-react/lib')),
-        tsResult.js
-            .pipe(gulp.dest('node_modules/ag-grid-react/lib'))
-    ]);
-}
-
-function watchTask() {
-    gulp.watch(['../ag-grid-react/src/**/*'], rebuildAgGridReact);
-}
--- a/src-examples/images/skills/android.png
+++ b/src-examples/images/skills/android.png
--- a/src-examples/images/skills/css.png
+++ b/src-examples/images/skills/css.png
--- a/src-examples/images/skills/html5.png
+++ b/src-examples/images/skills/html5.png
--- a/src-examples/images/skills/mac.png
+++ b/src-examples/images/skills/mac.png
--- a/src-examples/images/skills/windows.png
+++ b/src-examples/images/skills/windows.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,25 @@
+<html>
+
+    <!-- This index file is common for both the standard and large examples. As to which project you are running
+        depends on whether you use 'npm run standard' or 'npm run large' -->
+
+    <head>
+        <meta charset="utf-8">
+        <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
+        <!-- Example uses font awesome icons -->
+        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    </head>
+
+    <!-- Put some spacing around the buttons - not needed, just makes it look nice -->
+    <style>
+        button {
+            margin-left: 4px;
+            margin-right: 4px;
+        }
+    </style>
+
+    <body>
+        <div id="myAppContainer"></div>
+    </body>
+
+</html>
--- a/package.json
+++ b/package.json
@@ -1,30 +1,16 @@
 {
  "name": "ag-grid-react-example",
-  "version": "23.0.2",
+  "version": "7.3.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 --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",
-    "copy-trader": "ncp src-trader-dashboard/index.html dist/trader/index.html && ncp dist/react-trader.js dist/trader/dist/react-trader.js",
-    "copy": "npm run copy-examples && npm run copy-trader",
-    "build-large": "webpack --config config/webpack.config.large.js --progress --profile --bail",
-    "build-examples": "webpack --config config/webpack.config.examples.js --progress --profile --bail",
-    "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",
-    "start": "npm run examples",
-    "test": "./ts-tests/runTsTests.sh"
+    "standard": "webpack-dev-server --config webpack.config.standard.js --progress --colors --hot --inline",
+    "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline"
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/ag-grid/ag-grid-react-example.git"
+    "url": "https://github.com/ceolter/ag-grid-react-example.git"
  },
-  "private": true,
  "keywords": [
    "react",
    "grid",
@@ -34,43 +20,24 @@
  "author": "Niall Crosby <niall.crosby@gmail.com>",
  "license": "MIT",
  "bugs": {
-    "url": "https://github.com/ag-grid/ag-grid-react-example/issues"
+    "url": "https://github.com/ceolter/ag-grid-react-example/issues"
  },
  "homepage": "http://www.ag-grid.com/",
  "devDependencies": {
-    "@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.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"
+    "babel-loader": "6.2.1",
+    "babel-preset-es2015": "6.3.13",
+    "babel-preset-react": "6.3.13",
+    "babel-core": "^6.0.0",
+    "css-loader": "0.23.1",
+    "style-loader": "0.13.0",
+    "webpack": "1.12.11",
+    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
-    "@ag-grid-enterprise/all-modules": "~23.0.0",
-    "@ag-grid-community/react": "~23.0.0",
-    "bootstrap": "4.4.1",
-    "d3": "4.9.1",
-    "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"
+    "react": "0.14.6",
+    "react-dom": "0.14.6",
+    "ag-grid": "7.3.x",
+    "ag-grid-enterprise": "7.3.x",
+    "ag-grid-react": "7.3.x"
  }
-}
+}
--- a/src-examples/App.jsx
+++ b/src-examples/App.jsx
@@ -1,37 +0,0 @@
-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">
-            <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 {
-    render() {
-        return (
-            <div style={{display: "inline-block", width: "100%"}}>
-                <SideBar/>
-                <div style={{float: "left"}}>
-                    <Switch>
-                        <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>
-        )
-    }
-}
-
-export default App
--- a/src-examples/NavItem.jsx
+++ b/src-examples/NavItem.jsx
@@ -1,20 +0,0 @@
-import React from 'react'
-import * as PropTypes from 'prop-types';
-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="nav-item">
-                <Link className={match ? 'nav-link active' : 'nav-link'} to={to}>{children}</Link>
-            </li>
-        )}/>
-    )
-}
-
-NavItem.propTypes = {
-    to: PropTypes.string.isRequired,
-    exact: PropTypes.bool,
-    children: PropTypes.node.isRequired,
-};
--- a/src-examples/images/alberto.png
+++ b/src-examples/images/alberto.png
--- a/src-examples/images/favicon.ico
+++ b/src-examples/images/favicon.ico
--- a/src-examples/images/fire.png
+++ b/src-examples/images/fire.png
--- a/src-examples/images/flags/ar.png
+++ b/src-examples/images/flags/ar.png
--- a/src-examples/images/flags/br.png
+++ b/src-examples/images/flags/br.png
--- a/src-examples/images/flags/co.png
+++ b/src-examples/images/flags/co.png
--- a/src-examples/images/flags/de.png
+++ b/src-examples/images/flags/de.png
--- a/src-examples/images/flags/es.png
+++ b/src-examples/images/flags/es.png
--- a/src-examples/images/flags/fr.png
+++ b/src-examples/images/flags/fr.png
--- a/src-examples/images/flags/gb.png
+++ b/src-examples/images/flags/gb.png
--- a/src-examples/images/flags/gr.png
+++ b/src-examples/images/flags/gr.png
--- a/src-examples/images/flags/ie.png
+++ b/src-examples/images/flags/ie.png
--- a/src-examples/images/flags/is.png
+++ b/src-examples/images/flags/is.png
--- a/src-examples/images/flags/it.png
+++ b/src-examples/images/flags/it.png
--- a/src-examples/images/flags/mt.png
+++ b/src-examples/images/flags/mt.png
--- a/src-examples/images/flags/no.png
+++ b/src-examples/images/flags/no.png
--- a/src-examples/images/flags/pe.png
+++ b/src-examples/images/flags/pe.png
--- a/src-examples/images/flags/pt.png
+++ b/src-examples/images/flags/pt.png
--- a/src-examples/images/flags/se.png
+++ b/src-examples/images/flags/se.png
--- a/src-examples/images/flags/uy.png
+++ b/src-examples/images/flags/uy.png
--- a/src-examples/images/flags/ve.png
+++ b/src-examples/images/flags/ve.png
--- a/src-examples/images/frost.png
+++ b/src-examples/images/frost.png
--- a/src-examples/images/horse.png
+++ b/src-examples/images/horse.png
--- a/src-examples/images/niall.png
+++ b/src-examples/images/niall.png
--- a/src-examples/images/phone.png
+++ b/src-examples/images/phone.png
--- a/src-examples/images/sean.png
+++ b/src-examples/images/sean.png
--- a/src-examples/images/smiley-sad.png
+++ b/src-examples/images/smiley-sad.png
--- a/src-examples/images/smiley.png
+++ b/src-examples/images/smiley.png
--- a/src-examples/images/statue.png
+++ b/src-examples/images/statue.png
--- a/src-examples/images/sun.png
+++ b/src-examples/images/sun.png
--- a/src-examples/index.html
+++ b/src-examples/index.html
@@ -1,136 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <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">
-
-    <style>
-        html, body {
-            height: 100%;
-        }
-
-        body {
-            line-height: 1
-        }
-
-        h1 {
-            font-size: 1.5rem;
-        }
-
-        div.card-body > a {
-            margin-top: 5px
-        }
-
-        .btn-primary {
-            margin-right: 5px;
-        }
-
-        button {
-            margin-left: 4px;
-            margin-right: 4px;
-        }
-
-        .align-right {
-            text-align: right
-        }
-
-        .customHeaderMenuButton {
-            margin-left: 4px;
-            float: left;
-        }
-
-        .customHeaderLabel {
-            margin-left: 5px;
-            float: left;
-        }
-
-        .customSortDownLabel {
-            float: left;
-            margin-left: 10px;
-        }
-
-        .customSortUpLabel {
-            float: left;
-            margin-left: 3px;
-        }
-
-        .customSortRemoveLabel {
-            float: left;
-            font-size: 11px;
-            margin-left: 3px;
-        }
-
-        .active {
-            color: cornflowerblue;
-        }
-
-        .hidden {
-            display: none;
-        }
-
-        .customHeaderLabel {
-            margin-left: 5px;
-            float: left;
-        }
-
-        .customExpandButton {
-            float: right;
-            margin-left: 3px;
-        }
-
-        .expanded {
-            animation-name: toExpanded;
-            animation-duration: 1s;
-            -ms-transform: rotate(180deg); /* IE 9 */
-            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-            transform: rotate(180deg);
-        }
-
-        .collapsed {
-            color: cornflowerblue;
-            animation-name: toCollapsed;
-            animation-duration: 1s;
-            -ms-transform: rotate(0deg); /* IE 9 */
-            -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
-            transform: rotate(0deg);
-        }
-
-        @keyframes toExpanded {
-            from {
-                color: cornflowerblue;
-                -ms-transform: rotate(0deg); /* IE 9 */
-                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
-                transform: rotate(0deg);
-            }
-            to {
-                color: black;
-                -ms-transform: rotate(180deg); /* IE 9 */
-                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-                transform: rotate(180deg);
-            }
-        }
-
-        @keyframes toCollapsed {
-            from {
-                color: black;
-                -ms-transform: rotate(180deg); /* IE 9 */
-                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-                transform: rotate(180deg);
-            }
-            to {
-                color: cornflowerblue;
-                -ms-transform: rotate(0deg); /* IE 9 */
-                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
-                transform: rotate(0deg);
-            }
-        }
-    </style>
-</head>
-
-<body>
-<div id="app"></div>
-</body>
-</html>
--- a/src-examples/index.js
+++ b/src-examples/index.js
@@ -1,25 +0,0 @@
-'use strict';
-
-import React from "react";
-import {render} from "react-dom";
-import {BrowserRouter} from "react-router-dom";
-
-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/all-modules";
-// LicenseManager.setLicenseKey("<your license key>");
-
-document.addEventListener('DOMContentLoaded', () => {
-    render(
-        <BrowserRouter>
-            <App/>
-        </BrowserRouter>,
-        document.querySelector('#app')
-    );
-});
-
--- a/src-examples/richGridDeclarativeExample/DateComponent.jsx
+++ b/src-examples/richGridDeclarativeExample/DateComponent.jsx
@@ -1,171 +0,0 @@
-import React from "react";
-import * as PropTypes from "prop-types";
-
-// Date Component to be used in the date filter.
-// This is a very simple example of how a React component can be plugged as a DateComponentFramework
-// as you can see, the only requirement is that the React component implements the required methods
-// getDate and setDate and that it calls back into props.onDateChanged every time that the date changes.
-export default class DateComponent extends React.Component {
-
-    constructor(props) {
-        super(props);
-        //The state of this component is represented of:
-        //  The current date it holds, null by default, null if the date typed by the user is not valid or fields are blank
-        //  The current values that the user types in the input boxes, by default ''
-
-        //The textBoxes state is necessary since it can be set from ag-Grid. This can be seen in this example through
-        // the usage of the button DOB equals to 01/01/2000 in the example page.
-        this.state = {
-            date: null,
-            textBoxes: {
-                dd: '',
-                mm: '',
-                yyyy: ''
-            }
-        }
-    }
-
-    render() {
-        //Inlining styles to make simpler the component
-        let filterStyle = {
-            margin: '2px'
-        };
-        let ddStyle = {
-            width: '30px'
-        };
-        let mmStyle = {
-            width: '30px'
-        };
-        let yyyyStyle = {
-            width: '40px'
-        };
-        let resetStyle = {
-            padding: '2px',
-            backgroundColor: 'red',
-            borderRadius: '3px',
-            fontSize: '10px',
-            marginRight: '5px',
-            color: 'white'
-        };
-
-        return (
-            <div style={filterStyle}>
-                <span style={resetStyle} onClick={this.resetDate.bind(this)}>x</span>
-                <input onChange={this.onDateChanged.bind(this)} ref="dd" placeholder="dd" style={ddStyle}
-                       value={this.state.textBoxes.dd} maxLength="2"/>/
-                <input onChange={this.onDateChanged.bind(this)} ref="mm" placeholder="mm" style={mmStyle}
-                       value={this.state.textBoxes.mm} maxLength="2"/>/
-                <input onChange={this.onDateChanged.bind(this)} ref="yyyy" placeholder="yyyy" style={yyyyStyle}
-                       value={this.state.textBoxes.yyyy} maxLength="4"/>
-            </div>
-        );
-    }
-
-    //*********************************************************************************
-    //          METHODS REQUIRED BY AG-GRID
-    //*********************************************************************************
-
-    getDate() {
-        //ag-grid will call us here when in need to check what the current date value is hold by this
-        //component.
-        return this.state.date;
-    }
-
-    setDate(date) {
-        //ag-grid will call us here when it needs this component to update the date that it holds.
-        this.setState({
-            date,
-            textBoxes: {
-                dd: date ? date.getDate() : '',
-                mm: date ? date.getMonth() + 1 : '',
-                yyyy: date ? date.getFullYear() : ''
-            }
-        })
-    }
-
-    //*********************************************************************************
-    //          LINKS THE INTERNAL STATE AND AG-GRID
-    //*********************************************************************************
-
-    updateAndNotifyAgGrid(date, textBoxes) {
-        this.setState({
-                date: date,
-                textBoxes: textBoxes
-            },
-            //Callback after the state is set. This is where we tell ag-grid that the date has changed so
-            //it will proceed with the filtering and we can then expect ag-Grid to call us back to getDate
-            this.props.onDateChanged
-        );
-    }
-
-
-    //*********************************************************************************
-    //          LINKING THE UI, THE STATE AND AG-GRID
-    //*********************************************************************************
-
-    resetDate() {
-        let date = null;
-        let textBoxes = {
-            dd: '',
-            mm: '',
-            yyyy: '',
-        };
-
-        this.updateAndNotifyAgGrid(date, textBoxes)
-    }
-
-    onDateChanged() {
-        let date = this.parseDate(this.refs.dd.value, this.refs.mm.value, this.refs.yyyy.value);
-        let textBoxes = {
-            dd: this.refs.dd.value,
-            mm: this.refs.mm.value,
-            yyyy: this.refs.yyyy.value,
-        };
-
-        this.updateAndNotifyAgGrid(date, textBoxes)
-    }
-
-    //*********************************************************************************
-    //          INTERNAL LOGIC
-    //*********************************************************************************
-
-    parseDate(dd, mm, yyyy) {
-        //If any of the three input date fields are empty, stop and return null
-        if (dd.trim() === '' || mm.trim() === '' || yyyy.trim() === '') {
-            return null;
-        }
-
-        let day = Number(dd);
-        let month = Number(mm);
-        let year = Number(yyyy);
-
-        let date = new Date(year, month - 1, day);
-
-        //If the date is not valid
-        if (isNaN(date.getTime())) {
-            return null;
-        }
-
-        //Given that new Date takes any garbage in, it is possible for the user to specify a new Date
-        //like this (-1, 35, 1) and it will return a valid javascript date. In this example, it will
-        //return Sat Dec 01    1 00:00:00 GMT+0000 (GMT) - Go figure...
-        //To ensure that we are not letting non sensical dates to go through we check that the resultant
-        //javascript date parts (month, year and day) match the given date fields provided as parameters.
-        //If the javascript date parts don't match the provided fields, we assume that the input is non
-        //sensical... ie: Day=-1 or month=14, if this is the case, we return null
-        //This also protects us from non sensical dates like dd=31, mm=2 of any year
-        if (date.getDate() != day || date.getMonth() + 1 != month || date.getFullYear() != year) {
-            return null;
-        }
-
-        return date;
-    }
-}
-
-// the grid will always pass in one props called 'params',
-// which is the grid passing you the params for the cellRenderer.
-// this piece is optional. the grid will always pass the 'params'
-// props, so little need for adding this validation meta-data.
-DateComponent.propTypes = {
-    params: PropTypes.object
-};
--- a/src-examples/richGridDeclarativeExample/HeaderGroupComponent.jsx
+++ b/src-examples/richGridDeclarativeExample/HeaderGroupComponent.jsx
@@ -1,46 +0,0 @@
-import React from 'react';
-import * as PropTypes from 'prop-types';
-
-// Header component to be used as default for all the columns.
-export default class HeaderGroupComponent extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.props.columnGroup.getOriginalColumnGroup().addEventListener('expandedChanged', this.onExpandChanged.bind(this));
-        this.state = {
-            expanded: null
-        };
-    }
-
-    componentDidMount() {
-        this.onExpandChanged();
-    }
-
-    render() {
-        let arrowClassName = "customExpandButton " + (this.state.expanded ? " expanded" : " collapsed");
-
-        return <div>
-            <div className="customHeaderLabel"> {this.props.displayName}</div>
-            <div onClick={this.expandOrCollapse.bind(this)} className={arrowClassName}><i
-                className="fa fa-arrow-right"/></div>
-        </div>
-    }
-
-    expandOrCollapse() {
-        this.props.setExpanded(!this.state.expanded);
-    };
-
-    onExpandChanged() {
-        this.setState({
-            expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded()
-        })
-    }
-}
-
-// the grid will always pass in one props called 'params',
-// which is the grid passing you the params for the cellRenderer.
-// this piece is optional. the grid will always pass the 'params'
-// props, so little need for adding this validation meta-data.
-HeaderGroupComponent.propTypes = {
-    params: PropTypes.object
-};
--- a/src-examples/richGridDeclarativeExample/RefData.js
+++ b/src-examples/richGridDeclarativeExample/RefData.js
@@ -1,129 +0,0 @@
-export default class RefData {
-}
-
-RefData.FIRST_NAMES = [
-    "Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella",
-    "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby",
-    "Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla"
-];
-
-RefData.LAST_NAMES = [
-    "Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell",
-    "Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane",
-    "Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner",
-    "Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane",
-    "Keating", "Keegan", "Kingston", "Kobe"
-];
-
-RefData.COUNTRY_CODES = {
-    Ireland: "ie",
-    Spain: "es",
-    "United Kingdom": "gb",
-    France: "fr",
-    Germany: "de",
-    Sweden: "se",
-    Italy: "it",
-    Greece: "gr",
-    Iceland: "is",
-    Portugal: "pt",
-    Malta: "mt",
-    Norway: "no",
-    Brazil: "br",
-    Argentina: "ar",
-    Colombia: "co",
-    Peru: "pe",
-    Venezuela: "ve",
-    Uruguay: "uy"
-};
-
-RefData.COUNTRIES = [
-    {country: "Ireland", continent: "Europe", language: "English"},
-    {country: "Spain", continent: "Europe", language: "Spanish"},
-    {country: "United Kingdom", continent: "Europe", language: "English"},
-    {country: "France", continent: "Europe", language: "French"},
-    {country: "Germany", continent: "Europe", language: "(other)"},
-    {country: "Sweden", continent: "Europe", language: "(other)"},
-    {country: "Norway", continent: "Europe", language: "(other)"},
-    {country: "Italy", continent: "Europe", language: "(other)"},
-    {country: "Greece", continent: "Europe", language: "(other)"},
-    {country: "Iceland", continent: "Europe", language: "(other)"},
-    {country: "Portugal", continent: "Europe", language: "Portuguese"},
-    {country: "Malta", continent: "Europe", language: "(other)"},
-    {country: "Brazil", continent: "South America", language: "Portuguese"},
-    {country: "Argentina", continent: "South America", language: "Spanish"},
-    {country: "Colombia", continent: "South America", language: "Spanish"},
-    {country: "Peru", continent: "South America", language: "Spanish"},
-    {country: "Venezuela", continent: "South America", language: "Spanish"},
-    {country: "Uruguay", continent: "South America", language: "Spanish"}
-];
-
-RefData.DOB = [
-    new Date(2000, 0, 1),
-    new Date(2001, 1, 2),
-    new Date(2002, 2, 3),
-    new Date(2003, 3, 4),
-    new Date(2004, 4, 5),
-    new Date(2005, 5, 6),
-    new Date(2006, 6, 7),
-    new Date(2007, 7, 8),
-    new Date(2008, 8, 9),
-    new Date(2009, 9, 10),
-    new Date(2010, 10, 11),
-    new Date(2011, 11, 12)
-];
-
-RefData.ADDRESSES = [
-    '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763',
-    '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215',
-    '3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186',
-    '2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634',
-    '2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597',
-    '6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911',
-    '2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959',
-    '7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160',
-    '3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609',
-    '4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673',
-    '5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245',
-    '8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767',
-    '2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206',
-    '7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348',
-    '874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207',
-    '8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213',
-    '9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161',
-    '3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526',
-    '3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671',
-    '1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310',
-    '1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883',
-    '9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192',
-    '7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838',
-    '1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730',
-    '126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956',
-    '6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257',
-    '960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219',
-    '6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427',
-    '2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355',
-    '5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225',
-    '5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706',
-    '5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596',
-    '7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360',
-    '8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859',
-    '5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322',
-    '6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239',
-    '7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092',
-    '9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973',
-    '3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349',
-    '4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138',
-    '6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063',
-    '9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024',
-    '6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288',
-    '237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157',
-    '446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553',
-    '2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445',
-    '365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958',
-    '1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888',
-    '6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018',
-    '7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433'];
-
-RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows'];
-
-RefData.IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows'];
--- a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
+++ b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
@@ -1,261 +0,0 @@
-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';
-import NameCellEditor from './NameCellEditor.jsx';
-import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
-import RefData from './RefData';
-import SkillsFilter from './SkillsFilter.jsx';
-import ProficiencyFilter from './ProficiencyFilter.jsx';
-import HeaderGroupComponent from './HeaderGroupComponent.jsx';
-import SortableHeaderComponent from './SortableHeaderComponent.jsx';
-
-import "./RichGridDeclarativeExample.css";
-
-// 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(props) {
-        super(props);
-
-        this.state = {
-            quickFilterText: null,
-            sideBar: false,
-            rowData: new RowDataFactory().createRowData(),
-            rowCount: null,
-            icons: {
-                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"/>'
-            }
-        };
-    }
-
-    /* Grid Events we're listening to */
-    onGridReady = (params) => {
-        this.api = params.api;
-        this.columnApi = params.columnApi;
-
-        this.calculateRowCount();
-    };
-
-    onCellClicked = (event) => {
-        console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex);
-    };
-
-    onRowSelected = (event) => {
-        console.log('onRowSelected: ' + event.node.data.name);
-    };
-
-    /* Demo related methods */
-    onToggleSidebar = (event) => {
-        this.setState({ sideBar: event.target.checked });
-    };
-
-    deselectAll() {
-        this.api.deselectAll();
-    }
-
-    onQuickFilterText = (event) => {
-        this.setState({ quickFilterText: event.target.value });
-    };
-
-    onRefreshData = () => {
-        this.setState({
-            rowData: new RowDataFactory().createRowData()
-        });
-    };
-
-    invokeSkillsFilterMethod = () => {
-        this.api.getFilterInstance('skills', (instance) => {
-            let componentInstance = instance.getFrameworkComponentInstance();
-            componentInstance.helloFromSkillsFilter();
-        });
-    };
-
-    dobFilter = () => {
-        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();
-            });
-        });
-    };
-
-    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) {
-        if (params.value) {
-            return `<img border='0' width='15' height='10' style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/${RefData.COUNTRY_CODES[params.value]}.png'> ${params.value}`;
-        } else {
-            return null;
-        }
-    }
-
-    static dateCellRenderer(params) {
-        return RichGridDeclarativeExample.pad(params.value.getDate(), 2) + '/' +
-            RichGridDeclarativeExample.pad(params.value.getMonth() + 1, 2) + '/' +
-            params.value.getFullYear();
-    }
-
-    static pad(num, totalStringSize) {
-        let asString = num + "";
-        while (asString.length < totalStringSize) asString = "0" + asString;
-        return asString;
-    }
-
-    render() {
-        return (
-            <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>{this.state.rowCount}
-                    </div>
-                </div>
-                <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>
-                        </span>
-                        <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>
-                        </span>
-                    </div>
-                    <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: "right" }}>
-                            Filter API:
-                            <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>
-                        </div>
-                    </div>
-                    <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
-                            sideBar={this.state.sideBar}
-                            quickFilterText={this.state.quickFilterText}
-
-                            // binding to an object property
-                            icons={this.state.icons}
-
-                            // 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 suppressRowClickSelection => suppressRowClickSelection="true")
-                            suppressRowClickSelection
-                            rowSelection="multiple"
-                            groupHeaders
-
-                            // 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={40}
-                                checkboxSelection sortable={false} suppressMenu filter={false} pinned>
-                            </AgGridColumn>
-                            <AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
-                                <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 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 field="landline" width={150} filter="text" />
-                                <AgGridColumn field="address" width={500} filter="text" />
-                            </AgGridColumn>
-                        </AgGridReact>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
--- a/src-examples/richGridDeclarativeExample/SortableHeaderComponent.jsx
+++ b/src-examples/richGridDeclarativeExample/SortableHeaderComponent.jsx
@@ -1,89 +0,0 @@
-import React from "react";
-import * as PropTypes from "prop-types";
-
-// Header component to be used as default for all the columns.
-export default class SortableHeaderComponent extends React.Component {
-
-    constructor(props) {
-        super(props);
-
-        // this.sortChanged = this.onSortChanged.bind(this);
-        this.props.column.addEventListener('sortChanged', this.onSortChanged);
-
-        //The state of this component contains the current sort state of this column
-        //The possible values are: 'asc', 'desc' and ''
-        this.state = {
-            sorted: ''
-        }
-    }
-
-    componentWillUnmount() {
-        this.props.column.removeEventListener('sortChanged', this.onSortChanged);
-    }
-
-    render() {
-        let sortElements = [];
-        if (this.props.enableSorting) {
-            let downArrowClass = "customSortDownLabel " + (this.state.sorted === 'desc' ? " active" : "");
-            let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : "");
-            let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : "");
-
-            sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass}
-                                   onClick={this.onSortRequested.bind(this, 'desc')}><i
-                className="fa fa-long-arrow-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>);
-            sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass}
-                                   onClick={this.onSortRequested.bind(this, '')}><i
-                className="fa fa-times"/></div>)
-        }
-
-
-        let menuButton = null;
-        if (this.props.enableMenu) {
-            menuButton =
-                <div ref="menuButton" className="customHeaderMenuButton" onClick={this.onMenuClick.bind(this)}><i
-                    className={"fa " + this.props.menuIcon}/></div>
-        }
-
-        return <div>
-            {menuButton}
-            <div className="customHeaderLabel">{this.props.displayName}</div>
-            {sortElements}
-        </div>
-    }
-
-    onSortRequested(order, event) {
-        this.props.setSort(order, event.shiftKey);
-    };
-
-    onSortChanged = () => {
-        if (this.props.column.isSortAscending()) {
-            this.setState({
-                sorted: 'asc'
-            })
-        } else if (this.props.column.isSortDescending()) {
-            this.setState({
-                sorted: 'desc'
-            })
-        } else {
-            this.setState({
-                sorted: ''
-            })
-        }
-    };
-
-    onMenuClick() {
-        this.props.showColumnMenu(this.refs.menuButton);
-    };
-
-}
-
-// the grid will always pass in one props called 'params',
-// which is the grid passing you the params for the cellRenderer.
-// this piece is optional. the grid will always pass the 'params'
-// props, so little need for adding this validation meta-data.
-SortableHeaderComponent.propTypes = {
-    params: PropTypes.object
-};
--- a/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx
@@ -1,64 +0,0 @@
-import React, {Component} from "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";
-
-/*
- * This component serves to display the row data (provided by redux)
- */
-class GridComponent extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            columnDefs: [
-                {
-                    field: 'symbol'
-                },
-                {
-                    field: 'price',
-                    cellClass: 'align-right',
-                    cellRendererFramework: PriceRenderer
-                }
-            ]
-        };
-
-        this.onGridReady = this.onGridReady.bind(this);
-    }
-
-    onGridReady(params) {
-        this.gridApi = params.api;
-        this.columnApi = params.columnApi;
-
-        this.gridApi.sizeColumnsToFit();
-    }
-
-    // row data will be provided via redux on this.props.rowData
-    render() {
-        return (
-            <div style={{height: 400, width: 900, marginTop: 15}}
-                 className="ag-theme-balham">
-                <AgGridReact
-                    // properties
-                    columnDefs={this.state.columnDefs}
-                    rowData={this.props.rowData}
-                    modules={AllModules}
-
-                    // events
-                    onGridReady={this.onGridReady}>
-                </AgGridReact>
-            </div>
-        )
-    }
-}
-
-// pull off row data changes
-export default connect(
-    (state) => {
-        return {
-            rowData: state.rowData
-        }
-    }
-)(GridComponent);
--- a/src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx
@@ -1,83 +0,0 @@
-import React, {Component} from "react";
-import {connect} from "react-redux";
-
-import {setCurrency, updateRowData} from "./gridDataActions";
-
-/*
- * This component serves both to host the demo controls, which in turn will drive row data state changes
- */
-class HeaderComponent extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    componentDidMount() {
-        // provide the initial data to the store (which in turn will populate the grid)
-        this.props.dispatch(updateRowData(this.createRowData()));
-    }
-
-    setCurrency(currencySymbol, exchangeRate) {
-        this.props.dispatch(setCurrency(currencySymbol, exchangeRate));
-    }
-
-    render() {
-        return (
-            <div style={{marginTop: 15}}>
-                <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>
-        )
-    }
-
-    // the following methods are for creating dummy row data
-    createRowData() {
-        let rowData = [];
-
-        for (let i = 0; i < 14; i++) {
-            let newItem = this.createItem();
-            rowData.push(newItem);
-        }
-
-        return rowData;
-    }
-
-    createItem() {
-        return {
-            symbol: this.createUniqueRandomSymbol(),
-            price: Math.floor(Math.random() * 100)
-        };
-    }
-
-    // creates a unique symbol, eg 'ADG' or 'ZJD'
-    createUniqueRandomSymbol() {
-        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;
-            this.props.rowData.forEach(function (oldItem) {
-                if (oldItem.symbol === symbol) {
-                    isUnique = false;
-                }
-            });
-        }
-
-        return symbol;
-    }
-}
-
-// pull off row data
-export default connect(
-    (state) => {
-        return {
-            rowData: state.rowData
-        }
-    }
-)(HeaderComponent);
--- a/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx
@@ -1,45 +0,0 @@
-import React, {Component} from "react";
-import {connect} from "react-redux";
-
-import FontContext from './fontContext'
-
-class PriceRenderer extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            convertedValue: this.applyExchangeRate(props.exchangeRate, props.value)
-        };
-    }
-
-    componentWillReceiveProps(nextProps) {
-        this.setState({
-            convertedValue: this.applyExchangeRate(nextProps.exchangeRate, nextProps.value)
-        })
-    }
-
-    render() {
-        return (
-            <FontContext.Consumer>
-                {fontWeight => <span
-                    style={{fontWeight}}> {this.props.currencySymbol}{this.state.convertedValue}</span>}
-            </FontContext.Consumer>
-        );
-    }
-
-    applyExchangeRate = (exchangeRate, value) => {
-        return parseFloat(value * exchangeRate).toFixed(2); // simplified/naive exchange rate implementation!
-    }
-}
-
-export default connect(
-    (state) => {
-        return {
-            currencySymbol: state.currencySymbol,
-            exchangeRate: state.exchangeRate
-        }
-    },
-    null,
-    null,
-    {forwardRef: true} // must be supplied for react/redux when using AgGridReact
-)(PriceRenderer);
--- a/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx
@@ -1,36 +0,0 @@
-import React, {Component} from "react";
-import {Provider} from "react-redux";
-import {createStore} from "redux";
-
-import HeaderComponent from "./HeaderComponent";
-import GridComponent from "./GridComponent";
-
-import gridData from "./gridDataReducer";
-
-import FontContext from './fontContext'
-
-let store = createStore(gridData);
-
-/*
- * This component serves as a container for both the header and grid components. It's primarily here to act as a container
- * for the redux Provider
- */
-export default class SimpleReduxExample extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <Provider store={store}>
-                <div>
-                    <h1>Simple Redux Example using Connected React Components</h1>
-                    <HeaderComponent/>
-                    <FontContext.Provider value="bold">
-                        <GridComponent/>
-                    </FontContext.Provider>
-                </div>
-            </Provider>
-        )
-    }
-};
--- a/src-examples/simpleReduxDynamicComponentExample/fontContext.js
+++ b/src-examples/simpleReduxDynamicComponentExample/fontContext.js
@@ -1,3 +0,0 @@
-import React from "react";
-
-export default React.createContext('normal');
--- a/src-examples/simpleReduxDynamicComponentExample/gridDataActions.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/gridDataActions.jsx
@@ -1,14 +0,0 @@
-export function updateRowData(rowData) {
-    return {
-        type: 'ROW_DATA_CHANGED',
-        rowData
-    }
-}
-
-export function setCurrency(currencySymbol, exchangeRate) {
-    return {
-        type: 'CURRENCY_CHANGED',
-        currencySymbol,
-        exchangeRate
-    }
-}
--- a/src-examples/simpleReduxDynamicComponentExample/gridDataReducer.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/gridDataReducer.jsx
@@ -1,17 +0,0 @@
-export default (state = {rowData: [], currencySymbol: '£', exchangeRate: 1}, action) => {
-    switch (action.type) {
-        case 'ROW_DATA_CHANGED':
-            return {
-                ...state,
-                rowData: action.rowData,
-            };
-        case 'CURRENCY_CHANGED':
-            return {
-                ...state,
-                currencySymbol: action.currencySymbol,
-                exchangeRate: action.exchangeRate
-            };
-        default:
-            return state;
-    }
-};
--- a/src-examples/simpleReduxHooksExample/GridComponent.jsx
+++ b/src-examples/simpleReduxHooksExample/GridComponent.jsx
@@ -1,34 +0,0 @@
-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>
-    )
-}
--- a/src-examples/simpleReduxHooksExample/PriceEditor.jsx
+++ b/src-examples/simpleReduxHooksExample/PriceEditor.jsx
@@ -1,18 +0,0 @@
-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}/>;
-})
--- a/src-examples/simpleReduxHooksExample/PriceFilter.jsx
+++ b/src-examples/simpleReduxHooksExample/PriceFilter.jsx
@@ -1,18 +0,0 @@
-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()}/>;
-})
--- a/src-examples/simpleReduxHooksExample/PriceRenderer.jsx
+++ b/src-examples/simpleReduxHooksExample/PriceRenderer.jsx
@@ -1,13 +0,0 @@
-import React, {Component} from "react";
-
-export default class PriceRenderer extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <span>{this.props.value}</span>
-        );
-    }
-}
--- a/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx
+++ b/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx
@@ -1,18 +0,0 @@
-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>
-    )
-}
--- a/src-examples/simpleReduxHooksExample/gridDataActions.jsx
+++ b/src-examples/simpleReduxHooksExample/gridDataActions.jsx
@@ -1,14 +0,0 @@
-export function updateRowData(rowData) {
-    return {
-        type: 'ROW_DATA_CHANGED',
-        rowData
-    }
-}
-
-export function setCurrency(currencySymbol, exchangeRate) {
-    return {
-        type: 'CURRENCY_CHANGED',
-        currencySymbol,
-        exchangeRate
-    }
-}
--- a/src-examples/simpleReduxHooksExample/store.js
+++ b/src-examples/simpleReduxHooksExample/store.js
@@ -1,81 +0,0 @@
-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;
-};
--- a/src-large-data/index.html
+++ b/src-large-data/index.html
@@ -1,124 +0,0 @@
-<html>
-
-    <!-- This index file is common for both the standard and large examples. As to which project you are running
-        depends on whether you use 'npm run standard' or 'npm run large' -->
-
-    <head>
-        <meta charset="utf-8">
-        <script type="text/javascript" src="../dist/react-large.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">
-    </head>
-
-    <!-- Put some spacing around the buttons - not needed, just makes it look nice -->
-    <style>
-        button {
-            margin-left: 4px;
-            margin-right: 4px;
-        }
-
-        .customHeaderMenuButton{
-            margin-top: 5px;
-            margin-left: 4px;
-            float: left;
-        }
-
-        .customHeaderLabel{
-            margin-left: 5px;
-            margin-top: 3px;
-            float: left;
-        }
-
-        .customSortDownLabel{
-            float: left;
-            margin-left: 10px;
-            margin-top: 5px;
-        }
-
-        .customSortUpLabel{
-            float: left;
-            margin-left: 3px;
-            margin-top: 4px;
-        }
-
-        .customSortRemoveLabel{
-            float: left;
-            font-size: 11px;
-            margin-left: 3px;
-            margin-top: 6px;
-        }
-
-        .active {
-            color: cornflowerblue;
-        }
-
-        .hidden { display:none; }
-
-
-        .customHeaderLabel{
-            margin-left: 5px;
-            margin-top: 3px;
-            float: left;
-        }
-
-        .customExpandButton{
-            float:right;
-            margin-top: 5px;
-            margin-left: 3px;
-        }
-
-        .expanded {
-            animation-name: toExpanded;
-            animation-duration: 1s;
-            -ms-transform: rotate(180deg); /* IE 9 */
-            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-            transform: rotate(180deg);
-        }
-
-        .collapsed {
-            color: cornflowerblue;
-            animation-name: toCollapsed;
-            animation-duration: 1s;
-            -ms-transform: rotate(0deg); /* IE 9 */
-            -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
-            transform: rotate(0deg);
-        }
-
-
-
-        @keyframes  toExpanded{
-            from {
-                color: cornflowerblue;
-                -ms-transform: rotate(0deg); /* IE 9 */
-                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
-                transform: rotate(0deg);
-            }
-            to {
-                color: black;
-                -ms-transform: rotate(180deg); /* IE 9 */
-                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-                transform: rotate(180deg);
-            }
-        }
-
-        @keyframes toCollapsed{
-            from {
-                color: black;
-                -ms-transform: rotate(180deg); /* IE 9 */
-                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-                transform: rotate(180deg);
-            }
-            to {
-                color: cornflowerblue;
-                -ms-transform: rotate(0deg); /* IE 9 */
-                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
-                transform: rotate(0deg);
-            }
-        }
-    </style>
-
-    <body>
-        <div id="myAppContainer"></div>
-    </body>
-
-</html>
--- a/src-large-data/index.js
+++ b/src-large-data/index.js
@@ -3,9 +3,9 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import LargeGrid from './largeGrid.jsx';
-
-import '@ag-grid-community/core/dist/styles/ag-grid.css';
-import '@ag-grid-community/core/dist/styles/ag-theme-balham.css';
+// is there a better way of doing this?
+import 'ag-grid-root/dist/styles/ag-grid.css';
+import 'ag-grid-root/dist/styles/theme-fresh.css';

 // waiting for dom to load before booting react. we could alternatively
 // put the index.js reference at the end fo the index.html, but i prefer this way.
--- a/src-large-data/largeGrid.jsx
+++ b/src-large-data/largeGrid.jsx
@@ -1,14 +1,13 @@
-import React, {Component} from 'react';
+import React from 'react';
+import {reactCellRendererFactory} from 'ag-grid-react';
 import SimpleCellRenderer from './simpleCellRenderer.jsx';
-import {AgGridReact} from '@ag-grid-community/react';

-// for community features
-import {AllModules} from "@ag-grid-enterprise/all-modules";
+import {AgGridReact} from 'ag-grid-react';

-// for enterprise features
-// import {AllModules} from "@ag-grid-enterprise/all-modules";
+// put this line in to use ag-Grid enterprise
+// import 'ag-grid-enterprise';

-export default class MyApp extends Component {
+export default class MyApp extends React.Component {

    constructor() {
        super();
@@ -23,22 +22,22 @@ export default class MyApp extends Component {

    createColumnNames() {
        // creates column names by iterating the alphabet twice, eg {'aa','ab','ac',.....'zz'}
-        const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
+        var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
        this.columnNames = [];
-        alphabet.forEach(letter1 => {
-            alphabet.forEach(letter2 => {
+        alphabet.forEach( letter1 => {
+            alphabet.forEach( letter2 => {
                this.columnNames.push(letter1 + letter2);
            });
        });
    }

    createRowData() {
-        const rowData = [];
+        var rowData = [];

-        for (let i = 0; i < 1000; i++) {
-            const item = {};
-            this.columnNames.forEach(colName => {
-                item[colName] = '(' + colName.toUpperCase() + ',' + i + ')'
+        for (var i = 0; i<1000; i++) {
+            var item = {};
+            this.columnNames.forEach( colName => {
+                item[colName] = '('+colName.toUpperCase()+','+i+')'
            });
            rowData.push(item);
        }
@@ -47,9 +46,9 @@ export default class MyApp extends Component {
    }

    createColumnDefs() {
-        const columnDefs = [];
+        var columnDefs = [];

-        this.columnNames.forEach(colName => {
+        this.columnNames.forEach( colName => {
            columnDefs.push({
                headerName: colName.toUpperCase(),
                field: colName,
@@ -63,8 +62,8 @@ export default class MyApp extends Component {

    render() {
        return (
-            <div style={{height: '100%'}} className="ag-theme-balham">
-                <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} modules={AllModules}/>
+            <div style={{height: '100%'}} className="ag-fresh">
+                    <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} />
            </div>
        );
    }
--- a/src-large-data/simpleCellRenderer.jsx
+++ b/src-large-data/simpleCellRenderer.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import * as PropTypes from 'prop-types';

 export default class SimpleCellRenderer extends React.Component {
    render() {
@@ -12,5 +11,5 @@ export default class SimpleCellRenderer extends React.Component {
 }

 SimpleCellRenderer.propTypes = {
-    params: PropTypes.object
+    params: React.PropTypes.object
 };
--- a/src-standard/ColDefFactory.jsx
+++ b/src-standard/ColDefFactory.jsx
@@ -0,0 +1,70 @@
+import SkillsCellRenderer from './SkillsCellRenderer.jsx';
+import NameCellEditor from './NameCellEditor.jsx';
+import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
+import RefData from './RefData';
+import SkillsFilter from './SkillsFilter.jsx';
+import ProficiencyFilter from './ProficiencyFilter.jsx';
+
+export default class ColDefFactory {
+
+    createColDefs() {
+
+        var columnDefs = [
+            {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
+                suppressMenu: true, pinned: true},
+            {
+                headerName: 'Employee',
+                children: [
+                    {headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
+                        width: 150, pinned: true, editable: true,
+                        // use a React cellEditor
+                        cellEditorFramework: NameCellEditor
+                    },
+                    {headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
+                        // an example of using a non-React cell renderer
+                        cellRenderer: countryCellRenderer, pinned: true,
+                        filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}},
+                ]
+            },
+            {
+                headerName: 'IT Skills',
+                children: [
+                    {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
+                        // supply a React component
+                        cellRendererFramework: SkillsCellRenderer,
+                        // supply a React component
+                        filterFramework: SkillsFilter
+                    },
+                    {headerName: "Proficiency", field: "proficiency", width: 120, enableValue: true,
+                        // supply a React component
+                        cellRendererFramework: ProficiencyCellRenderer,
+                        // supply a React component
+                        filterFramework: ProficiencyFilter
+                    }
+                ]
+            },
+            {
+                headerName: 'Contact',
+                children: [
+                    {headerName: "Mobile", field: "mobile", width: 150, filter: 'text'},
+                    {headerName: "Land-line", field: "landline", width: 150, filter: 'text'},
+                    {headerName: "Address", field: "address", width: 500, filter: 'text'}
+                ]
+            }
+        ];
+        return columnDefs;
+    }
+}
+
+// this is a simple cell renderer, putting together static html, no
+// need to use React for it.
+function countryCellRenderer(params) {
+    if (params.value) {
+        var flag = "<img border='0' width='15' height='10' " +
+            "style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/"
+            + RefData.COUNTRY_CODES[params.value] + ".png'>";
+        return flag + " " + params.value;
+    } else {
+        return null;
+    }
+}
--- a/src-examples/richGridDeclarativeExample/NameCellEditor.jsx
+++ b/src-examples/richGridDeclarativeExample/NameCellEditor.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import * as PropTypes from 'prop-types';
+import RefData from './RefData';

-const KEY_BACKSPACE = 8;
-const KEY_DELETE = 46;
-const KEY_F2 = 113;
+var KEY_BACKSPACE = 8;
+var KEY_DELETE = 46;
+var KEY_F2 = 113;

 // cell renderer for the proficiency column. this is a very basic cell editor,
 export default class NameCellEditor extends React.Component {
@@ -19,9 +19,9 @@ export default class NameCellEditor extends React.Component {
    // experience is similar to Excel
    createInitialState(props) {

-        let startValue;
-        const putCursorAtEndOnFocus = false;
-        const highlightAllOnFocus = false;
+        var startValue;
+        var putCursorAtEndOnFocus = false;
+        var highlightAllOnFocus = false;

        if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) {
            // if backspace or delete pressed, we clear the cell
@@ -55,7 +55,7 @@ export default class NameCellEditor extends React.Component {
    onChangeListener(event) {
        // if doing React, you will probably be using a library for managing immutable
        // objects better. to keep this example simple, we don't use one.
-        const newState = {
+        var newState = {
            value: event.target.value,
            putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus,
            highlightAllOnFocus: this.state.highlightAllOnFocus
@@ -72,7 +72,7 @@ export default class NameCellEditor extends React.Component {
    // view, it may not yet be in the browser (put in by ag-Grid) so focus will not work
    afterGuiAttached() {
        // get ref from React component
-        const eInput = this.refs.textField;
+        var eInput = this.refs.textField;
        eInput.focus();
        if (this.highlightAllOnFocus) {
            eInput.select();
@@ -81,7 +81,7 @@ export default class NameCellEditor extends React.Component {
            // this comes into play in two scenarios: a) when user hits F2 and b)
            // when user hits a printable character, then on IE (and only IE) the carot
            // was placed after the first character, thus 'apply' would end up as 'pplea'
-            const length = eInput.value ? eInput.value.length : 0;
+            var length = eInput.value ? eInput.value.length : 0;
            if (length > 0) {
                eInput.setSelectionRange(length, length);
            }
@@ -100,7 +100,7 @@ export default class NameCellEditor extends React.Component {

    // just to demonstrate, if you type in 'cancel' then the edit will not take effect
    isCancelAfterEnd() {
-        if (this.state.value && this.state.value.toUpperCase() === 'CANCEL') {
+        if (this.state.value && this.state.value.toUpperCase()==='CANCEL') {
            return true;
        } else {
            return false;
@@ -113,5 +113,5 @@ export default class NameCellEditor extends React.Component {
 // this piece is optional. the grid will always pass the 'params'
 // props, so little need for adding this validation meta-data.
 NameCellEditor.propTypes = {
-    params: PropTypes.object
+    params: React.PropTypes.object
 };
--- a/src-examples/richGridDeclarativeExample/ProficiencyCellRenderer.jsx
+++ b/src-examples/richGridDeclarativeExample/ProficiencyCellRenderer.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import RefData from './RefData';

 // cell renderer for the proficiency column. this is a very basic cell renderer,
 // it is arguable that we should not of used React and just returned a string of
@@ -6,7 +7,7 @@ import React from 'react';
 export default class ProficiencyCellRenderer extends React.Component {

    render() {
-        let backgroundColor;
+        var backgroundColor;
        if (this.props.value < 20) {
            backgroundColor = 'red';
        } else if (this.props.value < 60) {
@@ -16,7 +17,7 @@ export default class ProficiencyCellRenderer extends React.Component {
        }

        return (
-            <div className="div-percent-bar" style={{width: this.props.value + '%', backgroundColor: backgroundColor}}>
+            <div className="div-percent-bar" style={{ width: this.props.value + '%', backgroundColor: backgroundColor }}>
                <div className="div-percent-value">{this.props.value}%</div>
            </div>
        );
--- a/src-examples/richGridDeclarativeExample/ProficiencyFilter.jsx
+++ b/src-examples/richGridDeclarativeExample/ProficiencyFilter.jsx
@@ -1,13 +1,13 @@
 import React from 'react';

-const PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
+var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];

 // the proficiency filter component. this demonstrates how to integrate
 // a React filter component with ag-Grid.
 export default class ProficiencyFilter extends React.Component {

    constructor(props) {
-        super(props);
+        super();
        this.state = {
            selected: PROFICIENCY_NAMES[0]
        };
@@ -15,18 +15,14 @@ export default class ProficiencyFilter extends React.Component {

    // called by agGrid
    doesFilterPass(params) {
-        const value = this.props.valueGetter(params);
-        const valueAsNumber = parseFloat(value);
+        var value = this.props.valueGetter(params);
+        var valueAsNumber = parseFloat(value);

        switch (this.state.selected) {
-            case PROFICIENCY_NAMES[1] :
-                return valueAsNumber >= 40;
-            case PROFICIENCY_NAMES[2] :
-                return valueAsNumber >= 60;
-            case PROFICIENCY_NAMES[3] :
-                return valueAsNumber >= 80;
-            default :
-                return true;
+            case PROFICIENCY_NAMES[1] : return valueAsNumber >= 40;
+            case PROFICIENCY_NAMES[2] : return valueAsNumber >= 60;
+            case PROFICIENCY_NAMES[3] : return valueAsNumber >= 80;
+            default : return true;
        }
    };

@@ -36,28 +32,21 @@ export default class ProficiencyFilter extends React.Component {
    };

    onButtonPressed(name) {
-        const newState = {selected: name};
+        console.log(name);
+        var newState = {selected: name};
        // set the state, and once it is done, then call filterChangedCallback
        this.setState(newState, this.props.filterChangedCallback);
-    }
-
-
-    getModel() {
-        return ''
-    }
-
-    setModel(model) {
+        console.log(name);
    }

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

        return (
            <div>
-                <div style={{
-                    textAlign: 'center',
-                    background: 'lightgray',
-                    width: '100%',
-                    display: 'block',
-                    borderBottom: '1px solid grey'
-                }}>
+                <div style={{textAlign: 'center', background: 'lightgray', width: '100%', display: 'block', borderBottom: '1px solid grey'}}>
                    <b>Custom Proficiency Filter</b>
                </div>
                {rows}
--- a/src-standard/RefData.js
+++ b/src-standard/RefData.js
@@ -0,0 +1,113 @@
+export default class RefData {}
+
+RefData.FIRST_NAMES = [
+        "Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella",
+        "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby",
+        "Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla"
+    ];
+
+RefData.LAST_NAMES = [
+        "Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell",
+        "Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane",
+        "Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner",
+        "Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane",
+        "Keating", "Keegan", "Kingston", "Kobe"
+    ];
+
+RefData.COUNTRY_CODES = {
+        Ireland: "ie",
+        Spain: "es",
+        "United Kingdom": "gb",
+        France: "fr",
+        Germany: "de",
+        Sweden: "se",
+        Italy: "it",
+        Greece: "gr",
+        Iceland: "is",
+        Portugal: "pt",
+        Malta: "mt",
+        Norway: "no",
+        Brazil: "br",
+        Argentina: "ar",
+        Colombia: "co",
+        Peru: "pe",
+        Venezuela: "ve",
+        Uruguay: "uy"
+    };
+
+RefData.COUNTRIES = [
+        {country: "Ireland", continent: "Europe", language: "English"},
+        {country: "Spain", continent: "Europe", language: "Spanish"},
+        {country: "United Kingdom", continent: "Europe", language: "English"},
+        {country: "France", continent: "Europe", language: "French"},
+        {country: "Germany", continent: "Europe", language: "(other)"},
+        {country: "Sweden", continent: "Europe", language: "(other)"},
+        {country: "Norway", continent: "Europe", language: "(other)"},
+        {country: "Italy", continent: "Europe", language: "(other)"},
+        {country: "Greece", continent: "Europe", language: "(other)"},
+        {country: "Iceland", continent: "Europe", language: "(other)"},
+        {country: "Portugal", continent: "Europe", language: "Portuguese"},
+        {country: "Malta", continent: "Europe", language: "(other)"},
+        {country: "Brazil", continent: "South America", language: "Portuguese"},
+        {country: "Argentina", continent: "South America", language: "Spanish"},
+        {country: "Colombia", continent: "South America", language: "Spanish"},
+        {country: "Peru", continent: "South America", language: "Spanish"},
+        {country: "Venezuela", continent: "South America", language: "Spanish"},
+        {country: "Uruguay", continent: "South America", language: "Spanish"}
+    ];
+
+RefData.ADDRESSES = [
+        '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763',
+        '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215',
+        '3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186',
+        '2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634',
+        '2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597',
+        '6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911',
+        '2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959',
+        '7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160',
+        '3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609',
+        '4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673',
+        '5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245',
+        '8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767',
+        '2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206',
+        '7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348',
+        '874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207',
+        '8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213',
+        '9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161',
+        '3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526',
+        '3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671',
+        '1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310',
+        '1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883',
+        '9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192',
+        '7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838',
+        '1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730',
+        '126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956',
+        '6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257',
+        '960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219',
+        '6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427',
+        '2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355',
+        '5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225',
+        '5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706',
+        '5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596',
+        '7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360',
+        '8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859',
+        '5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322',
+        '6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239',
+        '7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092',
+        '9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973',
+        '3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349',
+        '4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138',
+        '6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063',
+        '9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024',
+        '6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288',
+        '237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157',
+        '446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553',
+        '2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445',
+        '365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958',
+        '1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888',
+        '6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018',
+        '7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433'];
+
+RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows'];
+
+RefData.IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows'];
--- a/src-examples/richGridDeclarativeExample/RowDataFactory.js
+++ b/src-examples/richGridDeclarativeExample/RowDataFactory.js
@@ -3,10 +3,10 @@ import RefData from './RefData';
 export default class RowDataFactory {

    createRowData() {
-        const rowData = [];
+        var rowData = [];

-        for (let i = 0; i < 200; i++) {
-            const countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length];
+        for (var i = 0; i < 1000; i++) {
+            var countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length];
            rowData.push({
                name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length],
                skills: {
@@ -16,7 +16,6 @@ export default class RowDataFactory {
                    windows: Math.random() < 0.4,
                    css: Math.random() < 0.4
                },
-                dob: RefData.DOB[i % RefData.DOB.length],
                address: RefData.ADDRESSES[i % RefData.ADDRESSES.length],
                years: Math.round(Math.random() * 100),
                proficiency: Math.round(Math.random() * 100),
@@ -32,8 +31,8 @@ export default class RowDataFactory {
    }

    createRandomPhoneNumber() {
-        let result = '+';
-        for (let i = 0; i < 12; i++) {
+        var result = '+';
+        for (var i = 0; i < 12; i++) {
            result += Math.round(Math.random() * 10);
            if (i === 2 || i === 5 || i === 8) {
                result += ' ';
--- a/src-examples/richGridDeclarativeExample/SkillsCellRenderer.jsx
+++ b/src-examples/richGridDeclarativeExample/SkillsCellRenderer.jsx
@@ -1,15 +1,14 @@
 import React from 'react';
-import * as PropTypes from 'prop-types';
 import RefData from './RefData';

 export default class SkillsCellRenderer extends React.Component {

    render() {
-        const skills = [];
-        const rowData = this.props.data;
-        RefData.IT_SKILLS.forEach((skill) => {
+        var skills = [];
+        var rowData = this.props.data;
+        RefData.IT_SKILLS.forEach( (skill) => {
            if (rowData && rowData.skills && rowData.skills[skill]) {
-                skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill}/>);
+                skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill} />);
            }
        });

@@ -23,5 +22,5 @@ export default class SkillsCellRenderer extends React.Component {
 // this piece is optional. the grid will always pass the 'params'
 // props, so little need for adding this validation meta-data.
 SkillsCellRenderer.propTypes = {
-    params: PropTypes.object
+    params: React.PropTypes.object
 };
--- a/src-examples/richGridDeclarativeExample/SkillsFilter.jsx
+++ b/src-examples/richGridDeclarativeExample/SkillsFilter.jsx
@@ -31,21 +31,21 @@ export default class SkillsFilter extends React.Component {

    setModel(model) {
        this.setState({
-            android: model ? model.android : null,
-            css: model ? model.css : null,
-            html5: model ? model.html5 : null,
-            mac: model ? model.mac : null,
-            windows: model ? model.windows : null
+            android: model.android,
+            css: model.css,
+            html5: model.html5,
+            mac: model.mac,
+            windows: model.windows
        });
    }

    // called by agGrid
    doesFilterPass(params) {

-        const rowSkills = params.data.skills;
-        let passed = true;
+        var rowSkills = params.data.skills;
+        var passed = true;

-        RefData.IT_SKILLS.forEach((skill) => {
+        RefData.IT_SKILLS.forEach( (skill) => {
            if (this.state[skill]) {
                if (!rowSkills[skill]) {
                    passed = false;
@@ -56,42 +56,34 @@ export default class SkillsFilter extends React.Component {
        return passed;
    };

-    getModelAsString() {
-        return ''
-    }
-
    // called by agGrid
    isFilterActive() {
-        const somethingSelected = this.state.android || this.state.css ||
+        var somethingSelected = this.state.android || this.state.css ||
            this.state.html5 || this.state.mac || this.state.windows;
        return somethingSelected;
    };

    onSkillChanged(skill, event) {
-        const newValue = event.target.checked;
-        const newModel = {};
+        var newValue = event.target.checked;
+        var newModel = {};
        newModel[skill] = newValue;
        // set the state, and once it is done, then call filterChangedCallback
-        this.setState(newModel, this.props.filterChangedCallback);
-    }
-
-    helloFromSkillsFilter() {
-        alert("Hello From The Skills Filter!");
+        this.setState(newModel, this.props.filterChangedCallback );
    }

    render() {

-        const skillsTemplates = [];
-        RefData.IT_SKILLS.forEach((skill, index) => {
-            const skillName = RefData.IT_SKILLS_NAMES[index];
-            const template = (
-                <label key={skill}
-                       style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
+        var skillsTemplates = [];
+        RefData.IT_SKILLS.forEach( (skill, index) => {
+
+            var skillName = RefData.IT_SKILLS_NAMES[index];
+            var template = (
+                <label key={skill} style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
                    <span>
                        <div style={{textAlign: 'center'}}>{skillName}</div>
                        <div>
                            <input type="checkbox" onClick={this.onSkillChanged.bind(this, skill)}/>
-                            <img src={'images/skills/' + skill + '.png'} width={30}/>
+                            <img src={'images/skills/'+skill+'.png'} width={30}/>
                        </div>
                    </span>
                </label>
@@ -102,13 +94,7 @@ export default class SkillsFilter extends React.Component {

        return (
            <div style={{width: 380}}>
-                <div style={{
-                    textAlign: 'center',
-                    background: 'lightgray',
-                    width: '100%',
-                    display: 'block',
-                    borderBottom: '1px solid grey'
-                }}>
+                <div style={{textAlign: 'center', background: 'lightgray', width: '100%', display: 'block', borderBottom: '1px solid grey'}}>
                    <b>Custom Skills Filter</b>
                </div>
                {skillsTemplates}
--- a/src-standard/index.js
+++ b/src-standard/index.js
@@ -0,0 +1,18 @@
+'use strict';
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+import MyApp from './myApp.jsx';
+// is there a better way of doing this?
+import 'ag-grid-root/dist/styles/ag-grid.css';
+import 'ag-grid-root/dist/styles/theme-fresh.css';
+
+// waiting for dom to load before booting react. we could alternatively
+// put the index.js reference at the end fo the index.html, but i prefer this way.
+document.addEventListener('DOMContentLoaded', ()=> {
+    var container = document.getElementById('myAppContainer');
+    ReactDOM.render(
+        React.createElement(MyApp),
+        container
+    );
+});
--- a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.css
+++ b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.css
@@ -1,3 +1,4 @@
+
 .ag-cell {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
--- a/src-standard/myApp.jsx
+++ b/src-standard/myApp.jsx
@@ -0,0 +1,188 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import {AgGridReact} from 'ag-grid-react';
+import RefData from './RefData';
+import RowDataFactory from './RowDataFactory';
+import ColDefFactory from './ColDefFactory.jsx';
+import './myApp.css';
+
+// take this line out if you do not want to use ag-Grid-Enterprise
+import 'ag-grid-enterprise';
+
+export default class MyApp extends React.Component {
+
+    constructor() {
+        super();
+
+        this.state = {
+            quickFilterText: null,
+            showGrid: true,
+            showToolPanel: false,
+            columnDefs: new ColDefFactory().createColDefs(),
+            rowData: new RowDataFactory().createRowData(),
+            icons: {
+                columnRemoveFromGroup: '<i class="fa fa-remove"/>',
+                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"/>',
+                columnGroupOpened: '<i class="fa fa-minus-square-o"/>',
+                columnGroupClosed: '<i class="fa fa-plus-square-o"/>'
+            }
+        };
+
+        // the grid options are optional, because you can provide every property
+        // to the grid via standard React properties. however, the react interface
+        // doesn't block you from using the standard JavaScript interface if you
+        // wish. Maybe you have the gridOptions stored as JSON on your server? If
+        // you do, the providing the gridOptions as a standalone object is just
+        // what you want!
+        this.gridOptions = {
+            // this is how you listen for events using gridOptions
+            onModelUpdated: function() {
+                console.log('event onModelUpdated received');
+            },
+            // this is a simple property
+            rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios
+        };
+    }
+
+    onShowGrid(show) {
+        this.setState({
+            showGrid: show
+        });
+    }
+
+    onToggleToolPanel(event) {
+        this.setState({showToolPanel: event.target.checked});
+    }
+
+    onGridReady(params) {
+        this.api = params.api;
+        this.columnApi = params.columnApi;
+    }
+
+    selectAll() {
+        this.api.selectAll();
+    }
+
+    deselectAll() {
+        this.api.deselectAll();
+    }
+
+    setCountryVisible(visible) {
+        this.columnApi.setColumnVisible('country', visible);
+    }
+
+    onQuickFilterText(event) {
+        this.setState({quickFilterText: event.target.value});
+    }
+
+    onCellClicked(event) {
+        console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex);
+    }
+
+    onRowSelected(event) {
+        console.log('onRowSelected: ' + event.node.data.name);
+    }
+
+    onRefreshData() {
+        var newRowData = new RowDataFactory().createRowData();
+        this.setState({
+            rowData: newRowData
+        });
+    }
+
+    render() {
+        var gridTemplate;
+        var bottomHeaderTemplate;
+        var topHeaderTemplate;
+
+        topHeaderTemplate = (
+            <div>
+                <div style={{float: 'right'}}>
+                    <input type="text" onChange={this.onQuickFilterText.bind(this)} placeholder="Type text to filter..."/>
+                    <button id="btDestroyGrid" disabled={!this.state.showGrid} onClick={this.onShowGrid.bind(this, false)}>Destroy Grid</button>
+                    <button id="btCreateGrid" disabled={this.state.showGrid} onClick={this.onShowGrid.bind(this, true)}>Create Grid</button>
+                </div>
+                <div style={{padding: '4px'}}>
+                    <b>Employees Skills and Contact Details</b> <span id="rowCount"/>
+                </div>
+            </div>
+        );
+
+        // showing the bottom header and grid is optional, so we put in a switch
+        if (this.state.showGrid) {
+            bottomHeaderTemplate = (
+                <div>
+                    <div style={{padding: 4}} className={'toolbar'}>
+                        <span>
+                            Grid API:
+                            <button onClick={this.selectAll.bind(this)}>Select All</button>
+                            <button onClick={this.deselectAll.bind(this)}>Clear Selection</button>
+                        </span>
+                        <span style={{marginLeft: 20}}>
+                            Column API:
+                            <button onClick={this.setCountryVisible.bind(this, false)}>Hide Country Column</button>
+                            <button onClick={this.setCountryVisible.bind(this, true)}>Show Country Column</button>
+                        </span>
+                    </div>
+                    <div style={{clear: 'both'}}></div>
+                    <div style={{padding: 4}} className={'toolbar'}>
+                        <label>
+                            <input type="checkbox" onChange={this.onToggleToolPanel.bind(this)}/>
+                            Show Tool Panel
+                        </label>
+                        <button onClick={this.onRefreshData.bind(this)}>Refresh Data</button>
+                    </div>
+                    <div style={{clear: 'both'}}></div>
+                </div>
+            );
+            gridTemplate = (
+                <div style={{height: 400}} className="ag-fresh">
+                    <AgGridReact
+                        // gridOptions is optional - it's possible to provide
+                        // all values as React props
+                        gridOptions={this.gridOptions}
+
+                        // listening for events
+                        onGridReady={this.onGridReady.bind(this)}
+                        onRowSelected={this.onRowSelected.bind(this)}
+                        onCellClicked={this.onCellClicked.bind(this)}
+
+                        // binding to simple properties
+                        showToolPanel={this.state.showToolPanel}
+                        quickFilterText={this.state.quickFilterText}
+
+                        // binding to an object property
+                        icons={this.state.icons}
+
+                        // binding to array properties
+                        columnDefs={this.state.columnDefs}
+                        rowData={this.state.rowData}
+
+                        // no binding, just providing hard coded strings for the properties
+                        suppressRowClickSelection="true"
+                        rowSelection="multiple"
+                        enableColResize="true"
+                        enableSorting="true"
+                        enableFilter="true"
+                        groupHeaders="true"
+                        rowHeight="22"
+                        debug="true"
+                    />
+                </div>
+            );
+        }
+
+        return <div style={{width: '800px'}}>
+            <div style={{padding: '4px'}}>
+                {topHeaderTemplate}
+                {bottomHeaderTemplate}
+                {gridTemplate}
+            </div>
+        </div>;
+    }
+
+}
--- a/src-trader-dashboard/actions/fxDataActions.js
+++ b/src-trader-dashboard/actions/fxDataActions.js
@@ -1,16 +0,0 @@
-import cloneDeep from "lodash/cloneDeep";
-
-export function fxDataUpdated(fxData) {
-    return {
-        type: 'FX_DATA_CHANGED',
-        fxData: cloneDeep(fxData)
-    };
-}
-
-export function fxTopMoversUpdated(fxTopMovers) {
-    return {
-        type: 'FX_TOP_MOVERS_CHANGED',
-        fxTopMovers: cloneDeep(fxTopMovers)
-    };
-}
-
--- a/src-trader-dashboard/components/ControlPanel.jsx
+++ b/src-trader-dashboard/components/ControlPanel.jsx
@@ -1,28 +0,0 @@
-import React, {Component} from "react";
-
-export default class extends Component {
-    constructor(props) {
-        super(props);
-
-        this.onExchangeChanged = this.onExchangeChanged.bind(this);
-    }
-
-    onExchangeChanged(event) {
-        this.props.onExchangeChanged(event.target.value);
-    }
-
-    render() {
-        return (
-            <div>
-                <span style={{marginRight: 15}}>Control Panel</span>
-                <select value={this.props.selectedExchange.symbol} onChange={this.onExchangeChanged}>
-                    {
-                        this.props.exchanges.map((exchange) => {
-                            return <option key={exchange.symbol} value={exchange.symbol}>{exchange.name}</option>
-                        })
-                    }
-                </select>
-            </div>
-        );
-    }
-};
--- a/src-trader-dashboard/components/FxPanel.jsx
+++ b/src-trader-dashboard/components/FxPanel.jsx
@@ -1,26 +0,0 @@
-import React, {Component} from "react";
-
-import FxDataService from "../services/FxDataService.jsx";
-import FxQuoteMatrix from "./FxQuoteMatrix.jsx";
-import TopMoversGrid from "./TopMoversGrid.jsx";
-
-export default class extends Component {
-    constructor(props) {
-        super(props);
-
-        this.fxDataService = new FxDataService();
-    }
-
-    render() {
-        return (
-            <div>
-                <div style={{float: "left", marginRight: 25}}>
-                    <FxQuoteMatrix fxDataService={this.fxDataService}/>
-                </div>
-                <div style={{float: "left"}}>
-                    <TopMoversGrid fxDataService={this.fxDataService}/>
-                </div>
-            </div>
-        );
-    }
-};
--- a/src-trader-dashboard/components/FxQuoteMatrix.jsx
+++ b/src-trader-dashboard/components/FxQuoteMatrix.jsx
@@ -1,92 +0,0 @@
-import React, {Component} from "react";
-import {connect} from "react-redux";
-
-import {AgGridReact} from "@ag-grid-community/react";
-
-import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules";
-
-class FxQuoteMatrix extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            columnDefs: this.props.fxDataService.getFxMatrixHeaderNames()
-        };
-
-        // grid events
-        this.onGridReady = this.onGridReady.bind(this);
-
-        // grid callbacks
-        this.getRowNodeId = this.getRowNodeId.bind(this);
-    }
-
-    onGridReady(params) {
-        this.gridApi = params.api;
-        this.columnApi = params.columnApi;
-
-        if (this.props.rowData) {
-            this.gridApi.setRowData(this.props.rowData)
-        }
-    }
-
-    getRowNodeId(data) {
-        return data.symbol;
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (this.gridApi) {
-            const newRowData = nextProps.rowData;
-
-            const updatedRows = [];
-
-            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;
-                    }
-                }
-            }
-
-
-            this.gridApi.updateRowData({update: updatedRows});
-        }
-
-    }
-
-    render() {
-        return (
-            <div style={{height: 410, width: 800}}
-                 className="ag-theme-balham">
-                <AgGridReact
-                    // properties
-                    columnDefs={this.state.columnDefs}
-                    defaultColDef={{
-                        sortable: false,
-                        filter: false
-                    }}
-
-                    // callbacks
-                    getRowNodeId={this.getRowNodeId}
-
-                    modules={[ClientSideRowModelModule]}
-
-                    // events
-                    onGridReady={this.onGridReady}>
-                </AgGridReact>
-            </div>
-        );
-    }
-}
-
-export default connect(
-    (state) => {
-        return {
-            rowData: state ? state.fxData : null
-        }
-    }
-)(FxQuoteMatrix);
--- a/src-trader-dashboard/components/PriceChangesGrid.jsx
+++ b/src-trader-dashboard/components/PriceChangesGrid.jsx
@@ -1,176 +0,0 @@
-import React, {Component} from "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";
-import forEach from "lodash/forEach";
-import includes from "lodash/includes";
-
-import ExchangeService from "../services/ExchangeService.jsx";
-
-export default class extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            columnDefs: [
-                {
-                    field: 'symbol',
-                    headerName: 'Symbol',
-                    sort: 'asc'
-                },
-                {
-                    field: 'price',
-                    headerName: 'Price',
-                    valueFormatter: this.numberFormatter,
-                    cellRenderer: 'agAnimateShowChangeCellRenderer',
-                    cellStyle: {'text-align': 'right'}
-                },
-                {
-                    field: 'bid',
-                    headerName: 'Bid',
-                    valueFormatter: this.numberFormatter,
-                    cellRenderer: 'agAnimateShowChangeCellRenderer',
-                    cellStyle: {'text-align': 'right'}
-                },
-                {
-                    field: 'ask',
-                    headerName: 'Ask',
-                    valueFormatter: this.numberFormatter,
-                    cellRenderer: 'agAnimateShowChangeCellRenderer',
-                    cellStyle: {'text-align': 'right'}
-                }
-            ]
-        };
-
-        this.exchangeService = new ExchangeService();
-
-        // grid events
-        this.onGridReady = this.onGridReady.bind(this);
-        this.onSelectionChanged = this.onSelectionChanged.bind(this);
-
-        // grid callbacks
-        this.getRowNodeId = this.getRowNodeId.bind(this);
-
-        // component events
-        this.updateSymbol = this.updateSymbol.bind(this);
-    }
-
-    numberFormatter(params) {
-        if (typeof params.value === 'number') {
-            return params.value.toFixed(2);
-        } else {
-            return params.value;
-        }
-    }
-
-    onGridReady(params) {
-        this.gridApi = params.api;
-        this.columnApi = params.columnApi;
-
-        // make realistic - call in a batch
-        let rowData = map(this.props.selectedExchange.supportedStocks, symbol => this.exchangeService.getTicker(symbol));
-        this.gridApi.updateRowData({add: rowData});
-
-        // select the first symbol to show the chart
-        this.gridApi.getModel().getRow(0).setSelected(true);
-
-        this.gridApi.sizeColumnsToFit();
-    }
-
-    getRowNodeId(data) {
-        return data.symbol;
-    }
-
-    onSelectionChanged() {
-        let selectedNode = this.gridApi.getSelectedNodes()[0];
-        this.props.onSelectionChanged(selectedNode ? selectedNode.data.symbol : null);
-    }
-
-    componentWillMount() {
-        this.props.selectedExchange.supportedStocks.forEach(symbol => {
-            this.exchangeService.addSubscriber(this.updateSymbol, symbol);
-        });
-    }
-
-    componentWillUnmount() {
-        this.exchangeService.removeSubscribers();
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.selectedExchange.supportedStocks !== this.props.selectedExchange.supportedStocks) {
-            if (!this.gridApi) {
-                return;
-            }
-            this.gridApi.deselectAll();
-
-            const currentSymbols = this.props.selectedExchange.supportedStocks;
-            const nextSymbols = nextProps.selectedExchange.supportedStocks;
-
-            // Unsubscribe to current ones that will be removed
-            const symbolsRemoved = difference(currentSymbols, nextSymbols);
-            forEach(symbolsRemoved, symbol => {
-                this.exchangeService.removeSubscriber(this.updateSymbol, symbol);
-            });
-
-            // Remove ag-grid nodes as necessary
-            const rowsToRemove = [];
-            this.gridApi.forEachNode(node => {
-                const {data} = node;
-                if (includes(symbolsRemoved, data.symbol)) {
-                    rowsToRemove.push(data);
-                }
-            });
-            this.gridApi.updateRowData({remove: rowsToRemove});
-
-            // Subscribe to new ones that need to be added
-            const symbolsAdded = difference(nextSymbols, currentSymbols);
-            forEach(symbolsAdded, symbol => {
-                this.exchangeService.addSubscriber(this.updateSymbol, symbol);
-            });
-
-            // Insert new ag-grid nodes as necessary
-            let rowData = map(symbolsAdded, symbol => this.exchangeService.getTicker(symbol));
-            this.gridApi.updateRowData({add: rowData});
-
-            // select the first symbol to show the chart
-            this.gridApi.getModel().getRow(0).setSelected(true);
-        }
-    }
-
-    updateSymbol(symbol) {
-        if (!this.gridApi) {
-            // the grid isn't ready yet
-            return;
-        }
-
-        this.gridApi.updateRowData({update: [symbol]});
-    }
-
-    render() {
-        return (
-            <div style={{height: 410, width: 800}}
-                 className="ag-theme-balham">
-                <AgGridReact
-                    // properties
-                    columnDefs={this.state.columnDefs}
-                    defaultColDef={{
-                        sortable: true
-                    }}
-                    rowSelection="single"
-
-                    modules={[ClientSideRowModelModule]}
-
-                    // callbacks
-                    getRowNodeId={this.getRowNodeId}
-
-                    // events
-                    onGridReady={this.onGridReady}
-                    onSelectionChanged={this.onSelectionChanged}>
-                </AgGridReact>
-            </div>
-        );
-    }
-}
--- a/src-trader-dashboard/components/StockDetailPanel.jsx
+++ b/src-trader-dashboard/components/StockDetailPanel.jsx
@@ -1,57 +0,0 @@
-import React, {Component} from "react";
-
-import ExchangeService from "../services/ExchangeService.jsx";
-
-import StockPriceDeltaPanel from "./StockPriceDeltaPanel.jsx";
-import StockTimestampPanel from "./StockTimestampPanel.jsx";
-import StockSummaryPanel from "./StockSummaryPanel.jsx";
-import StockHistoricalChartPanel from "./StockHistoricalChartPanel.jsx";
-
-export default class extends Component {
-    constructor(props) {
-        super(props);
-
-        this.exchangeService = new ExchangeService();
-
-        this.state = {
-            priceDelta: null,
-            timestamp: null,
-            tickerSummary: null,
-            historicalData: null
-        }
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.selectedSymbol &&
-            nextProps.selectedSymbol !== this.props.selectedSymbol) {
-            let stockDetail = this.exchangeService.getTickerDetail(nextProps.selectedSymbol);
-
-            this.setState({
-                pricingDelta: stockDetail.pricingDelta,
-                timestamp: stockDetail.timestamp,
-                tickerSummary: stockDetail.tickerSummary,
-                historicalData: stockDetail.historicalData
-            })
-        }
-    }
-
-    shouldComponentUpdate(nextProps) {
-        return nextProps.selectedSymbol !== this.props.selectedSymbol;
-    }
-
-    render() {
-        if (!this.props.selectedSymbol) {
-            return null;
-        } else {
-            return (
-                <div>
-                    <StockPriceDeltaPanel pricingDelta={this.state.pricingDelta}/>
-                    <StockTimestampPanel timestamp={this.state.timestamp}
-                                         exchangeName={this.props.exchangeName}/>
-                    <StockSummaryPanel tickerSummary={this.state.tickerSummary}/>
-                    <StockHistoricalChartPanel historicalData={this.state.historicalData}/>
-                </div>
-            );
-        }
-    }
-}
--- a/src-trader-dashboard/components/StockHistoricalChartPanel.jsx
+++ b/src-trader-dashboard/components/StockHistoricalChartPanel.jsx
@@ -1,128 +0,0 @@
-import React, {Component} from "react";
-
-import * as d3 from "d3";
-
-export default class extends Component {
-    constructor(props) {
-        super(props);
-
-        this.margin = {
-            top: 20,
-            right: 20,
-            bottom: 50,
-            left: 0
-        };
-
-        this.renderingWidth = this.props.graphWidth - this.margin.left - this.margin.right;
-        this.renderingheight = this.props.graphHeight - this.margin.top - this.margin.bottom;
-
-        this.x = d3.scaleTime()
-            .range([0, this.renderingWidth]);
-
-        this.y = d3.scaleLinear()
-            .rangeRound([this.renderingheight, 0]);
-
-        this.line = d3.line()
-            .x(d => this.x(d.date))
-            .y(d => this.y(d.price));
-    }
-
-    static get defaultProps() {
-        return {
-            graphHeight: 230,
-            graphWidth: 400
-        }
-    }
-
-    componentDidMount() {
-        this.renderGraph()
-    }
-
-    componentDidUpdate() {
-        this.renderGraph()
-    }
-
-    renderGraph() {
-        if (!this.props.historicalData) {
-            return;
-        }
-
-        let data = this.props.historicalData;
-        let parseTime = d3.timeParse("%d-%m-%Y");
-        data.forEach((datum) => {
-            datum.date = parseTime(datum.date);
-            datum.price = +datum.price;
-        });
-
-        // clear out any previous graph
-        d3.select(this.refs.historyGraph)
-            .selectAll("svg")
-            .remove();
-
-        // create a new one
-        let svg = d3.select(this.refs.historyGraph)
-            .append('svg')
-            .attr('height', this.props.graphHeight)
-            .attr('width', this.props.graphWidth);
-
-        let g = svg.append("g")
-            .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
-
-        this.x.domain(d3.extent(data, d => d.date));
-
-        this.y.domain(d3.extent(data, d => d.price));
-
-        let scale = d3.scaleTime()
-            .domain(d3.extent(data, d => d.date))
-            .range([0, this.renderingWidth]);
-
-        // Add the x Axis
-        svg.append("g")
-            .attr("class", "axis")
-            .attr("transform", "translate(0," + (this.renderingheight + 20 ) + ")")
-            .call(d3.axisBottom(scale).tickFormat(d3.timeFormat("%Y-%m-%d")))
-            .selectAll("text")
-            .attr("y", 0)
-            .attr("x", 9)
-            .attr("dy", ".35em")
-            .attr("transform", "rotate(55)")
-            .style("text-anchor", "start");
-
-        // Add the y Axis
-        svg.append("g")
-            .call(d3.axisLeft(this.y));
-
-        g.append("g")
-            .call(d3.axisLeft(this.y))
-            .append("text")
-            .attr("fill", "#000")
-            .attr("transform", "rotate(-90)")
-            .attr("y", 9)
-            .attr("dy", "0.71em")
-            .attr("text-anchor", "end")
-            .text("Price ($)");
-
-        g.append("path")
-            .datum(data)
-            .attr("fill", "none")
-            .attr("stroke", "steelblue")
-            .attr("stroke-linejoin", "round")
-            .attr("stroke-linecap", "round")
-            .attr("stroke-width", 1.5)
-            .attr("d", this.line);
-    }
-
-    render() {
-        let containerStyle = {
-            marginTop: 5
-        };
-
-        if (!this.props.historicalData) {
-            return null;
-        } else {
-            return (
-                <div style={containerStyle} ref="historyGraph"></div>
-            );
-        }
-    }
-}
--- a/src-trader-dashboard/components/StockPanel.jsx
+++ b/src-trader-dashboard/components/StockPanel.jsx
@@ -1,56 +0,0 @@
-import React, {Component} from "react";
-
-import PriceChangesGrid from "./PriceChangesGrid.jsx";
-import StockDetailPanel from "./StockDetailPanel.jsx";
-import FxPanel from "./FxPanel.jsx";
-
-export default class extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            selectedSymbol: null
-        };
-
-        this.onSelectionChanged = this.onSelectionChanged.bind(this);
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.selectedExchange !== this.props.selectedExchange) {
-            this.setState({
-                selectedSymbol: null
-            })
-        }
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return nextProps.selectedExchange !== this.props.selectedExchange ||
-            nextState.selectedSymbol !== this.state.selectedSymbol;
-    }
-
-    onSelectionChanged(selectedSymbol) {
-        this.setState({
-            selectedSymbol
-        })
-    }
-
-    render() {
-        return (
-            <div style={{width: 1250}}>
-                <div>
-                    <div style={{float: "left", marginRight: 25}}>
-                        <PriceChangesGrid selectedExchange={this.props.selectedExchange}
-                                          onSelectionChanged={this.onSelectionChanged}/>
-                    </div>
-                    <div style={{float: "left"}}>
-                        <StockDetailPanel selectedSymbol={this.state.selectedSymbol}
-                                          exchangeName={this.props.selectedExchange.name}/>
-                    </div>
-                </div>
-                <div style={{width: "100%", clear: "both", paddingTop: 25}}>
-                    <FxPanel/>
-                </div>
-            </div>
-        );
-    }
-};
--- a/src-trader-dashboard/components/StockPriceDeltaPanel.jsx
+++ b/src-trader-dashboard/components/StockPriceDeltaPanel.jsx
@@ -1,95 +0,0 @@
-import React, {Component} from "react";
-
-import isEqual from "lodash/isEqual";
-
-export default class extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            currentPrice: null,
-            delta: null,
-            deltaPercentage: null
-        };
-
-    }
-
-    componentDidMount() {
-        this.updatePriceDelta(this.props.pricingDelta);
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (!isEqual(this.props.pricingDelta, nextProps.pricingDelta)) {
-            this.updatePriceDelta(nextProps.pricingDelta);
-        }
-    }
-
-    updatePriceDelta(pricingDelta) {
-        let delta = pricingDelta.currentPrice - pricingDelta.previousPrice;
-        let deltaPercentage = (pricingDelta.currentPrice - pricingDelta.previousPrice) / pricingDelta.currentPrice;
-
-        this.setState({
-            currentPrice: pricingDelta.currentPrice,
-            delta,
-            deltaPercentage
-        })
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return !isEqual(this.props.pricingDelta, nextProps.pricingDelta) ||
-            !isEqual(this.state, nextState);
-    }
-
-    numberFormatter(input) {
-        return input ? input.toFixed(2) : null;
-    }
-
-    render() {
-        let containerStyle = {
-            display: "inline-block"
-        };
-
-        let priceStyle = {
-            fontSize: "2.6em",
-            fontWeight: "bold",
-            marginRight: 10
-        };
-
-        let deltaStyle = {
-            fontWeight: "normal",
-            fontSize: "1.8em",
-            verticalAlign: "bottom"
-        };
-
-        let negativeSwingStyle = {
-            color: "#d14836",
-            marginRight: 5
-        };
-
-        let positiveSwingStyle = {
-            color: "#093",
-            marginRight: 5
-        };
-
-        let swingStyle = this.state.delta >= 0 ? positiveSwingStyle : negativeSwingStyle;
-
-        if (!this.props.pricingDelta) {
-            return null;
-        } else {
-            return (
-                <div>
-                    <span style={priceStyle}>
-                        {this.numberFormatter(this.state.currentPrice)}
-                    </span>
-                    <div style={containerStyle}>
-                        <span style={deltaStyle}>
-                            <span style={swingStyle}>{this.numberFormatter(this.state.delta)}</span>
-                            <span
-                                style={swingStyle}>({this.numberFormatter(this.state.deltaPercentage)}%)</span>
-                        </span>
-                    </div>
-                </div>
-            );
-        }
-    }
-}
--- a/src-trader-dashboard/components/StockSummaryPanel.jsx
+++ b/src-trader-dashboard/components/StockSummaryPanel.jsx
@@ -1,78 +0,0 @@
-import React, {Component} from "react";
-
-export default class extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        let containerStyle = {
-            fontSize: 13
-        };
-
-        let tableStyle = {
-            display: "inline-block",
-            verticalAlign: "top",
-            borderCollapse: "collapse"
-
-        };
-
-        let keyStyle = {
-            color: "#666"
-        };
-
-        let valueStyle = {
-            textAlign: "right"
-        };
-
-        if (!this.props.tickerSummary) {
-            return null;
-        } else {
-            return (
-                <div style={containerStyle}>
-                    <table style={tableStyle}>
-                        <tbody>
-                        <tr>
-                            <td style={keyStyle}>Range</td>
-                            <td style={valueStyle}>{this.props.tickerSummary.range}</td>
-                        </tr>
-                        <tr>
-                            <td style={keyStyle}>52 week</td>
-                            <td style={valueStyle}>{this.props.tickerSummary.fiftyTwoWeek}</td>
-                        </tr>
-                        <tr>
-                            <td style={keyStyle}>Open</td>
-                            <td style={valueStyle}>{this.props.tickerSummary.open}</td>
-                        </tr>
-                        <tr>
-                            <td style={keyStyle}>Vol / Avg.</td>
-                            <td style={valueStyle}>{this.props.tickerSummary.vol}/{this.props.tickerSummary.avg}
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <table style={tableStyle}>
-                        <tbody>
-                        <tr>
-                            <td style={keyStyle}>Div/yield</td>
-                            <td style={valueStyle}>{this.props.tickerSummary.dividend}/{this.props.tickerSummary.yld}</td>
-                        </tr>
-                        <tr>
-                            <td style={keyStyle}>EPS</td>
-                            <td style={valueStyle}>{this.props.tickerSummary.eps}</td>
-                        </tr>
-                        <tr>
-                            <td style={keyStyle}>Shares</td>
-                            <td style={valueStyle}>{this.props.tickerSummary.shares}</td>
-                        </tr>
-                        <tr>
-                            <td style={keyStyle}>Market Cap</td>
-                            <td style={valueStyle}>{this.props.tickerSummary.marketCap}</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-            );
-        }
-    }
-}
--- a/src-trader-dashboard/components/StockTimestampPanel.jsx
+++ b/src-trader-dashboard/components/StockTimestampPanel.jsx
@@ -1,30 +0,0 @@
-import React, {Component} from "react";
-
-export default class extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        let minorStyle = {
-            fontSize: 11,
-            color: "#6F6F6F"
-        };
-
-        if (!this.props.timestamp) {
-            return null;
-        } else {
-            return (
-                <div>
-                    <div>
-                        {this.props.timestamp}
-                        <div style={minorStyle}>
-                            <span>{this.props.exchangeName}</span>
-                            <div>Currency in USD</div>
-                        </div>
-                    </div>
-                </div>
-            );
-        }
-    }
-}
--- a/src-trader-dashboard/components/TopMoversGrid.jsx
+++ b/src-trader-dashboard/components/TopMoversGrid.jsx
@@ -1,95 +0,0 @@
-import React, {Component} from "react";
-import {connect} from "react-redux";
-
-import {AgGridReact} from "@ag-grid-community/react";
-import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules";
-
-class TopMoversGrid extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            columnDefs: [
-                {
-                    field: 'symbol',
-                    headerName: 'Symbol'
-                },
-                {
-                    field: 'last',
-                    headerName: 'Last',
-                    headerClass: 'align-right',
-                    cellRenderer: 'agAnimateShowChangeCellRenderer',
-                    cellClass: 'align-right'
-                },
-                {
-                    field: 'net',
-                    headerName: 'Net',
-                    headerClass: 'align-right',
-                    cellRenderer: 'agAnimateShowChangeCellRenderer',
-                    cellClass: 'align-right'
-                },
-                {
-                    field: 'pct_net_change',
-                    headerName: '% NC',
-                    headerClass: 'align-right',
-                    cellRenderer: 'agAnimateShowChangeCellRenderer',
-                    cellClass: 'align-right',
-                    sort: 'desc',
-                    valueFormatter(params) {
-                        return params.value.toFixed(2)
-                    }
-                },
-            ]
-        };
-
-        // grid events
-        this.onGridReady = this.onGridReady.bind(this);
-
-        // grid callbacks
-        this.getRowNodeId = this.getRowNodeId.bind(this);
-    }
-
-    getRowNodeId(data) {
-        return data.symbol;
-    }
-
-    onGridReady(params) {
-        this.gridApi = params.api;
-        this.columnApi = params.columnApi;
-
-        this.gridApi.sizeColumnsToFit();
-    }
-
-    render() {
-        return (
-            <div style={{height: 410, width: 400}}
-                 className="ag-theme-balham">
-                <AgGridReact
-                    // properties
-                    columnDefs={this.state.columnDefs}
-                    rowData={this.props.rowData}
-                    defaultColDef={{
-                        sortable: true,
-                        filter: false
-                    }}
-                    animateRows
-                    deltaRowDataMode
-                    getRowNodeId={this.getRowNodeId}
-
-                    modules={[ClientSideRowModelModule]}
-
-                    // events
-                    onGridReady={this.onGridReady}>
-                </AgGridReact>
-            </div>
-        );
-    }
-}
-
-export default connect(
-    (state) => {
-        return {
-            rowData: state ? state.fxTopMovers : null
-        }
-    }
-)(TopMoversGrid);
--- a/src-trader-dashboard/components/TraderDashboard.jsx
+++ b/src-trader-dashboard/components/TraderDashboard.jsx
@@ -1,43 +0,0 @@
-import React, {Component} from "react";
-
-import ExchangeService from "../services/ExchangeService.jsx";
-
-import ControlPanel from "./ControlPanel.jsx";
-import StockPanel from "./StockPanel.jsx";
-
-
-export default class TraderDashboard extends Component {
-    constructor(props) {
-        super(props);
-
-        this.exchangeService = new ExchangeService();
-
-        this.state = {
-            selectedExchange: this.exchangeService.getExchangeInformation("NASDAQ"),
-            exchanges: this.exchangeService.getExchanges()
-        };
-
-        this.onExchangeChanged = this.onExchangeChanged.bind(this);
-    }
-
-    onExchangeChanged(selectedExchange) {
-        this.setState({
-            selectedExchange: this.exchangeService.getExchangeInformation(selectedExchange)
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <div style={{marginTop: 25, marginBottom: 25}}>
-                    <ControlPanel
-                        exchanges={this.state.exchanges}
-                        selectedExchange={this.state.selectedExchange}
-                        onExchangeChanged={this.onExchangeChanged}>
-                    </ControlPanel>
-                </div>
-                <StockPanel selectedExchange={this.state.selectedExchange}/>
-            </div>
-        );
-    }
-};
--- a/src-trader-dashboard/components/renderers/HorizontalBarComponent.jsx
+++ b/src-trader-dashboard/components/renderers/HorizontalBarComponent.jsx
@@ -1,58 +0,0 @@
-import React, {Component} from "react";
-import * as PropTypes from 'prop-types';
-
-export default class HorizontalBarComponent extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            value: this.props.value
-        }
-    }
-
-    render() {
-        let positiveChange = {
-            fill: "green"
-        };
-
-        let negativeChange = {
-            fill: "red"
-        };
-
-        let text = {
-            position: "absolute",
-            top: 0,
-            width: "100%",
-            textAlign: "right"
-        };
-
-        let pctNetChange = this.state.value;
-        let pctNetChangeBar = Math.min(Math.abs(pctNetChange) * 100, 100) / 2;
-
-        let barWidth = `${pctNetChangeBar}%`;
-        let barStyle = pctNetChange >= 0 ? positiveChange : negativeChange;
-        let barX = `${pctNetChange >= 0 ? '50' : 50 - pctNetChangeBar}%`;
-        return (
-            <div style={{position: 'relative'}}>
-                <div style={{width: "50%"}}>
-                    <svg width="100%" preserveAspectRatio="none">
-                        <rect x={barX} y="0" width={barWidth} height="20px" rx="4" ry="4" style={barStyle}/>
-                    </svg>
-                </div>
-                <div style={text}>{pctNetChange}</div>
-            </div>
-        )
-    }
-
-    refresh(params) {
-        this.setState({
-            value: params.value
-        });
-        return true;
-    }
-}
-
-HorizontalBarComponent.propTypes = {
-    params: PropTypes.object
-};
--- a/src-trader-dashboard/index.html
+++ b/src-trader-dashboard/index.html
@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <script type="text/javascript" src="../dist/react-trader.js" charset="utf-8"></script>
-
-    <style>
-        html, body {
-            height: 100%;
-        }
-
-        .ag-fresh .ag-value-change-value-highlight {
-            background-color: #afbcff;
-        }
-
-        .align-right {
-            text-align: right
-        }
-
-        .pct-change-green {
-            background-color: lightgreen;
-        }
-
-        .pct-change-amber {
-            background-color: lightgoldenrodyellow;
-        }
-
-        .pct-change-red {
-            background-color: red;
-        }
-
-        .fx-null {
-            border-top: 20px solid #3ACFD5;
-            border-right: 20px solid #3a4ed5;
-            -webkit-box-sizing: border-box;
-            -moz-box-sizing: border-box;
-            box-sizing: border-box;
-            background-position: 0 0, 0 100%;
-            background-repeat: no-repeat;
-            -webkit-background-size: 100% 20px;
-            -moz-background-size: 100% 20px;
-            background-size: 100% 20px;
-            /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);*/
-            background-image: -webkit-linear-gradient(top, #afbcff 0%, #c1d5c9 100%), -webkit-linear-gradient(top, #afbcff 0%, #c1d5c9 100%);
-            background-image: -moz-linear-gradient(top, #afbcff 0%, #c1d5c9 100%), -moz-linear-gradient(top, #afbcff 0%, #c1d5c9 100%);
-            background-image: -o-linear-gradient(top, #afbcff 0%, #c1d5c9 100%), -o-linear-gradient(top, #afbcff 0%, #c1d5c9 100%);
-            background-image: linear-gradient(to bottom, #afbcff 0%, #c1d5c9 100%), linear-gradient(to bottom, #afbcff 0%, #c1d5c9 100%);
-        }
-
-        .fx-positive {
-            border-top: 20px solid #3ACFD5;
-            border-right: 20px solid #3a4ed5;
-            -webkit-box-sizing: border-box;
-            -moz-box-sizing: border-box;
-            box-sizing: border-box;
-            background-position: 0 0, 0 100%;
-            background-repeat: no-repeat;
-            -webkit-background-size: 100% 20px;
-            -moz-background-size: 100% 20px;
-            background-size: 100% 20px;
-            /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);*/
-            background-image: -webkit-linear-gradient(top, #00FF00 0%, #c1d5c9 100%), -webkit-linear-gradient(top, #00FF00 0%, #c1d5c9 100%);
-            background-image: -moz-linear-gradient(top, #00FF00 0%, #c1d5c9 100%), -moz-linear-gradient(top, #00FF00 0%, #c1d5c9 100%);
-            background-image: -o-linear-gradient(top, #00FF00 0%, #c1d5c9 100%), -o-linear-gradient(top, #00FF00 0%, #c1d5c9 100%);
-            background-image: linear-gradient(to bottom, #00FF00 0%, #c1d5c9 100%), linear-gradient(to bottom, #00FF00 0%, #c1d5c9 100%);
-        }
-
-        .fx-negative {
-            border-top: 20px solid #3ACFD5;
-            border-right: 20px solid #3a4ed5;
-            -webkit-box-sizing: border-box;
-            -moz-box-sizing: border-box;
-            box-sizing: border-box;
-            background-position: 0 0, 0 100%;
-            background-repeat: no-repeat;
-            -webkit-background-size: 100% 20px;
-            -moz-background-size: 100% 20px;
-            background-size: 100% 20px;
-            /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);*/
-            background-image: -webkit-linear-gradient(top, #FF0000 0%, #d5b3af 100%), -webkit-linear-gradient(top, #FF0000 0%, #d5b3af 100%);
-            background-image: -moz-linear-gradient(top, #FF0000 0%, #d5b3af 100%), -moz-linear-gradient(top, #FF0000 0%, #d5b3af 100%);
-            background-image: -o-linear-gradient(top, #FF0000 0%, #d5b3af 100%), -o-linear-gradient(top, #FF0000 0%, #d5b3af 100%);
-            background-image: linear-gradient(to bottom, #FF0000 0%, #d5b3af 100%), linear-gradient(to bottom, #FF0000 0%, #d5b3af 100%);
-        }
-    </style>
-</head>
-
-<body>
-<div id="traderDashboard"></div>
-</body>
-</html>
--- a/src-trader-dashboard/index.js
+++ b/src-trader-dashboard/index.js
@@ -1,24 +0,0 @@
-'use strict';
-
-import React from "react";
-import {render} from "react-dom";
-
-import {Provider} from "react-redux";
-
-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', () => {
-    render(
-        <Provider store={store}>
-            <TraderDashboard />
-        </Provider>,
-        document.querySelector('#traderDashboard')
-    );
-});
-
--- a/src-trader-dashboard/reducers/fxDataReducer.jsx
+++ b/src-trader-dashboard/reducers/fxDataReducer.jsx
@@ -1,16 +0,0 @@
-export default (state = {fxData: [], fxTopMovers: []}, action) => {
-    switch (action.type) {
-        case 'FX_DATA_CHANGED':
-            return {
-                ...state,
-                fxData: action.fxData.slice(0),
-            };
-        case 'FX_TOP_MOVERS_CHANGED':
-            return {
-                ...state,
-                fxTopMovers: action.fxTopMovers.slice(0),
-            };
-        default:
-            return action.state;
-    }
-};
--- a/src-trader-dashboard/services/ExchangeService.jsx
+++ b/src-trader-dashboard/services/ExchangeService.jsx
@@ -1,341 +0,0 @@
-import concat from "lodash/concat";
-import uniq from "lodash/uniq";
-import find from "lodash/find";
-import sampleSize from "lodash/sampleSize";
-import keys from "lodash/keys";
-
-export default class {
-    constructor() {
-        this.subscribers = {};
-        this.timestamp = new Date();
-
-        // create the initial state of data
-        this.initialiseTickerData();
-    }
-
-    addSubscriber(subscriber, symbol) {
-        if (!this.subscribers[symbol]) {
-            this.subscribers[symbol] = [];
-        }
-        this.subscribers[symbol].push(subscriber);
-
-        if (!this.updateInterval) {
-            this.updateInterval = setInterval(this.applyDeltasToTickerData.bind(this), 500);
-        }
-    }
-
-    removeSubscriber(subscriber, symbol) {
-        let subscribers = this.subscribers[symbol];
-        subscribers.splice(subscribers.indexOf(subscriber), 1);
-    }
-
-    removeSubscribers() {
-        this.subscribers = {};
-    }
-
-    getTicker(symbol) {
-        return this.tickerData[symbol];
-    }
-
-    getExchanges() {
-        return EXCHANGES;
-    }
-
-    getExchangeInformation(exchangeName) {
-        return find(EXCHANGES, (exchange) => {
-            return exchange.symbol === exchangeName;
-        })
-    }
-
-    getTickerDetail(symbol) {
-        return this.createTickerDetail(symbol);
-    }
-
-    /*
-     * the rest of this class exists primarily to create mock data - it can safely be ignored
-     * as it is secondary to the main ideas being demonstrated by the rest of the application
-     */
-    initialiseTickerData() {
-        this.tickerData = {};
-
-        const allSymbols = uniq(concat(NASDAQ_SYMBOLS, LSE_SYMBOLS, JSE_SYMBOLS, DE_SYMBOLS));
-        allSymbols.forEach((symbol) => {
-            this.tickerData[symbol] = this.generateTickerRow(symbol);
-        });
-    }
-
-    generateTickerRow(symbol) {
-        let price = this.random(10, 600);
-        return {
-            symbol,
-            price,
-            bid: price - this.random(1, 3),
-            ask: price + this.random(1, 3),
-            recommendation: ['Buy', 'Hold', 'Sell'][Math.floor(this.random(0, 2))]
-        }
-    }
-
-    random(min, max) {
-        return parseFloat((Math.random() * (max - min + 1) + min))
-    }
-
-    applyDeltasToTickerData() {
-        let symbols = keys(this.subscribers);
-        let properties = ['price', 'bid', 'ask'];
-
-        let symbolsToAlter = sampleSize(symbols, symbols.length / 4);
-        let propertyToAlter = sampleSize(properties, 1);
-
-        symbolsToAlter.forEach((symbol) => {
-            this.tickerData[symbol] = {
-                symbol,
-                price: this.tickerData[symbol].price,
-                bid: this.tickerData[symbol].bid,
-                ask: this.tickerData[symbol].ask
-            };
-
-            this.tickerData[symbol][propertyToAlter] = +this.tickerData[symbol][propertyToAlter] + this.random(-2, 2);
-        });
-
-        symbols.forEach((symbol) => {
-            this.subscribers[symbol].forEach((subscriber) => {
-                subscriber(this.tickerData[symbol]);
-            });
-        });
-    }
-
-    formatNumber(input) {
-        return input.toFixed(2);
-    }
-
-    formatWithDecimalPlaces(x) {
-        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-    }
-
-    createTickerDetail(symbol) {
-        let ticker = this.getTicker(symbol);
-        let currentPrice = ticker.price;
-        let tenthOfCurrentPrice = currentPrice / 10;
-        let previousPrice = +currentPrice + this.random(-tenthOfCurrentPrice, tenthOfCurrentPrice);
-
-        let twentiethOfCurrentPrice = currentPrice / 20;
-        let yearAgoPrice = this.random(-twentiethOfCurrentPrice, twentiethOfCurrentPrice);
-
-        let range = `${this.formatNumber(previousPrice)} - ${this.formatNumber(currentPrice)}`;
-        let fiftyTwoWeek = `${this.formatNumber(yearAgoPrice)} - ${this.formatNumber(currentPrice)}`;
-
-        let open = this.formatNumber(ticker.bid); // not the same, but will do for demo purposes
-
-        let vol = this.formatWithDecimalPlaces(this.random(5000, 20000).toFixed(2));
-        let avg = `${this.formatNumber(this.random(10, 30))}M`;
-
-        let dividend = this.random(0, 1).toFixed(2);
-        let yld = this.random(1, 2).toFixed(2);
-
-        let eps = this.random(5, 10).toFixed(2);
-
-        let shares = `${this.random(3000, 10000).toFixed(2)}M`;
-
-        let marketCap = `${this.random(100000, 900000).toFixed(2)}M`;
-
-        let historicalData = this.generateHistoricalData(100, this.timestamp, currentPrice);
-
-        return {
-            pricingDelta: {
-                currentPrice,
-                previousPrice
-            },
-            timestamp: this.timestamp.toDateString(),
-            tickerSummary: {
-                range,
-                fiftyTwoWeek,
-                open,
-                vol,
-                avg,
-                dividend,
-                yld,
-                eps,
-                shares,
-                marketCap
-            },
-            historicalData
-        }
-    }
-
-    formatDate(date) {
-        return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
-    }
-
-    generateHistoricalData(numberOfPoints, endDate, endPrice) {
-        let historicalData = [{
-            "date": this.formatDate(endDate),
-            "price": endPrice
-        }
-        ];
-
-        let numberOfTransitions = 15;
-        let pointsPerTransition = numberOfPoints / numberOfTransitions;
-
-        let lastDate = endDate;
-        let lastPrice = endPrice;
-        for (let transition = 0; transition < numberOfTransitions; transition++) {
-            let swing = (Math.random() >= 0.5) ? 1 : -1;
-
-            for (let i = 0; i <= pointsPerTransition; i++) {
-                lastDate.setDate(lastDate.getDate() - 1);
-                lastPrice = lastPrice + (swing * this.random(-1, 10));
-                lastPrice = lastPrice < 0 ? 0 : lastPrice;
-
-                historicalData.splice(0, 0, ({
-                    "date": this.formatDate(lastDate),
-                    "price": lastPrice
-                }));
-            }
-        }
-
-        return historicalData;
-    }
-}
-
-const NASDAQ_SYMBOLS = [
-    "SNCL.L",
-    "RNK.L",
-    "SWJ.L",
-    "JDT.L",
-    "UANC.L",
-    "SDP.L",
-    "HSBA.L",
-    "XPL.L",
-    "KLR.L",
-    "SSE.L",
-    "JSI.L",
-    "UBMN.L",
-    "WPC.L",
-    "VTC.L",
-    "UTG.L",
-    "DOR.L",
-    "44RS.L",
-    "GPOR.L",
-    "ASL.L",
-    "40JP.L",
-    "133716",
-    "PJF.L",
-    "MLC.L",
-    "137817",
-    "GHE.L",
-    "PML.L",
-    "SBRY.L",
-    "LEN.L",
-    "STS.L",
-    "138654",
-    "PTEC.L"
-];
-
-const LSE_SYMBOLS = [
-    "PVG.L",
-    "SN.L,",
-    "SWJ.L",
-    "JDT.L",
-    "UANC.L",
-    "SDP.L",
-    "HSBA.L",
-    "XPL.L",
-    "KLR.L",
-    "SSE.L",
-    "JSI.L",
-    "UBMN.L",
-    "DLN.L",
-    "SIR.L",
-    "SEC.L",
-    "DOR.L",
-    "44RS.L",
-    "GPOR.L",
-    "ASL.L",
-    "40JP.L",
-    "133716",
-    "PJF.L",
-    "MLC.L",
-    "137817",
-    "GHE.L",
-    "PML.L",
-    "SBRY.L",
-    "LEN.L",
-    "MAV4.L",
-    "GLEN.L",
-    "EDGD.L",
-];
-
-const JSE_SYMBOLS = [
-    "ECV.L",
-    "MHN.L",
-    "SWJ.L",
-    "JDT.L",
-    "UANC.L",
-    "PLAZ.L",
-    "CLDN.L",
-    "XPL.L",
-    "KLR.L",
-    "SSE.L",
-    "JSI.L",
-    "UBMN.L",
-    "WPC.L",
-    "VTC.L",
-    "UTG.L",
-    "DOR.L",
-    "44RS.L",
-    "GPOR.L",
-    "ASL.L",
-    "40JP.L",
-    "133716",
-    "CRW.L",
-    "JPR.L",
-    "UTLC.L",
-    "GHS.L",
-    "PML.L",
-    "SBRY.L",
-    "LEN.L",
-    "STS.L",
-    "138654",
-    "RWS.L"
-];
-
-const DE_SYMBOLS = [
-    "ECV.L",
-    "MHN.L",
-    "SWJ.L",
-    "JDT.L",
-    "UANC.L",
-    "SDP.L",
-    "KBC.L",
-    "VM.L,",
-    "KLR.L",
-    "SSE.L",
-    "JSI.L",
-    "UBMN.L",
-    "WPC.L",
-    "VTC.L",
-    "UTG.L",
-    "DOR.L",
-    "44RS.L",
-    "GPOR.L",
-    "ASL.L",
-    "40JP.L",
-    "133716",
-    "PJF.L",
-    "MLC.L",
-    "DPV6.L",
-    "LMIN.L",
-    "PML.L",
-    "SBRY.L",
-    "LEN.L",
-    "STS.L",
-    "BKIR.L",
-    "AFMF.L",
-];
-
-const EXCHANGES = [
-    {name: 'Nasdaq Stock Market', symbol: 'NASDAQ', supportedStocks: NASDAQ_SYMBOLS},
-    {name: 'London Stock Exchange', symbol: 'LSE', supportedStocks: LSE_SYMBOLS},
-    {name: 'Japan Exchange Group', symbol: 'JSE', supportedStocks: JSE_SYMBOLS},
-    {name: 'Deutsche Börse', symbol: 'DE', supportedStocks: DE_SYMBOLS}
-];
--- a/src-trader-dashboard/services/FxDataService.jsx
+++ b/src-trader-dashboard/services/FxDataService.jsx
@@ -1,201 +0,0 @@
-import sampleSize from "lodash/sampleSize";
-import cloneDeep from "lodash/cloneDeep";
-
-import StoreService from "./StoreService";
-import {fxDataUpdated, fxTopMoversUpdated} from "../actions/fxDataActions";
-
-import HorizontalBarComponent from "../components/renderers/HorizontalBarComponent.jsx";
-
-export default class {
-    constructor() {
-        this.store = StoreService.STORE;
-
-        // create the initial state of the fx data
-        this.createFxMatrixSnapshot();
-        this.calculateTopMovers();
-
-        // and dispatch it
-        this.store.dispatch(fxDataUpdated(this.fxData));
-        this.store.dispatch(fxTopMoversUpdated(this.fxTopMovers));
-
-        // periodically update the fx and top mover information
-        this.kickOffPeriodicUpdates();
-    }
-
-    kickOffPeriodicUpdates() {
-        setInterval(() => {
-            this.applyDeltasToFxData();
-
-            this.store.dispatch(fxDataUpdated(this.fxData));
-        }, 1500);
-
-        setInterval(() => {
-            this.calculateTopMovers();
-
-            this.store.dispatch(fxTopMoversUpdated(this.fxTopMovers));
-        }, 2500);
-    }
-
-    /*
-     * the rest of this class exists primarily to create mock data - it can safely be ignored
-     * as it is secondary to the main ideas being demonstrated by the rest of the application
-     */
-    calculateTopMovers() {
-        let fxData = cloneDeep(this.fxData);
-        fxData.sort((a, b) => {
-            return Math.abs(b.pct_net_change) - Math.abs(a.pct_net_change);
-        });
-
-        this.fxTopMovers = fxData.slice(0, 20);
-    }
-
-    applyDeltasToFxData() {
-        let fxSymbolsToUpdate = sampleSize(FX_CURRENCY_SYMBOLS, FX_CURRENCY_SYMBOLS.length / 5);
-        let rowsToUpdate = sampleSize(this.fxData, this.fxData.length / 5);
-        for (let i = 0; i < rowsToUpdate.length; i++) {
-            let row = rowsToUpdate[i];
-
-            let maxSwing = row.last * 0.05; // max 5% swing
-            let swing = Math.floor(this.random(-maxSwing, maxSwing));
-            row.last = row.last + swing;
-            row.net = swing;
-
-            let multiplier = ((Math.random() * 10) > 5) ? -1 : 1;
-            row['pct_net_change'] = multiplier * (this.random(30, 100) / 100).toFixed(2);
-
-            for (let symbolToUpdate of fxSymbolsToUpdate) {
-                if (row[symbolToUpdate] === null) {
-                    continue;
-                }
-
-                let multiplier = ((Math.random() * 10) > 8) ? -1 : 1;
-                row[symbolToUpdate] = (multiplier * Math.random()).toFixed(2);
-            }
-        }
-    }
-
-    random(min, max) {
-        return parseFloat((Math.random() * (max - min + 1) + min))
-    }
-
-    getFxMatrixHeaderNames() {
-        return FX_DELTA_HEADERS;
-    }
-
-    createFxMatrixSnapshot() {
-        let columns = FX_CURRENCY_MATRIX[0];
-        let data = FX_CURRENCY_MATRIX.slice(1);
-
-        let rowData = [];
-        for (let i = 0; i < data.length; i++) {
-            let currentRow = data[i];
-
-            let row = {};
-            for (let j = 0; j < columns.length; j++) {
-                row[columns[j]] = currentRow[j];
-            }
-
-            // last, net and % change are different
-            row['last'] = Math.floor(this.random(7000, 170000));
-            row['net'] = Math.floor(this.random(-500, 500));
-
-            let multiplier = ((Math.random() * 10) > 5) ? -1 : 1;
-            row['pct_net_change'] = multiplier * (this.random(30, 100) / 100).toFixed(2);
-
-            rowData.push(row);
-        }
-
-        this.fxData = rowData;
-    }
-}
-
-const FX_CURRENCY_SYMBOLS = ["USDGBP", "USDEUR", "USDAED", "USDJPY", "USDCAD", "USDCHF", "GBPUSD", "GBPEUR", "GBPAED", "GBPJPY", "GBPCAD", "GBPCHF", "EURUSD", "EURGBP", "EURAED", "EURJPY", "EURCAD", "EURCHF", "AEDUSD", "AEDGBP", "AEDEUR", "AEDJPY", "AEDCAD", "AEDCHF", "JPYUSD", "JPYGBP", "JPYEUR", "JPYAED", "JPYCAD", "JPYCHF", "CADUSD", "CADGBP", "CADEUR", "CADAED", "CADJPY", "CADCHF", "CHFUSD", "CHFGBP", "CHFEUR", "CHFAED", "CHFJPY", "CHFCAD"];
-const FX_DELTA_HEADERS = [
-    {
-        field: 'symbol',
-        headerName: 'Symbol',
-        width: 80
-    },
-    {
-        field: 'last',
-        headerName: 'Last',
-        headerClass: 'align-right',
-        cellRenderer: 'agAnimateShowChangeCellRenderer',
-        cellClass: 'align-right',
-        width: 100
-    },
-    {
-        field: 'net',
-        headerName: 'Net',
-        headerClass: 'align-right',
-        cellRenderer: 'agAnimateShowChangeCellRenderer',
-        cellClass: 'align-right',
-        width: 90
-    },
-    {
-        field: 'pct_net_change',
-        headerName: '% NC',
-        cellRendererFramework: HorizontalBarComponent,
-        width: 85
-    },
-].concat(FX_CURRENCY_SYMBOLS.map((symbol) => {
-    "use strict";
-    return {
-        field: symbol,
-        headerName: symbol,
-        width: 67,
-        cellClass: 'align-right',
-        cellRenderer: 'agAnimateShowChangeCellRenderer',
-        cellClassRules: {
-            'fx-positive': 'x > 0.8',
-            'fx-null': 'x === null',
-            'fx-negative': 'x < -0.8'
-        }
-    }
-}));
-
-const FX_CURRENCY_MATRIX = [
-    ["symbol", ...FX_CURRENCY_SYMBOLS],
-    ["USDGBP", null, "0.89", "-0.01", "0.29", "0.28", "-0.04", "0.47", "0.17", "0.20", "0.11", "0.97", "0.07", "-0.20", "0.57", "0.54", "0.26", "0.33", "0.86", "0.95", "0.39", "0.21", "-0.49", "0.63", "-0.13", "-0.86", "0.18", "-0.84", "-0.89", "0.05", "-0.29", "0.34", "0.93", "0.41", "0.13", "-0.17", "0.70", "-0.17", "0.60", "0.00", "0.09", "-0.15", "0.10"],
-    ["USDEUR", "0.89", null, "0.25", "0.29", "0.86", "-0.93", "0.09", "0.63", "0.76", "0.10", "0.51", "-0.31", "-0.51", "0.20", "0.48", "-0.42", "0.73", "0.57", "0.65", "0.40", "0.12", "0.24", "0.42", "0.75", "0.13", "0.75", "0.42", "-0.80", "-0.26", "0.68", "0.68", "0.98", "0.87", "0.48", "0.52", "0.23", "0.61", "0.71", "-0.61", "0.40", "-0.80", "-0.89"],
-    ["USDAED", "0.90", "0.95", null, "0.71", "0.49", "0.50", "0.51", "0.07", "0.80", "-0.74", "0.54", "0.46", "-0.90", "-0.33", "0.75", "0.91", "0.84", "0.86", "0.89", "0.68", "0.71", "0.74", "0.58", "-0.24", "0.31", "0.85", "0.28", "0.44", "0.51", "-0.19", "0.71", "0.81", "0.85", "0.23", "0.09", "0.65", "-0.48", "0.43", "0.97", "0.11", "-0.81", "-0.69"],
-    ["USDJPY", "0.84", "0.92", "0.36", null, "0.79", "0.90", "0.86", "0.42", "0.14", "0.98", "0.47", "0.76", "0.60", "0.15", "0.04", "0.58", "0.13", "-0.16", "0.63", "0.86", "-0.63", "-0.95", "0.42", "0.08", "0.90", "-0.39", "-0.16", "0.66", "0.95", "0.31", "0.66", "-0.84", "0.06", "-0.60", "0.08", "0.57", "0.93", "0.78", "0.15", "0.36", "0.78", "0.34"],
-    ["USDCAD", "0.79", "-0.87", "0.93", "0.83", null, "0.10", "0.60", "0.34", "0.98", "0.70", "0.09", "0.46", "0.80", "0.10", "0.26", "-0.90", "0.69", "-0.22", "0.51", "-0.75", "-0.08", "0.07", "0.24", "0.68", "0.60", "0.37", "0.92", "0.02", "0.66", "0.16", "0.24", "-0.79", "0.19", "0.19", "0.08", "-0.97", "-0.93", "0.04", "-0.92", "0.86", "-0.36", "0.04"],
-    ["USDCHF", "0.94", "-0.02", "0.70", "0.82", "0.41", null, "0.76", "0.06", "0.46", "0.99", "0.07", "0.72", "0.14", "0.90", "0.23", "-0.54", "0.64", "0.80", "0.16", "0.23", "0.66", "-0.89", "-0.54", "-0.95", "0.27", "0.56", "0.42", "0.41", "0.88", "0.81", "0.37", "0.75", "0.06", "-0.75", "0.98", "0.21", "0.01", "0.03", "0.35", "-0.42", "0.55", "0.19"],
-    ["GBPUSD", "0.05", "-0.64", "0.47", "0.56", "0.51", "-0.47", null, "-0.15", "0.13", "0.55", "0.58", "0.57", "-0.49", "0.28", "0.86", "0.49", "0.12", "-0.91", "0.06", "0.12", "0.18", "-0.02", "-0.55", "0.18", "0.29", "0.76", "0.11", "0.04", "0.55", "0.16", "0.84", "0.83", "-0.94", "0.32", "0.07", "-0.33", "-0.29", "0.01", "-0.19", "0.01", "-0.60", "0.66"],
-    ["GBPEUR", "-0.32", "0.17", "0.60", "-0.52", "-0.52", "0.39", "-0.42", null, "0.07", "0.69", "0.67", "0.01", "0.72", "0.35", "0.66", "-0.66", "0.21", "0.12", "0.42", "-0.57", "-0.04", "0.48", "0.91", "0.72", "-0.16", "0.79", "0.03", "0.44", "0.17", "0.87", "-0.82", "0.20", "0.88", "0.48", "0.59", "-0.70", "0.12", "0.56", "-0.69", "0.10", "0.90", "1.00"],
-    ["GBPAED", "0.76", "0.05", "0.72", "-0.40", "0.93", "0.64", "0.90", "0.21", null, "0.91", "0.33", "-0.36", "0.28", "0.87", "0.25", "0.33", "0.44", "0.89", "0.17", "0.96", "0.86", "0.88", "0.03", "-0.25", "0.21", "0.98", "-0.60", "0.07", "0.90", "0.23", "0.41", "0.77", "0.83", "0.94", "0.12", "0.37", "0.58", "0.35", "-0.53", "0.49", "0.96", "-0.06"],
-    ["GBPJPY", "0.63", "0.72", "0.59", "0.89", "-0.54", "0.97", "0.61", "0.64", "0.85", null, "0.35", "0.57", "0.25", "0.85", "0.27", "-0.70", "-0.30", "-0.36", "0.29", "0.82", "0.26", "0.69", "0.46", "0.01", "0.09", "0.78", "0.95", "0.16", "0.07", "0.41", "0.99", "0.67", "0.34", "-0.89", "0.83", "0.32", "0.21", "-0.48", "-0.64", "0.65", "0.58", "0.69"],
-    ["GBPCAD", "0.78", "0.09", "0.33", "0.11", "0.95", "0.01", "0.96", "0.72", "0.13", "0.02", null, "0.44", "0.63", "-0.52", "0.08", "-0.85", "0.74", "0.41", "0.52", "0.15", "-0.97", "0.61", "0.58", "0.47", "0.56", "0.37", "0.54", "-0.65", "0.98", "0.44", "0.28", "0.70", "0.44", "0.34", "0.95", "0.82", "-0.09", "0.62", "0.87", "0.25", "-1.00", "0.99"],
-    ["GBPCHF", "-0.87", "0.68", "0.84", "0.83", "0.50", "0.74", "0.02", "0.11", "-0.12", "0.36", "0.71", null, "0.45", "0.02", "0.51", "0.50", "-0.03", "-0.94", "0.23", "0.38", "0.09", "0.26", "0.14", "0.39", "0.36", "0.01", "0.76", "0.21", "0.03", "0.97", "-0.89", "0.68", "0.43", "0.43", "0.26", "0.01", "0.60", "0.15", "0.77", "0.51", "-0.31", "0.37"],
-    ["EURUSD", "-0.45", "-0.05", "0.14", "-0.11", "0.36", "0.12", "0.76", "0.66", "0.50", "0.31", "0.28", "0.90", null, "-0.04", "0.73", "0.33", "0.27", "0.22", "0.86", "0.79", "-0.29", "0.30", "0.89", "0.73", "0.94", "0.24", "0.19", "0.81", "0.88", "0.46", "0.19", "0.79", "-0.16", "0.85", "0.84", "-0.57", "-0.87", "0.86", "0.69", "0.12", "0.64", "0.13"],
-    ["EURGBP", "0.06", "0.81", "0.54", "0.57", "0.57", "0.81", "0.38", "0.70", "0.37", "0.58", "-0.56", "0.77", "0.59", null, "0.98", "-0.48", "0.60", "0.78", "0.22", "0.20", "-0.62", "-0.97", "-0.55", "0.39", "0.88", "0.96", "0.32", "0.84", "0.26", "-0.47", "0.04", "0.34", "-0.24", "0.53", "-0.75", "-0.97", "0.47", "0.81", "0.49", "-0.84", "0.94", "0.09"],
-    ["EURAED", "0.61", "0.59", "0.11", "0.21", "0.41", "-0.45", "0.32", "0.90", "-0.98", "0.38", "0.27", "0.62", "0.67", "0.89", null, "0.27", "0.65", "0.72", "0.69", "0.66", "0.12", "0.32", "0.11", "-0.73", "-0.17", "0.74", "0.03", "0.96", "0.59", "-0.92", "-0.91", "-0.41", "0.09", "0.45", "0.90", "0.88", "0.96", "0.47", "0.95", "0.27", "-0.48", "0.71"],
-    ["EURJPY", "-0.01", "0.36", "0.28", "0.68", "0.50", "0.25", "0.81", "0.64", "0.12", "-0.73", "-0.47", "0.96", "-0.98", "-0.41", "0.78", null, "0.19", "-0.37", "0.24", "0.63", "0.74", "-0.24", "0.46", "0.63", "0.99", "0.65", "0.52", "0.11", "0.52", "0.39", "0.41", "0.51", "0.78", "1.00", "0.80", "-0.11", "0.90", "0.96", "0.66", "0.32", "0.02", "0.19"],
-    ["EURCAD", "-0.80", "0.40", "0.35", "0.45", "0.66", "0.21", "0.77", "0.58", "0.09", "1.00", "0.02", "-0.85", "0.89", "0.63", "-0.05", "0.46", null, "0.87", "0.96", "-0.48", "0.40", "0.18", "0.37", "0.81", "0.50", "-0.06", "-0.56", "0.38", "0.02", "0.83", "-0.93", "0.80", "0.31", "0.10", "0.70", "0.55", "0.47", "0.77", "0.98", "0.88", "0.19", "0.91"],
-    ["EURCHF", "-0.93", "0.01", "-0.29", "0.46", "-0.59", "-0.15", "0.58", "0.00", "-0.62", "0.36", "0.27", "-0.10", "-0.10", "0.57", "0.57", "0.75", "-0.10", null, "0.88", "0.21", "0.89", "0.85", "0.16", "0.93", "0.60", "0.59", "0.42", "0.70", "0.66", "0.80", "0.83", "0.52", "0.01", "0.41", "0.68", "0.94", "0.81", "0.40", "0.69", "0.04", "0.70", "0.61"],
-    ["AEDUSD", "0.10", "0.45", "0.06", "-0.37", "-0.14", "0.63", "0.10", "0.77", "0.95", "-0.12", "1.00", "-0.19", "-0.59", "0.78", "0.10", "0.76", "-0.45", "-0.99", null, "-0.46", "0.28", "0.31", "0.32", "0.42", "-0.00", "0.66", "0.24", "0.31", "0.10", "0.73", "0.02", "0.78", "0.07", "1.00", "0.43", "0.61", "0.53", "0.53", "0.41", "0.37", "0.97", "-0.19"],
-    ["AEDGBP", "0.70", "0.73", "0.34", "0.97", "0.84", "0.05", "0.21", "0.14", "0.45", "0.69", "0.41", "-0.53", "0.28", "0.13", "0.99", "0.97", "0.93", "0.62", "0.35", null, "0.18", "0.96", "0.58", "0.04", "0.00", "0.58", "-0.54", "0.35", "0.84", "0.83", "-0.20", "0.51", "0.32", "0.01", "0.95", "0.69", "-0.73", "0.36", "0.78", "0.02", "0.22", "0.39"],
-    ["AEDEUR", "0.18", "0.84", "-0.89", "0.90", "-0.25", "0.53", "0.71", "0.80", "0.60", "-0.98", "-0.81", "0.57", "0.72", "0.32", "-0.23", "0.98", "0.50", "0.93", "0.56", "0.26", null, "0.61", "0.47", "0.72", "0.58", "0.19", "0.94", "0.21", "0.47", "0.70", "0.67", "0.85", "0.98", "0.15", "0.21", "0.43", "0.03", "0.92", "0.91", "0.35", "0.70", "0.85"],
-    ["AEDJPY", "0.88", "0.62", "0.50", "0.27", "0.56", "0.61", "0.06", "-0.02", "0.42", "0.26", "0.23", "0.83", "-0.55", "0.94", "0.01", "0.72", "-0.43", "0.10", "0.01", "-0.20", "0.13", null, "0.70", "0.10", "0.05", "0.43", "-0.14", "-0.64", "0.80", "0.79", "0.57", "0.14", "0.14", "0.04", "-0.96", "0.59", "0.14", "0.51", "0.23", "0.57", "0.94", "0.88"],
-    ["AEDCAD", "0.75", "-0.99", "0.82", "-0.87", "0.79", "1.00", "0.21", "0.30", "-0.40", "0.34", "-0.85", "0.41", "0.79", "0.17", "0.58", "-0.24", "0.18", "0.15", "0.18", "0.44", "0.34", "0.90", null, "0.10", "0.34", "0.31", "0.34", "0.79", "-0.05", "0.19", "-0.86", "0.61", "-0.65", "0.23", "0.59", "0.69", "-0.65", "0.89", "0.97", "0.12", "0.63", "-0.24"],
-    ["AEDCHF", "0.67", "0.46", "0.92", "0.22", "0.91", "0.67", "0.81", "0.04", "0.29", "0.13", "0.80", "0.95", "0.29", "0.99", "-0.17", "0.58", "0.64", "0.68", "0.41", "0.69", "0.84", "0.01", "0.04", null, "0.07", "0.16", "0.26", "-0.43", "0.08", "0.58", "0.33", "-0.28", "0.03", "-0.08", "0.54", "-0.91", "0.78", "-0.10", "-0.13", "0.15", "0.62", "-0.13"],
-    ["JPYUSD", "-0.67", "0.90", "0.84", "0.10", "0.77", "0.43", "0.59", "0.69", "0.63", "0.82", "-0.61", "0.41", "0.07", "0.48", "1.00", "-0.52", "0.22", "0.89", "0.43", "0.54", "0.56", "-0.43", "0.78", "0.67", null, "0.06", "0.28", "0.04", "0.62", "0.18", "0.77", "0.63", "0.05", "0.87", "0.22", "0.21", "0.07", "0.25", "-0.55", "0.67", "0.10", "-0.67"],
-    ["JPYGBP", "0.21", "0.46", "0.23", "0.53", "-0.97", "0.78", "0.43", "0.74", "-0.95", "0.98", "0.49", "0.66", "0.18", "0.55", "-0.33", "0.67", "0.65", "0.23", "-0.07", "-0.67", "0.56", "0.74", "-0.38", "-0.83", "-0.51", null, "-0.26", "-0.79", "0.73", "-0.78", "-0.09", "0.19", "0.48", "0.97", "0.11", "0.19", "0.51", "0.32", "0.81", "-0.02", "0.17", "0.48"],
-    ["JPYEUR", "0.83", "0.86", "0.62", "-0.92", "0.64", "0.58", "0.55", "0.07", "0.81", "0.32", "0.33", "0.96", "0.48", "0.57", "0.25", "0.56", "0.33", "0.02", "-0.79", "0.44", "0.95", "0.35", "0.41", "0.06", "0.28", "0.77", null, "0.64", "0.79", "0.74", "0.67", "-0.97", "0.47", "-0.11", "0.03", "0.39", "-0.37", "0.06", "0.09", "0.13", "0.20", "0.87"],
-    ["JPYAED", "0.69", "0.80", "0.90", "0.06", "0.55", "0.90", "-0.09", "0.05", "-0.10", "0.31", "0.57", "0.69", "-0.78", "0.42", "0.64", "0.96", "0.08", "-0.76", "0.59", "0.00", "0.40", "-0.88", "0.69", "0.17", "-0.16", "0.57", "0.86", null, "-0.61", "-0.14", "0.41", "-0.16", "0.36", "0.95", "0.44", "0.41", "0.35", "-0.56", "0.25", "0.66", "0.90", "0.82"],
-    ["JPYCAD", "0.33", "0.27", "0.61", "0.01", "-0.16", "0.21", "0.57", "-0.41", "-0.56", "0.55", "0.13", "-0.87", "0.19", "0.64", "-0.38", "-0.80", "-0.10", "0.44", "0.72", "-0.72", "0.48", "0.42", "0.84", "0.73", "0.35", "0.68", "0.01", "0.09", null, "0.87", "0.17", "0.45", "0.02", "0.01", "0.77", "0.24", "0.62", "0.39", "-0.73", "0.21", "-0.08", "0.42"],
-    ["JPYCHF", "-0.45", "0.52", "0.34", "0.85", "0.16", "0.96", "0.53", "0.62", "0.46", "0.94", "0.08", "-0.68", "0.81", "0.44", "0.27", "0.75", "-0.84", "0.69", "-0.99", "0.41", "0.66", "-0.94", "0.21", "0.85", "-0.08", "0.36", "0.62", "0.25", "-0.48", null, "0.51", "-0.39", "0.60", "0.63", "0.68", "0.10", "0.62", "0.68", "0.00", "0.24", "0.61", "0.23"],
-    ["CADUSD", "-0.65", "0.73", "0.93", "0.27", "-0.00", "-0.46", "0.53", "0.36", "0.83", "0.58", "0.40", "0.03", "0.32", "0.38", "-0.53", "0.86", "0.42", "0.90", "0.83", "0.94", "0.34", "-0.56", "0.46", "-0.72", "0.13", "0.08", "0.25", "0.59", "0.75", "0.72", null, "0.62", "0.73", "0.52", "0.28", "0.03", "-0.54", "0.50", "0.76", "-0.28", "0.89", "0.97"],
-    ["CADGBP", "0.74", "0.58", "0.55", "0.01", "0.33", "0.61", "0.75", "0.86", "-0.87", "0.50", "0.57", "0.84", "-0.34", "1.00", "0.77", "0.75", "0.40", "0.12", "-0.57", "-0.16", "-0.91", "0.06", "0.67", "-0.55", "0.02", "0.78", "0.57", "0.70", "0.21", "0.95", "-0.91", null, "-0.82", "0.71", "0.36", "0.46", "0.46", "0.24", "0.15", "0.54", "0.15", "0.83"],
-    ["CADEUR", "-0.58", "0.29", "0.03", "0.70", "0.77", "0.80", "0.52", "0.04", "0.11", "0.86", "-0.98", "0.02", "0.01", "-0.19", "-0.48", "0.80", "0.90", "0.10", "0.28", "0.88", "0.98", "0.43", "0.47", "-0.41", "-0.92", "0.49", "0.64", "-0.60", "0.11", "0.61", "0.19", "-0.39", null, "-0.21", "0.56", "-0.45", "-0.48", "0.51", "0.04", "-0.44", "-0.22", "-0.29"],
-    ["CADAED", "0.07", "0.55", "0.99", "-0.41", "0.65", "0.75", "0.97", "0.74", "0.65", "0.37", "-0.04", "0.85", "0.83", "0.25", "0.14", "-0.00", "0.80", "0.78", "-0.42", "0.54", "-0.42", "-0.07", "-0.62", "0.56", "0.89", "0.92", "0.19", "0.64", "0.45", "0.24", "0.97", "0.41", "0.36", null, "-0.54", "-0.85", "-0.68", "0.48", "0.13", "0.61", "0.75", "0.21"],
-    ["CADJPY", "-0.84", "0.71", "0.59", "-0.78", "0.92", "0.93", "0.03", "0.27", "0.22", "0.71", "-0.79", "0.72", "0.27", "0.29", "0.40", "0.66", "0.44", "-0.33", "0.24", "0.99", "-0.95", "0.74", "0.42", "0.45", "0.08", "0.46", "0.22", "0.70", "0.80", "0.36", "0.36", "0.94", "0.75", "0.51", null, "0.10", "0.31", "0.54", "1.00", "0.78", "0.17", "0.32"],
-    ["CADCHF", "0.19", "0.00", "0.62", "-0.63", "0.75", "0.57", "0.28", "-0.98", "0.17", "-0.63", "0.09", "0.10", "-0.09", "0.22", "0.65", "0.20", "0.27", "-0.66", "-0.70", "0.72", "0.40", "0.96", "0.52", "0.38", "0.96", "0.90", "0.35", "-0.70", "0.37", "0.94", "0.20", "0.78", "0.34", "0.24", "-0.18", null, "0.05", "0.71", "0.05", "0.38", "0.02", "0.60"],
-    ["CHFUSD", "0.42", "0.61", "-0.30", "-0.27", "0.46", "0.63", "0.64", "0.33", "0.18", "0.88", "0.99", "0.73", "0.85", "0.07", "0.53", "0.31", "-0.63", "0.56", "-0.04", "-0.68", "0.43", "-0.96", "0.45", "0.45", "0.50", "0.17", "0.82", "0.34", "0.26", "0.16", "0.71", "0.35", "0.57", "0.79", "0.56", "0.55", null, "0.02", "-0.90", "0.84", "0.33", "0.18"],
-    ["CHFGBP", "-0.38", "0.73", "0.25", "0.64", "0.41", "-0.48", "0.75", "-0.40", "0.37", "0.62", "0.30", "0.06", "0.54", "0.15", "0.51", "0.33", "-0.79", "-0.05", "-0.54", "0.21", "0.40", "0.86", "0.96", "0.94", "0.52", "0.07", "0.71", "-0.80", "-0.40", "0.71", "0.71", "0.89", "0.43", "-0.68", "0.93", "0.05", "0.42", null, "0.59", "-0.67", "0.03", "0.17"],
-    ["CHFEUR", "-0.64", "0.96", "-0.34", "0.71", "0.53", "0.44", "0.27", "0.56", "0.96", "0.40", "0.86", "0.65", "0.82", "0.89", "-0.75", "0.29", "0.06", "0.70", "0.23", "0.68", "0.79", "0.21", "0.50", "0.14", "-0.27", "-0.83", "-0.22", "0.59", "0.40", "0.10", "0.88", "0.99", "0.21", "-0.36", "0.00", "0.53", "0.08", "0.08", null, "0.53", "-0.51", "0.03"],
-    ["CHFAED", "-0.99", "0.71", "0.51", "0.58", "0.57", "0.73", "0.60", "0.23", "0.02", "0.84", "0.90", "0.56", "0.03", "-0.93", "0.59", "0.24", "-0.67", "0.13", "0.99", "0.28", "0.72", "0.79", "-0.83", "-0.30", "0.73", "0.08", "-0.02", "0.85", "0.33", "0.57", "0.09", "0.26", "0.16", "0.80", "0.65", "-0.19", "-0.38", "-0.61", "-0.98", null, "0.57", "-0.81"],
-    ["CHFJPY", "0.60", "0.96", "0.22", "0.52", "0.63", "0.24", "0.76", "0.91", "0.80", "-0.14", "0.59", "-0.01", "0.60", "-0.08", "0.63", "0.39", "0.30", "-0.71", "0.18", "0.94", "-0.30", "0.28", "0.87", "0.92", "-0.19", "0.18", "-0.40", "0.44", "0.88", "0.52", "0.50", "0.44", "0.84", "0.24", "0.09", "0.15", "0.10", "0.30", "-0.05", "0.79", null, "0.99"],
-    ["CHFCAD", "0.93", "0.24", "0.05", "0.40", "0.75", "0.12", "0.90", "0.56", "0.46", "0.62", "0.71", "0.01", "0.04", "0.02", "0.49", "0.51", "-0.94", "0.93", "0.80", "-0.40", "0.79", "0.82", "-0.04", "0.38", "-0.24", "-0.17", "0.78", "-0.42", "0.92", "-0.83", "-0.01", "0.54", "0.73", "0.52", "0.95", "0.44", "0.90", "0.81", "0.42", "0.26", "0.36", null]
-];
--- a/Show More
+++ b/Show More