release 5.3.0

fix: filename references

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "4.0.0",
+  "version": "5.3.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -34,8 +34,8 @@
   "dependencies": {
     "react": "0.14.6",
     "react-dom": "0.14.6",
-    "ag-grid": "4.0.x",
-    "ag-grid-enterprise": "4.0.x",
-    "ag-grid-react": "4.0.x"
+    "ag-grid": "~5.3.0",
+    "ag-grid-enterprise": "~5.3.0",
+    "ag-grid-react": "~5.3.0"
   }
 }

src/ColDefFactory.jsx

@@ -16,9 +16,9 @@ export default class ColDefFactory {
             {
                 headerName: 'Employee',
                 children: [
-                    {headerName: "Name", field: "name",
+                    {headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
                         width: 150, pinned: true},
-                    {headerName: "Country", field: "country", width: 150,
+                    {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}},
@@ -27,13 +27,13 @@ export default class ColDefFactory {
             {
                 headerName: 'IT Skills',
                 children: [
-                    {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills',
+                    {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,
+                    {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
@@ -56,8 +56,12 @@ export default class ColDefFactory {
 // this is a simple cell renderer, putting together static html, no
 // need to use React for it.
 function countryCellRenderer(params) {
-    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;
+    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;
+    }
 }

src/SkillsCellRenderer.jsx

@@ -7,7 +7,7 @@ export default class SkillsCellRenderer extends React.Component {
         var skills = [];
         var rowData = this.props.params.data;
         RefData.IT_SKILLS.forEach( (skill) => {
-            if (rowData.skills[skill]) {
+            if (rowData && rowData.skills && rowData.skills[skill]) {
                 skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill} />);
             }
         });

src/index.js

@@ -2,7 +2,7 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import MyApp from './MyApp.jsx';
+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';

src/myApp.jsx

@@ -4,7 +4,7 @@ import {AgGridReact} from 'ag-grid-react';
 import RefData from './RefData';
 import RowDataFactory from './RowDataFactory';
 import ColDefFactory from './ColDefFactory.jsx';
-import './MyApp.css';
+import './myApp.css';
 
 // take this line out if you do not want to use ag-Grid-Enterprise
 import 'ag-grid-enterprise';