Release 23.0.2 - Initial Creation and Setup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "23.0.0",
+  "version": "23.0.2",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {

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="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 
     <style>
         html, body {

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

@@ -31,10 +31,10 @@ export default class RichGridDeclarativeExample extends Component {
             icons: {
                 columnRemoveFromGroup: '<i class="fa fa-times"/>',
                 filter: '<i class="fa fa-filter"/>',
-                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"/>'
+                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"/>'
             }
         };
     }
@@ -75,23 +75,25 @@ export default class RichGridDeclarativeExample extends Component {
     };
 
     invokeSkillsFilterMethod = () => {
-        let skillsFilter = this.api.getFilterInstance('skills');
-        let componentInstance = skillsFilter.getFrameworkComponentInstance();
-        componentInstance.helloFromSkillsFilter();
+        this.api.getFilterInstance('skills', (instance) => {
+            let componentInstance = instance.getFrameworkComponentInstance();
+            componentInstance.helloFromSkillsFilter();
+        });
     };
 
     dobFilter = () => {
-        let dateFilterComponent = this.api.getFilterInstance('dob');
-        dateFilterComponent.setModel({
-            type: 'equals',
-            dateFrom: '2000-01-01'
-        });
+        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();
+            // 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();
+            });
         });
     };
 
@@ -219,7 +221,7 @@ export default class RichGridDeclarativeExample extends Component {
                                     menuIcon: 'fa-bars'
                                 }
                             }}>
-                            <AgGridColumn headerName="#" width={30}
+                            <AgGridColumn headerName="#" width={40}
                                 checkboxSelection sortable={false} suppressMenu filter={false} pinned>
                             </AgGridColumn>
                             <AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>

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-alt-down"/></div>);
+                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-alt-up"/></div>);
+                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>)