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

Question

I wish to remove the all/none checkbox from a Reactable table in a Shiny app. @Abdessabour Mtk has provided a solution here.

However, when the checkbox is actually removed, the header row shifts left and the left-alignment of the columns is impacted.

Is it possible to hide and disable the checkbox and thus not suffer from the column misalignment? Also, the shading of the header should carry over to the space above the column of checkboxes.

This R script shades the header row and removes the checkbox. You can see the misalignment of the Sepal.Length and Sepal.Width columns. If you comment out the tags$head... you see the columns in proper alignment.

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

Okay basically all that is needed to change is display = "none" to visibility = "hidden" i.e :

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)  

version that works with shading

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)