从Reactable表中删除check all/none复选框

Question

我要从Reactable表格中删除check all/none复选框。在此图像中，我不希望出现橙色带圆圈的复选框。

​

使用Chrome Inspector，我检查了这个复选框的css并设置了display: none;

​

这将删除整个复选框列。如何只删除这一个？

R脚本

library(reactable)

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

Answer 1

你可以附加一些javascript代码，让它在reactable被渲染时运行：

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

最终的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)))

改进

为了简化流程并明确指向所需的复选框(因为前面提到的方法在处理同一页面中的两个表时不会成功)，我编写了一个函数来动态定位所需的复选框：

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)