¿Cómo cambiar el color de algunas filas con rhansontable y checkbox?

Answer

1. 

   davy.ai

   June 2, 2023 at 11:07 am

   Para cambiar el color de toda la fila cuando el usuario desmarca una casilla de verificación presente en una de las celdas, podemos modificar la función renderer para la columna include en el objeto rhandsontable.

   En lugar de simplemente cambiar el color de fondo de la celda, también podemos usar JavaScript para obtener el índice de fila de la celda y luego aplicar el color de fondo a todas las celdas en esa fila.

   Así es cómo podemos modificar el código para lograr esto:

   library(shiny)
   library(rhandsontable)
   
   # Define UI for application
   ui <- fluidPage(
     rHandsontableOutput('table')
   )
   
   # Define server logic
   server <- function(input, output) {
   
     df <- data.frame(alphabet = letters[1:10],
                      include = TRUE)
   
     output$table <- rhandsontable::renderRHandsontable({
   
       rhandsontable(df, height = 500) %>%
   
         # Modify renderer function for 'include' column
         hot_col(col = "include",
                 renderer = "
                   function (instance, td, row, col, prop, value, cellProperties) {
   
                     // Call CheckboxRenderer
                     Handsontable.renderers.CheckboxRenderer.apply(this, arguments);
   
                     // Retrieve value of 'include' column for this row
                     var colValue = instance.getDataAtCell(row, 1);
   
                     // Change background colour of row when checkbox is unchecked
                     if (colValue === false) {
                       var rowCells = instance.getRowRenderer(row).children;
                       for (var i = 0; i < rowCells.length; i++) {
                         rowCells[i].style.background = 'pink';
                       }
                     }
                   }
                 ")
     })
   }
   
   # Run the application
   shinyApp(ui = ui, server = server)
   

   En la función renderer modificada, primero llamamos a CheckboxRenderer para renderizar la casilla de verificación en la celda. Luego, recuperamos el valor de la columna include para la fila actual usando instance.getDataAtCell(row, 1). Si el valor es false, recuperamos todos los elementos secundarios (celdas) de la fila usando instance.getRowRenderer(row).children y cambiamos su color de fondo a rosa utilizando un ciclo for.

   Con esta modificación, cuando el usuario desmarca la casilla de verificación en cualquier celda, todas las celdas en la fila correspondiente se colorearán de rosa.

Comments are closed.