[3] Ag-Grid- Cell Renderer and Cell Editor.

If you are a beginner and haven’t checked our previous articles. Checkout
to https://medium.com/codalyze/ . You can find other Ag-Grid articles which will give you a better idea about Ag-Grid usage.

Let’s see what Cell Renderer and Cell Editor actually mean in Ag-Grid.

Custom Cell Renderers and Custom Cell Editors are the most important topics to be learned in ag-grid. Because the cellRenderers and cellEditors provided by ag-grid is not enough sometimes. We have to use own custom components sometimes, like using currency symbols or icon components etc. So, I will be covering only Custom Cell Renderers and Custom Cell Editors in this article.

Cell Renderer:

As you know a grid is made up of cells. The data that we pass into the grid is visible to us in the cells of the grid. The data that is visible to us, is in view mode. So, we use cellRenderer attibute in column defination to use a custom component that shows the data in the cell. You might be confusing a little bit now, but by the end of this article you will understand it very cleary.

In this example, I am using Custom Cell Renderer Components — GenderComponent and AmountComponent. Create the components in the following way:

props will be consiting of value of that particular cell, data of that row, rowNode, gridApi and columnApi etc.

After creating the components we have to register these components with the grid. To do this first whatever the name that you have given to the custom component that should be assigned to cellRender in columnDefs.

After assigning the cellRenderer value, pass the components as object into the AgGridReact component with property as frameworkComponents={{GenderComponent, AmountComponent}} . That’s it we have successfully created and rendered custom component in ag-grid.

CellRendererParams:

If you want to pass functions or some values into the custom components, you can pass it through the attribute cellRendererParams which takes object in coloumnDefs and use it in custom components as follows.

Cell Editor:

When we set the attribute editable: true, we will be able to edit the cell. But the default editor will be input type editor. Sometimes we need to have custom editing cells so that we can implement our own login according to the requirements. For example if we want to input only numbers, alphabets into the cell or if we want to put limit to the length of inpout data or if we want to use dropdown component of some css framework, we have to make custome cell editor component. Unfortunately, we cannot use functional components in cellEditor components like cellRenderer. We have to use only class components. We have to use some lifecycle methods of ag-grid, so there is no choice to use functional components.

Three important lifecycles in cellEditor are:

1. afterGuiAttached method which will be executed after mounting the cellEditor. We use this method to focus the component.
2. getValue method is used to return the value from the component to ag-grid state( node ), so that the new value will be saved into the node.
3. destroy lifecylce method is called at the stage of unmounting the component. This is used for writing the clean up code.

After creating the custom cell editor component, register the component in colDefs as same as cellRenderer. We can also pass the cellEditorParams as we have passed in cellRenderParams, which will be utilized inside the cellEditor.

Pass the component into the AgGridReact component as same as we have done with the cellRenderer.

TaDaaa!!!!…. We got the following custom cellEditor successfully.

That’s all for today’s article. Hope you understand the topics well.
If you like the article, feel free to share the thoughts through the following links… Good Bye folks.
More articles on ag-grid coming soon :)

Previous Articles:
1. Getting started with Ag-Grid [a rich performant data-table]: https://medium.com/codalyze/getting-started-with-ag-grid-a-rich-performant-data-table-fb541debf5e9
2. [2] Ag-Grid — default and custom sorting, filtering: https://medium.com/codalyze/2-ag-grid-default-and-custom-sorting-filtering-604115e6af70

Written by Harishponna
For any clarification please reach out: www.linkedin.com/in/harish-ponna-b9b885ba

Feel free to share your feedback at mail@codalyze.com