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

This is clearly explained at Tabulator: http://tabulator.info/examples/3.1

//Generate print icon
var printIcon = function(cell, formatterParams){ //plain text value
    return "<i class='fa fa-print'></i>";
};

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    rowFormatter:function(row){
        if(row.getData().col == "blue"){
            row.getElement().css({"background-color":"#A6A6DF"});
        }
    },
    columns:[
    {formatter:"rownum", align:"center", width:40},
    {formatter:printIcon, width:40, align:"center", cellClick:function(e, cell){alert("Printing row data for: " + cell.getRow().getData().name)}},
    {title:"Name", field:"name", width:150, formatter:function(cell, formatterParams){
       var value = cell.getValue();
        if(value.indexOf("o") > 0){
            return "<span style='color:red; font-weight:bold;'>" + value + "</span>";
        }else{
            return value;
        }
    }},
    {title:"Progress", field:"progress", formatter:"progress", sorter:"number", width:100},
    {title:"Rating", field:"rating", formatter:"star", formatterParams:{stars:6}, align:"center", width:120},
    {title:"Driver", field:"car", align:"center", formatter:"tickCross", width:50},
    {title:"Col", field:"col" ,formatter:"color", width:50},
    {title:"Line Wraping", field:"lorem" ,formatter:"textarea"},
    {formatter:"buttonCross", width:30, align:"center"}
    ],
});

This is how I used it by triggering a window.location to the edit page:

<script>
                        //Generate Edit icon
                        var editIcon = function(cell, formatterParams){ //plain text value
                            return "<i class='fas fa-pen-square'></i>";
                            };
                        //define data array
                        var tabledata = [
                                <?php echo $tableData; ?>
                            ];

                        var table = new Tabulator("#example-table", {
                            data:tabledata,           //load row data from array
                            layout:"fitColumns",      //fit columns to width of table
                            responsiveLayout:"hide",  //hide columns that dont fit on the table
                            tooltips:true,            //show tool tips on cells
                            addRowPos:"top",          //when adding a new row, add it to the top of the table
                            history:true,             //allow undo and redo actions on the table
                            pagination:"local",       //paginate the data
                            paginationSize:20,         //allow XX rows per page of data
                            movableColumns:false,      //allow column order to be changed ?
                            resizableRows:false,       //allow row order to be changed ?
                            initialSort:[             //set the initial sort order of the data
                                {column:"name", dir:"asc"},
                            ],
                            columns:[                 //define the table columns
                                
                                {title:"Department", field:"userDeptName", editor:false},
                                {title:"Description", field:"userDeptDesc", editor:false},
                                {formatter:editIcon, width:40, align:"center", cellClick:function(e, cell){
                                            alert("Going To: " + cell.getRow().getData().userDeptName);
                                            window.location = "/account-departments/"+ cell.getRow().getData().userDeptName;
                                            }},
                                ],
                            });
                        </script>

Answer 2

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);


}

Answer 3

You can't attach event listeners to string values.

You need to first create the element by appending it to .innerHTML of another DOM element.

Then you will need to attach a click event listener on the document itself, not the element you dynamically created, because addEventListener will only work for elements that are part of the HTML tree when the javascript is initially loaded.

function add_button() {

var uid = "btn_" + document.querySelectorAll("button").length;
var button ='<button id='+ uid +'>upload ID </button>';
document.getElementById("buttons").innerHTML += button;


document.addEventListener('click',function(e){
    if(e.target && e.target.id== uid){
       console.log("button " + uid + " is working");
    }
});
}

add_button();
add_button();

<div id="buttons">
</div>