DT::DataTables 中第一列的黑色背景和白色字体

Posted 2023-03-24

【中文标题】DT::DataTables 中第一列的黑色背景和白色字体

【英文标题】：Black background with white font for first column in DT::DataTables

【发布时间】：2021-12-17 01:24:52

【问题描述】：

我有一个带有 DT::DataTable 元素的闪亮应用程序，其中第一列是行标题，第二列包含数据。如何将第一列的颜色更改为黑色背景上的白色文本？如果找到更改列标题的方法（第 4.3 节 here），但我如何才能将相同的效果应用于第一列？

这里有一些示例代码，显示了一个非常简化的表格版本，但没有达到预期的效果。我确信在renderDataTable 函数的选项列表中添加一些东西会解决它，但我不知道要添加什么。

编辑：以下是@Stéphane Laurent 建议的解决方案，它回答了我最初的问题。但是，它会更改应用程序上存在的所有表。在我修改后的代码中，下面显示了全局更改，但是如何仅针对两个表之一？

library(shiny)
library(DT)

CSS <- html(
  "td.firstcol color: white; background-color: black"
)

ui <- fluidPage(
  tags$head(
    tags$style(CSS)
  ),
  fluidRow(
    column(3,
           DTOutput(outputId = 'tbl')
    ),
    column(3,
           DTOutput(outputId = 'tbl2')
    )
  )
)


server <- function(input, output) 
  output$tbl<- renderDT(
    datatable(
      data.frame(
        Label = c('Label1', 'Label2', 'Label3', 'Label4'),
        Data = c('Data1', 'Data2', 'Data3', 'Data4')
      ),
      rownames = FALSE, 
      colnames = "", 
      options = list(
        dom = 't',
        columnDefs = list(
          list(targets = 0, className = "firstcol")
        )
      )
    )
  )
  
  output$tbl2 <- renderDT(
    datatable(
      data.frame(
        Label = c('Label1', 'Label2', 'Label3', 'Label4'),
        Data = c('Data1', 'Data2', 'Data3', 'Data4')
      ),
      rownames = FALSE, 
      colnames = "", 
      options = list(
        dom = 't',
        columnDefs = list(
          list(targets = 0, className = "firstcol")
        )
      )
    )
  )


# Run the application 
shinyApp(ui = ui, server = server)

【参考方案1】：

library(shiny)
library(DT)

CSS <- HTML(
  "td.firstcol color: white; background-color: black"
)

ui <- fluidPage(
  tags$head(
    tags$style(CSS)
  ),
  fluidRow(
    column(3,
           DTOutput(outputId = 'tbl')
    )
  )
)


server <- function(input, output) 
  output$tbl<- renderDT(
    datatable(
      data.frame(
        Label = c('Label1', 'Label2', 'Label3', 'Label4'),
        Data = c('Data1', 'Data2', 'Data3', 'Data4')
      ),
      rownames = FALSE, 
      colnames = "", 
      options = list(
        dom = 't',
        columnDefs = list(
          list(targets = 0, className = "firstcol")
        )
      )
    )
  )


# Run the application 
shinyApp(ui = ui, server = server)

【讨论】：

太棒了！这肯定回答了我所说的问题，但是，如果同一个应用程序上有多个表，我如何只针对其中一个表？我修改了我的代码，上面有你的解决方案和我不希望效果是全局的细节。 （我为这个疏忽道歉。）