Adding Dropdown to your Ag-grid React cell
This article talks about adding dropdown to your cell in ag-grid-react using custom cell renderer. I will also show how to pass params & functions to the custom cell renderer
Create the ag-grid table.
You can see how to create a ag-grid table from the documentation. I will add a colors column to it, which is a dropdown of colors.
Registering Component
Out Custom component should be registered in ag-grid through frameworkComponents property. It is a map of component names to framework components.
Specifying cell renderer component
The cell renderer component should be specified in column definition(columnDefs) thorugh cellRenderer property. Here the value of the property is the name that is registered in frameworkComponents.
Passing parameters to cell renderer components
Apart from the parameters that are sent by the ag-grid(you can see the list here), we can send our custom parameters to the cell, through cellRendererParams property in column definitions. These parameters will be recieved by our custom component as props.
Creating our cell renderer component
Our cell renderer component is created the same way every react components are created.
To summarise, we can create our custom cell components(our dropdown component) in three steps.
1) Create the component
2) Register the component in frameworkComponents property of ag-grid
3) Specify the cell renderer in column definition
