Release 22.0.0

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

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

@@ -1,5 +1,5 @@
 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) {
@@ -193,6 +197,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

src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -1,7 +1,6 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
-
-import {AgGridReact} from "ag-grid-react";
+import {AgGridReact} from "@ag-grid-community/react";
 
 import PriceRenderer from "./PriceRenderer";
 
@@ -45,8 +44,6 @@ class GridComponent extends Component {
                     columnDefs={this.state.columnDefs}
                     rowData={this.props.rowData}
 
-                    reactNext={true}
-
                     // events
                     onGridReady={this.onGridReady}>
                 </AgGridReact>
@@ -62,4 +59,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
-)(PriceRenderer);
+    {forwardRef: true} // must be supplied for react/redux when using AgGridReact
+)(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,6 @@
-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";
 
 /*
  * This component serves to display the row data (provided by redux)
@@ -22,7 +22,7 @@ export default function GridComponent() {
                 columnDefs={columnDefs}
                 rowData={rowData}
 
-                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
         }
     ]