DT :: datatable的背景颜色发亮 [英] Background color of DT::datatable in shiny

问题描述

如何在闪亮的应用程序中更改数据表中所选行的背景颜色？我的ui.R具有以下代码：

How do I change the background color of a selected row of a datatable in a shiny application? My ui.R has the following code:

library(shinydashboard)

header <- dashboardHeader(title = 'title')
sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem('dashboard', tabName = 'dashboard', icon = icon('dashboard'))
  )
)
body <- dashboardBody(
  fluidRow(
    column(width = 6,
           box(
             title = 'box', width = NULL, status = 'primary',
             DT::dataTableOutput('table1')
           ),
           box(
             title = 'box', width = NULL, status = 'primary',
             DT::dataTableOutput('table2')
           )
    ),
    column(width = 6,
           box(
             title = 'box', width = NULL, status = 'primary',
             DT::dataTableOutput('table3')
           )
    )
  )
)
dashboardPage(header, sidebar, body)

推荐答案

Y您可以使用CSS来做到这一点。选定行的颜色由 table.dataTable tbody tr.selected {background-color：＃B0BED9;} 在 jquery.min.dataTables中设置.css 。

You can use CSS to do this. The color of the selected rows is set by table.dataTable tbody tr.selected { background-color: #B0BED9;} in jquery.min.dataTables.css.

这是一个基于您的代码的最小示例，说明如何使用 tags $ style覆盖它：

Here's a minimal example based on your code on how to override it using tags$style:

library(shinydashboard)

header <- dashboardHeader(title = 'title')
sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem('dashboard', tabName = 'dashboard', icon = icon('dashboard'))
  )
)
body <- dashboardBody(
  tags$head(tags$style(HTML("#table1 tr.selected, #table2 tr.selected {background-color:red}"))),
  fluidRow(
    column(width = 6,
           box(
             title = 'box', width = NULL, status = 'primary',
             DT::dataTableOutput('table1')
           ),
           box(
             title = 'box', width = NULL, status = 'primary',
             DT::dataTableOutput('table2')
           )
    )
  )
)
ui<-dashboardPage(header, sidebar, body)

server = function(input, output) {
  output$table1 = DT::renderDataTable(
    iris, options = list(lengthChange = FALSE)
  )

  output$table2 = DT::renderDataTable(
    iris, options = list(lengthChange = FALSE)
  )
}

shinyApp(ui,server)

我添加了表ID（＃table1 tr.selected，＃table2 tr.selected ），以便该选择器比默认选择器具有更大的权重并覆盖它，有关此这里。

I added the table ids (#table1 tr.selected, #table2 tr.selected) so that this selector has more weight than the default one and overrides it, more info about this here.

这篇关于DT :: datatable的背景颜色发亮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！