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">

    <!-- font awesome -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="root">Loading ...</div>
    
    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"ag-grid":"https:\/\/unpkg.com\/ag-grid@13.1.1\/dist\/ag-grid.js","ag-grid\/main":"https:\/\/unpkg.com\/ag-grid@13.1.1\/dist\/ag-grid.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@13.1.1\/main.js","ag-grid-react":"npm:ag-grid-react@13.0.0\/main.js","ag-grid-angular":"npm:ag-grid-angular@13.1.1\/main.js"}    </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>


// ag-Grid builds columns based on the column definitions returned here
export default class ColumnDefinitionFactory {

    createColDefs() {
       var  columnDefs = [
              {
                  headerName: "Ag grid Testing Header 1 With Long text",
                  field: "value",
                   headerComponent: "CustomHeader",
              },
              {
                  headerName: "Ag grid Testing Header 1 With Long text",
                  field: "value",
                  headerComponent: "CustomHeader",
              },
              {
                headerName: "Ag grid Testing Header 1 With Long text",
                field: "type",
                headerComponent: "CustomHeader",
              }
          ];
        return columnDefs;
    }
}

import React, {Component} from "react";
import {AgGridReact} from "ag-grid-react";
import SampleRowDataFactory from "./deps.jsx";
import ColumnDefinitionFactory from "./ColumnDefinitions.jsx";
import CustomHeader from './CustomHeader.jsx';
import "ag-grid-enterprise";

export default class Grid extends Component {

    constructor() {
        super();

        this.state = {
            // set the columns to use inside the grid
            columnDefs: new ColumnDefinitionFactory().createColDefs(),
            // set the row data to use inside the grid
            rowData: new SampleRowDataFactory().createRowData()
        };
    }

    onGridReady = (params) => {
        this.api = params.api;
        this.columnApi = params.columnApi;
    }
    
     onFirstDataRendered = (params) => {
        if (!params.finished) return;
    
        // get header components
        let path = params.api.gridPanel.headerRootComp.childContainers[0].headerRowComps[0].headerComps
        let headerComponents = Object.keys(path).map(key => path[key].childComponents[1]);
    
        // find tallest header
        let tallestHeader = 0;
        headerComponents.forEach(headerComp => {
          if (headerComp.eGui.clientHeight > tallestHeader) {
            tallestHeader = headerComp.eGui.clientHeight;
          }
        })
    
        // set header height
        const headerPadding = 14// 14px;
        params.api.setHeaderHeight(tallestHeader + headerPadding);
      }

    render() {
        return (
            <div>
              <div style={{height: 525, width: 900}} className="ag-fresh">
                  <AgGridReact
                      rowData={this.state.rowData}
                      columnDefs={this.state.columnDefs}
                       frameworkComponents= {{CustomHeader : CustomHeader}}
                       onFirstDataRendered={this.onFirstDataRendered}
                      onGridReady={this.onGridReady}
                  />
              </div>
            </div>
        );
    }
}


import React from 'react';

export default  class CustomHeader extends React.Component {

    render() {
        const { displayName = "" } = this.props;
        return (
            <div className="customHeader">
                {displayName}
            </div>
        )
    }
};

// this class generates same data to use inside the grid
export default class SampleRowDataFactory {

    createRowData() {
        const rowData = [
          {value: 14, type: 'age'},
          {value: 'female', type: 'gender'},
          {value: "Happy", type: 'mood'},
          {value: 21, type: 'age'},
          {value: 'male', type: 'gender'},
          {value: "Sad", type: 'mood'}
      ];

        return rowData;
    }
}

'use strict'

import React from "react"
import {render} from "react-dom"

import Grid from './Grid.jsx'

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

.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%;
}


.ag-header-row .ag-header-cell-text {
  white-space:normal!important;
}

.customHeader {
  white-space:normal;
}

(function (global) {
    System.config({
        transpiler: 'plugin-babel',
        defaultExtension: 'js',
        paths: {
            "npm:": 'https://unpkg.com/'
        }, 
        map: Object.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@15.6.1',
            'react-dom': 'npm:react-dom@15.6.1',
            'react-dom-factories': 'npm:react-dom-factories',
            'prop-types': 'npm:prop-types',

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

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