App.js

import { AgGridReact } from 'ag-grid-react';
import React, { Component } from 'react';
import { AllCommunityModules } from 'ag-grid-react'
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import ColorsRenderer from './cellRenderers/ColorsRenderer'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columnDefs: [
        { headerName: "Make", field: "make" },
        { headerName: "Model", field: "model" },
        { headerName: "Price", field: "price" },
        { headerName: "Colors", field: "color", cellRenderer: 'colorsRenderer', cellRendererParams: { onColorChange: this.onColorChange} }
      ],
      rowData: [
        { make: "Toyota", model: "Celica", price: 35000, color: "red" },
        { make: "Ford", model: "Mondeo", price: 32000, color: "black" },
        { make: "Porsche", model: "Boxter", price: 72000, color: "green" }],
      frameworkComponents: {
        colorsRenderer: ColorsRenderer
      }
    }
    this.onColorChange = this.onColorChange.bind(this);
  }

  onColorChange = (color) => {
    console.log("Color Change", color)
  }

  onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  };

  render() {
    return (
      <div className="ag-theme-alpine" style={{ height: '200px', width: '800px' }}>
        <AgGridReact
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}
          frameworkComponents={this.state.frameworkComponents}
          context={this.state.context}
          modules={AllCommunityModules}
          onGridReady={this.onGridReady}
        />
      </div>
    );
  }
}

export default App;