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)
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
.
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)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With