title: Google Chart Tables: Edit cells
body: <p>Is there a way to edit a google chart table cell?.</p>
  
  <p>I need to edit the cells at the 'Salary' column only. Then verify the new value it's not greater than the value at 'Max Salary' column.</p>
  
  <p>So far I been able only to get the row and column when clicked.</p>
  
  <p>This is the example code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>google.load('visualization', '1', {
      packages: ['table']
  });
  google.setOnLoadCallback(drawTable);
  var row, col;
  function drawTable() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Name');
      data.addColumn('number', 'Salary');
      data.addColumn('number', 'Age');
      data.addColumn('number', 'Max Salary');
      data.addRows([
        ['Mike', {
            v: 10000,
            f: '$10,000'
        },
          30,
         50000
        ],
        ['Jim', {
            v: 8000,
            f: '$8,000'
        },
          25,
         50000
        ],
        ['Alice', {
            v: 12500,
            f: '$12,500'
        },
          43,
         50000
        ],
        ['Bob', {
            v: 7000,
            f: '$7,000'
        },
          50,
         50000
        ]
      ]);
      
      var table = new google.visualization.Table(document.getElementById('table_div'));
      google.visualization.events.addListener(table, 'select', function(){
          selectHandler(table);
      });
      
    function selectHandler(table) {
    var selection = table.getSelection();
    if(selection.length === 0)
        return;
  
    var cell = event.target; //get selected cell
    row = selection[0].row;
    col = cell.cellIndex;
    document.getElementById('output').innerHTML = "Row: " +  selection[0].row + " Column: " +  cell.cellIndex;
    
  }
    
      table.draw(data, {
          showRowNumber: false      
      });  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;div id="table_div"&gt;&lt;/div&gt;
  &lt;div id="output"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>