隐藏和禁用Reactable表中的全部/无复选框，并保持列对齐

问题描述

我希望从Shiny应用程序的Reactable表中删除所有/无复选框。 @Abdessabour Mtk提供了解决方案here。

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

是否可以隐藏和禁用复选框，从而不会遭受列未对齐的困扰？另外，页眉的阴影应保留到复选框列上方的空间。

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

解决方法

基本上，只需将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,selection = "multiple")
        })
    })
}  
shinyApp(ui,server)  

可与阴影配合使用的版本

ui <- fluidPage(reactableOutput("table"),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,selection = "multiple",columns = list(
                "Sepal.Length" = colDef(align = "left"),"Sepal.Width" = colDef(align = "left")
              ),defaultColDef = colDef(
                headerStyle = list(background = "brown"))
    )  
  })
  
}  
shinyApp(ui,server)  

,

Reactable的创建者here提供了不依赖于计时的答案。