title: Tabulator. How to enable and disable editing from js
body: <p>I'm using tabulator (fantastic thing), which has a built in, in line editing functionality.</p>
  
  <p>The thing is though, it's either on or off by having the editor tag on a column basis.
  You can disable the editor for a given cell as well.</p>
  
  <p>What I'm trying to do is to have the table displayed as read only so to say.
  Then click on a 'edit' button (which is in my table and I capture the click). That would in turn enable the inline, built-in editor functionality for that raw only.
  Then I click a save button, write the updated data back to my DB and make the row read-only again.</p>
  
  <p>So, with tabulator 4.2, I'd be looking for something like</p>
  
  <pre><code>var usrtable = new Tabulator("#usrtable", {
          ajaxURL:"/account/cgi-bin/getallusers.php",
          resizableColumns:false,
          tooltips:true,
          history:true,
          pagination:"local",
          paginationSize:10,
          paginationSizeSelector:true,
          reactiveData:true,
          selectable:true,
          initialSort:[{column:"username", dir:"asc"},],
          columns:[
              { formatter: editIcon, width: 40, sortable: false, align: "center", cellClick:  function (e, cell) {
                      var id = cell.getRow().getData().id;
                      row(id).editable=true;
                      /\/\/\/\/\/\/\/\/\/\/\
                  }
              },
              {title:"Id", field:"id", visible:false},
              {title:"Username", field:"username", width:80, editor:"input"},
              {title:"Password", field:"password", width:70, editor:"input"},
              {title:"Role", field:"role", width:70, align:"center", formatter:"plaintext", editor:"select", editorParams:{values:["user","admin"]}},
              {title:"Change passwd", field:"changepasswd", width:90,  align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
          ],
      });
  </code></pre>
  
  <p>Is that somehow possible or do I have to re-invent the wheel? i.e. create a model to edit the data outside the table?</p>
  
  <p>What I have tried.....
  Once rendered, a cell looks like this:</p>
  
  <pre><code>&lt;div class="tabulator-cell" role="gridcell" tabulator-field="username" tabindex="0" title="test" style="width: 80px; height: 29px;"&gt;test&lt;/div&gt;
  </code></pre>
  
  <p>And when you click on the cell, it becomes editable and the class 'tabulator-editing' is added to the div.
  So..... I though I could 'just' catch the click event and do something like this:</p>
  
  <pre><code>$(".tabulator-cell").on("click",function(){
          ($this).removeClass("tabulator-editing");
      });
  </code></pre>
  
  <p>that didn't work so tried this:</p>
  
  <pre><code>$(".tabulator-cell").on("click",function(e){
          e.preventDefault();
      });
  </code></pre>
  
  <p>that didn't work either.
  When doing this:</p>
  
  <pre><code>$(".tabulator-cell").on("click",function(){
          alert("cell clicked");
      });
  </code></pre>
  
  <p>it actually never fires... :-(</p>
  
  <p>Either I'm doing something wrong or really do not know where to go from here....</p>