In my Rails 7 application, I have a Stimulus JS controller that uses AG-Grid to create a table. Each row in the table has an edit button, allowing editing of EDITABLE_FIELDS which are:

const EDITABLE_FIELDS = [
  "cheque_number",
  "comment",
  "payment_amount",
  "payment_date",
  "payment_method",
]

The thing is that cheque_number should be editable only when payment_method is CHEQUE. So I’ve got below grid options to make it work:

// https://www.ag-grid.com/javascript-data-grid/reference-data/#using-the-refdata-property
function buildEditablePaymentMethodsCollDef(paymentMethods) {
  return {
    cellEditor: 'agSelectCellEditor',
    cellEditorParams: {
      values: Object.keys(paymentMethods),
      useFormatter: true
    },
    editable: true,
    refData: paymentMethods,
    cellRenderer(params) {
      return paymentMethods[params.value]
    },
}
(...)

const columnOptions = {
  columnDefs: {
    cheque_number: { ...EDITABLE_TEXT_COL_DEF, cellClass: 'font-mono', maxWidth: 300, sortable: true, editable: params => params.data.payment_method === 'CHEQUE' },
    (...)
    payment_method: { cellClass: 'font-mono', maxWidth: 300, sortable: true },`

It works well, but payment_method is also an editable field. So, when a user changes it to CHEQUE (chosen from the dropdown), the cheque number field should become available as well. Currently, if the payment method is CHEQUE by default, it works fine. However, when a user changes it from, say, Wire to Cheque, the editable form for the cheque number doesn’t show up.