title: Manipulating table cells
body: <p>I have an object that looks like this:</p>
  
  <pre><code>{1: "Manchester", 2: "London", 3: "Bristol", 4: "Birmingham", 5: "Liverpool", 6: "Newcastle", 7: "York", 8: "Edinburgh", 9: "Glasgow", 10: "Aberdeen"}
  </code></pre>
  
  <p>I am using this object to create a select list in the cell of a table in a column called "city". When this value changes I want to update the value of another cell in a column called "id" with the key from the object (which equates to the id).</p>
  
  <p>Is there a way in which I can bind the change in one cell with the other. I'm struggling to figure it out. </p>
  
  <p>One thing I should mention is that this is a basic use case, in reality the values and keys could be anything so I need a dynamic way to select the corresponding column to update when the value in the select field is changed.</p>
  
  <p>Any help with this would be much appreciated.</p>
  
  <p>Thanks for your time.</p>
  
  <p>UPDATE:</p>
  
  <p>I am using a data-grid component called Ag-Grid to generate the table and then I am creating my select field like this:</p>
  
  <pre><code>function customEditor(params) {
      let editing = false;
      let setSelectionOptions = TableStore.getTable().lookups[0].map;
  
      let eCell = document.createElement('span');
      let eLabel = document.createTextNode(params.value);
      eCell.appendChild(eLabel);
  
      let eSelect = document.createElement('select');
  
      Object.keys(setSelectionOptions).forEach(key =&gt; {
          let eOption = document.createElement('option');
          eOption.setAttribute('value', setSelectionOptions[key]);
          eOption.innerHTML = setSelectionOptions[key];
          eSelect.appendChild(eOption);
      }); 
      eSelect.value = params.value;
  
      eCell.addEventListener('click', () =&gt; {
          if (!editing) {
              eCell.removeChild(eLabel);
              eCell.appendChild(eSelect);
              eSelect.focus();
              editing = true;
          }
      });
  
      eSelect.addEventListener('blur', () =&gt; {
          if (editing) {
              editing = false;
              eCell.removeChild(eSelect);
              eCell.appendChild(eLabel);
          }
      });
  
      eSelect.addEventListener('change', () =&gt; {
          if (editing) {
              editing = false;
              let newValue = eSelect.value;
              params.data[params.colDef.field] = newValue;
              eLabel.nodeValue = newValue;
              eCell.removeChild(eSelect);
              eCell.appendChild(eLabel);
          }
      });
  
      return eCell;
  }
  </code></pre>
  
  <p>where params is provided by the grid functionality and in this case is used to set the new value to go into the cell, and <code>setSelectionOptions</code> is the object I previously mentioned. What I now need to do is select the other relevant column and change the value in there to the correct corresponding value.</p>