cssrreactable

Remove check all/none checkbox from Reactable table


I want to remove the check all/none checkbox from a Reactable table. In this image, I do not want the orange circled checkbox to appear. enter image description here

Using Chrome Inspector, I examine the css of this checkbox and set display: none; enter image description here

This removes the entire column of checkboxes. How do I remove just this one?

R Script

library(reactable)

reactable(iris,
          onClick = "select",
          selection = "multiple") 

Solution

  • U can append some javascript code and make it run when the reactable is rendered: ie

    // Hide  the select all check box
    document.querySelector('.rt-select-input[aria-label="Select all rows"]').parentElement.parentElement.style.display = "none";
    

    The final R-code

    library(reactable)
    library(htmlwidgets)
    e<-reactable(iris,
              onClick = "select",
              selection = "multiple")
    
    javascript <- JS('
    document.querySelector(\'.rt-select-input[aria-label="Select all rows"]\').parentElement.parentElement.style.display="none";
    ')
    
    
    
    (p <- prependContent(e,onStaticRenderComplete(javascript)))
    

    Improvements

    In order to streamline the process and specifically target the wanted checkbox (as the aforementioned method would be unsuccessful when handling 2 tables in the same page) I wrote a function that'll dynamically target the wanted checkbox:

    
    hide.select.all <- function(x){
      javascript <- JS(paste0('
      let id = null;
      for (const script of document.querySelectorAll("script[data-for]")) {
        if(script.text.includes("', x$x$tag$attribs$dataKey ,'")) {
          id="#" + script.dataset.for;
          break;
        }
      }
      if(id) document.querySelector(id + \' .rt-select-input[aria-label="Select all rows"]\').parentElement.parentElement.style.display="none";
      ')) 
       prependContent(x,onStaticRenderComplete(javascript))
    }
    
    hide.select.all(e)