1

我reactable用来在我闪亮的应用程序中显示一个表格。Reactable 允许使用 R 函数或 JS 函数进行自定义单元格渲染。我试图在悬停单元格时使用 JS 函数呈现自定义<div>并对其进行操作。<div>

这是一个闪亮的例子：

shiny::shinyApp(ui = shiny::fluidPage(reactable::reactableOutput(outputId = "table")),
                server = function(input, output, session){
                  
                  data <- tibble::tibble(words = do.call(paste0, replicate(8, sample(LETTERS, 20, TRUE), FALSE))) |>
                    dplyr::rowwise() |>
                    dplyr::mutate(
                      same_content = as.character(
                        shiny::div(class = "same", style = "background-color: yellow", "HOVER ME")
                      ),
                      diff_content = as.character(
                        shiny::div(class = "diff", style = "background-color: yellow", sprintf("HOVER ME: %s", words))
                      )
                    )
                  
                  output$table <- reactable::renderReactable({
                    reactable::reactable(data = data, 
                                         columns = list(
                                           words = reactable::colDef(show = FALSE),
                                           same_content = reactable::colDef(html = TRUE, cell = htmlwidgets::JS(
                                             '
                                             $(function() {
                                                         $(".same").hover(
                                                           function() {
                                                             $(this).attr("style", "background-color: green");
                                                           },
                                                           function() {
                                                             $(this).attr("style", "background-color: yellow");
                                                           }
                                                         );
                                                       })
                                             '
                                           )
                                           ),
                                           diff_content = reactable::colDef(html = TRUE, cell = htmlwidgets::JS(
                                             '
                                             $(function() {
                                                         $(".diff").hover(
                                                           function() {
                                                             $(this).attr("style", "background-color: green");
                                                           },
                                                           function() {
                                                             $(this).attr("style", "background-color: yellow");
                                                           }
                                                         );
                                                       })
                                             '
                                           ))
                                         )
                    )
                  })
                }
)

在表格的第一页上，一切都按预期工作。导航到第二页时，只有第一列中的 div 会更改其背景颜色。第二列被黄色卡住了。当切换回第一页时，之前工作的第二列不再改变它的背景颜色。

有没有办法在切换到表格的第二页后“重新应用”该功能，或者有没有更好的方法来操纵悬停时的单元格内容？

4

1 回答 1

1

问题是你真的需要JS来改变悬停颜色吗？如果没有，一些简单的 CSS 可以解决问题：

shiny::shinyApp(
    ui = shiny::fluidPage(
        reactable::reactableOutput(outputId = "table"),
        shiny::tags$style('.same:hover {background-color: green !important; } .diff:hover {background-color: green !important;}')
    ),
    server = function(input, output, session){
        
        data <- tibble::tibble(words = do.call(paste0, replicate(8, sample(LETTERS, 20, TRUE), FALSE))) |>
            dplyr::rowwise() |>
            dplyr::mutate(
                same_content = as.character(
                    shiny::div(class = "same", style = "background-color: yellow", "HOVER ME")
                ),
                diff_content = as.character(
                    shiny::div(class = "diff", style = "background-color: yellow", sprintf("HOVER ME: %s", words))
                )
            )
        
        output$table <- reactable::renderReactable({
            reactable::reactable(data = data, 
                                 columns = list(
                                     words = reactable::colDef(show = FALSE),
                                     same_content = reactable::colDef(html = TRUE),
                                     diff_content = reactable::colDef(html = TRUE)
                                 )
            )
        })
    }
)
于 2022-02-18T20:56:36.230 回答