In angular ag-grid, how to make certain cell to be editable

Question

In angular ag-grid, how to make certain cells of a column to be editable. In my grid, i have a column "status" and this Status column is a dropdown field and it will be editable only for certain initial value. Status column dropdown can contain A,B,C When the grid is loading initially, if the value coming from database is "A" then only that cell need to be editable and the dropdown should appear. For all other values, that cell should be non-editable. I have tried implementing this in my column definition code , to make the "editable" flag as true when the value is "A". But the problem with this approach is that when the user tries to change the value from "A" to "B", the field is becoming non-editable. I want to keep this cell as editable if the initial value is "A" until user hits the Save button. Any suggestions to achieve this.

const columnDefs = [
// ...
   {
    headerName: 'status',
    field: 'status',
    editable: function(params) {
        // allow `status` cell to be edited for rows with value `A`
        return params.data.status === 'A';
    },
},

// ...

];

Answer 1

Basically, you can implement a conditional cell editor.

I share an example with you from the official documentation with a simple modification to get what you want

https://plnkr.co/edit/F2GmYk63Dwu3RP2D?preview

If the athlete field value is equal to Michael Phelps we render a text editor, otherwise we render a date picker editor

  init(params: ICellEditorParams) {
    // if the athlete field value is equal to Michael Phelps, render a text editor
    if (params.data.athlete === 'Michael Phelps') {
      this.eInput = document.createElement('input');
      this.eInput.value = params.value;
    // otherwise render a date picker editor
    } else {
      this.eInput = document.createElement('input');
      this.eInput.value = params.value;
      this.eInput.classList.add('ag-input');
      this.eInput.style.height = 'var(--ag-row-height)';
      this.eInput.style.fontSize = 'calc(var(--ag-font-size) + 1px)';

      // https://jqueryui.com/datepicker/
      $(this.eInput).datepicker({
        dateFormat: 'dd/mm/yy',
        onSelect: () => {
          this.eInput.focus();
        },
      });
    }
  }

First case

Second case

You can read more on https://www.ag-grid.com/angular-data-grid/component-cell-editor/