Release 8.2.0

more docs work
Merge branch '8.1.0'
2017-03-08 14:43:47 +01:00 · 2017-02-24 15:09:48 +00:00 · 2017-02-20 13:11:50 +00:00 · 2017-02-20 12:49:05 +00:00 · 2017-02-09 15:48:33 +00:00 · 2017-02-09 14:14:07 +00:00
30 changed files with 9679 additions and 154 deletions
--- a/README.md
+++ b/README.md
@@ -2,10 +2,15 @@
 ag-Grid React Example
 ==============

-Example of running ag-Grid inside React application.
+Examples of running ag-Grid inside React application.

 See the [www.ag-grid.com](http://www.ag-grid.com).

+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

 Building
 ==============
@@ -13,6 +18,5 @@ Building
 To build:
 - `npm install`
 - `npm install webpack -g`
- `npm start`
+- `npm run standard` or `npm run large`
 - navigate to localhost:8080
-
--- a/index.html
+++ b/index.html
@@ -1,5 +1,8 @@
 <html>

+    <!-- This index file is common for both the standard and large examples. As to which project you are running
+        depends on whether you use 'npm run standard' or 'npm run large' -->
+
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
@@ -13,6 +16,105 @@
            margin-left: 4px;
            margin-right: 4px;
        }
+
+        .customHeaderMenuButton{
+            margin-top: 5px;
+            margin-left: 4px;
+            float: left;
+        }
+
+        .customHeaderLabel{
+            margin-left: 5px;
+            margin-top: 3px;
+            float: left;
+        }
+
+        .customSortDownLabel{
+            float: left;
+            margin-left: 10px;
+            margin-top: 5px;
+        }
+
+        .customSortUpLabel{
+            float: left;
+            margin-left: 3px;
+            margin-top: 4px;
+        }
+
+        .customSortRemoveLabel{
+            float: left;
+            font-size: 11px;
+            margin-left: 3px;
+            margin-top: 6px;
+        }
+
+        .active {
+            color: cornflowerblue;
+        }
+
+        .hidden { display:none; }
+
+
+        .customHeaderLabel{
+            margin-left: 5px;
+            margin-top: 3px;
+            float: left;
+        }
+
+        .customExpandButton{
+            float:right;
+            margin-top: 5px;
+            margin-left: 3px;
+        }
+
+        .expanded {
+            animation-name: toExpanded;
+            animation-duration: 1s;
+            -ms-transform: rotate(180deg); /* IE 9 */
+            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+            transform: rotate(180deg);
+        }
+
+        .collapsed {
+            color: cornflowerblue;
+            animation-name: toCollapsed;
+            animation-duration: 1s;
+            -ms-transform: rotate(0deg); /* IE 9 */
+            -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+            transform: rotate(0deg);
+        }
+
+
+
+        @keyframes  toExpanded{
+            from {
+                color: cornflowerblue;
+                -ms-transform: rotate(0deg); /* IE 9 */
+                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+                transform: rotate(0deg);
+            }
+            to {
+                color: black;
+                -ms-transform: rotate(180deg); /* IE 9 */
+                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+                transform: rotate(180deg);
+            }
+        }
+
+        @keyframes toCollapsed{
+            from {
+                color: black;
+                -ms-transform: rotate(180deg); /* IE 9 */
+                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+                transform: rotate(180deg);
+            }
+            to {
+                color: cornflowerblue;
+                -ms-transform: rotate(0deg); /* IE 9 */
+                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+                transform: rotate(0deg);
+            }
+        }
    </style>

    <body>
--- a/olympicWinners.json
+++ b/olympicWinners.json
--- a/package.json
+++ b/package.json
@@ -1,10 +1,14 @@
 {
  "name": "ag-grid-react-example",
-  "version": "5.3.0",
+  "version": "8.2.0",
  "description": "Example Reach applicaiton using ag-Grid.",
  "main": "dist/ag-grid-react-example.js",
  "scripts": {
-    "start": "webpack-dev-server --progress --colors --hot --inline"
+    "standard": "webpack-dev-server --config webpack.config.standard.js --progress --colors --hot --inline",
+    "grouped": "webpack-dev-server --config webpack.config.grouped.js --progress --colors --hot --inline",
+    "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline",
+    "clean": "rimraf dist",
+    "build-standard": "npm run clean && webpack --config webpack.config.standard.js --progress --profile --bail"
  },
  "repository": {
    "type": "git",
@@ -26,16 +30,20 @@
    "babel-loader": "6.2.1",
    "babel-preset-es2015": "6.3.13",
    "babel-preset-react": "6.3.13",
+    "babel-core": "^6.0.0",
    "css-loader": "0.23.1",
    "style-loader": "0.13.0",
    "webpack": "1.12.11",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
+    "rimraf": "2.5.x",
    "react": "0.14.6",
    "react-dom": "0.14.6",
-    "ag-grid": "~5.3.0",
-    "ag-grid-enterprise": "~5.3.0",
-    "ag-grid-react": "~5.3.0"
+    "ag-grid": "8.2.x",
+    "ag-grid-enterprise": "8.2.x",
+    "ag-grid-react": "8.2.x"
  }
 }
+
+
--- a/src-grouped/ColDefFactory.jsx
+++ b/src-grouped/ColDefFactory.jsx
@@ -0,0 +1,17 @@
+export default class ColDefFactory {
+    createColDefs() {
+        return [
+            {headerName: "Athlete", field: "athlete", width: 200},
+            {headerName: "Age", field: "age", width: 90},
+            {headerName: "Gold", field: "gold", width: 100, aggFunc: 'sum'},
+            {headerName: "Silver", field: "silver", width: 100, aggFunc: 'sum'},
+            {headerName: "Bronze", field: "bronze", width: 100, aggFunc: 'sum'},
+            {headerName: "Total", field: "total", width: 100, aggFunc: 'sum'},
+            {headerName: "Country", field: "country", width: 120, rowGroupIndex: 0},
+            {headerName: "Year", field: "year", width: 90},
+            {headerName: "Date", field: "date", width: 110},
+            {headerName: "Sport", field: "sport", width: 110}
+        ];
+    }
+}
+
--- a/src-grouped/index.js
+++ b/src-grouped/index.js
--- a/src-grouped/myApp.css
+++ b/src-grouped/myApp.css
@@ -10,7 +10,7 @@ label {

 .div-percent-bar {
    display: inline-block;
-    height: 100%;
+    height: 20px;
    position: relative;
 }

--- a/src-grouped/myApp.jsx
+++ b/src-grouped/myApp.jsx
@@ -0,0 +1,99 @@
+import React from "react";
+import {AgGridReact} from "ag-grid-react";
+import ColDefFactory from "./ColDefFactory.jsx";
+import "./myApp.css";
+
+// take this line out if you do not want to use ag-Grid-Enterprise
+import "ag-grid-enterprise";
+
+
+export default class MyApp extends React.Component {
+
+    constructor() {
+        super();
+
+        this.state = {
+            showToolPanel: false,
+            columnDefs: new ColDefFactory().createColDefs(),
+            rowData: null,
+        };
+
+        this.gridOptions = {
+            groupRowInnerRenderer: function (params) {
+                var FLAG_CODES = {
+                    'Ireland': 'ie',
+                    'United States': 'us',
+                    'Russia': 'ru',
+                    'Australia': 'au',
+                    'Canada': 'ca',
+                    'Norway': 'no',
+                    'China': 'cn',
+                    'Zimbabwe': 'zw',
+                    'Netherlands': 'nl',
+                    'South Korea': 'kr',
+                    'Croatia': 'hr',
+                    'France': 'fr'
+                };
+
+                var flagCode = FLAG_CODES[params.node.key];
+
+                var html = '';
+                if (flagCode) {
+                    html += '<img class="flag" border="0" width="20" height="15" src="https://flags.fmcdn.net/data/flags/mini/' + flagCode + '.png">'
+                }
+
+                html += '<span class="groupTitle"> COUNTRY_NAME</span>'.replace('COUNTRY_NAME', params.node.key);
+                html += '<span class="medal gold"> Gold: GOLD_COUNT</span>'.replace('GOLD_COUNT', params.data.gold);
+                html += '<span class="medal silver"> Silver: SILVER_COUNT</span>'.replace('SILVER_COUNT', params.data.silver);
+                html += '<span class="medal bronze"> Bronze: BRONZE_COUNT</span>'.replace('BRONZE_COUNT', params.data.bronze);
+
+                return html;
+            }
+        };
+    }
+
+    onGridReady(params) {
+        this.api = params.api;
+        this.columnApi = params.columnApi;
+
+        var that = this;
+        var httpRequest = new XMLHttpRequest();
+        httpRequest.open('GET', '/olympicWinners.json');
+        httpRequest.send();
+        httpRequest.onreadystatechange = function() {
+            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
+                var httpResult = JSON.parse(httpRequest.responseText);
+                that.api.setRowData(httpResult);
+            }
+        };
+
+    }
+
+    render() {
+        var gridTemplate = (
+            <div style={{height: 400}} className="ag-fresh">
+                <AgGridReact
+                    // gridOptions is optional - it's possible to provide
+                    // all values as React props
+                    gridOptions={this.gridOptions}
+
+                    // listening for events
+                    onGridReady={this.onGridReady.bind(this)}
+
+                    // binding to array properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    groupUseEntireRow="true"
+                />
+            </div>
+        );
+
+        return <div style={{width: '800px'}}>
+            <div>
+                {gridTemplate}
+            </div>
+        </div>;
+    }
+
+}
--- a/src-large/index.js
+++ b/src-large/index.js
@@ -0,0 +1,18 @@
+'use strict';
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+import LargeGrid from './largeGrid.jsx';
+// is there a better way of doing this?
+import 'ag-grid-root/dist/styles/ag-grid.css';
+import 'ag-grid-root/dist/styles/theme-fresh.css';
+
+// waiting for dom to load before booting react. we could alternatively
+// put the index.js reference at the end fo the index.html, but i prefer this way.
+document.addEventListener('DOMContentLoaded', ()=> {
+    var container = document.getElementById('myAppContainer');
+    ReactDOM.render(
+        React.createElement(LargeGrid),
+        container
+    );
+});
--- a/src-large/largeGrid.jsx
+++ b/src-large/largeGrid.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import {reactCellRendererFactory} from 'ag-grid-react';
+import SimpleCellRenderer from './simpleCellRenderer.jsx';
+
+import {AgGridReact} from 'ag-grid-react';
+
+// put this line in to use ag-Grid enterprise
+// import 'ag-grid-enterprise';
+
+export default class MyApp extends React.Component {
+
+    constructor() {
+        super();
+
+        this.createColumnNames();
+
+        this.state = {
+            columnDefs: this.createColumnDefs(),
+            rowData: this.createRowData()
+        };
+    }
+
+    createColumnNames() {
+        // creates column names by iterating the alphabet twice, eg {'aa','ab','ac',.....'zz'}
+        var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
+        this.columnNames = [];
+        alphabet.forEach( letter1 => {
+            alphabet.forEach( letter2 => {
+                this.columnNames.push(letter1 + letter2);
+            });
+        });
+    }
+
+    createRowData() {
+        var rowData = [];
+
+        for (var i = 0; i<1000; i++) {
+            var item = {};
+            this.columnNames.forEach( colName => {
+                item[colName] = '('+colName.toUpperCase()+','+i+')'
+            });
+            rowData.push(item);
+        }
+
+        return rowData;
+    }
+
+    createColumnDefs() {
+        var columnDefs = [];
+
+        this.columnNames.forEach( colName => {
+            columnDefs.push({
+                headerName: colName.toUpperCase(),
+                field: colName,
+                cellRendererFramework: SimpleCellRenderer,
+                width: 100
+            });
+        });
+
+        return columnDefs;
+    }
+
+    render() {
+        return (
+            <div style={{height: '100%'}} className="ag-fresh">
+                    <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} />
+            </div>
+        );
+    }
+
+}
--- a/src-large/simpleCellRenderer.jsx
+++ b/src-large/simpleCellRenderer.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default class SimpleCellRenderer extends React.Component {
+    render() {
+        // the class below does nothing, it's just for testing, so we can inspect the dom of
+        // the result and looking for it, to validate that this cellRenderer is actually getting used.
+        return (
+            <span className="simple-cell-renderer">{this.props.value}</span>
+        );
+    }
+}
+
+SimpleCellRenderer.propTypes = {
+    params: React.PropTypes.object
+};
--- a/src-standard/ColDefFactory.jsx
+++ b/src-standard/ColDefFactory.jsx
@@ -0,0 +1,90 @@
+import SkillsCellRenderer from './SkillsCellRenderer.jsx';
+import NameCellEditor from './NameCellEditor.jsx';
+import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
+import RefData from './RefData';
+import SkillsFilter from './SkillsFilter.jsx';
+import ProficiencyFilter from './ProficiencyFilter.jsx';
+import MyReactHeaderGroupComponent from './MyReactHeaderGroupComponent.jsx';
+
+export default class ColDefFactory {
+
+    createColDefs() {
+
+        var columnDefs = [
+            {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
+                suppressMenu: true, pinned: true},
+            {
+                headerName: 'Employee',
+                headerGroupComponentFramework: MyReactHeaderGroupComponent,
+                children: [
+                    {
+                        headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
+                        width: 150, pinned: true, editable: true,
+                        // use a React cellEditor
+                        cellEditorFramework: NameCellEditor
+                    }, {
+                        headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
+                        // an example of using a non-React cell renderer
+                        cellRenderer: countryCellRenderer, pinned: true,
+                        filterParams: {
+                            cellRenderer: countryCellRenderer, cellHeight: 20
+                        }, columnGroupShow: 'open'
+                    }, {
+                        headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date',
+                        pinned: true, cellRenderer: function(params) {
+                            return  pad(params.value.getDate(), 2) + '/' +
+                                    pad(params.value.getMonth() + 1, 2)+ '/' +
+                                    params.value.getFullYear();
+                        }, columnGroupShow: 'open'
+                    }
+                ]
+            },
+            {
+                headerName: 'IT Skills',
+                children: [
+                    {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
+                        // supply a React component
+                        cellRendererFramework: SkillsCellRenderer,
+                        // supply a React component
+                        filterFramework: SkillsFilter
+                    },
+                    {headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true,
+                        // supply a React component
+                        cellRendererFramework: ProficiencyCellRenderer,
+                        // supply a React component
+                        filterFramework: ProficiencyFilter
+                    }
+                ]
+            },
+            {
+                headerName: 'Contact',
+                children: [
+                    {headerName: "Mobile", field: "mobile", width: 150, filter: 'text'},
+                    {headerName: "Land-line", field: "landline", width: 150, filter: 'text'},
+                    {headerName: "Address", field: "address", width: 500, filter: 'text'}
+                ]
+            }
+        ];
+        return columnDefs;
+    }
+}
+
+// this is a simple cell renderer, putting together static html, no
+// need to use React for it.
+function countryCellRenderer(params) {
+    if (params.value) {
+        var flag = "<img border='0' width='15' height='10' " +
+            "style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/"
+            + RefData.COUNTRY_CODES[params.value] + ".png'>";
+        return flag + " " + params.value;
+    } else {
+        return null;
+    }
+}
+
+//Utility function used to pad the date formatting.
+function pad(num, totalStringSize) {
+    let asString = num + "";
+    while (asString.length < totalStringSize) asString = "0" + asString;
+    return asString;
+}
--- a/src-standard/MyReactDateComponent.jsx
+++ b/src-standard/MyReactDateComponent.jsx
@@ -0,0 +1,167 @@
+import React from 'react';
+
+// Date Component to be used in the date filter.
+// This is a very simple example of how a React component can be plugged as a DateComponentFramework
+// as you can see, the only requirement is that the React component implements the required methods
+// getDate and setDate and that it calls back into props.onDateChanged every time that the date changes.
+export default class MyReactDateComponent extends React.Component {
+
+    constructor(props) {
+        super(props);
+        //The state of this component is represented of:
+        //  The current date it holds, null by default, null if the date typed by the user is not valid or fields are blank
+        //  The current values that the user types in the input boxes, by default ''
+
+        //The textBoxes state is necessary since it can be set from ag-Grid. This can be seen in this example through
+        // the usage of the button DOB equals to 01/01/2000 in the example page.
+        this.state = {
+            date: null,
+            textBoxes: {
+                dd: '',
+                mm: '',
+                yyyy: ''
+            }
+        }
+    }
+
+    render() {
+        //Inlining styles to make simpler the component
+        let filterStyle = {
+            margin:'2px'
+        };
+        let ddStyle = {
+            width: '30px'
+        };
+        let mmStyle = {
+            width: '30px'
+        };
+        let yyyyStyle = {
+            width: '60px'
+        };
+        let resetStyle = {
+            padding: '2px',
+            backgroundColor: 'red',
+            borderRadius: '3px',
+            fontSize: '10px',
+            marginRight: '5px',
+            color: 'white'
+        };
+
+        return (
+            <div style={filterStyle}>
+                <span style={resetStyle} onClick={this.resetDate.bind(this)}>x</span>
+                <input onInput = {this.onDateChanged.bind(this)} ref="dd" placeholder="dd" style={ddStyle} value={this.state.textBoxes.dd} maxLength="2"/>/
+                <input onInput = {this.onDateChanged.bind(this)} ref="mm" placeholder="mm" style={mmStyle} value={this.state.textBoxes.mm} maxLength="2"/>/
+                <input onInput = {this.onDateChanged.bind(this)} ref="yyyy" placeholder="yyyy" style={yyyyStyle} value={this.state.textBoxes.yyyy} maxLength="4"/>
+            </div>
+        );
+    }
+
+    //*********************************************************************************
+    //          METHODS REQUIRED BY AG-GRID
+    //*********************************************************************************
+
+    getDate (){
+        //ag-grid will call us here when in need to check what the current date value is hold by this
+        //component.
+        return this.state.date;
+    }
+
+    setDate (date){
+        //ag-grid will call us here when it needs this component to update the date that it holds.
+        this.setState({
+            date:date,
+            textBoxes:{
+                dd: date.getDate(),
+                mm: date.getMonth() + 1,
+                yyyy: date.getFullYear()
+            }
+        })
+    }
+
+    //*********************************************************************************
+    //          LINKS THE INTERNAL STATE AND AG-GRID
+    //*********************************************************************************
+
+    updateAndNotifyAgGrid (date, textBoxes){
+        this.setState ({
+                date: date,
+                textBoxes:textBoxes
+            },
+            //Callback after the state is set. This is where we tell ag-grid that the date has changed so
+            //it will proceed with the filtering and we can then expect ag-Grid to call us back to getDate
+            this.props.onDateChanged
+        );
+    }
+
+
+    //*********************************************************************************
+    //          LINKING THE UI, THE STATE AND AG-GRID
+    //*********************************************************************************
+
+    resetDate (){
+        let date = null;
+        let textBoxes = {
+            dd : '',
+            mm : '',
+            yyyy : '',
+        };
+
+        this.updateAndNotifyAgGrid(date, textBoxes)
+    }
+
+    onDateChanged () {
+        let date = this.parseDate(this.refs.dd.value, this.refs.mm.value, this.refs.yyyy.value);
+        let textBoxes = {
+            dd : this.refs.dd.value,
+            mm : this.refs.mm.value,
+            yyyy : this.refs.yyyy.value,
+        };
+
+        this.updateAndNotifyAgGrid(date, textBoxes)
+    }
+
+    //*********************************************************************************
+    //          INTERNAL LOGIC
+    //*********************************************************************************
+
+    parseDate (dd, mm, yyyy){
+        //If any of the three input date fields are empty, stop and return null
+        if (dd.trim() === '' || mm.trim() === '' || yyyy.trim() === '') {
+            return null;
+        }
+
+        let day = Number(dd);
+        let month = Number(mm);
+        let year = Number(yyyy);
+
+        let date = new Date(year, month - 1, day);
+
+        //If the date is not valid
+        if (isNaN(date.getTime())){
+            return null;
+        }
+
+        //Given that new Date takes any garbage in, it is possible for the user to specify a new Date
+        //like this (-1, 35, 1) and it will return a valid javascript date. In this example, it will
+        //return Sat Dec 01    1 00:00:00 GMT+0000 (GMT) - Go figure...
+        //To ensure that we are not letting non sensical dates to go through we check that the resultant
+        //javascript date parts (month, year and day) match the given date fields provided as parameters.
+        //If the javascript date parts don't match the provided fields, we assume that the input is non
+        //sensical... ie: Day=-1 or month=14, if this is the case, we return null
+        //This also protects us from non sensical dates like dd=31, mm=2 of any year
+        if (date.getDate() != day || date.getMonth() + 1 != month || date.getFullYear() != year){
+            return null;
+        }
+
+        return date;
+    }
+}
+
+// the grid will always pass in one props called 'params',
+// which is the grid passing you the params for the cellRenderer.
+// this piece is optional. the grid will always pass the 'params'
+// props, so little need for adding this validation meta-data.
+MyReactDateComponent.propTypes = {
+    params: React.PropTypes.object
+};
--- a/src-standard/MyReactHeaderComponent.jsx
+++ b/src-standard/MyReactHeaderComponent.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+// Header component to be used as default for all the columns.
+export default class MyReactHeaderComponent extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.props.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
+
+        //The state of this component contains the current sort state of this column
+        //The possible values are: 'asc', 'desc' and ''
+        this.state = {
+           sorted: ''
+        }
+    }
+
+
+    render() {
+        let sortElements = [];
+        if (this.props.enableSorting){
+            let downArrowClass = "customSortDownLabel " + (this.state.sorted === 'desc' ? " active" : "");
+            let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : "");
+            let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : "");
+
+            sortElements.push(<div className={downArrowClass} onClick={this.onSortRequested.bind(this, 'desc')}><i className="fa fa-long-arrow-down"/></div>)
+            sortElements.push(<div className={upArrowClass} onClick={this.onSortRequested.bind(this, 'asc')}><i className="fa fa-long-arrow-up"/></div>)
+            sortElements.push(<div className={removeArrowClass} onClick={this.onSortRequested.bind(this, '')}><i className="fa fa-times"/></div>)
+        }
+
+
+        let menuButton = null;
+        if (this.props.enableMenu){
+            menuButton = <div ref="menuButton" className="customHeaderMenuButton" onClick={this.onMenuClick.bind(this)}><i className={"fa " + this.props.menuIcon}/></div>
+        }
+
+        return <div>
+            {menuButton}
+            <div className="customHeaderLabel">{this.props.displayName}</div>
+            {sortElements}
+        </div>
+    }
+
+    onSortRequested (order, event) {
+        this.props.setSort (order, event.shiftKey);
+    };
+
+    onSortChanged (){
+        if (this.props.column.isSortAscending()){
+            this.setState({
+                sorted: 'asc'
+            })
+        } else if (this.props.column.isSortDescending()){
+            this.setState({
+                sorted: 'desc'
+            })
+        } else {
+            this.setState({
+                sorted: ''
+            })
+        }
+    };
+
+    onMenuClick (){
+        this.props.showColumnMenu (this.refs.menuButton);
+    };
+
+}
+
+// the grid will always pass in one props called 'params',
+// which is the grid passing you the params for the cellRenderer.
+// this piece is optional. the grid will always pass the 'params'
+// props, so little need for adding this validation meta-data.
+MyReactHeaderComponent.propTypes = {
+    params: React.PropTypes.object
+};
--- a/src-standard/MyReactHeaderGroupComponent.jsx
+++ b/src-standard/MyReactHeaderGroupComponent.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+// Header component to be used as default for all the columns.
+export default class MyReactHeaderGroupComponent extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.props.columnGroup.getOriginalColumnGroup().addEventListener('expandedChanged', this.onExpandChanged.bind(this));
+        this.state = {
+            expanded:null
+        }
+        this.onExpandChanged();
+    }
+
+    render() {
+        let arrowClassName = "customExpandButton " + (this.state.expanded ?  " expanded": " collapsed");
+
+        return <div>
+            <div className="customHeaderLabel"> {this.props.displayName}</div>
+            <div onClick={this.expandOrCollapse.bind(this)} className={arrowClassName}><i className="fa fa-arrow-right" /></div>
+        </div>
+    }
+
+    expandOrCollapse (){
+        this.props.setExpanded(!this.state.expanded);
+    };
+
+    onExpandChanged (){
+        this.setState({
+            expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded()
+        })
+    }
+}
+
+// the grid will always pass in one props called 'params',
+// which is the grid passing you the params for the cellRenderer.
+// this piece is optional. the grid will always pass the 'params'
+// props, so little need for adding this validation meta-data.
+MyReactHeaderGroupComponent.propTypes = {
+    params: React.PropTypes.object
+};
--- a/src-standard/NameCellEditor.jsx
+++ b/src-standard/NameCellEditor.jsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import RefData from './RefData';
+
+var KEY_BACKSPACE = 8;
+var KEY_DELETE = 46;
+var KEY_F2 = 113;
+
+// cell renderer for the proficiency column. this is a very basic cell editor,
+export default class NameCellEditor extends React.Component {
+
+    constructor(props) {
+        super(props);
+        // the entire ag-Grid properties are passed as one single object inside the params
+        this.state = this.createInitialState(props);
+    }
+
+    // work out how to present the data based on what the user hit. you don't need to do any of
+    // this for your ag-Grid cellEditor to work, however it makes sense to do this so the user
+    // experience is similar to Excel
+    createInitialState(props) {
+
+        var startValue;
+        var putCursorAtEndOnFocus = false;
+        var highlightAllOnFocus = false;
+
+        if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) {
+            // if backspace or delete pressed, we clear the cell
+            startValue = '';
+        } else if (props.charPress) {
+            // if a letter was pressed, we start with the letter
+            startValue = props.charPress;
+        } else {
+            // otherwise we start with the current value
+            startValue = props.value;
+            if (props.keyPress === KEY_F2) {
+                this.putCursorAtEndOnFocus = true;
+            } else {
+                this.highlightAllOnFocus = true;
+            }
+        }
+
+        return {
+            value: startValue,
+            putCursorAtEndOnFocus: putCursorAtEndOnFocus,
+            highlightAllOnFocus: highlightAllOnFocus
+        }
+    }
+
+    render() {
+        return (
+            <input ref="textField" value={this.state.value} onChange={this.onChangeListener.bind(this)}/>
+        );
+    }
+
+    onChangeListener(event) {
+        // if doing React, you will probably be using a library for managing immutable
+        // objects better. to keep this example simple, we don't use one.
+        var newState = {
+            value: event.target.value,
+            putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus,
+            highlightAllOnFocus: this.state.highlightAllOnFocus
+        };
+        this.setState(newState);
+    }
+
+    // called by ag-Grid, to get the final value
+    getValue() {
+        return this.state.value;
+    }
+
+    // cannot use componentDidMount because although the component might be ready from React's point of
+    // view, it may not yet be in the browser (put in by ag-Grid) so focus will not work
+    afterGuiAttached() {
+        // get ref from React component
+        var eInput = this.refs.textField;
+        eInput.focus();
+        if (this.highlightAllOnFocus) {
+            eInput.select();
+        } else {
+            // when we started editing, we want the carot at the end, not the start.
+            // this comes into play in two scenarios: a) when user hits F2 and b)
+            // when user hits a printable character, then on IE (and only IE) the carot
+            // was placed after the first character, thus 'apply' would end up as 'pplea'
+            var length = eInput.value ? eInput.value.length : 0;
+            if (length > 0) {
+                eInput.setSelectionRange(length, length);
+            }
+        }
+    }
+
+    // if we want the editor to appear in a popup, then return true.
+    isPopup() {
+        return false;
+    }
+
+    // return true here if you don't want to allow editing on the cell.
+    isCancelBeforeStart() {
+        return false;
+    }
+
+    // just to demonstrate, if you type in 'cancel' then the edit will not take effect
+    isCancelAfterEnd() {
+        if (this.state.value && this.state.value.toUpperCase()==='CANCEL') {
+            return true;
+        } else {
+            return false;
+        }
+    }
+}
+
+// the grid will always pass in one props called 'params',
+// which is the grid passing you the params for the cellRenderer.
+// this piece is optional. the grid will always pass the 'params'
+// props, so little need for adding this validation meta-data.
+NameCellEditor.propTypes = {
+    params: React.PropTypes.object
+};
--- a/src-standard/ProficiencyCellRenderer.jsx
+++ b/src-standard/ProficiencyCellRenderer.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import RefData from './RefData';
+
+// cell renderer for the proficiency column. this is a very basic cell renderer,
+// it is arguable that we should not of used React and just returned a string of
+// html as a normal ag-Grid cellRenderer.
+export default class ProficiencyCellRenderer extends React.Component {
+
+    render() {
+        var backgroundColor;
+        if (this.props.value < 20) {
+            backgroundColor = 'red';
+        } else if (this.props.value < 60) {
+            backgroundColor = '#ff9900';
+        } else {
+            backgroundColor = '#00A000';
+        }
+
+        return (
+            <div className="div-percent-bar" style={{ width: this.props.value + '%', backgroundColor: backgroundColor }}>
+                <div className="div-percent-value">{this.props.value}%</div>
+            </div>
+        );
+    }
+}
--- a/src-standard/ProficiencyFilter.jsx
+++ b/src-standard/ProficiencyFilter.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import RefData from './RefData';

 var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];

@@ -7,22 +6,16 @@ var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
 // a React filter component with ag-Grid.
 export default class ProficiencyFilter extends React.Component {

-    constructor() {
+    constructor(props) {
        super();
        this.state = {
            selected: PROFICIENCY_NAMES[0]
        };
    }

-    // called by agGrid
-    init(params) {
-        this.filterChangedCallback = params.filterChangedCallback;
-        this.valueGetter = params.valueGetter;
-    }
-
    // called by agGrid
    doesFilterPass(params) {
-        var value = this.valueGetter(params);
+        var value = this.props.valueGetter(params);
        var valueAsNumber = parseFloat(value);

        switch (this.state.selected) {
@@ -40,11 +33,9 @@ export default class ProficiencyFilter extends React.Component {

    onButtonPressed(name) {
        console.log(name);
-        this.setState({
-            selected: name
-        }, ()=> {
-            this.filterChangedCallback();
-        });
+        var newState = {selected: name};
+        // set the state, and once it is done, then call filterChangedCallback
+        this.setState(newState, this.props.filterChangedCallback);
        console.log(name);
    }

--- a/src-standard/RefData.js
+++ b/src-standard/RefData.js
@@ -56,6 +56,21 @@ RefData.COUNTRIES = [
        {country: "Uruguay", continent: "South America", language: "Spanish"}
    ];

+RefData.DOB = [
+    new Date(2000, 0, 1 ),
+    new Date(2001, 1, 2 ),
+    new Date(2002, 2, 3 ),
+    new Date(2003, 3, 4 ),
+    new Date(2004, 4, 5 ),
+    new Date(2005, 5, 6 ),
+    new Date(2006, 6, 7 ),
+    new Date(2007, 7, 8 ),
+    new Date(2008, 8, 9 ),
+    new Date(2009, 9, 10 ),
+    new Date(2010, 10, 11 ),
+    new Date(2011, 11, 12 )
+];
+
 RefData.ADDRESSES = [
        '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763',
        '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215',
--- a/src-standard/RowDataFactory.js
+++ b/src-standard/RowDataFactory.js
@@ -5,7 +5,7 @@ export default class RowDataFactory {
    createRowData() {
        var rowData = [];

-        for (var i = 0; i < 1000; i++) {
+        for (var i = 0; i < 200; i++) {
            var countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length];
            rowData.push({
                name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length],
@@ -16,6 +16,7 @@ export default class RowDataFactory {
                    windows: Math.random() < 0.4,
                    css: Math.random() < 0.4
                },
+                dob: RefData.DOB[i % RefData.DOB.length],
                address: RefData.ADDRESSES[i % RefData.ADDRESSES.length],
                years: Math.round(Math.random() * 100),
                proficiency: Math.round(Math.random() * 100),
--- a/src-standard/SkillsCellRenderer.jsx
+++ b/src-standard/SkillsCellRenderer.jsx
@@ -5,7 +5,7 @@ export default class SkillsCellRenderer extends React.Component {

    render() {
        var skills = [];
-        var rowData = this.props.params.data;
+        var rowData = this.props.data;
        RefData.IT_SKILLS.forEach( (skill) => {
            if (rowData && rowData.skills && rowData.skills[skill]) {
                skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill} />);
--- a/src-standard/SkillsFilter.jsx
+++ b/src-standard/SkillsFilter.jsx
@@ -8,11 +8,9 @@ import RefData from './RefData';
 // React design skills.
 export default class SkillsFilter extends React.Component {

-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
        this.state = {
-            skills: RefData.IT_SKILLS,
-            skillNames: RefData.IT_SKILLS_NAMES,
            android: false,
            css: false,
            html5: false,
@@ -21,9 +19,24 @@ export default class SkillsFilter extends React.Component {
        };
    }

-    // called by agGrid
-    init(params) {
-        this.filterChangedCallback = params.filterChangedCallback;
+    getModel() {
+        return {
+            android: this.state.android,
+            css: this.state.css,
+            html5: this.state.html5,
+            mac: this.state.mac,
+            windows: this.state.windows
+        }
+    }
+
+    setModel(model) {
+        this.setState({
+            android: model.android,
+            css: model.css,
+            html5: model.html5,
+            mac: model.mac,
+            windows: model.windows
+        });
    }

    // called by agGrid
@@ -32,7 +45,7 @@ export default class SkillsFilter extends React.Component {
        var rowSkills = params.data.skills;
        var passed = true;

-        this.state.skills.forEach( (skill) => {
+        RefData.IT_SKILLS.forEach( (skill) => {
            if (this.state[skill]) {
                if (!rowSkills[skill]) {
                    passed = false;
@@ -54,15 +67,20 @@ export default class SkillsFilter extends React.Component {
        var newValue = event.target.checked;
        var newModel = {};
        newModel[skill] = newValue;
-        this.setState(newModel, ()=> {this.filterChangedCallback();} );
+        // set the state, and once it is done, then call filterChangedCallback
+        this.setState(newModel, this.props.filterChangedCallback );
+    }
+
+    helloFromSkillsFilter() {
+        alert("Hello From The Skills Filter!");
    }

    render() {

        var skillsTemplates = [];
-        this.state.skills.forEach( (skill, index) => {
+        RefData.IT_SKILLS.forEach( (skill, index) => {

-            var skillName = this.state.skillNames[index];
+            var skillName = RefData.IT_SKILLS_NAMES[index];
            var template = (
                <label key={skill} style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
                    <span>
@@ -91,7 +109,6 @@ export default class SkillsFilter extends React.Component {
    // these are other method that agGrid calls that we
    // could of implemented, but they are optional and
    // we have no use for them in this particular filter.
-    //getApi() {}
    //afterGuiAttached(params) {}
    //onNewRowsLoaded() {}
    //onAnyFilterChanged() {}
--- a/src-standard/index.js
+++ b/src-standard/index.js
@@ -0,0 +1,18 @@
+'use strict';
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+import MyApp from './myApp.jsx';
+// is there a better way of doing this?
+import 'ag-grid-root/dist/styles/ag-grid.css';
+import 'ag-grid-root/dist/styles/theme-fresh.css';
+
+// waiting for dom to load before booting react. we could alternatively
+// put the index.js reference at the end fo the index.html, but i prefer this way.
+document.addEventListener('DOMContentLoaded', ()=> {
+    var container = document.getElementById('myAppContainer');
+    ReactDOM.render(
+        React.createElement(MyApp),
+        container
+    );
+});
--- a/src-standard/myApp.css
+++ b/src-standard/myApp.css
@@ -0,0 +1,28 @@
+
+.ag-cell {
+    padding-top: 2px !important;
+    padding-bottom: 2px !important;
+}
+
+label {
+    font-weight: normal !important;
+}
+
+.div-percent-bar {
+    display: inline-block;
+    height: 20px;
+    position: relative;
+}
+
+.div-percent-value {
+    position: absolute;
+    padding-left: 4px;
+    font-weight: bold;
+    font-size: 13px;
+}
+
+.div-outer-div {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+}
--- a/src-standard/myApp.jsx
+++ b/src-standard/myApp.jsx
@@ -1,13 +1,13 @@
-import ReactDOM from 'react-dom';
-import React from 'react';
-import {AgGridReact} from 'ag-grid-react';
-import RefData from './RefData';
-import RowDataFactory from './RowDataFactory';
-import ColDefFactory from './ColDefFactory.jsx';
-import './myApp.css';
+import React from "react";
+import {AgGridReact} from "ag-grid-react";
+import RowDataFactory from "./RowDataFactory";
+import ColDefFactory from "./ColDefFactory.jsx";
+import MyReactDateComponent from "./MyReactDateComponent.jsx";
+import MyReactHeaderComponent from "./MyReactHeaderComponent.jsx";
+import "./myApp.css";
+import "ag-grid-enterprise";

 // take this line out if you do not want to use ag-Grid-Enterprise
-import 'ag-grid-enterprise';

 export default class MyApp extends React.Component {

@@ -39,10 +39,18 @@ export default class MyApp extends React.Component {
        // you do, the providing the gridOptions as a standalone object is just
        // what you want!
        this.gridOptions = {
+            //We register the react date component that ag-grid will use to render
+            dateComponentFramework:MyReactDateComponent,
            // this is how you listen for events using gridOptions
-            onModelUpdated: function() {
+            onModelUpdated: function () {
                console.log('event onModelUpdated received');
            },
+            defaultColDef : {
+                headerComponentFramework : MyReactHeaderComponent,
+                headerComponentParams : {
+                    menuIcon: 'fa-bars'
+                }
+            },
            // this is a simple property
            rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios
        };
@@ -94,6 +102,20 @@ export default class MyApp extends React.Component {
        });
    }

+    invokeSkillsFilterMethod() {
+        var skillsFilter = this.api.getFilterInstance('skills');
+        var componentInstance = skillsFilter.getFrameworkComponentInstance();
+        componentInstance.helloFromSkillsFilter();
+    }
+
+    dobFilter () {
+        let dateFilterComponent = this.gridOptions.api.getFilterInstance('dob');
+        dateFilterComponent.setFilterType('equals');
+        dateFilterComponent.setDateFrom('2000-01-01');
+        this.gridOptions.api.onFilterChanged();
+
+    }
+
    render() {
        var gridTemplate;
        var bottomHeaderTemplate;
@@ -102,9 +124,14 @@ export default class MyApp extends React.Component {
        topHeaderTemplate = (
            <div>
                <div style={{float: 'right'}}>
-                    <input type="text" onChange={this.onQuickFilterText.bind(this)} placeholder="Type text to filter..."/>
-                    <button id="btDestroyGrid" disabled={!this.state.showGrid} onClick={this.onShowGrid.bind(this, false)}>Destroy Grid</button>
-                    <button id="btCreateGrid" disabled={this.state.showGrid} onClick={this.onShowGrid.bind(this, true)}>Create Grid</button>
+                    <input type="text" onChange={this.onQuickFilterText.bind(this)}
+                           placeholder="Type text to filter..."/>
+                    <button id="btDestroyGrid" disabled={!this.state.showGrid}
+                            onClick={this.onShowGrid.bind(this, false)}>Destroy Grid
+                    </button>
+                    <button id="btCreateGrid" disabled={this.state.showGrid} onClick={this.onShowGrid.bind(this, true)}>
+                        Create Grid
+                    </button>
                </div>
                <div style={{padding: '4px'}}>
                    <b>Employees Skills and Contact Details</b> <span id="rowCount"/>
@@ -130,11 +157,18 @@ export default class MyApp extends React.Component {
                    </div>
                    <div style={{clear: 'both'}}></div>
                    <div style={{padding: 4}} className={'toolbar'}>
+                        <span>
                        <label>
                            <input type="checkbox" onChange={this.onToggleToolPanel.bind(this)}/>
                            Show Tool Panel
                        </label>
                        <button onClick={this.onRefreshData.bind(this)}>Refresh Data</button>
+                            </span>
+                        <span style={{marginLeft: 20}}>
+                            Filter API:
+                            <button onClick={this.invokeSkillsFilterMethod.bind(this, false)}>Invoke Skills Filter Method</button>
+                            <button onClick={this.dobFilter.bind(this)}>DOB equals to 01/01/2000</button>
+                        </span>
                    </div>
                    <div style={{clear: 'both'}}></div>
                </div>
@@ -162,20 +196,20 @@ export default class MyApp extends React.Component {
                        columnDefs={this.state.columnDefs}
                        rowData={this.state.rowData}

-                        // no binding, just providing harde coded strings for the properties
+                        // no binding, just providing hard coded strings for the properties
+                        suppressRowClickSelection="true"
                        rowSelection="multiple"
                        enableColResize="true"
                        enableSorting="true"
                        enableFilter="true"
                        groupHeaders="true"
                        rowHeight="22"
-                        debug="true"
                    />
                </div>
            );
        }

-        return <div style={{width: '800px'}}>
+        return <div style={{width: '1024px'}}>
            <div style={{padding: '4px'}}>
                {topHeaderTemplate}
                {bottomHeaderTemplate}
--- a/src/ColDefFactory.jsx
+++ b/src/ColDefFactory.jsx
@@ -1,67 +0,0 @@
-import SkillsCellRenderer from './SkillsCellRenderer.jsx';
-import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
-import RefData from './RefData';
-import {reactCellRendererFactory} from 'ag-grid-react';
-import {reactFilterFactory} from 'ag-grid-react';
-import SkillsFilter from './SkillsFilter.jsx';
-import ProficiencyFilter from './ProficiencyFilter.jsx';
-
-export default class ColDefFactory {
-
-    createColDefs() {
-
-        var columnDefs = [
-            {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
-                suppressMenu: true, pinned: true},
-            {
-                headerName: 'Employee',
-                children: [
-                    {headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
-                        width: 150, pinned: true},
-                    {headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
-                        // not bothering with React for country, as it's a simple HTML string
-                        cellRenderer: countryCellRenderer, pinned: true,
-                        filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}},
-                ]
-            },
-            {
-                headerName: 'IT Skills',
-                children: [
-                    {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
-                        // using ag-Grid's React cellRenderer factory
-                        cellRenderer: reactCellRendererFactory(SkillsCellRenderer),
-                        // using ag-Grid's React filter factory
-                        filter: reactFilterFactory(SkillsFilter)
-                    },
-                    {headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true,
-                        // using ag-Grid's React cellRenderer factory
-                        cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer),
-                        // using ag-Grid's React filter factory
-                        filter: reactFilterFactory(ProficiencyFilter)}
-                ]
-            },
-            {
-                headerName: 'Contact',
-                children: [
-                    {headerName: "Mobile", field: "mobile", width: 150, filter: 'text'},
-                    {headerName: "Land-line", field: "landline", width: 150, filter: 'text'},
-                    {headerName: "Address", field: "address", width: 500, filter: 'text'}
-                ]
-            }
-        ];
-        return columnDefs;
-    }
-}
-
-// this is a simple cell renderer, putting together static html, no
-// need to use React for it.
-function countryCellRenderer(params) {
-    if (params.value) {
-        var flag = "<img border='0' width='15' height='10' " +
-            "style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/"
-            + RefData.COUNTRY_CODES[params.value] + ".png'>";
-        return flag + " " + params.value;
-    } else {
-        return null;
-    }
-}
--- a/src/ProficiencyCellRenderer.jsx
+++ b/src/ProficiencyCellRenderer.jsx
@@ -1,34 +0,0 @@
-import React from 'react';
-import RefData from './RefData';
-
-// cell renderer for the proficiency column. this is a very basic cell renderer,
-// it is arguable that we should not of used React and just returned a string of
-// html as a normal ag-Grid cellRenderer.
-export default class ProficiencyCellRenderer extends React.Component {
-
-    render() {
-        var params = this.props.params;
-        var backgroundColor;
-        if (params.value < 20) {
-            backgroundColor = 'red';
-        } else if (params.value < 60) {
-            backgroundColor = '#ff9900';
-        } else {
-            backgroundColor = '#00A000';
-        }
-
-        return (
-            <div className="div-percent-bar" style={{ width: params.value + '%', backgroundColor: backgroundColor }}>
-                <div className="div-percent-value">{params.value}%</div>
-            </div>
-        );
-    }
-}
-
-// the grid will always pass in one props called 'params',
-// which is the grid passing you the params for the cellRenderer.
-// this piece is optional. the grid will always pass the 'params'
-// props, so little need for adding this validation meta-data.
-ProficiencyCellRenderer.propTypes = {
-    params: React.PropTypes.object
-};
--- a/webpack.config.grouped.js
+++ b/webpack.config.grouped.js
@@ -0,0 +1,27 @@
+module.exports = {
+    entry: "./src-grouped/index.js",
+    output: {
+        path: __dirname,
+        filename: "dist/bundle.js"
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.css$/,
+                loader: "style!css"
+            },
+            {
+                test: /\.js$|\.jsx$/,
+                loader: 'babel-loader',
+                query: {
+                    presets: ['react', 'es2015']
+                }
+            }
+        ]
+    },
+    resolve: {
+        alias: {
+            "ag-grid-root" : __dirname + "/node_modules/ag-grid"
+        }
+    }
+};
--- a/webpack.config.large.js
+++ b/webpack.config.large.js
@@ -1,5 +1,5 @@
 module.exports = {
-    entry: "./src/index.js",
+    entry: "./src-large/index.js",
    output: {
        path: __dirname,
        filename: "dist/bundle.js"
--- a/webpack.config.standard.js
+++ b/webpack.config.standard.js
@@ -0,0 +1,27 @@
+module.exports = {
+    entry: "./src-standard/index.js",
+    output: {
+        path: __dirname,
+        filename: "dist/bundle.js"
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.css$/,
+                loader: "style!css"
+            },
+            {
+                test: /\.js$|\.jsx$/,
+                loader: 'babel-loader',
+                query: {
+                    presets: ['react', 'es2015']
+                }
+            }
+        ]
+    },
+    resolve: {
+        alias: {
+            "ag-grid-root" : __dirname + "/node_modules/ag-grid"
+        }
+    }
+};
Author	SHA1	Message	Date
Alberto	cf1be920ee	Release 8.2.0	2017-03-08 14:43:47 +01:00
Sean Landsman	f8ad31c2e0	more docs work	2017-02-24 15:09:48 +00:00
Alberto	e026fb65e3	Merge branch '8.1.0'	2017-02-20 13:11:50 +00:00
Alberto	05a7371467	8.1.0	2017-02-20 12:49:05 +00:00
Alberto	4ea0b7f8b2	Merge branch '8.0.0'	2017-02-09 15:48:33 +00:00
Alberto	5904f47d55	8.0.0	2017-02-09 14:14:07 +00:00
Alberto	25b416b71d	Getting ready for releasing 8.0.0	2017-02-09 13:59:26 +00:00
Alberto	abb7828921	Getting ready for releasing 8.0.0	2017-02-09 13:58:19 +00:00
Alberto	ad5fd2d1ce	ag-49 Ng2 Header component	2017-02-07 10:00:52 +00:00
Alberto	6d686f1c02	ag-49 Custom Group Header example completed	2017-02-03 11:16:17 +00:00
Alberto	6376a24e3a	ag-49 Custom Header example completed	2017-02-03 10:14:20 +00:00
Sean Landsman	9c8cf08d2a	AG-195 Create react example using grouped data	2017-01-26 11:40:46 +00:00
Alberto	a8c70c0ae8	Adding the cellRenderer so the example and updating the docs to reflect the example changes	2017-01-23 14:58:26 +00:00
Alberto	3390411e8a	React date component, polishing the UI and adding documentation	2017-01-23 12:30:15 +00:00
Alberto	a280e97763	Creating React component to manage the dates in the DateFilter	2017-01-20 15:58:01 +00:00
Alberto	5451b02acd	Creating the scaffolding for the ag-grid-react DateComponent	2017-01-20 15:29:42 +00:00
Alberto	3613a26f48	Creating the scaffolding for the ag-grid-react DateComponent	2017-01-20 14:47:11 +00:00
Sean Landsman	4acdee4b72	AG-24 Add getFilterInstance to React Examples Project	2017-01-19 10:58:32 +00:00
Alberto	72dae24ebe	7.2.0	2017-01-17 17:05:38 +00:00
ceolter	0aa2f7a2be	Merge remote-tracking branch 'origin/master'	2017-01-03 14:13:12 +00:00
ceolter	6a94aee204	fixed example, the percent bar was not correct height	2017-01-03 14:13:03 +00:00
Sean Landsman	e0dfa732c7	7.1.1	2016-12-22 15:16:58 +00:00
Sean Landsman	d26876876f	7.0.0	2016-11-30 16:41:47 +00:00
Sean Landsman	3148c047b6	6.4.0	2016-11-11 13:42:22 +00:00
seanlandsman	33b006b783	6.3.0	2016-11-04 15:45:15 +00:00
seanlandsman	3b5ee65790	Release of 6.2.0	2016-10-11 16:13:26 +01:00
Sean Landsman	4829b2f6cd	Release of 6.1.0	2016-10-03 13:02:15 +01:00
Sean Landsman	67af64ea9d	Release of 6.0.1	2016-09-15 15:05:56 +01:00
ceolter	99dfa1e4f9	new component model	2016-09-14 15:58:15 +01:00
ceolter	1e9ef53316	new component model	2016-09-14 15:02:35 +01:00
ceolter	b5949d8d5d	new component model	2016-09-14 12:15:30 +01:00
ceolter	b4b8c85172	new component model	2016-09-12 22:20:20 +01:00
ceolter	c703eaf89c	new component model	2016-09-12 13:45:37 +01:00
ceolter	8804a01de3	release 5.4.0	2016-09-09 14:21:19 +01:00
ceolter	0dc55bd393	release 5.3.2	2016-09-02 16:45:32 +01:00
ceolter	eee08a9284	release 5.3.2	2016-09-02 16:43:50 +01:00
ceolter	68ba430896	release 5.3.2	2016-09-02 16:43:20 +01:00