Background color of DT::datatable in shiny

Question

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)

score 4 · Accepted Answer · edited May 23 '17 at 11:52

4

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.

edited May 23 '17 at 11:52

Community

1
1

answered Nov 17 '15 at 14:13

NicE

21,165
3
51
68

Could you also update your answer so that applies to `shinydashboard`? I have this table inside `box` in a `column` of a `fluidRow`. – danas.zuokas Nov 17 '15 at 14:23
1

Maybe update your question to include some code? Not sure what your app looks like. – NicE Nov 17 '15 at 14:26
Strange but it has no affect when I run your example app. – danas.zuokas Nov 18 '15 at 07:45
Could you please take a look at the screen shot [here](http://i.stack.imgur.com/wkrvY.png). I have no clue why @NicE solution does not work for me. Thanks. – danas.zuokas Nov 19 '15 at 07:48
Maybe post the output of `sessionInfo()`, my guess is that we don't have the same version of packages. – NicE Nov 19 '15 at 09:12
OK I have figured it out. Added `!important` next to color specification as was pointed out in the link provided by @NicE. – danas.zuokas Nov 20 '15 at 08:32
For me it did not work with the added `!important` (I am using a nested table), however this worked `#table tr.selected td { background-color: red !important; }` – camnesia Nov 15 '18 at 16:25

Background color of DT::datatable in shiny

1 Answers1

Linked