+ );
+ }
+}
diff --git a/src/masterDetailExample/MasterDetailExample.jsx b/src/masterDetailExample/MasterDetailExample.jsx
new file mode 100644
index 0000000..5f2637c
--- /dev/null
+++ b/src/masterDetailExample/MasterDetailExample.jsx
@@ -0,0 +1,152 @@
+import React, {Component} from "react";
+
+import {AgGridReact} from "ag-grid-react";
+
+import DetailPanelComponent from "./DetailPanelComponent";
+
+export default class MasterDetailExample extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ rowData: this.createRowData(),
+ columnDefs: this.createColumnDefs(),
+ };
+
+ this.onGridReady = this.onGridReady.bind(this);
+ }
+
+ onGridReady(params) {
+ this.gridApi = params.api;
+ this.columnApi = params.columnApi;
+
+ this.gridApi.sizeColumnsToFit();
+ }
+
+ createColumnDefs() {
+ return [
+ {
+ headerName: 'Name', field: 'name',
+ // left column is going to act as group column, with the expand / contract controls
+ cellRenderer: 'group',
+ // we don't want the child count - it would be one each time anyway as each parent
+ // not has exactly one child node
+ cellRendererParams: {suppressCount: true}
+ },
+ {headerName: 'Account', field: 'account'},
+ {headerName: 'Calls', field: 'totalCalls'},
+ {headerName: 'Minutes', field: 'totalMinutes', cellFormatter: this.minuteCellFormatter}
+ ];
+ }
+
+ createRowData() {
+ let rowData = [];
+
+ for (let i = 0; i < 20; i++) {
+ let firstName = this.firstnames[Math.floor(Math.random() * this.firstnames.length)];
+ let lastName = this.lastnames[Math.floor(Math.random() * this.lastnames.length)];
+
+ let image = this.images[i % this.images.length];
+
+ let totalDuration = 0;
+
+ let callRecords = [];
+ // call count is random number between 20 and 120
+ let callCount = Math.floor(Math.random() * 100) + 20;
+ for (let j = 0; j < callCount; j++) {
+ // duration is random number between 20 and 120
+ let callDuration = Math.floor(Math.random() * 100) + 20;
+ let callRecord = {
+ callId: this.callIdSequence++,
+ duration: callDuration,
+ switchCode: 'SW' + Math.floor(Math.random() * 10),
+ // 50% chance of in vs out
+ direction: (Math.random() > .5) ? 'In' : 'Out',
+ // made up number
+ number: '(0' + Math.floor(Math.random() * 10) + ') ' + Math.floor(Math.random() * 100000000)
+ };
+ callRecords.push(callRecord);
+ totalDuration += callDuration;
+ }
+
+ let record = {
+ name: firstName + ' ' + lastName,
+ account: i + 177000,
+ totalCalls: callCount,
+ image: image,
+ // convert from seconds to minutes
+ totalMinutes: totalDuration / 60,
+ callRecords: callRecords
+ };
+ rowData.push(record);
+ }
+
+ return rowData;
+ }
+
+ minuteCellFormatter(params) {
+ return params.value.toLocaleString() + 'm';
+ };
+
+ isFullWidthCell(rowNode) {
+ return rowNode.level === 1;
+ }
+
+ getRowHeight(params) {
+ let rowIsDetailRow = params.node.level === 1;
+ // return 100 when detail row, otherwise return 25
+ return rowIsDetailRow ? 200 : 25;
+ }
+
+ getNodeChildDetails(record) {
+ if (record.callRecords) {
+ return {
+ group: true,
+ // the key is used by the default group cellRenderer
+ key: record.name,
+ // provide ag-Grid with the children of this group
+ children: [record.callRecords],
+ // for demo, expand the third row by default
+ expanded: record.account === 177002
+ };
+ } else {
+ return null;
+ }
+ }
+
+ render() {
+ return (
+
+
Master-Detail Example
+
+
+
+ );
+ }
+
+ // a list of names we pick from when generating data
+ firstnames = ['Sophia', 'Emma', 'Olivia', 'Isabella', 'Mia', 'Ava', 'Lily', 'Zoe', 'Emily', 'Chloe', 'Layla', 'Madison', 'Madelyn', 'Abigail', 'Aubrey', 'Charlotte', 'Amelia', 'Ella', 'Kaylee', 'Avery', 'Aaliyah', 'Hailey', 'Hannah', 'Addison', 'Riley', 'Harper', 'Aria', 'Arianna', 'Mackenzie', 'Lila', 'Evelyn', 'Adalyn', 'Grace', 'Brooklyn', 'Ellie', 'Anna', 'Kaitlyn', 'Isabelle', 'Sophie', 'Scarlett', 'Natalie', 'Leah', 'Sarah', 'Nora', 'Mila', 'Elizabeth', 'Lillian', 'Kylie', 'Audrey', 'Lucy', 'Maya'];
+ lastnames = ['Smith', 'Jones', 'Williams', 'Taylor', 'Brown', 'Davies', 'Evans', 'Wilson', 'Thomas', 'Johnson'];
+
+ images = ['niall', 'sean', 'alberto', 'statue', 'horse'];
+
+ // each call gets a unique id, nothing to do with the grid, just help make the sample
+ // data more realistic
+ callIdSequence = 555;
+};
diff --git a/src/richGridExample/ColDefFactory.jsx b/src/richGridExample/ColDefFactory.jsx
new file mode 100644
index 0000000..d68d513
--- /dev/null
+++ b/src/richGridExample/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 = "";
+ 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;
+}
diff --git a/src/richGridExample/MyReactDateComponent.jsx b/src/richGridExample/MyReactDateComponent.jsx
new file mode 100644
index 0000000..d298abc
--- /dev/null
+++ b/src/richGridExample/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 (
+
+ x
+ /
+ /
+
+
+ );
+ }
+
+ //*********************************************************************************
+ // 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
+};
\ No newline at end of file
diff --git a/src/richGridExample/MyReactHeaderComponent.jsx b/src/richGridExample/MyReactHeaderComponent.jsx
new file mode 100644
index 0000000..2c5d098
--- /dev/null
+++ b/src/richGridExample/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(
)
+ sortElements.push(
)
+ sortElements.push(
)
+ }
+
+
+ let menuButton = null;
+ if (this.props.enableMenu){
+ menuButton =
+ }
+
+ return
+ {menuButton}
+
{this.props.displayName}
+ {sortElements}
+
+ }
+
+ 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
+};
\ No newline at end of file
diff --git a/src/richGridExample/MyReactHeaderGroupComponent.jsx b/src/richGridExample/MyReactHeaderGroupComponent.jsx
new file mode 100644
index 0000000..7fe3037
--- /dev/null
+++ b/src/richGridExample/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
+
{this.props.displayName}
+
+
+ }
+
+ 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
+};
\ No newline at end of file
diff --git a/src/richGridExample/NameCellEditor.jsx b/src/richGridExample/NameCellEditor.jsx
new file mode 100644
index 0000000..2433631
--- /dev/null
+++ b/src/richGridExample/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 (
+
+ );
+ }
+
+ 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
+};
\ No newline at end of file
diff --git a/src/richGridExample/ProficiencyCellRenderer.jsx b/src/richGridExample/ProficiencyCellRenderer.jsx
new file mode 100644
index 0000000..5bc412b
--- /dev/null
+++ b/src/richGridExample/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 (
+
+
{this.props.value}%
+
+ );
+ }
+}
diff --git a/src/richGridExample/ProficiencyFilter.jsx b/src/richGridExample/ProficiencyFilter.jsx
new file mode 100644
index 0000000..5925031
--- /dev/null
+++ b/src/richGridExample/ProficiencyFilter.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
+
+// the proficiency filter component. this demonstrates how to integrate
+// a React filter component with ag-Grid.
+export default class ProficiencyFilter extends React.Component {
+
+ constructor(props) {
+ super();
+ this.state = {
+ selected: PROFICIENCY_NAMES[0]
+ };
+ }
+
+ // called by agGrid
+ doesFilterPass(params) {
+ var value = this.props.valueGetter(params);
+ var valueAsNumber = parseFloat(value);
+
+ switch (this.state.selected) {
+ case PROFICIENCY_NAMES[1] : return valueAsNumber >= 40;
+ case PROFICIENCY_NAMES[2] : return valueAsNumber >= 60;
+ case PROFICIENCY_NAMES[3] : return valueAsNumber >= 80;
+ default : return true;
+ }
+ };
+
+ // called by agGrid
+ isFilterActive() {
+ return this.state.selected !== PROFICIENCY_NAMES[0];
+ };
+
+ onButtonPressed(name) {
+ console.log(name);
+ var newState = {selected: name};
+ // set the state, and once it is done, then call filterChangedCallback
+ this.setState(newState, this.props.filterChangedCallback);
+ console.log(name);
+ }
+
+ render() {
+ var rows = [];
+ PROFICIENCY_NAMES.forEach( (name)=> {
+ var selected = this.state.selected === name;
+ rows.push(
+
+
+
+ );
+ });
+
+ return (
+
+
+ Custom Proficiency Filter
+
+ {rows}
+
+ );
+ }
+
+ // 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() {}
+}
diff --git a/src/richGridExample/RefData.js b/src/richGridExample/RefData.js
new file mode 100644
index 0000000..3ded99b
--- /dev/null
+++ b/src/richGridExample/RefData.js
@@ -0,0 +1,128 @@
+export default class RefData {}
+
+RefData.FIRST_NAMES = [
+ "Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella",
+ "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby",
+ "Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla"
+ ];
+
+RefData.LAST_NAMES = [
+ "Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell",
+ "Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane",
+ "Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner",
+ "Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane",
+ "Keating", "Keegan", "Kingston", "Kobe"
+ ];
+
+RefData.COUNTRY_CODES = {
+ Ireland: "ie",
+ Spain: "es",
+ "United Kingdom": "gb",
+ France: "fr",
+ Germany: "de",
+ Sweden: "se",
+ Italy: "it",
+ Greece: "gr",
+ Iceland: "is",
+ Portugal: "pt",
+ Malta: "mt",
+ Norway: "no",
+ Brazil: "br",
+ Argentina: "ar",
+ Colombia: "co",
+ Peru: "pe",
+ Venezuela: "ve",
+ Uruguay: "uy"
+ };
+
+RefData.COUNTRIES = [
+ {country: "Ireland", continent: "Europe", language: "English"},
+ {country: "Spain", continent: "Europe", language: "Spanish"},
+ {country: "United Kingdom", continent: "Europe", language: "English"},
+ {country: "France", continent: "Europe", language: "French"},
+ {country: "Germany", continent: "Europe", language: "(other)"},
+ {country: "Sweden", continent: "Europe", language: "(other)"},
+ {country: "Norway", continent: "Europe", language: "(other)"},
+ {country: "Italy", continent: "Europe", language: "(other)"},
+ {country: "Greece", continent: "Europe", language: "(other)"},
+ {country: "Iceland", continent: "Europe", language: "(other)"},
+ {country: "Portugal", continent: "Europe", language: "Portuguese"},
+ {country: "Malta", continent: "Europe", language: "(other)"},
+ {country: "Brazil", continent: "South America", language: "Portuguese"},
+ {country: "Argentina", continent: "South America", language: "Spanish"},
+ {country: "Colombia", continent: "South America", language: "Spanish"},
+ {country: "Peru", continent: "South America", language: "Spanish"},
+ {country: "Venezuela", continent: "South America", language: "Spanish"},
+ {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',
+ '3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186',
+ '2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634',
+ '2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597',
+ '6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911',
+ '2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959',
+ '7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160',
+ '3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609',
+ '4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673',
+ '5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245',
+ '8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767',
+ '2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206',
+ '7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348',
+ '874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207',
+ '8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213',
+ '9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161',
+ '3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526',
+ '3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671',
+ '1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310',
+ '1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883',
+ '9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192',
+ '7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838',
+ '1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730',
+ '126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956',
+ '6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257',
+ '960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219',
+ '6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427',
+ '2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355',
+ '5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225',
+ '5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706',
+ '5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596',
+ '7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360',
+ '8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859',
+ '5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322',
+ '6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239',
+ '7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092',
+ '9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973',
+ '3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349',
+ '4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138',
+ '6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063',
+ '9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024',
+ '6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288',
+ '237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157',
+ '446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553',
+ '2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445',
+ '365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958',
+ '1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888',
+ '6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018',
+ '7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433'];
+
+RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows'];
+
+RefData.IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows'];
diff --git a/src/richGridExample/RichGridExample.css b/src/richGridExample/RichGridExample.css
new file mode 100644
index 0000000..0cc69a8
--- /dev/null
+++ b/src/richGridExample/RichGridExample.css
@@ -0,0 +1,31 @@
+.ag-react-container {
+ display: block;
+}
+
+.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%;
+}
diff --git a/src/richGridExample/RichGridExample.jsx b/src/richGridExample/RichGridExample.jsx
new file mode 100644
index 0000000..ef61d87
--- /dev/null
+++ b/src/richGridExample/RichGridExample.jsx
@@ -0,0 +1,226 @@
+import React, {Component} 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 "./RichGridExample.css";
+
+// take this line out if you do not want to use ag-Grid-Enterprise
+import "ag-grid-enterprise";
+
+export default class RichGridExample extends Component {
+
+ constructor() {
+ super();
+
+ this.state = {
+ quickFilterText: null,
+ showGrid: true,
+ showToolPanel: false,
+ columnDefs: new ColDefFactory().createColDefs(),
+ rowData: new RowDataFactory().createRowData(),
+ icons: {
+ columnRemoveFromGroup: '',
+ filter: '',
+ sortAscending: '',
+ sortDescending: '',
+ groupExpanded: '',
+ groupContracted: '',
+ columnGroupOpened: '',
+ columnGroupClosed: ''
+ }
+ };
+
+ // the grid options are optional, because you can provide every property
+ // to the grid via standard React properties. however, the react interface
+ // doesn't block you from using the standard JavaScript interface if you
+ // wish. Maybe you have the gridOptions stored as JSON on your server? If
+ // 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 () {
+ 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
+ };
+
+ this.onGridReady = this.onGridReady.bind(this);
+ this.onRowSelected = this.onRowSelected.bind(this);
+ this.onCellClicked = this.onCellClicked.bind(this);
+ }
+
+ onShowGrid(show) {
+ this.setState({
+ showGrid: show
+ });
+ }
+
+ onToggleToolPanel(event) {
+ this.setState({showToolPanel: event.target.checked});
+ }
+
+ onGridReady(params) {
+ this.api = params.api;
+ this.columnApi = params.columnApi;
+ }
+
+ selectAll() {
+ this.api.selectAll();
+ }
+
+ deselectAll() {
+ this.api.deselectAll();
+ }
+
+ setCountryVisible(visible) {
+ this.columnApi.setColumnVisible('country', visible);
+ }
+
+ onQuickFilterText(event) {
+ this.setState({quickFilterText: event.target.value});
+ }
+
+ onCellClicked(event) {
+ console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex);
+ }
+
+ onRowSelected(event) {
+ console.log('onRowSelected: ' + event.node.data.name);
+ }
+
+ onRefreshData() {
+ var newRowData = new RowDataFactory().createRowData();
+ this.setState({
+ rowData: newRowData
+ });
+ }
+
+ 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;
+ var topHeaderTemplate;
+
+ topHeaderTemplate = (
+
+
+
+
+
+
+
+ Employees Skills and Contact Details
+
+
+ );
+
+ // showing the bottom header and grid is optional, so we put in a switch
+ if (this.state.showGrid) {
+ bottomHeaderTemplate = (
+
;
+ }
+
+}
diff --git a/src/richGridExample/RowDataFactory.js b/src/richGridExample/RowDataFactory.js
new file mode 100644
index 0000000..0c68143
--- /dev/null
+++ b/src/richGridExample/RowDataFactory.js
@@ -0,0 +1,45 @@
+import RefData from './RefData';
+
+export default class RowDataFactory {
+
+ createRowData() {
+ var rowData = [];
+
+ 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],
+ skills: {
+ android: Math.random() < 0.4,
+ html5: Math.random() < 0.4,
+ mac: Math.random() < 0.4,
+ 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),
+ country: countryData.country,
+ continent: countryData.continent,
+ language: countryData.language,
+ mobile: this.createRandomPhoneNumber(),
+ landline: this.createRandomPhoneNumber()
+ });
+ }
+
+ return rowData;
+ }
+
+ createRandomPhoneNumber() {
+ var result = '+';
+ for (var i = 0; i < 12; i++) {
+ result += Math.round(Math.random() * 10);
+ if (i === 2 || i === 5 || i === 8) {
+ result += ' ';
+ }
+ }
+ return result;
+ }
+
+}
\ No newline at end of file
diff --git a/src/richGridExample/SkillsCellRenderer.jsx b/src/richGridExample/SkillsCellRenderer.jsx
new file mode 100644
index 0000000..332de28
--- /dev/null
+++ b/src/richGridExample/SkillsCellRenderer.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import RefData from './RefData';
+
+export default class SkillsCellRenderer extends React.Component {
+
+ render() {
+ var skills = [];
+ var rowData = this.props.data;
+ RefData.IT_SKILLS.forEach( (skill) => {
+ if (rowData && rowData.skills && rowData.skills[skill]) {
+ skills.push();
+ }
+ });
+
+ return {skills};
+ }
+
+}
+
+// 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.
+SkillsCellRenderer.propTypes = {
+ params: React.PropTypes.object
+};
\ No newline at end of file
diff --git a/src/richGridExample/SkillsFilter.jsx b/src/richGridExample/SkillsFilter.jsx
new file mode 100644
index 0000000..381097c
--- /dev/null
+++ b/src/richGridExample/SkillsFilter.jsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import RefData from './RefData';
+
+// the skills filter component. this can be laid out much better in a 'React'
+// way. there are design patterns you can apply to layout out your React classes.
+// however, i'm not worried, as the intention here is to show you ag-Grid
+// working with React, and that's all. i'm not looking for any awards for my
+// React design skills.
+export default class SkillsFilter extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ android: false,
+ css: false,
+ html5: false,
+ mac: false,
+ windows: false
+ };
+ }
+
+ 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
+ doesFilterPass(params) {
+
+ var rowSkills = params.data.skills;
+ var passed = true;
+
+ RefData.IT_SKILLS.forEach( (skill) => {
+ if (this.state[skill]) {
+ if (!rowSkills[skill]) {
+ passed = false;
+ }
+ }
+ });
+
+ return passed;
+ };
+
+ // called by agGrid
+ isFilterActive() {
+ var somethingSelected = this.state.android || this.state.css ||
+ this.state.html5 || this.state.mac || this.state.windows;
+ return somethingSelected;
+ };
+
+ onSkillChanged(skill, event) {
+ var newValue = event.target.checked;
+ var newModel = {};
+ newModel[skill] = newValue;
+ // 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 = [];
+ RefData.IT_SKILLS.forEach( (skill, index) => {
+
+ var skillName = RefData.IT_SKILLS_NAMES[index];
+ var template = (
+
+ );
+
+ skillsTemplates.push(template);
+ });
+
+ return (
+
+
+ Custom Skills Filter
+
+ {skillsTemplates}
+
+ );
+ }
+
+ // 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.
+ //afterGuiAttached(params) {}
+ //onNewRowsLoaded() {}
+ //onAnyFilterChanged() {}
+}
+
+ ![](http://flags.fmcdn.net/data/flags/mini/"
+ + RefData.COUNTRY_CODES[params.value] + ".png){kind=small}
";
+ 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;
+}
diff --git a/src/richGridExample/MyReactDateComponent.jsx b/src/richGridExample/MyReactDateComponent.jsx
new file mode 100644
index 0000000..d298abc
--- /dev/null
+++ b/src/richGridExample/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 (
+