Esto es algo similar al formato de fila del tabulador que elimina el efecto de desplazamiento, mientras que el formato de celda no lo hace , pero no exactamente.
Necesita cambiar los colores de la tabla dinámicamente (específico del usuario). Por lo tanto, anulo las clases CSS de Tabulator que funcionan bien. Pero cuando uso un cellFormater para cambiar el color de fondo de la celda, ni el color de fondo flotante ni el color de fondo seleccionado funcionan.
Para ser más claro (con suerte): quiero establecer el color de fondo para columnas y celdas congeladas con valores específicos. Y quiero mantener el color de fondo seleccionado y pasar el color de fondo.
Como soy nuevo en CSS, estaría agradecido si alguien pudiera ayudarme a solucionar esto.
Modifiqué Codesandbox del otro hilo para demostrar. Las celdas verdes y amarillas se colorean con cellFormatter. Las líneas 3 y 4 están seleccionadas y deben ser de color rosa. El color de fondo del cursor debe ser negro para las filas completas. Como puede ver, el problema también ocurre con los colores del texto. Captura de pantalla
Intentar con estas clases falla (¡importante fue un intento desesperado):
.tabulator-row.tabulator-selected { background-color: rgb(250, 34, 203) !important; } .tabulator-row:hover { background-color: rgb(0, 0, 0) !important; color: rgb(0, 119, 255) !important; font-weight: 900; } .tabulator-frozen:hover { background-color: rgb(238, 5, 5) !important; color: rgb(154, 195, 243) !important; }Notas al margen:
.tabulator-row .tabulator-cell:hover funciona para una sola celda.tabulator-row .tabulator-frozen:hover solo funciona cuando el cursor está sobre una celda congeladaEncontré una solución que me parece un poco extraña, pero ahora todo funciona como se esperaba. (Excepto las columnas congeladas a la derecha) Al seleccionar y pasar el mouse, configuro todos los colores de fondo de las celdas en transparentes y hago una copia de seguridad del color de fondo calculado. Al anular la selección y quitar el mouse, restablezco los colores de fondo a los colores respaldados.
Soy consciente de que estos cambios de estilo anulan el css, lo que seguramente es la razón por la que las columnas congeladas de la derecha están grises en la selección y el desplazamiento...
Agregué controladores para
function backupColorAndSetTransparent(cellEl) { let cellCol = window .getComputedStyle(cellEl, null) .getPropertyValue("background-color"); if (cellCol && cellCol !== "rgba(0, 0, 0, 0)") { var attribute = document.createAttribute("backupCellBackColor"); attribute.value = window .getComputedStyle(cellEl, null) .getPropertyValue("background-color"); cellEl.setAttributeNode(attribute); } cellEl.style.backgroundColor = "rgba(0, 0, 0, 0)"; } var table = new Tabulator("#example-table", { data: data, selectable: true, rowMouseOver: function (e, row) { row.getCells().forEach((cell) => { let cellEl = cell.getElement(); backupColorAndSetTransparent(cellEl); }); }, rowMouseOut: function (e, row) { row.getCells().forEach((cell) => { let cellEl = cell.getElement(); if (cellEl.getAttribute("backupCellBackColor") && !row.isSelected()) { cellEl.style.backgroundColor = cellEl.getAttribute( "backupCellBackColor" ); } if (!row.isSelected()) { cellEl.removeAttribute("backupCellBackColor"); } }); }, rowDeselected: function (row) { row.getCells().forEach((cell) => { let cellEl = cell.getElement(); if (cellEl.getAttribute("backupCellBackColor")) { cellEl.style.backgroundColor = cellEl.getAttribute( "backupCellBackColor" ); } }); }, rowSelected: function (row) { row.getCells().forEach((cell) => { let cellEl = cell.getElement(); backupColorAndSetTransparent(cellEl); }); }, /* ...*/ }¡Con el CSS correcto esto es realmente fácil!
.tabulator-cell a .tabulator-row.tabulator-selected y .tabulator-row.tabulator-selected hace el truco!
.tabulator-row.tabulator-selected .tabulator-cell{ background-color: rgba(247, 101, 213, 0.8) !important; } .tabulator-row:hover { background-color: rgb(0, 0, 0) !important; color: rgb(0, 119, 255) !important; font-weight: 900; } .tabulator .tabulator-row.tabulator-selectable:hover .tabulator-cell{ background-color: rgba(238, 5, 5, 1) !important; color: rgb(154, 195, 243); }