AG-195 Create react example using grouped data

package.json

@@ -5,6 +5,7 @@
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
     "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"
   },
   "repository": {

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}
+        ];
+    }
+}
+

src-grouped/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
+    );
+});

src-grouped/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%;
+}

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>;
+    }
+
+}

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"
+        }
+    }
+};