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

.gitignore

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

config/webpack.config.examples.js

@@ -35,9 +35,8 @@ module.exports = {
     },
     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'),
+            "ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
+            "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
             react: path.resolve('./node_modules/react')
         },
         extensions: ['.js', '.jsx']
@@ -49,4 +48,4 @@ module.exports = {
         port: 8080,
         historyApiFallback: true
     }
-};
+};

config/webpack.config.large.js

@@ -31,7 +31,7 @@ module.exports = {
     },
     resolve: {
         alias: {
-            "@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'),
+            "ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
             "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
             react: path.resolve('./node_modules/react')
         },
@@ -43,4 +43,4 @@ module.exports = {
     devServer: {
         port: 8080,
     }
-};
+};

config/webpack.config.trader.js

@@ -31,7 +31,7 @@ module.exports = {
     },
     resolve: {
         alias: {
-            "@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'),
+            "ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
             "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
             react: path.resolve('./node_modules/react')
         },
@@ -43,4 +43,4 @@ module.exports = {
     devServer: {
         port: 8080,
     }
-};
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "23.0.0",
+  "version": "20.0.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -17,8 +17,7 @@
     "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"
+    "start": "npm run examples"
   },
   "repository": {
     "type": "git",
@@ -38,39 +37,36 @@
   },
   "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/core": "7.2.2",
+    "babel-loader": "8.0.4",
+    "@babel/preset-env": "7.2.3",
     "@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",
+    "@babel/plugin-proposal-class-properties": "7.2.3",
+    "@babel/plugin-proposal-function-bind": "7.2.0",
+    "css-loader": "2.1.0",
     "file-loader": "3.0.1",
     "gulp": "3.9.1",
-    "merge2": "1.2.3",
+    "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"
+    "prop-types": "15.6.2",
+    "rimraf": "~2.6.2",
+    "style-loader": "~0.23.0",
+    "webpack": "4.28.3",
+    "webpack-cli": "3.2.0",
+    "webpack-dev-server": "3.1.14"
   },
   "dependencies": {
-    "@ag-grid-enterprise/all-modules": "~23.0.0",
-    "@ag-grid-community/react": "~23.0.0",
-    "bootstrap": "4.4.1",
+    "ag-grid-community": "^20.0.0",
+    "ag-grid-enterprise": "^20.0.0",
+    "ag-grid-react": "^20.0.0",
+    "bootstrap": "4.1.3",
     "d3": "4.9.1",
-    "lodash": "4.17.11",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-redux": "7.0.3",
-    "react-router-dom": "5.0.0",
+    "lodash": "^4.17.11",
+    "react": "16.7.0",
+    "react-dom": "16.7.0",
+    "react-redux": "6.0.0",
+    "react-router-dom": "4.3.1",
     "redux": "4.0.1"
   }
 }

src-examples/App.jsx

@@ -2,16 +2,15 @@ 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>
 );
@@ -26,7 +25,6 @@ class App extends Component {
                         <Redirect from="/" exact to="/rich-grid-declarative"/>
                         <Route exact path='/rich-grid-declarative' component={RichGridDeclarativeExample}/>
                         <Route exact path='/simple-redux-dynamic' component={SimpleReduxDynamicExample}/>
-                        <Route exact path='/simple-redux-hook' component={SimpleReduxHookExample}/>
                     </Switch>
                 </div>
             </div>

src-examples/index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <script type="text/javascript" src="../dist/react-examples.js" charset="utf-8"></script>
     <!-- Example uses font awesome icons -->
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
 
     <style>
         html, body {

src-examples/index.js

@@ -4,14 +4,14 @@ import React from "react";
 import {render} from "react-dom";
 import {BrowserRouter} from "react-router-dom";
 
-import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css";
-import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css";
+import "ag-grid-community/dist/styles/ag-grid.css";
+import "ag-grid-community/dist/styles/ag-theme-balham.css";
 import "../node_modules/bootstrap/dist/css/bootstrap.css";
 
 import App from "./App";
 
 // only required when using enterprise features
-// import {LicenseManager} from "@ag-grid-enterprise/all-modules";
+// import {LicenseManager} from "ag-grid-enterprise/main";
 // LicenseManager.setLicenseKey("<your license key>");
 
 document.addEventListener('DOMContentLoaded', () => {

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { AgGridColumn, AgGridReact } from "@ag-grid-community/react";
+import React, {Component} from "react";
+import {AgGridColumn, AgGridReact} from "ag-grid-react";
 import RowDataFactory from "./RowDataFactory";
 import DateComponent from "./DateComponent.jsx";
 import SkillsCellRenderer from './SkillsCellRenderer.jsx';
@@ -12,29 +12,25 @@ 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";
+// take this line out if you do not want to use ag-Grid-Enterprise
+import "ag-grid-enterprise";
 
 export default class RichGridDeclarativeExample extends Component {
-    constructor(props) {
-        super(props);
+
+    constructor() {
+        super();
 
         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"/>'
+                sortAscending: '<i class="fa fa-long-arrow-alt-down"/>',
+                sortDescending: '<i class="fa fa-long-arrow-alt-up"/>',
+                groupExpanded: '<i class="far fa-minus-square"/>',
+                groupContracted: '<i class="far fa-plus-square"/>'
             }
         };
     }
@@ -43,8 +39,6 @@ export default class RichGridDeclarativeExample extends Component {
     onGridReady = (params) => {
         this.api = params.api;
         this.columnApi = params.columnApi;
-
-        this.calculateRowCount();
     };
 
     onCellClicked = (event) => {
@@ -57,7 +51,7 @@ export default class RichGridDeclarativeExample extends Component {
 
     /* Demo related methods */
     onToggleSidebar = (event) => {
-        this.setState({ sideBar: event.target.checked });
+        this.setState({sideBar: event.target.checked});
     };
 
     deselectAll() {
@@ -65,7 +59,7 @@ export default class RichGridDeclarativeExample extends Component {
     }
 
     onQuickFilterText = (event) => {
-        this.setState({ quickFilterText: event.target.value });
+        this.setState({quickFilterText: event.target.value});
     };
 
     onRefreshData = () => {
@@ -92,18 +86,7 @@ export default class RichGridDeclarativeExample extends Component {
         // 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()
-            });
-        }
+        }, 0)
     };
 
     static countryCellRenderer(params) {
@@ -128,64 +111,62 @@ export default class RichGridDeclarativeExample extends Component {
 
     render() {
         return (
-            <div style={{ width: '900px' }}>
+            <div style={{width: '900px'}}>
                 <h1>Rich Grid with Declarative Markup Example</h1>
-                <div style={{ display: "inline-block", width: "100%" }}>
-                    <div style={{ float: "left" }}>
-                        <b>Employees Skills and Contact Details: </b>{this.state.rowCount}
+                <div style={{display: "inline-block", width: "100%"}}>
+                    <div style={{float: "left"}}>
+                        <b>Employees Skills and Contact Details</b><span id="rowCount"/>
                     </div>
                 </div>
-                <div style={{ marginTop: 10 }}>
+                <div style={{marginTop: 10}}>
                     <div>
                         <span>
                             Grid API:
                             <button onClick={() => {
-                                this.api.selectAll();
+                                this.api.selectAll()
                             }} className="btn btn-primary">Select All</button>
                             <button onClick={() => {
-                                this.api.deselectAll();
+                                this.api.deselectAll()
                             }} className="btn btn-primary">Clear Selection</button>
                         </span>
-                        <span style={{ float: "right" }}>
+                        <span style={{float: "right"}}>
                             Column API:
                             <button onClick={() => {
-                                this.columnApi.setColumnVisible('country', false);
+                                this.columnApi.setColumnVisible('country', false)
                             }} className="btn btn-primary">Hide Country Column</button>
                             <button onClick={() => {
-                                this.columnApi.setColumnVisible('country', true);
+                                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" }}>
+                    <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
+                        <div style={{float: "left"}}>
+                            <label>
+                                <input type="checkbox" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
+                                Show Side Bar
+                            </label>
+                        </div>
+                        <div style={{float: "left", marginLeft: 20}}>
                             <button onClick={this.onRefreshData} className="btn btn-primary">Refresh Data</button>
                         </div>
-                        <div style={{ float: "right" }}>
+                        <div style={{float: "left", marginLeft: 20}}>
+                            <input type="text" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
+                        </div>
+                        <div style={{float: "right"}}>
                             Filter API:
                             <button onClick={this.invokeSkillsFilterMethod}
-                                className="btn btn-primary">Invoke Skills Filter Method
+                                    className="btn btn-primary">Invoke Skills Filter Method
                             </button>
                             <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000
                             </button>
                         </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">
+                    <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}
@@ -197,13 +178,11 @@ export default class RichGridDeclarativeExample extends Component {
                             // binding to array properties
                             rowData={this.state.rowData}
 
-                            // register all modules (row model, csv/excel, row grouping etc)
-                            modules={AllModules}
-
                             // no binding, just providing hard coded strings for the properties
                             // boolean properties will default to true if provided (ie suppressRowClickSelection => suppressRowClickSelection="true")
                             suppressRowClickSelection
                             rowSelection="multiple"
+                            floatingFilter
                             groupHeaders
 
                             // setting grid wide date component
@@ -218,40 +197,165 @@ export default class RichGridDeclarativeExample extends Component {
                                 headerComponentParams: {
                                     menuIcon: 'fa-bars'
                                 }
-                            }}>
+                            }}
+                        >
                             <AgGridColumn headerName="#" width={30}
-                                checkboxSelection sortable={false} suppressMenu filter={false} pinned>
+                                          checkboxSelection sortable={false} suppressMenu filter={false} pinned>
                             </AgGridColumn>
                             <AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
                                 <AgGridColumn field="name" width={150}
-                                    cellEditorFramework={NameCellEditor}
-                                    enableRowGroup enablePivot pinned editable />
+                                              cellEditorFramework={NameCellEditor}
+                                              enableRowGroup enablePivot pinned editable/>
                                 <AgGridColumn field="country" width={150}
-                                    cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
-                                    filterParams={{
-                                        cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
-                                        cellHeight: 20
-                                    }}
-                                    enableRowGroup enablePivot pinned editable />
+                                              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} />
+                                              pinned columnGroupShow="open"
+                                              cellRenderer={RichGridDeclarativeExample.dateCellRenderer}/>
                             </AgGridColumn>
                             <AgGridColumn headerName="IT Skills">
                                 <AgGridColumn field="skills" width={120} enableRowGroup enablePivot sortable={false}
-                                    cellRendererFramework={SkillsCellRenderer}
-                                    filterFramework={SkillsFilter} />
+                                              cellRendererFramework={SkillsCellRenderer}
+                                              filterFramework={SkillsFilter}/>
                                 <AgGridColumn field="proficiency" width={160} enableValue
-                                    cellRendererFramework={ProficiencyCellRenderer}
-                                    filterFramework={ProficiencyFilter} />
+                                              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 field="mobile" width={150} filter="text"/>
+                                <AgGridColumn field="landline" width={150} filter="text"/>
+                                <AgGridColumn field="address" width={500} filter="text"/>
                             </AgGridColumn>
                         </AgGridReact>
                     </div>
+                    <div style={{marginTop: 10}}>
+                        <div className="row">
+                            <div className="col-sm-12"><h1>Rich Grid with Declarative Markup Example</h1></div>
+                        </div>
+                        <div className="row">
+                            <div className="col-sm-12">
+                                <h5>This example demonstrates many features of ag-Grid, with Grid and Column Definition
+                                    defined declaratively (i.e. with markup).</h5>
+                                <p><span style={{fontWeight: 500}}>Select All/Clear Selection</span>: Select or Deselect
+                                    All
+                                    Rows</p>
+                                <p><span style={{fontWeight: 500}}>Hide/Show Country Column</span>: Select or Deselect
+                                    All
+                                    Rows
+                                    (expand the Employee column to show the Country column first)</p>
+                                <p><span style={{fontWeight: 500}}>Toggle The Side Bar</span>: Let your users Pivot,
+                                    Group
+                                    and
+                                    Aggregate using the Side Bar</p>
+                                <p><span style={{fontWeight: 500}}>Refresh Data</span>: Dynamically Update Grid Data</p>
+                                <p><span style={{fontWeight: 500}}>Quick Filter</span>: Perform Quick Grid Wide
+                                    Filtering
+                                    with
+                                    the Quick Filter</p>
+                                <p><span style={{fontWeight: 500}}>DOB Filter</span>: Set the DOB filter to 01/01/2000
+                                    using
+                                    the
+                                    Filter API (expand the Employee column to show the DOB column)</p>
+                                <p><span style={{fontWeight: 500}}>Custom Headers</span>: Sort, Filter and Render
+                                    Headers
+                                    using
+                                    Header Components</p>
+                            </div>
+                        </div>
+                        <div className="row">
+                            <div className="col-sm-4">
+                                <div className="card">
+                                    <div className="card-body">
+                                        <h4 className="card-title">Grid & Column API</h4>
+                                        <p className="card-text">Utilise Grid Features Programmatically Using the APIs
+                                            Available</p>
+                                        <a target="_blank" href="https://www.ag-grid.com/javascript-grid-api/"
+                                           className="btn btn-primary">Grid API</a>
+                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-column-api/"
+                                           className="btn btn-primary">Column API</a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col-sm-4">
+                                <div className="card">
+                                    <div className="card-body">
+                                        <h4 className="card-title">Header Components</h4>
+                                        <p className="card-text">Customer the Header with React Components</p>
+                                        <a target="_blank"
+                                           href="https://www.ag-grid.com//javascript-grid-header-rendering/#headerComponent"
+                                           className="btn btn-primary">Header Component</a>
+                                        <a target="_blank"
+                                           href="https://www.ag-grid.com//javascript-grid-header-rendering/#headerGroupComponent"
+                                           className="btn btn-primary">Header Group Component</a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col-sm-4">
+                                <div className="card">
+                                    <div className="card-body">
+                                        <h4 className="card-title">Filters</h4>
+                                        <p className="card-text">Filter with Quick Filters, Floating Filters, Built In
+                                            Filters
+                                            or Using the
+                                            Filter API</p>
+                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-filter-quick/"
+                                           className="btn btn-primary">Quick
+                                            Filter</a>
+                                        <a target="_blank"
+                                           href="https://www.ag-grid.com//javascript-grid-floating-filter-component/"
+                                           className="btn btn-primary">Floating Filters</a>
+                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-filtering/"
+                                           className="btn btn-primary">Built in
+                                            Filters</a>
+                                        <a target="_blank"
+                                           href="https://www.ag-grid.com//javascript-grid-filtering/#accessing-filter-component-instances"
+                                           className="btn btn-primary">Filter API</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="row">
+                            <div className="col-sm-4">
+                                <div className="card">
+                                    <div className="card-body">
+                                        <h4 className="card-title">Side Bar</h4>
+                                        <p className="card-text">Let your users Pivot, Group and Aggregate using the
+                                            Side Bar</p>
+                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-side-bar/"
+                                           className="btn btn-primary">Side Bar</a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col-sm-8">
+                                <div className="card">
+                                    <div className="card-body">
+                                        <h4 className="card-title">The Rest</h4>
+                                        <p className="card-text">Pinned Columns, Checkbox Selection, Customer Renderers,
+                                            Data
+                                            Updates</p>
+                                        <a target="_blank"
+                                           href="https://www.ag-grid.com/best-react-data-grid/?framework=react"
+                                           className="btn btn-primary">React with ag-Grid</a>
+                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-pinning/"
+                                           className="btn btn-primary">Pinned Column</a>
+                                        <a target="_blank"
+                                           href="https://www.ag-grid.com//javascript-grid-selection/#checkboxSelection"
+                                           className="btn btn-primary">Checkbox Selection</a>
+                                        <a target="_blank"
+                                           href="https://www.ag-grid.com//javascript-grid-cell-rendering/"
+                                           className="btn btn-primary">Cell
+                                            Renderers</a>
+                                        <a target="_blank" href="https://www.ag-grid.com/javascript-grid-data-update/"
+                                           className="btn btn-primary">Updating Data</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         );

src-examples/richGridDeclarativeExample/SkillsFilter.jsx

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

src-examples/richGridDeclarativeExample/SortableHeaderComponent.jsx

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

src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
-import {AgGridReact} from "@ag-grid-community/react";
-import {AllModules} from "@ag-grid-enterprise/all-modules";
+
+import {AgGridReact} from "ag-grid-react";
 
 import PriceRenderer from "./PriceRenderer";
 
@@ -44,7 +44,8 @@ class GridComponent extends Component {
                     // properties
                     columnDefs={this.state.columnDefs}
                     rowData={this.props.rowData}
-                    modules={AllModules}
+
+                    reactNext={true}
 
                     // events
                     onGridReady={this.onGridReady}>
@@ -61,4 +62,4 @@ export default connect(
             rowData: state.rowData
         }
     }
-)(GridComponent);
+)(GridComponent);

src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx

@@ -1,5 +1,7 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
+// take this line out if you do not want to use ag-Grid-Enterprise
+import "ag-grid-enterprise";
 
 import {setCurrency, updateRowData} from "./gridDataActions";
 
@@ -23,8 +25,8 @@ class HeaderComponent extends Component {
     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>
+                <button onClick={this.setCurrency.bind(this, '£', 1)}>Set Currency to GBP</button>
+                <button onClick={this.setCurrency.bind(this, '$', 1.29)}>Set Currency to USD</button>
             </div>
         )
     }
@@ -80,4 +82,4 @@ export default connect(
             rowData: state.rowData
         }
     }
-)(HeaderComponent);
+)(HeaderComponent);

src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx

@@ -41,5 +41,5 @@ export default connect(
     },
     null,
     null,
-    {forwardRef: true} // must be supplied for react/redux when using AgGridReact
-)(PriceRenderer);
+    {forwardRef: true} // must be supplied for react/redux when using GridOptions.reactNext
+)(PriceRenderer);

src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx

@@ -1,6 +1,8 @@
 import React, {Component} from "react";
 import {Provider} from "react-redux";
 import {createStore} from "redux";
+// take this line out if you do not want to use ag-Grid-Enterprise
+import "ag-grid-enterprise";
 
 import HeaderComponent from "./HeaderComponent";
 import GridComponent from "./GridComponent";

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>
-    )
-}

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}/>;
-})

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()}/>;
-})

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>
-        );
-    }
-}

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>
-    )
-}

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
-    }
-}

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;
-};

src-large-data/index.js

@@ -4,8 +4,8 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import LargeGrid from './largeGrid.jsx';
 
-import '@ag-grid-community/core/dist/styles/ag-grid.css';
-import '@ag-grid-community/core/dist/styles/ag-theme-balham.css';
+import 'ag-grid-community/dist/styles/ag-grid.css';
+import 'ag-grid-community/dist/styles/ag-theme-fresh.css';
 
 // waiting for dom to load before booting react. we could alternatively
 // put the index.js reference at the end fo the index.html, but i prefer this way.

src-large-data/largeGrid.jsx

@@ -1,12 +1,10 @@
 import React, {Component} from '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 {
 
@@ -63,8 +61,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-theme-fresh">
+                <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData}/>
             </div>
         );
     }

src-trader-dashboard/components/FxQuoteMatrix.jsx

@@ -1,9 +1,7 @@
 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";
+import {AgGridReact} from "ag-grid-react";
 
 class FxQuoteMatrix extends Component {
     constructor(props) {
@@ -61,7 +59,7 @@ class FxQuoteMatrix extends Component {
     render() {
         return (
             <div style={{height: 410, width: 800}}
-                 className="ag-theme-balham">
+                 className="ag-theme-fresh">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
@@ -73,8 +71,6 @@ class FxQuoteMatrix extends Component {
                     // callbacks
                     getRowNodeId={this.getRowNodeId}
 
-                    modules={[ClientSideRowModelModule]}
-
                     // events
                     onGridReady={this.onGridReady}>
                 </AgGridReact>
@@ -89,4 +85,4 @@ export default connect(
             rowData: state ? state.fxData : null
         }
     }
-)(FxQuoteMatrix);
+)(FxQuoteMatrix);

src-trader-dashboard/components/PriceChangesGrid.jsx

@@ -1,7 +1,6 @@
 import React, {Component} from "react";
 
-import {AgGridReact} from "@ag-grid-community/react";
-import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules";
+import {AgGridReact} from "ag-grid-react";
 
 import map from "lodash/map";
 import difference from "lodash/difference";
@@ -152,7 +151,7 @@ export default class extends Component {
     render() {
         return (
             <div style={{height: 410, width: 800}}
-                 className="ag-theme-balham">
+                 className="ag-theme-fresh">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
@@ -161,8 +160,6 @@ export default class extends Component {
                     }}
                     rowSelection="single"
 
-                    modules={[ClientSideRowModelModule]}
-
                     // callbacks
                     getRowNodeId={this.getRowNodeId}
 
@@ -173,4 +170,4 @@ export default class extends Component {
             </div>
         );
     }
-}
+}

src-trader-dashboard/components/TopMoversGrid.jsx

@@ -1,8 +1,7 @@
 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";
+import {AgGridReact} from "ag-grid-react";
 
 class TopMoversGrid extends Component {
     constructor(props) {
@@ -63,7 +62,7 @@ class TopMoversGrid extends Component {
     render() {
         return (
             <div style={{height: 410, width: 400}}
-                 className="ag-theme-balham">
+                 className="ag-theme-fresh">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
@@ -76,8 +75,6 @@ class TopMoversGrid extends Component {
                     deltaRowDataMode
                     getRowNodeId={this.getRowNodeId}
 
-                    modules={[ClientSideRowModelModule]}
-
                     // events
                     onGridReady={this.onGridReady}>
                 </AgGridReact>
@@ -92,4 +89,4 @@ export default connect(
             rowData: state ? state.fxTopMovers : null
         }
     }
-)(TopMoversGrid);
+)(TopMoversGrid);

src-trader-dashboard/index.js

@@ -5,12 +5,12 @@ import {render} from "react-dom";
 
 import {Provider} from "react-redux";
 
+import "ag-grid-community/dist/styles/ag-grid.css";
+import "ag-grid-community/dist/styles/ag-theme-fresh.css";
+
 import StoreService from './services/StoreService';
 import TraderDashboard from "./components/TraderDashboard.jsx";
 
-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', () => {

ts-tests/InvalidGridProperty.tsx

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

ts-tests/SimpleFunctionalGrid.tsx

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

ts-tests/runTsTests.sh

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