Tabulator (4.1) replacing new Column value/ formatter

Question

I've added a new column in Tabulator with this column definition

table.addColumn({title:"idCopy", field: "idCopy" ,sortable:false, formatter:uploadID,width:100, align:"center",cellClick:function(e, cell){
  function selected(){
    var fileName = formInput.value;
    cell.getRow().getData().idCopy = fileName;

  }
var f = document.createElement("form");
var formInput = document.createElement('input');
formInput.onclick = "selected(cell,f,formInput)" ;
var s = document.createElement("input");
s.setAttribute('type',"submit");
f.appendChild(formInput);
f.appendChild(s);
f.onClick = formInput.click();
}}, false);

I've added more lines to define each form with ID similar to this f.id = "f_" + cell.getRow().getData().id ; so each form is unique and uploadID function look like this

  var uploadID = function(cell, formatterParams, onRendered){ 

return "<i class='fa fa-print'>upload ID</i>";

which is what i got from the official resources http://tabulator.info/docs/4.1/format#icon the problem is whenever i pick the file cell.getRow().getData().idCopy has the value of fileName which is exactly what i wanted but on the table's cell it still says upload ID instead of the value of fileName's value

so the user will have no idea that he have just picked the file and the system is ready to upload it.

is there is a way to replace upload ID with the fileName value or refresh those cells ?

Answer 1

If you are changing any data in the row then you need to call the update function on the row component for that row, passing in the updated data parameters:

row.update({id:"f_" +  cell.getRow().getData().id});

this will then update the values correctly

Answer 2

I've fixed it by applying row reformat

first I've added a condition in var uploadID = function(cell, formatterParams, onRendered){}

for example :

var uploadID = function(cell, formatterParams, onRendered){ //plain text value
var x = cell.getValue();
if ( x == null ){ // do something}
else{ // do something }
return /*something*/;

then in cellClick:function(e, cell){}

I've added the following at the end of my code

    var row = cell.getRow();
    row.reformat();