0

我希望从 Shiny 应用程序的 Reactable 表中删除 all/none 复选框。@Abdessabour Mtk在这里提供了一个解决方案。

但是，当实际删除复选框时，标题行左移并且列的左对齐受到影响。

是否可以隐藏和禁用复选框，从而不受列未对齐的影响？此外，标题的阴影应该延续到复选框列上方的空间。

此 R 脚本遮蔽标题行并删除复选框。您可以看到 Sepal.Length 和 Sepal.Width 列的错位。如果您注释掉，tags$head...您会看到列正确对齐。

library(shiny)
library(reactable)

ui <- fluidPage(reactableOutput("table"),
                
                tags$head(tags$script(HTML('
                setTimeout(()=>{
                    document.querySelector(\'#table .rt-select-input[aria-label="Select all rows"]\').parentElement.parentElement.style.display="none";
                }, 200)
        ')))
)

server <- function(input, output, session) { 
  output$table <- renderReactable({ 
    reactable(iris,
              onClick = "select",
              selection = "multiple",
              columns = list(
                "Sepal.Length" = colDef(align = "left"),
                "Sepal.Width" = colDef(align = "left")
              ),
              defaultColDef = colDef(
                headerStyle = list(background = "brown"))
    )  
  })
  
}  
shinyApp(ui, server)
4

2 回答 2

1

好的，基本上所有需要改变的就是display = "none"即visibility = "hidden"：


ui <- fluidPage(reactableOutput("table"),
    actionButton("button", "refresh"),
    tags$head(tags$script(HTML('
            setTimeout(()=>{
                document.querySelector(\'#table .rt-select-input[aria-label="Select all rows"]\').parentElement.parentElement.style.visibility="hidden";
            }, 125)
    ')))
)

server <- function(input, output, session) { 
  output$table <- renderReactable({ 
    reactable(iris,
              onClick = "select",
              selection = "multiple")
    })
    observeEvent(input$button, {
    output$table <- renderReactable({ 
    reactable(mtcars,
              onClick = "select",
              selection = "multiple")
        })
    })
}  
shinyApp(ui, server)

与阴影一起使用的版本

ui <- fluidPage(reactableOutput("table"),
                actionButton("button", "refresh"),
                tags$head(tags$script(HTML('
            setTimeout(()=>{
                div=document.createElement("div");
                div.style="background: brown; flex: 36 0 auto; width: 36px; max-width: 36px;";
                rep= document.querySelector(\'#table .rt-select-input[aria-label="Select all rows"]\').parentElement.parentElement;
                div.style.background=rep.style.background;
                div.className = "rt-th";
                rep.replaceWith(div);
            }, 140)
    ')))
)
server <- function(input, output, session) { 
  output$table <- renderReactable({ 
    reactable(iris,
              onClick = "select",
              selection = "multiple",
              columns = list(
                "Sepal.Length" = colDef(align = "left"),
                "Sepal.Width" = colDef(align = "left")
              ),
              defaultColDef = colDef(
                headerStyle = list(background = "brown"))
    )  
  })
  
}  
shinyApp(ui, server)
于 2020-09-22T07:06:42.853 回答
1

Reactable 的创建者在这里提供了一个不依赖于时间的答案。

于 2020-10-03T23:19:15.503 回答