AG-1053 Tidy react examples, make more idiomatic

config/webpack.config.examples.js

@@ -1,11 +1,11 @@
 const path = require('path');
 
-const SRC_DIR = path.resolve(__dirname, 'src');
+const SRC_DIR = path.resolve(__dirname, '../src-examples');
 
 module.exports = {
     entry: SRC_DIR + "/index.js",
     output: {
-        path: __dirname,
+        path: path.resolve(__dirname, '../'),
         filename: "dist/react-examples.js"
     },
     module: {

config/webpack.config.large.js

@@ -1,11 +1,11 @@
 const path = require('path');
 
-const SRC_DIR = path.resolve(__dirname, 'src-large');
+const SRC_DIR = path.resolve(__dirname, '../src-large-data');
 
 module.exports = {
     entry: SRC_DIR + "/index.js",
     output: {
-        path: __dirname,
+        path: path.resolve(__dirname, '../'),
         filename: "dist/react-large.js"
     },
     module: {

config/webpack.config.trader.js

@@ -1,11 +1,11 @@
 const path = require('path');
 
-const SRC_DIR = path.resolve(__dirname, 'src-trader-dashboard');
+const SRC_DIR = path.resolve(__dirname, '../src-trader-dashboard');
 
 module.exports = {
     entry: SRC_DIR + "/index.js",
     output: {
-        path: __dirname,
+        path: path.resolve(__dirname, '../'),
         filename: "dist/react-trader.js"
     },
     module: {

package.json

@@ -4,17 +4,17 @@
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
-    "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config webpack.config.trader.js --progress --colors --hot --inline",
-    "examples": "webpack-dev-server --content-base src/ --config webpack.config.examples.js --progress --colors --hot --inline",
-    "large": "webpack-dev-server --content-base src-large/ --config webpack.config.large.js --progress --colors --hot --inline",
+    "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --progress --colors --hot --inline",
+    "examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --progress --colors --hot --inline",
+    "large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --progress --colors --hot --inline",
     "clean": "rimraf dist",
     "mkdirs": "mkdirp dist/trader/dist dist/examples/dist",
     "copy-examples": "ncp images dist/examples/images && ncp src/index.html dist/examples/index.html && ncp dist/react-examples.js dist/examples/dist/react-examples.js && ncp src dist/examples/src",
     "copy-trader": "ncp src-trader-dashboard/index.html dist/trader/index.html && ncp dist/react-trader.js dist/trader/dist/react-trader.js",
     "copy": "npm run copy-examples && npm run copy-trader",
-    "build-large": "webpack --config webpack.config.large.js --progress --profile --bail",
-    "build-examples": "webpack --config webpack.config.examples.js --progress --profile --bail",
-    "build-dashboard": "webpack --config webpack.config.trader.js --progress --profile --bail",
+    "build-large": "webpack --config config/webpack.config.large.js --progress --profile --bail",
+    "build-examples": "webpack --config config/webpack.config.examples.js --progress --profile --bail",
+    "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",
     "copy-to-docs": "ncp dist/examples ../ag-grid-docs/src/framework-examples/react-examples/examples && ncp dist/trader ../ag-grid-docs/src/framework-examples/react-examples/trader",

src-examples/dynamicComponentExample/ChildMessageRenderer.jsx

@@ -3,13 +3,14 @@ import React, {Component} from "react";
 export default class ChildMessageRenderer extends Component {
     constructor(props) {
         super(props);
-
-        this.invokeParentMethod = this.invokeParentMethod.bind(this);
     }
 
-    invokeParentMethod() {
-        this.props.context.componentParent.methodFromParent(`Row: ${this.props.node.rowIndex}, Col: ${this.props.colDef.headerName}`)
-    }
+    invokeParentMethod = () => {
+        let rowIndex = this.props.node.rowIndex;
+        let headerName = this.props.colDef.headerName;
+
+        this.props.context.componentParent.methodFromParent(`Row: ${rowIndex}, Col: ${headerName}`)
+    };
 
     render() {
         return (

src-examples/dynamicComponentExample/CurrencyRenderer.jsx

@@ -9,7 +9,7 @@ export default class CurrencyRenderer extends Component {
         }
     }
 
-    formatValueToCurrency(currency, value) {
+    static formatValueToCurrency(currency, value) {
         return `${currency}${value}`
     }
 
@@ -25,7 +25,7 @@ export default class CurrencyRenderer extends Component {
 
     render() {
         return (
-            <span>{this.formatValueToCurrency('EUR', this.state.value)}</span>
+            <span>{CurrencyRenderer.formatValueToCurrency('EUR', this.state.value)}</span>
         );
     }
 };

src-examples/dynamicComponentExample/DynamicComponentsExample.jsx

@@ -23,22 +23,20 @@ export default class DynamicComponentsExample extends Component {
             columnDefs: DynamicComponentsExample.createColumnDefs()
         };
 
-        this.onGridReady = this.onGridReady.bind(this);
-        this.refreshEvenRowsCurrencyData = this.refreshEvenRowsCurrencyData.bind(this);
     }
 
-    onGridReady(params) {
+    onGridReady = (params) => {
         this.gridApi = params.api;
         this.columnApi = params.columnApi;
 
         this.gridApi.sizeColumnsToFit();
-    }
+    };
 
     methodFromParent(cell) {
         alert(`Parent Component Method from ${cell}!`);
     }
 
-    refreshEvenRowsCurrencyData() {
+    refreshEvenRowsCurrencyData = () => {
         this.gridApi.forEachNode(rowNode => {
             if (rowNode.data.value % 2 === 0) {
                 rowNode.setDataValue('currency', rowNode.data.value + Number(Math.random().toFixed(2)))
@@ -48,7 +46,7 @@ export default class DynamicComponentsExample extends Component {
         this.gridApi.refreshCells({
             columns: ['currency']
         })
-    }
+    };
 
     static createColumnDefs() {
         return [
@@ -111,7 +109,9 @@ export default class DynamicComponentsExample extends Component {
             <div style={{height: 400, width: 900}}
                  className="ag-fresh">
                 <h1>Dynamic React Component Example</h1>
-                <button onClick={this.refreshEvenRowsCurrencyData} style={{marginBottom: 10}} className="btn btn-primary">Refresh Even Row Currency Data</button>
+                <button onClick={this.refreshEvenRowsCurrencyData} style={{marginBottom: 10}}
+                        className="btn btn-primary">Refresh Even Row Currency Data
+                </button>
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
@@ -126,12 +126,17 @@ export default class DynamicComponentsExample extends Component {
                 </div>
                 <div className="row">
                     <div className="col-sm-12">
-                        <h5>This example demonstrates Dynamic React Components with ag-Grid, Parent/Child Communication (cell component to parent grid component), as well as
+                        <h5>This example demonstrates Dynamic React Components with ag-Grid, Parent/Child Communication
+                            (cell component to parent grid component), as well as
                             dynamic data updates of the <code>Currency</code> column.</h5>
-                        <p><span style={{fontWeight: "bold"}}>Square, Cube, Row Params, Currency and Child/Parent</span>: React Components within the Grid</p>
-                        <p><span style={{fontWeight: "bold"}}>Currency (Pipe)</span>: An React Component mimicking a Currency Pipe, dynamically updated with the button above.</p>
-                        <p><span style={{fontWeight: "bold"}}>Child/Parent</span>: Demonstrates the Child Cell Component communicating with the Parent Grid Component.</p>
-                        <p><span style={{fontWeight: "bold"}}>Refresh Even Row Currency Data</span>: Dynamically Updates Event Rows Currency Value. Only the Currency column will be re-rendered.</p>
+                        <p><span style={{fontWeight: "bold"}}>Square, Cube, Row Params, Currency and Child/Parent</span>:
+                            React Components within the Grid</p>
+                        <p><span style={{fontWeight: "bold"}}>Currency (Pipe)</span>: An React Component mimicking a
+                            Currency Pipe, dynamically updated with the button above.</p>
+                        <p><span style={{fontWeight: "bold"}}>Child/Parent</span>: Demonstrates the Child Cell Component
+                            communicating with the Parent Grid Component.</p>
+                        <p><span style={{fontWeight: "bold"}}>Refresh Even Row Currency Data</span>: Dynamically Updates
+                            Event Rows Currency Value. Only the Currency column will be re-rendered.</p>
                     </div>
                 </div>
                 <div className="row">
@@ -140,9 +145,13 @@ export default class DynamicComponentsExample extends Component {
                             <div className="card-body">
                                 <h4 className="card-title">React Functionality</h4>
                                 <p className="card-text">Utilise React Components within ag-Grid</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-cell-rendering-components/?framework=react" className="btn btn-primary">React Renderers</a>
-                                <a target="_blank" href="https://www.ag-grid.com/javascript-grid-data-update/" className="btn btn-primary">Updating Data</a>
+                                <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-cell-rendering-components/?framework=react"
+                                   className="btn btn-primary">React 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>

src-examples/editorComponentExample/NumericEditor.jsx

@@ -1,21 +1,20 @@
 import React, {Component} from "react";
 
-export default class MoodEditor extends Component {
+export default class NumericEditor extends Component {
     constructor(props) {
         super(props);
 
+        // if the character pressed to start editing isn't numeric we set this flag, which will mean editing wont be initiated
         this.cancelBeforeStart = this.props.charPress && ('1234567890'.indexOf(this.props.charPress) < 0);
 
         let value = this.props.value;
         if (!this.cancelBeforeStart && this.props.charPress) {
             value = value + this.props.charPress;
         }
+
         this.state = {
             value
         };
-
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.handleChange = this.handleChange.bind(this);
     }
 
     componentDidMount() {
@@ -23,19 +22,19 @@ export default class MoodEditor extends Component {
         this.focus();
     }
 
-    componentDidUpdate() {
-        this.focus();
-    }
-
     componentWillUnmount() {
         this.refs.input.removeEventListener('keydown', this.onKeyDown);
     }
 
+    // componentDidUpdate() {
+    //     this.focus();
+    // }
+
     focus() {
         if (!this.cancelBeforeStart) {
             setTimeout(() => {
                 this.refs.input.focus();
-                this.refs.input.setSelectionRange(this.state.value.length, this.state.value.length);
+                this.refs.input.setSelectionRange(this.refs.input.value.length, this.refs.input.value.length);
             })
         }
     }
@@ -54,36 +53,39 @@ export default class MoodEditor extends Component {
         return this.state.value > 1000000;
     };
 
-    onKeyDown(event) {
-        if (this.isLeftOrRight(event)) {
+    handleChange = (event) => {
+        this.setState({value: event.target.value});
+    };
+
+    onKeyDown = (event) => {
+        // allow back and forth navigation, as well as editing
+        if (NumericEditor.isAllowableKeypress(event)) {
             event.stopPropagation();
             return;
         }
 
-        if (!this.isKeyPressedNumeric(event)) {
+        // if not a numeral, then reject the keypress
+        if (!NumericEditor.isKeyPressedNumeric(event)) {
             if (event.preventDefault) event.preventDefault();
         }
+    };
+
+    static isAllowableKeypress(event) {
+        // left, right, backspace & delete
+        return [37, 39, 46, 8].indexOf(event.keyCode) > -1;
     }
 
-    isLeftOrRight(event) {
-        return [37, 39].indexOf(event.keyCode) > -1;
-    }
-
-    handleChange(event) {
-        this.setState({value: event.target.value});
-    }
-
-    getCharCodeFromEvent(event) {
+    static getCharCodeFromEvent(event) {
         event = event || window.event;
         return (typeof event.which === "undefined") ? event.keyCode : event.which;
     }
 
-    isCharNumeric(charStr) {
+    static isCharNumeric(charStr) {
         return !!/\d/.test(charStr);
     }
 
-    isKeyPressedNumeric(event) {
-        const charCode = this.getCharCodeFromEvent(event);
+    static isKeyPressedNumeric(event) {
+        const charCode = NumericEditor.getCharCodeFromEvent(event);
         const charStr = event.key ? event.key : String.fromCharCode(charCode);
         return this.isCharNumeric(charStr);
     }
@@ -93,7 +95,7 @@ export default class MoodEditor extends Component {
             <input ref="input"
                    value={this.state.value}
                    onChange={this.handleChange}
-                   style={{width: "100%"}}
+                   style={{width: "100%",padding:0,margin:-1}}
             />
         );
     }

src-examples/filterComponentExample/FilterComponentExample.jsx

@@ -11,36 +11,35 @@ export default class FilterComponentExample extends Component {
         super(props);
 
         this.state = {
-            gridOptions: {},
-
             rowData: FilterComponentExample.createRowData(),
             columnDefs: FilterComponentExample.createColumnDefs(),
         };
-
-        this.onGridReady = this.onGridReady.bind(this);
-        this.onClicked = this.onClicked.bind(this);
     }
 
-    onGridReady(params) {
+    onGridReady = (params) => {
         this.gridApi = params.api;
         this.columnApi = params.columnApi;
 
         this.gridApi.sizeColumnsToFit();
-    }
+    };
 
-    onClicked() {
+    onClicked = () => {
         this.gridApi.getFilterInstance("name").getFrameworkComponentInstance().componentMethod("Hello World!");
-    }
+    };
 
     static createColumnDefs() {
         return [
-            {headerName: "Row", field: "row", width: 400},
+            {
+                field: "row",
+                width: 400,
+                suppressMenu: true
+            },
             {
                 headerName: "Filter Component",
                 field: "name",
                 filterFramework: PartialMatchFilter,
                 width: 400,
-                menuTabs:['filterMenuTab']
+                menuTabs: ['filterMenuTab']
             }
         ];
     }
@@ -69,17 +68,22 @@ export default class FilterComponentExample extends Component {
             <div style={{height: 400, width: 900}}
                  className="ag-fresh">
                 <h1>Filter Component Example</h1>
-                <button style={{marginBottom: 10}} onClick={this.onClicked} className="btn btn-primary">Filter Instance Method</button>
+                <button style={{marginBottom: 10}} onClick={this.onClicked} className="btn btn-primary">Filter Instance
+                    Method
+                </button>
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
                     rowData={this.state.rowData}
 
                     enableFilter
+                    suppressMenuHide
 
                     // events
                     onGridReady={this.onGridReady}>
                 </AgGridReact>
+                <h4>The filter on the Filter Component column uses a Custom React Filter Component</h4>
+                <p>This filter will allow partial matches - for example enter "m p" which will match Michael Phelps.</p>
             </div>
         );
     }

src-examples/filterComponentExample/PartialMatchFilter.jsx

@@ -1,5 +1,4 @@
 import React, {Component} from "react";
-import ReactDOM from "react-dom";
 
 export default class PartialMatchFilter extends Component {
     constructor(props) {
@@ -10,8 +9,6 @@ export default class PartialMatchFilter extends Component {
         };
 
         this.valueGetter = this.props.valueGetter;
-
-        this.onChange = this.onChange.bind(this);
     }
 
     isFilterActive() {
@@ -40,9 +37,8 @@ export default class PartialMatchFilter extends Component {
 
     focus() {
         setTimeout(() => {
-            let container = ReactDOM.findDOMNode(this.refs.input);
-            if (container) {
-                container.focus();
+            if (this.refs.input) {
+                this.refs.input.focus();
             }
         })
     }
@@ -51,19 +47,21 @@ export default class PartialMatchFilter extends Component {
         alert(`Alert from PartialMatchFilterComponent ${message}`);
     }
 
-    onChange(event) {
+    onChange = (event) => {
         let newValue = event.target.value;
         if (this.state.text !== newValue) {
             this.setState({
                 text: newValue
             }, () => {
+                // wait for the state to be applied, then let the grid know about the change
                 this.props.filterChangedCallback();
             });
 
         }
-    }
+    };
 
     render() {
+        console.log("render");
         let style = {
             border: "2px solid #22ff22",
             borderRadius: "5px",
@@ -73,8 +71,13 @@ export default class PartialMatchFilter extends Component {
         };
 
         return (
-            <div style={style}>Filter: <input style={{height: "20px"}} ref="input" value={this.state.text}
-                                              onChange={this.onChange} className="form-control"/></div>
+            <div style={style}>
+                Filter: <input style={{height: "20px"}}
+                               ref="input"
+                               value={this.state.text}
+                               onChange={this.onChange}
+                               className="form-control"/>
+            </div>
         );
     }
 };

src-examples/floatingFilter/FloatingFilterGridExample.jsx

@@ -0,0 +1,134 @@
+import React, {Component} from "react";
+import {AgGridReact} from "ag-grid-react";
+import SlidingFloatingFilter from "./SlidingFloatingFilter";
+
+export default class FloatingFilterGridExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            columnDefs: FloatingFilterGridExample.createColumnDefs(),
+            rowData: FloatingFilterGridExample.createRowData()
+        }
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    static createColumnDefs() {
+        return [
+            {
+                field: "country",
+                suppressFilter: true
+            },
+            {
+                field: "language",
+                suppressFilter: true
+            },
+            {
+                field: "name",
+                suppressFilter: true
+            },
+            {
+                field: "gold",
+                floatingFilterComponentFramework: SlidingFloatingFilter,
+                floatingFilterComponentParams: {
+                    maxValue: 7,
+                    suppressFilterButton: true
+                },
+                filter: 'number',
+                suppressMenu: false
+            },
+            {
+                field: "silver",
+                filter: 'number',
+                floatingFilterComponentFramework: SlidingFloatingFilter,
+                floatingFilterComponentParams: {
+                    maxValue: 5,
+                    suppressFilterButton: true
+                },
+                suppressMenu: false
+            },
+            {
+                field: "bronze",
+                filter: 'number',
+                floatingFilterComponentFramework: SlidingFloatingFilter,
+                floatingFilterComponentParams: {
+                    maxValue: 10,
+                    suppressFilterButton: true
+                },
+                suppressMenu: false
+            }
+        ];
+    }
+
+    static createRowData() {
+        return [
+            {country: "United States", language: "English", name: "Bob", gold: 1, silver: 3, bronze: 0},
+            {country: "United States", language: "English", name: "Jack", gold: 0, silver: 1, bronze: 1},
+            {country: "United States", language: "English", name: "Sue", gold: 3, silver: 0, bronze: 1},
+            {country: "United Kingdom", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 2},
+            {country: "United Kingdom", language: "English", name: "Tess", gold: 2, silver: 1, bronze: 1},
+            {country: "United Kingdom", language: "English", name: "John", gold: 0, silver: 2, bronze: 1},
+            {country: "Jamaica", language: "English", name: "Bob", gold: 4, silver: 1, bronze: 2},
+            {country: "Jamaica", language: "English", name: "Jack", gold: 3, silver: 1, bronze: 2},
+            {country: "Jamaica", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 2},
+            {country: "South Africa", language: "English", name: "Bob", gold: 4, silver: 0, bronze: 1},
+            {country: "South Africa", language: "English", name: "Jack", gold: 3, silver: 0, bronze: 1},
+            {country: "South Africa", language: "English", name: "Mary", gold: 5, silver: 3, bronze: 1},
+            {country: "South Africa", language: "English", name: "John", gold: 2, silver: 3, bronze: 1},
+            {country: "New Zealand", language: "English", name: "Bob", gold: 5, silver: 3, bronze: 10},
+            {country: "New Zealand", language: "English", name: "Jack", gold: 1, silver: 1, bronze: 1},
+            {country: "New Zealand", language: "English", name: "Sue", gold: 1, silver: 3, bronze: 1},
+            {country: "Australia", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 3},
+            {country: "Australia", language: "English", name: "Tess", gold: 2, silver: 1, bronze: 1},
+            {country: "Australia", language: "English", name: "John", gold: 3, silver: 2, bronze: 1},
+            {country: "Canada", language: "English", name: "Bob", gold: 7, silver: 5, bronze: 3},
+            {country: "Canada", language: "English", name: "Jack", gold: 2, silver: 1, bronze: 3},
+            {country: "Canada", language: "English", name: "Mary", gold: 0, silver: 1, bronze: 3},
+            {country: "Switzerland", language: "French", name: "Bob", gold: 2, silver: 3, bronze: 1},
+            {country: "Switzerland", language: "French", name: "Jack", gold: 2, silver: 3, bronze: 1},
+            {country: "Switzerland", language: "French", name: "Mary", gold: 1, silver: 3, bronze: 1},
+            {country: "Switzerland", language: "French", name: "John", gold: 1, silver: 4, bronze: 1},
+            {country: "Spain", language: "Spanish", name: "Bob", gold: 1, silver: 4, bronze: 0},
+            {country: "Spain", language: "Spanish", name: "Jack", gold: 0, silver: 1, bronze: 1},
+            {country: "Spain", language: "Spanish", name: "Sue", gold: 1, silver: 4, bronze: 1},
+            {country: "Portugal", language: "Portuguese", name: "Mary", gold: 2, silver: 1, bronze: 4},
+            {country: "Portugal", language: "Portuguese", name: "Tess", gold: 3, silver: 1, bronze: 1},
+            {country: "Portugal", language: "Portuguese", name: "John", gold: 5, silver: 2, bronze: 1},
+            {country: "Zimbabwe", language: "English", name: "Bob", gold: 3, silver: 1, bronze: 4},
+            {country: "Zimbabwe", language: "English", name: "Jack", gold: 4, silver: 1, bronze: 4},
+            {country: "Zimbabwe", language: "English", name: "Mary", gold: 2, silver: 1, bronze: 4},
+            {country: "Brazil", language: "Brazillian", name: "Bob", gold: 3, silver: 4, bronze: 1},
+            {country: "Brazil", language: "Brazillian", name: "Jack", gold: 2, silver: 4, bronze: 1},
+            {country: "Brazil", language: "Brazillian", name: "Mary", gold: 4, silver: 0, bronze: 1},
+            {country: "Brazil", language: "Brazillian", name: "John", gold: 1, silver: 0, bronze: 1}];
+    }
+
+    render() {
+        let divStyle = {
+            height: 400,
+            width: 900
+        };
+
+        return (
+            <div style={divStyle} className="ag-fresh">
+                <h1>Floating Filter Example</h1>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    floatingFilter
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        )
+    }
+};

src-examples/floatingFilter/SlidingFloatingFilter.jsx

@@ -0,0 +1,53 @@
+import React, {Component} from "react";
+
+export default class SlidingFloatingFilter extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            maxValue: props.maxValue,
+            currentValue: 0
+        }
+    }
+
+    valueChanged = (event) => {
+        this.setState({
+                currentValue: event.target.value
+            },
+            () => {
+                this.props.onFloatingFilterChanged({model: this.buildModel()});
+            })
+
+    };
+
+    onParentModelChanged(parentModel) {
+        // note that the filter could be anything here, but our purposes we're assuming a greater than filter only,
+        // so just read off the value and use that
+        this.setState({
+            currentValue: !parentModel ? 0 : parentModel.filter
+        });
+    }
+
+    buildModel() {
+        if (this.state.currentValue === 0) {
+            return null;
+        }
+        return {
+            filterType: 'number',
+            type: 'greaterThan',
+            filter: this.state.currentValue,
+            filterTo: null
+        };
+    }
+
+    render() {
+        return (
+            <input type="range"
+                   value={this.state.currentValue}
+                   min={0}
+                   max={this.state.maxValue}
+                   step={1}
+                   onChange={this.valueChanged}/>
+        )
+    }
+}

src-examples/index.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <script type="text/javascript" src="dist/react-examples.js" charset="utf-8"></script>
+    <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">
 

src-examples/richComponentExample/ClickableRenderer.jsx

@@ -10,17 +10,19 @@ export default class ClickableRenderer extends Component {
                 col: this.props.colDef.headerName
             }
         };
-
-        this.clicked = this.clicked.bind(this);
     }
 
-    clicked() {
+    clicked = () => {
         console.log("Child Cell Clicked: " + JSON.stringify(this.state.cell));
-    }
+    };
 
     render() {
+        let buttonStyle = {
+            lineHeight: 0.5,
+            width: "98%"
+        };
           return (
-            <button style={{lineHeight: 0.5, width: "98%"}} onClick={this.clicked} className="btn btn-info">Click Me</button>
+            <button style={buttonStyle} onClick={this.clicked} className="btn btn-info">Click Me</button>
         );
     }
 }

src-examples/richComponentExample/RichComponentsExample.jsx

@@ -12,16 +12,14 @@ export default class RichComponentsExample extends Component {
             rowData: RichComponentsExample.createRowData(),
             columnDefs: RichComponentsExample.createColumnDefs()
         };
-
-        this.onGridReady = this.onGridReady.bind(this);
     }
 
-    onGridReady(params) {
+    onGridReady = (params) => {
         this.gridApi = params.api;
         this.columnApi = params.columnApi;
 
         this.gridApi.sizeColumnsToFit();
-    }
+    };
 
     static createColumnDefs() {
         return [

src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -14,8 +14,14 @@ class GridComponent extends Component {
 
         this.state = {
             columnDefs: [
-                {headerName: 'Symbol', field: 'symbol'},
-                {headerName: 'Price', field: 'price', cellClass: 'align-right', cellRendererFramework: PriceRenderer}
+                {
+                    field: 'symbol'
+                },
+                {
+                    field: 'price',
+                    cellClass: 'align-right',
+                    cellRendererFramework: PriceRenderer
+                }
             ]
         };
 

src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx

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

src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx

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