CODEWITHSUNDEEP
rshinydtbslib
ashcrashbegash
ashcrashbegash

Reputation: 271

Change color of selected row in data table with bslib theme in Shiny app

I would like to change the color of the selected row from blue to something else. This is possible without using the bslib package and themes, but I would like to use the theme, and still be able to change the color.

This works:

library(shiny)
library(DT)
library(bslib)

ui <- fluidPage(
  #theme = bs_theme(),
  tags$style(HTML('table.dataTable tr.selected td, table.dataTable td.selected {background-color: pink !important;}')),
  mainPanel(DT::dataTableOutput('mytable'))
)

server <- function(input, output,session) {
  
  output$mytable = DT::renderDataTable(    
    datatable(mtcars)
  ) 
}
runApp(list(ui = ui, server = server))

Uncommenting the theme line reverts the color back to blue.

I am stumped. Any ideas??

Upvotes: 1

Views: 439

Answers (2)

jpdugo17
jpdugo17

Reputation: 7116

I found this to work in DT 0.30 version:

library(shiny)
library(DT)
library(bslib)

ui <- fluidPage(
  theme = bs_theme(),
  tags$style(
    HTML("
      .table.dataTable > tbody > tr.selected:hover > td,
      .table.dataTable > tbody > tr.selected > td {
        background-color: red !important;
        box-shadow: 0 0 3px red !important;
      }"
    )
  ),
  mainPanel(DT::dataTableOutput('mytable'))
)

server <- function(input, output,session) {
  output$mytable = DT::renderDataTable(    
    datatable(mtcars)
  ) 
}
runApp(list(ui = ui, server = server))

Upvotes: 0

Lucca Nielsen
Lucca Nielsen

Reputation: 1894

try this:

ui <- fluidPage(
  theme = bs_theme(),
  tags$style(HTML("
      .table.dataTable tbody td.active, .table.dataTable tbody tr.active td {
            background-color: red!important;}
      ")),
  mainPanel(DT::dataTableOutput('mytable'))
)

server <- function(input, output,session) {
  
  output$mytable = DT::renderDataTable(    
    datatable(mtcars)
  ) 
}
runApp(list(ui = ui, server = server))

Upvotes: 2

Related Questions