时间戳

首页 > 解决方案 > 突出显示 R Reactable 已经具有默认背景标题样式的排序标题？

css - 突出显示 R Reactable 已经具有默认背景标题样式的排序标题？

问题描述

从这里（请参阅突出显示已排序的标题）我了解如何突出显示已排序的标题。如果标题已经有背景颜色，是否可以修改此方法以突出显示已排序的标题列？

突出显示排序的标题 - 无默认背景底纹（作品）

library(shiny)
library(reactable)

ui <- fluidPage(
  theme = "test.css",
  reactableOutput("table")
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(iris,
              defaultColDef = colDef(
              
                # Use css to style the header of the sorted column
                headerClass = "sort-header")
    )
  })
}

shinyApp(ui, server)

突出显示已排序的标题 - 使用默认背景底纹（失败）

library(shiny)
library(reactable)

ui <- fluidPage(
  theme = "test.css",
  reactableOutput("table")
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(iris,
              defaultColDef = colDef(
                headerStyle = list(background = "#00FF00"),
                
                # Use css to style the header of the sorted column
                headerClass = "sort-header")
    )
  })
}

shinyApp(ui, server)

测试.css

.sort-header[aria-sort="ascending"],
.sort-header[aria-sort="descending"] {
  background: rgba(255, 0, 0, 1);
}

标签： cssrreactable

解决方案

由 Reactable 的作者在这里回答

确保默认样式和排序样式的 css 具有相同的优先级。

R 脚本

ui <- fluidPage(
  includeCSS("sort_column.css"),
  reactableOutput("table")
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(
      iris[1:5, ],
      defaultColDef = colDef(headerClass = "table-header"),
      bordered = TRUE
    )
  })
}

shinyApp(ui, server)

排序列.css

/* Header style: Unsorted */
.table-header {
  background: rgba(0, 100, 0, 1);
}

/* Header style: Sorted */
.table-header[aria-sort="ascending"],
.table-header[aria-sort="descending"] {
  background: rgba(100, 0, 0, 1);
}

推荐阅读