Tabulator Add column with button in each row

Question

I'm using javaScript library called Tabulator trying to add column and allow users to have the ability to upload 1 image file in each row .

( i only use JavaScript not Jquery) I saw this link https://github.com/olifolkerd/tabulator/issues/153 which helped a lot but didn't cover it all.

I've gone as far as adding a new column with a button in each row but i need to be able to add some sort of ID for each row so i can select it and connect it to Form that will post the image to my back-end server.

i couldn't find any document about how I can do this with this library but i have found some answers which have let me to this point.

var openButton = function(value, data, cell, row, options){ //plain text value
var button ='<button>upload ID </button>';

    button.addEventListener('click',function(){
    console.log("button is working");
});

return button;
};

I keep getting Error on my Console button.addEventListener is not a function

Answer 1

i finally figured out

first must add the variable that contain the function

var the_Function = function(cell, formatterParams, onRendered){ //plain text value

  //var formA = '<form class="" action="/upload" method="post">'
  //var inputFn = '<input type="file" id="imgupload" />' ;
  //var uploadBtnn = '<button type="submit" id="OpenImgUpload">ID upload</button></form>'
//return uploadBtnn
return "<i class='fa fa-print'>function_trigger</i>";
};

then we must add the formatter to the column's

table.addColumn({title:"ID", field: "ID" ,formatter:the_Function,width:100, align:"center",cellClick:function(e, cell){ 

//button's function for example 
var Btn = document.createElement('Button');
Btn.id = "Btn_Id";
console.log(Btn);


}