I've been using Tabulator, which is an amazing tool, but I've run into a little trouble. I'm trying to add an HTML Select in each row, with options specific to each record. When I change the select option, I call a function and successfully retrieve the cell data using cell.getData(). However, I'm having difficulty figuring out how to also get the value of the selected option.
Here's what I'm attempting to achieve
Here's a snippet of my code:
var selectHTML = function() {
return '<select class="custom-select" id="select1" name="select1"><option value="0">Select</option><option value="1">Option 1</option><option value="2">Option 2</option></select>';};
var table = new Tabulator("#example-table", {
langs: {
"es-es": {
"pagination": {
"first":"Primer página",
"first_title":"Primer página",
"last":"Última página",
"last_title":"Última página",
"prev":"Anterior",
"prev_title":"Anterior",
"next":"Siguiente",
"next_title":"Siguiente",
"page_size":"Resultados a mostrar"
},
"ajax":{
"loading":"Cargando",
"error":"Error"
},
},
},
height:"500",
layout:"fitColumns",
placeholder:"Sin datos",
responsiveLayout:true,
pagination:"local",
paginationSize:10,
paginationSizeSelector:[3, 6, 8, 10, 50],
movableColumns:true,
columns:[
{title:"Zipcode", field:"zipcode", sorter:"number"},
{title:"Productor", field:"nombre", sorter:"string"},
{title:"Action", formatter:selectHTML, cellClick:function(e, cell){
var selectedValue = cell.getElement().find("#select1").val();
test(selectedValue, cell.getData());
}},
{title:"", formatter:editIcon, align:"center", cellClick:function(e, cell) {
var data = cell.getData();
modifyName(data);
}},
],
locale:"es-es"
});
function test(selectedOption, data) {
if(selectedOption != 0) {
alert("Chosen option: " + selectedOption);
}
}
Any insights would be greatly appreciated. Thank you!