Add Vue and Aurelia Examples

Merge remote-tracking branch 'origin/b18.0.1'

.gitignore

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

README.md

@@ -1,18 +1,29 @@
+
 ag-Grid React Example
 ==============
 
-## Examples
+Examples of running ag-Grid inside React application.
+
+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.1.0",
+  "version": "18.0.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -17,13 +17,14 @@
     "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",

src-examples/NavItem.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import * as PropTypes from 'prop-types';
-import {Link, Route} from 'react-router-dom'
+import {Route, Link} 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/ag-theme-balham.css";
+import "ag-grid/dist/styles/theme-fresh.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} style={{marginTop: 3}}>
+                <div key={name}>
                     <label style={{paddingLeft: 4}}>
                         <input type="radio" checked={selected} name={Math.random()}
                                onChange={this.onButtonPressed.bind(this, name)}/>

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

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

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";
 
@@ -25,8 +26,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,7 +4,6 @@ export function updateRowData(rowData) {
         rowData
     }
 }
-
 export function setCurrency(currencySymbol, exchangeRate) {
     return {
         type: 'CURRENCY_CHANGED',