How do I put a react jsx component within my ag-grid cells

Question

Unfortunately I cannot share code because it is company confidential but I am basically using colDefs to define my columns within a React ag-grid and would like to have one column whose cells are all a custom JSX button component I built that will allow me to delete the row of the cell clicked as well as propagate changes elsewhere in the code. I have been stuck trying to use cellRenderers and simply cannot figure out how to add custom react functional components to the cell. If anyone can assist with this it would be greatly appreciated. I will try to provide as much additional context as needed but am unfortunately unable to share direct code snippets. Thanks!

Answer 1

You can see an example in ag-grid's documentation here. I've also put up a sandbox in which you can delete rows from the grid by clicking each respective button.

Basically you have to:

1. Create your custom renderer that will appear in the cells of the column, like the DeleteCellRenderer. You'll have to access at least 2 props:

   • props.context, the grid's context which will contain the method(s) to fire in the onClick method
   • props.data, which contains the data for that row - the specific item in the rowData array that is.

2. Open the component that renders the <AgGridReact /> component and import the renderer.

3. Declare the renderer in the grid's frameworkComponents prop, like this:

   <AgGridReact
     frameworkComponents={{
       deleteCellRenderer: DeleteCellRenderer
     }}
     // ...
   

4. Declare your delete function to fire when clicking on the button, then pass it to the grid's context.

   const handleDelete = (data) => {
     // Your logic here
   };
   
   // ...
   
   <AgGridReact
      frameworkComponents={{
        deleteCellRenderer: DeleteCellRenderer
      }}
      context={{ handleDelete }}
      //...
   

5. Finally, insert the column in the colDef array containing the cellRenderer, either like this:

   const colDef = [
   //...
   {
     headerName: "delete"
     cellRenderer: "deleteCellRenderer"
   },
   //...
   ];
   

   Or, if you're using <AgGridColumn> components as children:

   <AgGridReact
   //...
   >
     <AgGridColumn headerName="Delete" cellRenderer="deleteCellRenderer" />
     //...
   </AgGridReact>