Estoy usando Tabulator para crear tablas. Tengo un icono de eliminación (icono de papelera personalizado) para cada fila. Pero la activación del evento onclick en el icono personalizado no funciona.
Aquí está mi código:
{formatter: deleteBtn, title:"Action"} let deleteCallback = function(e, cell) { cell.getRow().delete(); }; let deleteBtn = function(cell, formatterParams, onRendered) { return `<span onclick="deleteCallback('${cell}')"><i class="fa fa-trash"></i></span>`; }; El botón se muestra correctamente. Sin embargo, cuando hago clic en el botón, aparece un error que dice: Uncaught TypeError: Cannot read properties of undefined (reading 'getRow') . Básicamente cell no está undefined .
Hay un evento cellClick que activa la acción, sin embargo, no quiero eso. Me gustaría que se haga clic en el botón dentro de la celda en lugar de en la celda misma.
¿Cómo hago para que esto funcione?
Gracias
Puede definir su propio formateador deleteButton como.
Tabulator.extendModule( "format", "formatters", (function () { return { deleteButton: function (cell) { const deleteCallback = () => { cell.getRow().delete(); }; let span = document.createElement("span"); let icon = document.createElement("i"); icon.className = "fa fa-trash-o"; icon.addEventListener("click", deleteCallback); span.append(icon); return span; }, }; })());Aquí hay un codepen que funciona para usted
Aún así, sugiero usar "eventDelegation" para su código.