r - 从 Reactable 表中隐藏和禁用所有/无复选框并保持列对齐
问题描述
我希望从 Shiny 应用程序的 Reactable 表中删除 all/none 复选框。@Abdessabour Mtk在这里提供了一个解决方案。
但是,当实际删除复选框时,标题行左移并且列的左对齐受到影响。
是否可以隐藏和禁用复选框,从而不受列未对齐的影响?此外,标题的阴影应该延续到复选框列上方的空间。
此 R 脚本遮蔽标题行并删除复选框。您可以看到 Sepal.Length 和 Sepal.Width 列的错位。如果您注释掉,tags$head...
您会看到列正确对齐。
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)
解决方案
好的,基本上所有需要改变的就是display = "none"
即visibility = "hidden"
:
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)
与阴影一起使用的版本
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)
推荐阅读
- python - 如何将solve_ivp与sobol分析一起用于参数敏感性(在Python中)?
- uwp - RichEditBox PointerPressed 事件不会在 UWP 中触发?
- javascript - NextJs 身份验证与针对 DRF 的 Next-Auth
- git - 在我使用 VS Code 进行 Git Push/Pull 之前,无法看到 Vue.JS 开发服务器中的变化
- javascript - 鼠标在 HTML 文件中的颜色
- google-cloud-platform - 将数据从存储加载到 bigquery 时解析数据类型时出错
- r - R中小于87的孪生素数
- python - 我的代码正确执行布尔操作并限制操作中定义的变量值时遇到问题
- sql - SQL 每周数据更新
- javascript - 根据用户输入显示 Div