DT::datatable 的背景颜色闪亮
Background color of DT::datatable in shiny
如何在闪亮的应用程序中更改数据表选定行的背景颜色?我的 ui.R 有以下代码:
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)
您可以使用 CSS 来执行此操作。所选行的颜色由 table.dataTable tbody tr.selected { background-color: #B0BED9;}
in jquery.min.dataTables.css
.
设置
这是一个基于您的代码的最小示例,说明如何使用 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)
我添加了 table id (#table1 tr.selected, #table2 tr.selected
) 以便此选择器比默认选择器具有更大的权重并覆盖它,有关此 here 的更多信息。
如何在闪亮的应用程序中更改数据表选定行的背景颜色?我的 ui.R 有以下代码:
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)
您可以使用 CSS 来执行此操作。所选行的颜色由 table.dataTable tbody tr.selected { background-color: #B0BED9;}
in jquery.min.dataTables.css
.
这是一个基于您的代码的最小示例,说明如何使用 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)
我添加了 table id (#table1 tr.selected, #table2 tr.selected
) 以便此选择器比默认选择器具有更大的权重并覆盖它,有关此 here 的更多信息。