http://plnkr.co/edit/dzbCTdDp9V9jmT39xe8r?p=info

ag-grid-react.js

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('ag-grid'), require('prop-types'), require('react-dom-factories')) :
	typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'ag-grid', 'prop-types', 'react-dom-factories'], factory) :
	(factory((global.AgGridReact = {}),global.React,global.ReactDOM,global.agGrid,global.PropTypes,global.ReactDOMFactories));
}(this, (function (exports,React,ReactDOM,AgGrid,PropTypes,DOM) { 'use strict';

function __extends(d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

function __decorate(decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
}

function __metadata(k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
}

var AgReactComponent = (function () {
    function AgReactComponent(reactComponent, parentComponent) {
        this.reactComponent = reactComponent;
        this.parentComponent = parentComponent;
    }
    AgReactComponent.prototype.getFrameworkComponentInstance = function () {
        return this.componentRef;
    };
    AgReactComponent.prototype.init = function (params) {
        var _this = this;
        return new AgGrid.Promise(function (resolve) {
            _this.eParentElement = document.createElement('div');
            AgGrid.Utils.addCssClass(_this.eParentElement, 'ag-react-container');
            // so user can have access to the react container,
            // to add css class or style
            params.reactContainer = _this.eParentElement;
            var self = _this;
            var ReactComponent = React.createElement(_this.reactComponent, params);
            if (!_this.parentComponent) {
                // MUST be a function, not an arrow function
                ReactDOM.render(ReactComponent, _this.eParentElement, function () {
                    self.componentRef = this;
                    resolve(null);
                });
            }
            else {
                // MUST be a function, not an arrow function
                ReactDOM.unstable_renderSubtreeIntoContainer(_this.parentComponent, ReactComponent, _this.eParentElement, function () {
                    self.componentRef = this;
                    resolve(null);
                });
            }
        });
    };
    AgReactComponent.prototype.getGui = function () {
        return this.eParentElement;
    };
    AgReactComponent.prototype.destroy = function () {
        ReactDOM.unmountComponentAtNode(this.eParentElement);
    };
    return AgReactComponent;
}());

var ReactFrameworkComponentWrapper = (function (_super) {
    __extends(ReactFrameworkComponentWrapper, _super);
    function ReactFrameworkComponentWrapper() {
        _super.apply(this, arguments);
    }
    ReactFrameworkComponentWrapper.prototype.createWrapper = function (ReactComponent) {
        var _self = this;
        var DynamicAgReactComponent = (function (_super) {
            __extends(DynamicAgReactComponent, _super);
            function DynamicAgReactComponent() {
                _super.call(this, ReactComponent, _self.agGridReact);
            }
            DynamicAgReactComponent.prototype.init = function (params) {
                return _super.prototype.init.call(this, params);
            };
            DynamicAgReactComponent.prototype.hasMethod = function (name) {
                var frameworkComponentInstance = wrapper.getFrameworkComponentInstance();
                if (frameworkComponentInstance == null) {
                    return true;
                }
                return frameworkComponentInstance[name] != null;
            };
            DynamicAgReactComponent.prototype.callMethod = function (name, args) {
                var _this = this;
                var frameworkComponentInstance = this.getFrameworkComponentInstance();
                if (frameworkComponentInstance == null) {
                    setTimeout(function () { return _this.callMethod(name, args); }, 100);
                }
                else {
                    var method = wrapper.getFrameworkComponentInstance()[name];
                    if (method == null)
                        return null;
                    return method.apply(frameworkComponentInstance, args);
                }
            };
            DynamicAgReactComponent.prototype.addMethod = function (name, callback) {
                wrapper[name] = callback;
            };
            return DynamicAgReactComponent;
        }(AgReactComponent));
        var wrapper = new DynamicAgReactComponent();
        return wrapper;
    };
    __decorate([
        AgGrid.Autowired('agGridReact'), 
        __metadata('design:type', (typeof (_a = typeof AgGridReact !== 'undefined' && AgGridReact) === 'function' && _a) || Object)
    ], ReactFrameworkComponentWrapper.prototype, "agGridReact", void 0);
    ReactFrameworkComponentWrapper = __decorate([
        AgGrid.Bean('frameworkComponentWrapper'), 
        __metadata('design:paramtypes', [])
    ], ReactFrameworkComponentWrapper);
    return ReactFrameworkComponentWrapper;
    var _a;
}(AgGrid.BaseComponentWrapper));

var AgGridColumn = (function (_super) {
    __extends(AgGridColumn, _super);
    function AgGridColumn(props, state) {
        _super.call(this, props, state);
        this.props = props;
        this.state = state;
    }
    AgGridColumn.prototype.render = function () {
        return null;
    };
    AgGridColumn.mapChildColumnDefs = function (columnProps) {
        return React.Children.map(columnProps.children, function (child) {
            return AgGridColumn.toColDef(child.props);
        });
    };
    AgGridColumn.toColDef = function (columnProps) {
        var colDef = AgGridColumn.createColDefFromGridColumn(columnProps);
        if (AgGridColumn.hasChildColumns(columnProps)) {
            colDef["children"] = AgGridColumn.getChildColDefs(columnProps.children);
        }
        return colDef;
    };
    AgGridColumn.hasChildColumns = function (columnProps) {
        return React.Children.count(columnProps.children) > 0;
    };
    AgGridColumn.getChildColDefs = function (columnChildren) {
        return React.Children.map(columnChildren, function (child) {
            return AgGridColumn.createColDefFromGridColumn(child.props);
        });
    };
    
    AgGridColumn.createColDefFromGridColumn = function (columnProps) {
        var colDef = {};
        AgGridColumn.assign(colDef, columnProps);
        delete colDef.children;
        return colDef;
    };
    
    AgGridColumn.assign = function (colDef, from) {
        // effectively Object.assign - here for IE compatibility
        return [from].reduce(function (r, o) {
            Object.keys(o).forEach(function (k) {
                r[k] = o[k];
            });
            return r;
        }, colDef);
    };
    return AgGridColumn;
}(React.Component));
addProperties(AgGrid.ColDefUtil.BOOLEAN_PROPERTIES, PropTypes.bool);
addProperties(AgGrid.ColDefUtil.STRING_PROPERTIES, PropTypes.string);
addProperties(AgGrid.ColDefUtil.OBJECT_PROPERTIES, PropTypes.object);
addProperties(AgGrid.ColDefUtil.ARRAY_PROPERTIES, PropTypes.array);
addProperties(AgGrid.ColDefUtil.NUMBER_PROPERTIES, PropTypes.number);
addProperties(AgGrid.ColDefUtil.FUNCTION_PROPERTIES, PropTypes.func);
function addProperties(listOfProps, propType) {
    listOfProps.forEach(function (propKey) {
        AgGridColumn[propKey] = propType;
    });
}

var AgGridReact = (function (_super) {
    __extends(AgGridReact, _super);
    function AgGridReact(props, state) {
        _super.call(this, props, state);
        this.props = props;
        this.state = state;
    }
    AgGridReact.prototype.render = function () {
        var _this = this;
        return DOM.div({
            style: this.createStyleForDiv(),
            ref: function (e) {
                _this.eGridDiv = e;
            }
        });
    };
    AgGridReact.prototype.createStyleForDiv = function () {
        var style = { height: '100%' };
        // allow user to override styles
        var containerStyle = this.props.containerStyle;
        if (containerStyle) {
            Object.keys(containerStyle).forEach(function (key) {
                style[key] = containerStyle[key];
            });
        }
        return style;
    };
    AgGridReact.prototype.componentDidMount = function () {
        var gridParams = {
            seedBeanInstances: {
                agGridReact: this
            }
        };
        var gridOptions = this.props.gridOptions || {};
        if (AgGridColumn.hasChildColumns(this.props)) {
            gridOptions.columnDefs = AgGridColumn.mapChildColumnDefs(this.props);
        }
        this.gridOptions = AgGrid.ComponentUtil.copyAttributesToGridOptions(gridOptions, this.props);
        AgGrid.Grid.setFrameworkBeans([ReactFrameworkComponentWrapper]);
        // don't need the return value
        new AgGrid.Grid(this.eGridDiv, this.gridOptions, gridParams);
        this.api = this.gridOptions.api;
        this.columnApi = this.gridOptions.columnApi;
    };
    AgGridReact.prototype.shouldComponentUpdate = function () {
        // we want full control of the dom, as ag-Grid doesn't use React internally,
        // so for performance reasons we tell React we don't need render called after
        // property changes.
        return false;
    };
    AgGridReact.prototype.componentWillReceiveProps = function (nextProps) {
        var _this = this;
        var debugLogging = !!nextProps.debug;
        // keeping consistent with web components, put changing
        // values in currentValue and previousValue pairs and
        // not include items that have not changed.
        var changes = {};
        AgGrid.ComponentUtil.ALL_PROPERTIES.forEach(function (propKey) {
            if (!_this.areEquivalent(_this.props[propKey], nextProps[propKey])) {
                if (debugLogging) {
                    console.log("agGridReact: [" + propKey + "] property changed");
                }
                changes[propKey] = {
                    previousValue: _this.props[propKey],
                    currentValue: nextProps[propKey]
                };
            }
        });
        AgGrid.ComponentUtil.getEventCallbacks().forEach(function (funcName) {
            if (_this.props[funcName] !== nextProps[funcName]) {
                if (debugLogging) {
                    console.log("agGridReact: [" + funcName + "] event callback changed");
                }
                changes[funcName] = {
                    previousValue: _this.props[funcName],
                    currentValue: nextProps[funcName]
                };
            }
        });
        AgGrid.ComponentUtil.processOnChange(changes, this.gridOptions, this.api, this.columnApi);
    };
    AgGridReact.prototype.componentWillUnmount = function () {
        if (this.api) {
            this.api.destroy();
        }
    };
    /*
     * deeper object comparison - taken from https://stackoverflow.com/questions/1068834/object-comparison-in-javascript
     */
    AgGridReact.unwrapStringOrNumber = function (obj) {
        return (obj instanceof Number || obj instanceof String
            ? obj.valueOf()
            : obj);
    };
    // sigh, here for ie compatibility
    AgGridReact.prototype.copy = function (value) {
        if (!value) {
            return value;
        }
        if (Array.isArray(value)) {
            return value.slice();
        }
        // for anything without keys (boolean, string etc).
        // Object.keys - chrome will swallow them, IE will fail (correctly, imho)
        if (typeof value !== "object") {
            return value;
        }
        return [{}, value].reduce(function (r, o) {
            Object.keys(o).forEach(function (k) {
                r[k] = o[k];
            });
            return r;
        }, {});
    };
    AgGridReact.prototype.areEquivalent = function (a, b) {
        return AgGridReact.areEquivalent(this.copy(a), this.copy(b));
    };
    AgGridReact.areEquivalent = function (a, b) {
        a = AgGridReact.unwrapStringOrNumber(a);
        b = AgGridReact.unwrapStringOrNumber(b);
        if (a === b)
            return true; //e.g. a and b both null
        if (a === null || b === null || typeof (a) !== typeof (b))
            return false;
        if (a instanceof Date) {
            return b instanceof Date && a.valueOf() === b.valueOf();
        }
        if (typeof a === "function") {
            return a.toString() === b.toString();
        }
        if (typeof (a) !== "object") {
            return a == b; //for boolean, number, string, function, xml
        }
        var newA = (a.areEquivalent_Eq_91_2_34 === undefined), newB = (b.areEquivalent_Eq_91_2_34 === undefined);
        try {
            var prop = void 0;
            if (newA) {
                a.areEquivalent_Eq_91_2_34 = [];
            }
            else if (a.areEquivalent_Eq_91_2_34.some(function (other) {
                return other === b;
            }))
                return true;
            if (newB) {
                b.areEquivalent_Eq_91_2_34 = [];
            }
            else if (b.areEquivalent_Eq_91_2_34.some(function (other) { return other === a; })) {
                return true;
            }
            a.areEquivalent_Eq_91_2_34.push(b);
            b.areEquivalent_Eq_91_2_34.push(a);
            var tmp = {};
            for (prop in a)
                if (prop != "areEquivalent_Eq_91_2_34") {
                    tmp[prop] = null;
                }
            for (prop in b)
                if (prop != "areEquivalent_Eq_91_2_34") {
                    tmp[prop] = null;
                }
            for (prop in tmp) {
                if (!this.areEquivalent(a[prop], b[prop])) {
                    return false;
                }
            }
            return true;
        }
        finally {
            if (newA)
                delete a.areEquivalent_Eq_91_2_34;
            if (newB)
                delete b.areEquivalent_Eq_91_2_34;
        }
    };
    return AgGridReact;
}(React.Component));
AgGridReact.propTypes = {
    gridOptions: PropTypes.object,
};
addProperties$1(AgGrid.ComponentUtil.getEventCallbacks(), PropTypes.func);
addProperties$1(AgGrid.ComponentUtil.BOOLEAN_PROPERTIES, PropTypes.bool);
addProperties$1(AgGrid.ComponentUtil.STRING_PROPERTIES, PropTypes.string);
addProperties$1(AgGrid.ComponentUtil.OBJECT_PROPERTIES, PropTypes.object);
addProperties$1(AgGrid.ComponentUtil.ARRAY_PROPERTIES, PropTypes.array);
addProperties$1(AgGrid.ComponentUtil.NUMBER_PROPERTIES, PropTypes.number);
addProperties$1(AgGrid.ComponentUtil.FUNCTION_PROPERTIES, PropTypes.func);
function addProperties$1(listOfProps, propType) {
    listOfProps.forEach(function (propKey) {
        AgGridReact[propKey] = propType;
    });
}

exports.AgGridReact = AgGridReact;
exports.AgGridColumn = AgGridColumn;

Object.defineProperty(exports, '__esModule', { value: true });

})));