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)

The link to the solution is wrong – xwhitelight Sep 22 '20 at 03:42 — xwhitelight, Sep 22 '20 at 03:42

Abdessabour Mtk · Accepted Answer · 2020-09-22T19:37:37.070

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)

Is it possible to keep the shading of the header row? I've added an example below your solution. — ixodid, Sep 22 '20 at 16:34
@ixodid you should edit the question. I'm working on an answer. — Abdessabour Mtk, Sep 22 '20 at 16:58
Very impressive @Abdessabour Mtk. My understanding of the 140-200ms timer is that we are waiting for the page to load before we can modify it. At 140ms, sometimes, the all/none checkbox appears. It would be better to be certain that the JavaScript runs only after the table or page has loaded. Is there a way to guarantee this programmatically with `onload=`? — ixodid, Sep 23 '20 at 00:39
If you return to the first post you'll find that I tried the event handling way, but shiny somehow fails to call them on the first occurence. And "DOMContentLoaded" fails because it's fired before the loading of the content. — Abdessabour Mtk, Sep 23 '20 at 05:18

score 1 · Answer 2 · answered Oct 03 '20 at 23:19

1

An answer that does not depend on timing is offered by the creator of Reactable, here.

answered Oct 03 '20 at 23:19

ixodid

2,180
1
19
46

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

2 Answers2

version that works with shading

Linked