How to use and add icon to a cell in ag-grid to indicate the cell is editable

Question

I am using ag-grid with angular 6. For a particular column the cell is supposed to be editable. Please find the below image.

How can i add this icon, on click of which the cell is made editable.

Answer 1

You need to use the cellRenderer field in the objects that are in the columnDefs array. Basically, you take what would normally be displayed, and the icon you want to display and place them both in one <span>.

something.component.ts

columnDefs = [
   /* ... */
   { headerName: 'Notes', field: 'notes', editable: true, 
     cellRenderer: function(params) {
          return '<span><i class="material-icons">edit</i>' + params.value + '</span>'
     } }
];

Answer 2

You can also do it via css class

/* ---- conditional : only some cell are editable based on cell data type/field -----*/
 cellClass: function(params) { return (params.data && params.data.sale ? 'editable-grid-cell':''); },

/* ------ if all are editable ----------*/
 cellClass: 'editable-grid-cell',

Then add css

.editable-grid-cell::after {
    content: "\F303";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 15px;
    font-weight: 900;
    z-index: -1; /* this will set it in background so when user click onit you will get cell-click event as if user would normally click on cell */

}

if you are using it in angular then you might need to use ::ng-deep to prevent style isolation and apply the style to the class regardless of component level. like

::ng-deep ..editable-grid-cell::after { .... }