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

【问题标题】：Highlight R Reactable's sorted headers that already have a default background header style?突出显示 R Reactable 已经具有默认背景标题样式的排序标题？
【发布时间】：2021-03-12 23:33:42
【问题描述】：

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

突出显示已排序的标题 - 无默认背景底纹（有效）

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)

test.css

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

【问题讨论】：

标签： css r reactable

【解决方案1】：

由 Reactable 的作者here回答

确保默认样式和排序样式的 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)

sort_column.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);
}

【讨论】：