Actualmente estoy jugando con Tabulator (específicamente React-Tabulator) para hacer una prueba de concepto en mi proyecto.
Uno de mis requisitos es tener botones entre las secciones de mis árboles de datos.
Entonces, en mi proyecto tengo departamentos, y cada departamento tiene empleados (es por eso que usé árboles de datos) y luego quiero tener 2 botones (Agregar empleado, Agregar puesto) que se mostrarán en la última fila de cada departamento.
Entonces, mi plan actual es tener una clave en la última columna y usar el Formateador de filas para cambiarlo al estilo de botón deseado, luego será capturado por el evento Click Cell
...{name: Mike Smith, position: dev}, { name: "Add Position" }usando el ejemplo como referencia: http://tabulator.info/examples/5.1#row-formatter
rowFormatter = (row) => { var element = row.getElement(); var data = row.getData(); if (data.name == "Add Position") { var width = element.offsetWidth, rowTable, cellContents, rowTableTransfer; while (element.firstChild) element.removeChild(element.firstChild); rowTable = document.createElement("div") rowTable.id = "add_position" rowTable.style.width = (width - 18) + "px"; rowTable.style.padding = "2vh"; rowTable.className = "tabulator-cell"; cellContents = "Add Position" rowTable.innerHTML = cellContents; rowTableTransfer = document.createElement("div") rowTableTransfer.style.width = (width - 18) + "px"; rowTableTransfer.style.padding = "2vh"; var rowTabletrTransfer = document.createElement("div"); cellContents = "<a>Add Position</a>" rowTabletrTransfer.innerHTML = cellContents; rowTableTransfer.appendChild(rowTabletrTransfer); element.append(rowTable); element.append(rowTableTransfer); } };Esto es bastante básico ya que mi mayor problema es que después de hacer esto recibo este error:
Uncaught TypeError: component.getComponent is not a functionIntenté copiar el formato exactamente desde una celda pero sigo recibiendo ese error.
¿Qué me estoy perdiendo?
No debería usar el formateador de filas para agregar una celda personalizada, es probable que rompa el formato de la columna si lo intenta.
Debe agregar una columna en blanco con un formateador personalizado para lograr esto.
Eche un vistazo a la Documentación del formateador de columnas de botones y el Ejemplo de formateadores para obtener más detalles.
Entonces, mi problema principal es que el evento CellClick ya no se registra en mis elementos recién creados. Entonces, el mejor trabajo que encontré es que, en lugar de eliminar todas las celdas, voy a usar las primeras 2 celdas (secundarias de Fila) y agregarle mi elemento modificado, luego elimino el resto de las celdas secundarias (para poder estirar el ancho de la celda sin estirar toda la tabla)
Aquí está mi código de prueba de concepto:
rowFormatter = (row) => { var element = row.getElement(); var data = row.getData(); if (data.actions == "true") { var rowTable, cellContents, rowTabletrTransfer; for (let i = element.children.length - 1; i > 1; i--) { element.removeChild(element.children[i]); } var cellAddPosition = element.children[0]; var cellTransferIn = element.children[1]; rowTable = document.createElement("div") rowTable.id = "add_position" rowTable.className = "headcount-action headcount-actions-table" cellContents = "Add Position" rowTable.innerHTML = cellContents; rowTabletrTransfer = document.createElement("div"); rowTabletrTransfer.id = "transfer_in" rowTabletrTransfer.className = "headcount-action headcount-actions-table" cellContents = "Transfer In" rowTabletrTransfer.innerHTML = cellContents; cellAddPosition.style.minWidth = "25vh"; cellAddPosition.style.maxWidth = "25vh"; cellTransferIn.style.minWidth = "25vh"; cellTransferIn.style.maxWidth = "25vh"; cellAddPosition.append(rowTable); cellTransferIn.append(rowTabletrTransfer); } };Creé una columna de acciones que está oculta para señalar que la fila sería para los botones de acción.
La única parte desagradable es que confío en el nombre de la celda como la clave en la que se hace clic en el botón. Un poco complicado, pero este es el mejor trabajo que obtuve