Remove all/none check box from Reactable table

[ixodid198]

Within a Shiny app, I wish to remove the all/none check box from a Reactable table because I wish to limit the number of checkboxes allowed.

With the generous help of Stackoverflow I have a solution. That involves waiting a fixed amount of time and then removing the all/none checkbox. This works well unless the page takes an unusually long time to load. Then it will fail.

The author of the solution, Abdessabour Mtk, explains it thus:

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.

I am wondering if there is a more reliable way to remove the check all/none check box?

Example Code

# No JavaScript solution for removing the check all/none check box from a Reactable table

library(reactable)
library(tidyverse)

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);
                          }, 500)
                  ')),
))

server <- function(input, output, session) { 
  output$table <- renderReactable({ 
    reactable(iris,
              onClick = "select",
              selection = "multiple",
              defaultColDef = colDef(
                headerStyle = list(background = "brown"))
              )
  })

  
}  
shinyApp(ui, server) 

[glin]

This might be supported out-of-the-box if selection columns ever support custom rendering (#82 (comment)), but for now, you'll probably have to hack it in.

That JavaScript solution looks really fragile to me. I think I would recommend hiding the "select all" checkbox using CSS instead, so that the checkbox is still there but hidden and non-interactable.

I would use either a reactableTheme() or regular CSS to:

1. Style the selection column header checkbox with display: none to hide the checkbox
2. Style the selection column header cell with pointer-events: none to disable clicking on the cell. (The entire cell can be clicked to toggle selection, not just the checkbox.)

Here's a theme way to do it:

reactable(
  mtcars,
  selection = "multiple",
  columns = list(
    .selection = colDef(
      headerStyle = list(pointerEvents = "none")
    )
  ),
  theme = reactableTheme(
    headerStyle = list("& input[type='checkbox']" = list(display = "none"))
  )
)

The regular CSS way might look something like this:

reactable(
  mtcars,
  selection = "multiple",
  columns = list(
    .selection = colDef(
      headerClass = "hide-checkbox"
    )
  )
)

.hide-checkbox {
  pointer-events: none;
}

.hide-checkbox input[type='checkbox'] {
  display: none;
}

[ixodid198]

Much better. Thank-you. I have updated my SO question with reference to your answer here. Reactable is a great, well-documented package.