隐藏并禁用 Reactable table 中的 all/none 复选框并保持列对齐

Question

我想从 Shiny 应用程序的 Reactabletable 中删除 all/none 复选框。 @Abdessabour Mtk 提供了一个解决方案 .

但是，当实际删除复选框时，header 行向左移动并且 left-alignment 列受到影响。

是否可以隐藏和禁用复选框，从而不受列错位的影响？此外，header 的阴影应延续到复选框列上方的 space。

此 R 脚本为 header 行添加阴影并删除复选框。您可以看到 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)

Answer 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)

Answer 2

Reactable 的创建者提供了一个不依赖于时间的答案，here。

隐藏并禁用 Reactable table 中的 all/none 复选框并保持列对齐

Hide and disable all/none checkbox from Reactable table and maintain column alignment

r

shiny

reactable

支持阴影的版本