ag-Grid in React

<html>
<head>
    <title>ag-Grid React Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style> html, body, #root { margin: 0; padding: 0; height: 100%; } </style>
</head>
<body>
    <div id="root">Loading ag-Grid React example&hellip;</div>
    
    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"ag-grid":"https:\/\/unpkg.com\/ag-grid@14.2.0\/dist\/ag-grid.js","ag-grid\/main":"https:\/\/unpkg.com\/ag-grid@14.2.0\/dist\/ag-grid.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@14.2.0\/","ag-grid-react":"npm:ag-grid-react@14.2.0\/","ag-grid-angular":"npm:ag-grid-angular@14.2.0\/"}    </script>

    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>

    <script>
      System.import('index.jsx').catch( function(err) { console.error(err); })
    </script>
</body>
</html>

import React, {Component} from "react";
import {AgGridReact, AgGridColumn} from "ag-grid-react";

export default class extends Component {
    constructor(props) {
        super(props);

        this.state = {
            rowData: [
                {make: "Toyota", model: "Celica", price: 35000},
                {make: "Ford", model: "Mondeo", price: 32000},
                {make: "Porsche", model: "Boxter", price: 72000}
            ]
        }
        
        this.onGridReady = this.onGridReady.bind(this)
        this.handleEditing = this.handleEditing.bind(this);
        this.handleCellDoubleClicked = this.handleCellDoubleClicked.bind(this);
        // Only allow to edit cells, if this flag is true
        this.clickToEdit = false;
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.columnApi = params.columnApi;

        this.gridApi.sizeColumnsToFit();
        
        this.gridApi.addEventListener('cellEditingStarted', this.clearClickToEditMode);
    }
    
    componentWillUnmount() {
        this.gridApi.removeEventListener('cellEditingStarted', this.clearClickToEditMode);
    }
    
    clearClickToEditMode() {
        this.clickToEdit = false;
    }
    
    handleEditing() {
        return this.clickToEdit;
    }
    
    handleCellDoubleClicked(evt) {
        const { column: { colId }, node: { rowIndex }} = evt;

        this.clickToEdit = true;
        this.gridApi.startEditingCell({
          rowIndex,
          colKey: colId
        });     
    }

    render() {
        let containerStyle = {
            height: 115
        };

        return (

            <div>
                <div style={containerStyle} className="ag-theme-fresh">
                    <AgGridReact
                        // properties
                        rowData={this.state.rowData}
                        singleClickEdit={false}
                        
                        // events
                        onGridReady={this.onGridReady}
                        onCellDoubleClicked={this.handleCellDoubleClicked}>
                        
                        {/*column definitions */}
                        <AgGridColumn field="make" editable={this.handleEditing}></AgGridColumn>
                        <AgGridColumn field="model" editable={this.handleEditing}></AgGridColumn>
                        <AgGridColumn field="price"></AgGridColumn>
                    </AgGridReact>
                </div>
            </div>
        )
    }
};

'use strict';

import React from "react"
import {render} from "react-dom"
import SimpleGridComponent from 'app/SimpleGridComponent'

render(
    <SimpleGridComponent></SimpleGridComponent>,
    document.querySelector('#root')
);

(function(global) {
    // simplified version of Object.assign for es3
    function assign() {
        var result = {};
        for (var i = 0, len = arguments.length; i < len; i++) {
            var arg = arguments[i];
            for (var prop in arg) {
                result[prop] = arg[prop];
            }
        }
        return result;
    }

    System.config({
        transpiler: 'plugin-babel',
        defaultExtension: 'js',
        paths: {
            'npm:': 'https://unpkg.com/'
        },
        map: assign(
            {
                // babel transpiler
                'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
                'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',

                // react
                react: 'npm:react@16.0.0',
                'react-dom': 'npm:react-dom@16.0.0',
                'react-dom-factories': 'npm:react-dom-factories',
                redux: 'npm:redux@3.6.0',
                'react-redux': 'npm:react-redux@5.0.6',
                'prop-types': 'npm:prop-types',

                app: appLocation + 'app'
            },
            systemJsMap
        ), // systemJsMap comes from index.html

        packages: {
            react: {
                main: './umd/react.production.min.js'
            },
            'react-dom': {
                main: './umd/react-dom.production.min.js'
            },
            'prop-types': {
                main: './prop-types.min.js',
                defaultExtension: 'js'
            },
            redux: {
                main: './dist/redux.min.js',
                defaultExtension: 'js'
            },
            'react-redux': {
                main: './dist/react-redux.min.js',
                defaultExtension: 'js'
            },
            app: {
                defaultExtension: 'jsx'
            },
            'ag-grid-react': {
                main: './main.js',
                defaultExtension: 'js'
            },
            'ag-grid-enterprise': {
                main: './main.js',
                defaultExtension: 'js'
            }
        },
        meta: {
            '*.jsx': {
                babelOptions: {
                    react: true
                }
            }
        }
    });
})(this);