How to add a onclick event in ag-grid cell renderer reactjs and access the class function

Question

I would like to add a button for an ag-grid table column in reactjs at the time column definition. And onclick I need to call a class function. I would like to create onclick event and pass the params value to the function and make an api call from there.

Answer 1

Instead of using cellRenderer in column definition, use cellRendererFramework so agGridReact will know you are returning jsx element.

e.g:

colDefs = [{ ...{
headerName: "View",
field: "id",
colId: "view",
cellRendererFramework: function(params) {
  return <button onClick={ this.handleClick }> Test </button>
},
  },
  ....
}]

also don't forget to bind the cell renderer function to your component class constructor else you will not be able to access this.