Merge branch 'b23.0.2' into latest

.gitignore

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

config/webpack.config.examples.js

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

config/webpack.config.large.js

@@ -31,7 +31,7 @@ module.exports = {
     },
     resolve: {
         alias: {
-            "ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
+            "@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')
         },
@@ -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": path.resolve('./node_modules/ag-grid-community'),
+            "@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')
         },
@@ -43,4 +43,4 @@ module.exports = {
     devServer: {
         port: 8080,
     }
-};
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "21.0.0",
+  "version": "23.0.2",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -18,7 +18,7 @@
     "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"
+    "test": "./ts-tests/runTsTests.sh"
   },
   "repository": {
     "type": "git",
@@ -38,13 +38,14 @@
   },
   "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.8.17",
+    "@types/react": "16.9.2",
-    "@types/react-dom": "16.8.4",
+    "@types/react-dom": "16.9.0",
     "babel-loader": "8.0.6",
     "css-loader": "2.1.1",
     "file-loader": "3.0.1",
@@ -61,10 +62,9 @@
     "webpack-dev-server": "3.4.1"
   },
   "dependencies": {
-    "ag-grid-community": "^21.0.0",
+    "@ag-grid-enterprise/all-modules": "~23.0.0",
-    "ag-grid-enterprise": "^21.0.0",
+    "@ag-grid-community/react": "~23.0.0",
-    "ag-grid-react": "^21.0.0",
+    "bootstrap": "4.4.1",
-    "bootstrap": "4.3.1",
     "d3": "4.9.1",
     "lodash": "4.17.11",
     "react": "16.8.6",
@@ -73,4 +73,4 @@
     "react-router-dom": "5.0.0",
     "redux": "4.0.1"
   }
-}
+}

src-examples/App.jsx

@@ -2,7 +2,6 @@ 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";

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-community/dist/styles/ag-grid.css";
+import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css";
-import "ag-grid-community/dist/styles/ag-theme-balham.css";
+import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css";
 import "../node_modules/bootstrap/dist/css/bootstrap.css";
 
 import App from "./App";
 
 // only required when using enterprise features
-// import {LicenseManager} from "ag-grid-enterprise/main";
+// import {LicenseManager} from "@ag-grid-enterprise/all-modules";
 // LicenseManager.setLicenseKey("<your license key>");
 
 document.addEventListener('DOMContentLoaded', () => {

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

@@ -1,5 +1,5 @@
-import React, {Component} from "react";
+import React, { Component } from "react";
-import {AgGridColumn, AgGridReact} from "ag-grid-react";
+import { AgGridColumn, AgGridReact } from "@ag-grid-community/react";
 import RowDataFactory from "./RowDataFactory";
 import DateComponent from "./DateComponent.jsx";
 import SkillsCellRenderer from './SkillsCellRenderer.jsx';
@@ -12,8 +12,12 @@ import HeaderGroupComponent from './HeaderGroupComponent.jsx';
 import SortableHeaderComponent from './SortableHeaderComponent.jsx';
 
 import "./RichGridDeclarativeExample.css";
-// take this line out if you do not want to use ag-Grid-Enterprise
+
-import "ag-grid-enterprise";
+// for community features
+// import {AllCommunityModules} from "@ag-grid-community/all-modules";
+
+// for enterprise features
+import { AllModules } from "@ag-grid-enterprise/all-modules";
 
 export default class RichGridDeclarativeExample extends Component {
     constructor(props) {
@@ -25,7 +29,7 @@ export default class RichGridDeclarativeExample extends Component {
             rowData: new RowDataFactory().createRowData(),
             rowCount: null,
             icons: {
-                columnRemoveFromGroup: '<i class="fa fa-remove"/>',
+                columnRemoveFromGroup: '<i class="fa fa-times"/>',
                 filter: '<i class="fa fa-filter"/>',
                 sortAscending: '<i class="fa fa-long-arrow-down"/>',
                 sortDescending: '<i class="fa fa-long-arrow-up"/>',
@@ -53,7 +57,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() {
@@ -61,7 +65,7 @@ export default class RichGridDeclarativeExample extends Component {
     }
 
     onQuickFilterText = (event) => {
-        this.setState({quickFilterText: event.target.value});
+        this.setState({ quickFilterText: event.target.value });
     };
 
     onRefreshData = () => {
@@ -71,23 +75,25 @@ export default class RichGridDeclarativeExample extends Component {
     };
 
     invokeSkillsFilterMethod = () => {
-        let skillsFilter = this.api.getFilterInstance('skills');
+        this.api.getFilterInstance('skills', (instance) => {
-        let componentInstance = skillsFilter.getFrameworkComponentInstance();
+            let componentInstance = instance.getFrameworkComponentInstance();
-        componentInstance.helloFromSkillsFilter();
+            componentInstance.helloFromSkillsFilter();
+        });
     };
 
     dobFilter = () => {
-        let dateFilterComponent = this.api.getFilterInstance('dob');
+        this.api.getFilterInstance('dob', (dateFilterComponent) => {
-        dateFilterComponent.setModel({
+            dateFilterComponent.setModel({
-            type: 'equals',
+                type: 'equals',
-            dateFrom: '2000-01-01'
+                dateFrom: '2000-01-01'
-        });
+            });
 
-        // as the date filter is a React component, and its using setState internally, we need
+            // 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)
+            // to allow time for the state to be set (as setState is an async operation)
-        // simply wait for the next tick
+            // simply wait for the next tick
-        setTimeout(() => {
+            setTimeout(() => {
-            this.api.onFilterChanged();
+                this.api.onFilterChanged();
+            });
         });
     };
 
@@ -124,58 +130,58 @@ 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={{ display: "inline-block", width: "100%" }}>
-                    <div style={{float: "left"}}>
+                    <div style={{ float: "left" }}>
-                        <b>Employees Skills and Contact Details: </b>{ this.state.rowCount }
+                        <b>Employees Skills and Contact Details: </b>{this.state.rowCount}
                     </div>
                 </div>
-                <div style={{marginTop: 10}}>
+                <div style={{ marginTop: 10 }}>
                     <div>
                         <span>
                             Grid API:
                             <button onClick={() => {
-                                this.api.selectAll()
+                                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={{ display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10 }}>
-                        <div style={{float: "left"}}>
+                        <div style={{ float: "left" }}>
                             <button onClick={this.onRefreshData} className="btn btn-primary">Refresh Data</button>
                         </div>
-                        <div style={{float: "right"}}>
+                        <div style={{ float: "right" }}>
                             Filter API:
                             <button onClick={this.invokeSkillsFilterMethod}
-                                    className="btn btn-primary">Invoke Skills Filter Method
+                                className="btn btn-primary">Invoke Skills Filter Method
                             </button>
                             <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000
                             </button>
                         </div>
                     </div>
-                    <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
+                    <div style={{ display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10 }}>
-                        <div style={{float: "left"}}>
+                        <div style={{ float: "left" }}>
                             <label htmlFor="sideBarToggle">Show Side Bar&nbsp;</label>
-                            <input type="checkbox" id="sideBarToggle" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
+                            <input type="checkbox" id="sideBarToggle" onChange={this.onToggleSidebar} style={{ marginRight: 5 }} />
                         </div>
-                        <div style={{float: "right", marginLeft: 20}}>
+                        <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..."/>
+                            <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}
@@ -193,6 +199,9 @@ 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
@@ -212,36 +221,36 @@ export default class RichGridDeclarativeExample extends Component {
                                     menuIcon: 'fa-bars'
                                 }
                             }}>
-                            <AgGridColumn headerName="#" width={30}
+                            <AgGridColumn headerName="#" width={40}
-                                          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}
+                                    cellEditorFramework={NameCellEditor}
-                                              enableRowGroup enablePivot pinned editable/>
+                                    enableRowGroup enablePivot pinned editable />
                                 <AgGridColumn field="country" width={150}
-                                              cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
+                                    cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
-                                              filterParams={{
+                                    filterParams={{
-                                                  cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
+                                        cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
-                                                  cellHeight: 20
+                                        cellHeight: 20
-                                              }}
+                                    }}
-                                              enableRowGroup enablePivot pinned editable/>
+                                    enableRowGroup enablePivot pinned editable />
                                 <AgGridColumn field="dob" width={175} headerName="DOB" filter="agDateColumnFilter"
-                                              pinned columnGroupShow="open"
+                                    pinned columnGroupShow="open"
-                                              cellRenderer={RichGridDeclarativeExample.dateCellRenderer}/>
+                                    cellRenderer={RichGridDeclarativeExample.dateCellRenderer} />
                             </AgGridColumn>
                             <AgGridColumn headerName="IT Skills">
                                 <AgGridColumn field="skills" width={120} enableRowGroup enablePivot sortable={false}
-                                              cellRendererFramework={SkillsCellRenderer}
+                                    cellRendererFramework={SkillsCellRenderer}
-                                              filterFramework={SkillsFilter}/>
+                                    filterFramework={SkillsFilter} />
                                 <AgGridColumn field="proficiency" width={160} enableValue
-                                              cellRendererFramework={ProficiencyCellRenderer}
+                                    cellRendererFramework={ProficiencyCellRenderer}
-                                              filterFramework={ProficiencyFilter}/>
+                                    filterFramework={ProficiencyFilter} />
                             </AgGridColumn>
                             <AgGridColumn headerName="Contact">
-                                <AgGridColumn field="mobile" width={150} filter="text"/>
+                                <AgGridColumn field="mobile" width={150} filter="text" />
-                                <AgGridColumn field="landline" width={150} filter="text"/>
+                                <AgGridColumn field="landline" width={150} filter="text" />
-                                <AgGridColumn field="address" width={500} filter="text"/>
+                                <AgGridColumn field="address" width={500} filter="text" />
                             </AgGridColumn>
                         </AgGridReact>
                     </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 {AgGridReact} from "ag-grid-react";
+import {AllModules} from "@ag-grid-enterprise/all-modules";
 
 import PriceRenderer from "./PriceRenderer";
 
@@ -44,8 +44,7 @@ class GridComponent extends Component {
                     // properties
                     columnDefs={this.state.columnDefs}
                     rowData={this.props.rowData}
-
+                    modules={AllModules}
-                    reactNext={true}
 
                     // events
                     onGridReady={this.onGridReady}>
@@ -62,4 +61,4 @@ export default connect(
             rowData: state.rowData
         }
     }
-)(GridComponent);
+)(GridComponent);

src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx

@@ -1,7 +1,5 @@
 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";
 

src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx

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

src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx

@@ -1,8 +1,6 @@
 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,6 +1,7 @@
-import React, { useContext } from "react";
+import React, {useContext} from "react";
 import {Context} from "./store";
-import {AgGridReact} from "ag-grid-react";
+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)
@@ -21,8 +22,9 @@ export default function GridComponent() {
                 // properties
                 columnDefs={columnDefs}
                 rowData={rowData}
+                modules={AllModules}
 
-                reactNext={true}
+                defaultColDef={{filter: true}}
 
                 // events
                 onGridReady={onGridReady}>

src-examples/simpleReduxHooksExample/PriceEditor.jsx

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

src-examples/simpleReduxHooksExample/PriceFilter.jsx

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

src-examples/simpleReduxHooksExample/store.js

@@ -1,15 +1,21 @@
 import React from "react";
 import PriceRenderer from "./PriceRenderer";
+import PriceEditor from "./PriceEditor";
+import PriceFilter from "./PriceFilter";
 
 export const initialState = {
     rowData: [],
     columnDefs: [
         {
-            field: 'symbol'
+            field: 'symbol',
+            editable: true
         },
         {
             field: 'price',
             cellClass: 'align-right',
+            editable: true,
+            cellEditorFramework: PriceEditor,
+            filterFramework: PriceFilter,
             cellRendererFramework: PriceRenderer
         }
     ]

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/dist/styles/ag-grid.css';
+import '@ag-grid-community/core/dist/styles/ag-grid.css';
-import 'ag-grid-community/dist/styles/ag-theme-fresh.css';
+import '@ag-grid-community/core/dist/styles/ag-theme-balham.css';
 
 // waiting for dom to load before booting react. we could alternatively
 // put the index.js reference at the end fo the index.html, but i prefer this way.

src-large-data/largeGrid.jsx

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

src-trader-dashboard/components/FxQuoteMatrix.jsx

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

src-trader-dashboard/components/PriceChangesGrid.jsx

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

src-trader-dashboard/components/TopMoversGrid.jsx

@@ -1,7 +1,8 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 
-import {AgGridReact} from "ag-grid-react";
+import {AgGridReact} from "@ag-grid-community/react";
+import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules";
 
 class TopMoversGrid extends Component {
     constructor(props) {
@@ -62,7 +63,7 @@ class TopMoversGrid extends Component {
     render() {
         return (
             <div style={{height: 410, width: 400}}
-                 className="ag-theme-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
@@ -75,6 +76,8 @@ class TopMoversGrid extends Component {
                     deltaRowDataMode
                     getRowNodeId={this.getRowNodeId}
 
+                    modules={[ClientSideRowModelModule]}
+
                     // events
                     onGridReady={this.onGridReady}>
                 </AgGridReact>

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

ts-tests/SimpleFunctionalGrid.tsx

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