v12 Hot fixes

README.md

@@ -4,7 +4,14 @@ ag-Grid React Example
 
 Examples of running ag-Grid inside React application.
 
-See the [www.ag-grid.com](http://www.ag-grid.com).
+See [www.ag-grid.com](http://www.ag-grid.com) for an overview and full documentation.
+
+Frameworks Supported
+====================
+Framework specific Getting Started guides:
+[Angular 1](https://www.ag-grid.com/best-angularjs-data-grid/) | [Angular 2](https://www.ag-grid.com/best-angular-2-data-grid/) | [Aurelia](https://www.ag-grid.com/best-aurelia-data-grid/)
+[Javascript](https://www.ag-grid.com/best-javascript-data-grid/) | [React](https://www.ag-grid.com/best-react-data-grid/) | [TypeScript](https://www.ag-grid.com/ag-grid-typescript-webpack-2/)
+[VueJS](https://www.ag-grid.com/best-vuejs-data-grid/) | [Web Components](https://www.ag-grid.com/best-web-component-data-grid/)
 
 There are two examples:
 
@@ -18,5 +25,5 @@ Building
 To build:
 - `npm install`
 - `npm install webpack -g`
-- `npm run standard` or `npm run large`
-- navigate to localhost:8080
+- `npm run example`, `npm run large` or `npm run trader`
+- navigate to localhost:8080

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "11.0.0",
+  "version": "12.0.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -62,9 +62,9 @@
     "react-redux": "5.0.x",
     "redux": "3.6.x",
     "url-search-params-polyfill": "1.2.0",
-    "ag-grid": "11.0.x",
-    "ag-grid-enterprise": "11.0.x",
-    "ag-grid-react": "11.0.x"
+    "ag-grid": "12.0.x",
+    "ag-grid-enterprise": "12.0.x",
+    "ag-grid-react": "12.0.x"
   }
 }
 

src/App.jsx

@@ -12,6 +12,7 @@ import GroupedRowInnerRendererComponentExample from "./groupedRowInnerRendererEx
 import FilterComponentExample from "./filterComponentExample/FilterComponentExample";
 import MasterDetailExample from "./masterDetailExample/MasterDetailExample";
 import SimpleReduxExample from "./simpleReduxExample/SimpleReduxExample";
+import SimpleGridExample from "./floatingFilter/SimpleGridExample";
 
 class App extends Component {
     constructor(props) {
@@ -44,10 +45,11 @@ class App extends Component {
                     <li role="presentation" className={this.state.example === 'dynamic' ? 'active' : null} onClick={() => this.setExample("dynamic")}><a href="#">Dynamic React Component Example</a></li>
                     <li role="presentation" className={this.state.example === 'rich-dynamic' ? 'active' : null} onClick={() => this.setExample("rich-dynamic")}><a href="#">Dynamic React Components - Richer Example</a></li>
                     <li role="presentation" className={this.state.example === 'editor' ? 'active' : null} onClick={() => this.setExample("editor")}><a href="#">Cell Editor Component Example</a></li>
-                    <li role="presentation" className={this.state.example === 'floating-row' ? 'active' : null} onClick={() => this.setExample("floating-row")}><a href="#">Floating Row Renderer Example</a></li>
+                    <li role="presentation" className={this.state.example === 'floating-row' ? 'active' : null} onClick={() => this.setExample("floating-row")}><a href="#">Pinned Row Renderer Example</a></li>
                     <li role="presentation" className={this.state.example === 'full-width' ? 'active' : null} onClick={() => this.setExample("full-width")}><a href="#">Full Width Renderer Example</a></li>
                     <li role="presentation" className={this.state.example === 'group-row' ? 'active' : null} onClick={() => this.setExample("group-row")}><a href="#">Grouped Row Inner Renderer Example</a></li>
                     <li role="presentation" className={this.state.example === 'filter' ? 'active' : null} onClick={() => this.setExample("filter")}><a href="#">Filters Component Example</a></li>
+                    <li role="presentation" className={this.state.example === 'floating-filter' ? 'active' : null} onClick={() => this.setExample("floating-filter")}><a href="#">Floating Filters</a></li>
                     <li role="presentation" className={this.state.example === 'master-detail' ? 'active' : null} onClick={() => this.setExample("master-detail")}><a href="#">Master Detail Example</a></li>
                     <li role="presentation" className={this.state.example === 'simple-redux' ? 'active' : null} onClick={() => this.setExample("simple-redux")}><a href="#">Simple Redux Example</a></li>
                 </ul>)
@@ -82,6 +84,9 @@ class App extends Component {
             case 'simple-redux':
                 example = <SimpleReduxExample/>;
                 break;
+            case 'floating-filter':
+                example = <SimpleGridExample/>;
+                break;
             default:
                 example = <RichGridExample/>;
         }

src/floatingFilter/SimpleGridExample.jsx

@@ -0,0 +1,60 @@
+import React, {Component} from "react";
+import {AgGridReact} from "ag-grid-react";
+import FloatingFilter from "./floatingFilter";
+
+export default class extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            columnDefs: this.createColumnDefs(),
+            rowData: this.createRowData()
+        }
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    createColumnDefs() {
+        return [
+            {headerName: "Make", field: "make", floatingFilterComponentFramework: FloatingFilter, filter:'set'},
+            {headerName: "Model", field: "model"},
+            {headerName: "Price", field: "price"}
+        ];
+    }
+
+    createRowData() {
+        return [
+            {make: "Toyota", model: "Celica", price: 35000},
+            {make: "Ford", model: "Mondeo", price: 32000},
+            {make: "Porsche", model: "Boxter", price: 72000}
+        ];
+    }
+
+    render() {
+        let containerStyle = {
+            height: 115,
+            width: 500
+        };
+
+        return (
+            <div style={containerStyle} className="ag-fresh">
+                <h1>Simple ag-Grid React Example</h1>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    floatingFilter={true}
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        )
+    }
+};

src/floatingFilter/floatingFilter.jsx

@@ -0,0 +1,39 @@
+import React, {Component} from "react";
+import ReactDOM from "react-dom";
+
+export default class FloatingFilter extends Component {
+    constructor(props) {
+        super();
+        this.state = {
+            parentModel: null
+        }
+    }
+
+    onParentModelChanged(parentModel){
+        this.setState ({
+            parentModel: parentModel
+        })
+    }
+
+    remove(item){
+        this.props.onFloatingFilterChanged({
+            model:this.state.parentModel.filter(it=>it != item)
+        });
+    }
+
+    render() {
+        if (!this.state.parentModel) return null;
+
+        let that = this;
+        let options = this.state.parentModel.map ((item, i)=>{
+            let that = this;
+            let removeMeListener = ()=>{
+                this.remove(item)
+            }
+            let removeMeElement = <a onClick={removeMeListener}>[x]</a>;
+            return <span key={i}>{item}{removeMeElement}</span>;
+        });
+
+        return <div>{options}</div>;
+    }
+}

src/floatingRowExample/FloatingRowComponentExample.jsx

@@ -13,8 +13,8 @@ export default class FloatingRowComponentExample extends Component {
             rowData: this.createRowData(),
             columnDefs: this.createColumnDefs(),
 
-            topFloatingRowData: [{row: "Top Row", number: "Top Number"}],
-            bottomFloatingRowData: [{row: "Bottom Row", number: "Bottom Number"}]
+            pinnedTopRowData: [{row: "Top Row", number: "Top Number"}],
+            pinnedBottomRowData: [{row: "Bottom Row", number: "Bottom Number"}]
         };
 
         this.onGridReady = this.onGridReady.bind(this);
@@ -55,7 +55,7 @@ export default class FloatingRowComponentExample extends Component {
 
         for (let i = 0; i < 15; i++) {
             rowData.push({
-                row: "Row " + i,
+                row: "Rou " + i,
                 number: Math.round(Math.random() * 100)
             });
         }
@@ -67,14 +67,14 @@ export default class FloatingRowComponentExample extends Component {
         return (
             <div style={{height: 400, width: 945}}
                  className="ag-fresh">
-                <h1>Floating Row Renderer Example</h1>
+                <h1>Pinned Row Renderer Example</h1>
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
                     rowData={this.state.rowData}
 
-                    floatingTopRowData={this.state.topFloatingRowData}
-                    floatingBottomRowData={this.state.bottomFloatingRowData}
+                    pinnedTopRowData={this.state.pinnedTopRowData}
+                    pinnedBottomRowData={this.state.pinnedBottomRowData}
 
                     // events
                     onGridReady={this.onGridReady}>