Release 18.1.0 dist files created

Merge remote-tracking branch 'origin/master' into latest

# Conflicts:
#	src/index.php

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
 /dist
+package-lock.json

README.md

@@ -1,29 +1,18 @@
-
 ag-Grid React Example
 ==============
 
-Examples of running ag-Grid inside React application.
+## Examples
-
-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:
 
 1. standard - shows a typical grid demonstrating many ag-Grid features
 
 2. large - shows a very large grid (767 columns and 1,000 rows) using React cell renderers
 
+See [www.ag-grid.com](http://www.ag-grid.com) for full documentation and examples.
+
 Building
 ==============
 
 To build:
 - `npm install`
-- `npm install webpack -g`
 - `npm run examples`, `npm run large` or `npm run trader`
 - navigate to localhost:8080

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "17.0.0",
+  "version": "18.1.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -17,14 +17,13 @@
     "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",
-    "build-to-docs": "npm run build && npm run copy-to-docs",
     "start": "npm run examples"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ag-grid/ag-grid-react-example.git"
   },
+  "private": true,
   "keywords": [
     "react",
     "grid",
@@ -58,9 +57,9 @@
     "typescript": "2.3.x"
   },
   "dependencies": {
-    "ag-grid": "^17.0.0",
+    "ag-grid": "^18.1.0",
-    "ag-grid-enterprise": "^17.0.0",
+    "ag-grid-enterprise": "^18.1.0",
-    "ag-grid-react": "^17.0.0",
+    "ag-grid-react": "^18.1.0",
     "bootstrap": "3.3.7",
     "d3": "4.9.1",
     "file-loader": "0.11.1",

src-examples/App.jsx

@@ -7,12 +7,12 @@ import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDec
 import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
 
 const SideBar = () => (
-        <div style={{float: "left", width: 335, marginRight: 25}}>
+    <div style={{float: "left", width: 335, marginRight: 25}}>
-            <ul className="nav nav-pills nav-stacked">
+        <ul className="nav nav-pills nav-stacked">
-                <NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
+            <NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
-                <NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
+            <NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
-            </ul>
+        </ul>
-        </div>
+    </div>
 );
 
 class App extends Component {

src-examples/NavItem.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import * as PropTypes from 'prop-types';
-import {Route, Link} from 'react-router-dom'
+import {Link, Route} from 'react-router-dom'
 
 // for bootstrap li active functionality
 export default function NavItem({children, to, exact}) {

src-examples/index.js

@@ -5,7 +5,7 @@ import {render} from "react-dom";
 import {BrowserRouter} from "react-router-dom";
 
 import "ag-grid/dist/styles/ag-grid.css";
-import "ag-grid/dist/styles/theme-fresh.css";
+import "ag-grid/dist/styles/ag-theme-balham.css";
 import "../node_modules/bootstrap/dist/css/bootstrap.css";
 
 import App from "./App";

src-examples/richGridDeclarativeExample/ProficiencyFilter.jsx

@@ -54,7 +54,7 @@ export default class ProficiencyFilter extends React.Component {
         PROFICIENCY_NAMES.forEach((name) => {
             const selected = this.state.selected === name;
             rows.push(
-                <div key={name}>
+                <div key={name} style={{marginTop: 3}}>
                     <label style={{paddingLeft: 4}}>
                         <input type="radio" checked={selected} name={Math.random()}
                                onChange={this.onButtonPressed.bind(this, name)}/>

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

@@ -12,7 +12,6 @@ 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";
 
@@ -77,8 +76,10 @@ export default class RichGridDeclarativeExample extends Component {
 
     dobFilter = () => {
         let dateFilterComponent = this.api.getFilterInstance('dob');
-        dateFilterComponent.setFilterType('equals');
+        dateFilterComponent.setModel({
-        dateFilterComponent.setDateFrom('2000-01-01');
+            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)
@@ -121,13 +122,21 @@ export default class RichGridDeclarativeExample extends Component {
                     <div>
                         <span>
                             Grid API:
-                            <button onClick={() => { this.api.selectAll() }} className="btn btn-primary">Select All</button>
+                            <button onClick={() => {
-                            <button onClick={() => { this.api.deselectAll() }} className="btn btn-primary">Clear Selection</button>
+                                this.api.selectAll()
+                            }} className="btn btn-primary">Select All</button>
+                            <button onClick={() => {
+                                this.api.deselectAll()
+                            }} className="btn btn-primary">Clear Selection</button>
                         </span>
                         <span style={{float: "right"}}>
                             Column API:
-                            <button onClick={() => { this.columnApi.setColumnVisible('country', false) }} className="btn btn-primary">Hide Country Column</button>
+                            <button onClick={() => {
-                            <button onClick={() => { this.columnApi.setColumnVisible('country', true) }} className="btn btn-primary">Show Country Column</button>
+                                this.columnApi.setColumnVisible('country', false)
+                            }} className="btn btn-primary">Hide Country Column</button>
+                            <button onClick={() => {
+                                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}}>
@@ -148,10 +157,11 @@ export default class RichGridDeclarativeExample extends Component {
                             <button onClick={this.invokeSkillsFilterMethod}
                                     className="btn btn-primary">Invoke Skills Filter Method
                             </button>
-                            <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß</button>
+                            <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß
+                            </button>
                         </div>
                     </div>
-                    <div style={{height: 400, width: 900}} className="ag-fresh">
+                    <div style={{height: 400, width: 900}} className="ag-theme-balham">
                         <AgGridReact
                             // listening for events
                             onGridReady={this.onGridReady}
@@ -177,7 +187,6 @@ export default class RichGridDeclarativeExample extends Component {
                             enableFilter
                             floatingFilter
                             groupHeaders
-                            rowHeight="22"
 
                             // setting grid wide date component
                             dateComponentFramework={DateComponent}
@@ -190,20 +199,36 @@ export default class RichGridDeclarativeExample extends Component {
                                 }
                             }}
                         >
-                            <AgGridColumn headerName="#" width={30} checkboxSelection suppressSorting suppressMenu suppressFilter pinned></AgGridColumn>
+                            <AgGridColumn headerName="#" width={30}
+                                          checkboxSelection suppressSorting suppressMenu suppressFilter pinned>
+                            </AgGridColumn>
                             <AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
-                                <AgGridColumn field="name" width={150} enableRowGroup enablePivot pinned editable cellEditorFramework={NameCellEditor}></AgGridColumn>
+                                <AgGridColumn field="name" width={150}
-                                <AgGridColumn field="country" width={150} enableRowGroup enablePivot pinned editable cellRenderer={RichGridDeclarativeExample.countryCellRenderer} filterParams={{cellRenderer: RichGridDeclarativeExample.countryCellRenderer, cellHeight:20}}></AgGridColumn>
+                                              cellEditorFramework={NameCellEditor}
-                                <AgGridColumn field="dob" width={145} headerName="DOB" filter="date" pinned columnGroupShow="open" cellRenderer={RichGridDeclarativeExample.dateCellRenderer}></AgGridColumn>
+                                              enableRowGroup enablePivot pinned editable/>
+                                <AgGridColumn field="country" width={150}
+                                              cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
+                                              filterParams={{
+                                                  cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
+                                                  cellHeight: 20
+                                              }}
+                                              enableRowGroup enablePivot pinned editable/>
+                                <AgGridColumn field="dob" width={175} headerName="DOB" filter="agDateColumnFilter"
+                                              pinned columnGroupShow="open"
+                                              cellRenderer={RichGridDeclarativeExample.dateCellRenderer}/>
                             </AgGridColumn>
                             <AgGridColumn headerName="IT Skills">
-                                <AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting cellRendererFramework={SkillsCellRenderer} filterFramework={SkillsFilter}></AgGridColumn>
+                                <AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting
-                                <AgGridColumn field="proficiency" width={135} enableValue cellRendererFramework={ProficiencyCellRenderer} filterFramework={ProficiencyFilter}></AgGridColumn>
+                                              cellRendererFramework={SkillsCellRenderer}
+                                              filterFramework={SkillsFilter}/>
+                                <AgGridColumn field="proficiency" width={135} enableValue
+                                              cellRendererFramework={ProficiencyCellRenderer}
+                                              filterFramework={ProficiencyFilter}/>
                             </AgGridColumn>
                             <AgGridColumn headerName="Contact">
-                                <AgGridColumn field="mobile" width={150} filter="text"></AgGridColumn>
+                                <AgGridColumn field="mobile" width={150} filter="text"/>
-                                <AgGridColumn field="landline" width={150} filter="text"></AgGridColumn>
+                                <AgGridColumn field="landline" width={150} filter="text"/>
-                                <AgGridColumn field="address" width={500} filter="text"></AgGridColumn>
+                                <AgGridColumn field="address" width={500} filter="text"/>
                             </AgGridColumn>
                         </AgGridReact>
                     </div>
@@ -213,7 +238,8 @@ export default class RichGridDeclarativeExample extends Component {
                         </div>
                         <div className="row">
                             <div className="col-sm-12">
-                                <h5>This example demonstrates many features of ag-Grid, with Grid and Column Definition defined declaratively (i.e. with markup).</h5>
+                                <h5>This example demonstrates many features of ag-Grid, with Grid and Column Definition
+                                    defined declaratively (i.e. with markup).</h5>
                                 <p><span style={{fontWeight: 500}}>Select All/Clear Selection</span>: Select or Deselect
                                     All
                                     Rows</p>

src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -39,7 +39,7 @@ class GridComponent extends Component {
     render() {
         return (
             <div style={{height: 400, width: 900, marginTop: 15}}
-                 className="ag-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}

src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx

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

src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx

@@ -1,7 +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";
 
@@ -26,8 +25,8 @@ export default class SimpleReduxExample extends Component {
             <Provider store={store}>
                 <div>
                     <h1>Simple Redux Example using Connected React Components</h1>
-                    <HeaderComponent />
+                    <HeaderComponent/>
-                    <GridComponent />
+                    <GridComponent/>
                 </div>
             </Provider>
         )

src-examples/simpleReduxDynamicComponentExample/gridDataActions.jsx

@@ -4,6 +4,7 @@ export function updateRowData(rowData) {
         rowData
     }
 }
+
 export function setCurrency(currencySymbol, exchangeRate) {
     return {
         type: 'CURRENCY_CHANGED',