R Shiny DataTable selected row color

Question

I am trying to set the highlight color for a selected row in a DataTable in my shiny app. Basically I want the color of selected rows to be say red rather than blue. However, I am not at all familiar with JavaScript so I am struggling to write the appropriate callback (at least I think that is the problem). Here is what I've tried so far:

# ui.R
library(shiny)

fluidPage(
  title = 'DataTables Test',
  DT::dataTableOutput('table')
)

# server.R
library(shiny)
library(DT)

# render the table
output$table = renderDataTable(datatable(head(iris, 20), 
options = list(
    initComplete = JS(
      "function(settings, json) {",
      "var rows = $(this.api().table().rows());",
      "for (var i = 0; i < rows.length; i++){ ",
      "var row = rows[i];",
      "row.css({'background-color': '#000', 'color': '#f00'})",
      "}",
      "}")
  )))

})

As you can see, so far I am just trying to figure out how to change the row colors. Once I had figured this out I was going to try and change the css to something like:

"tr.selected td, table.dataTable td.selected { background-color: #f00}"

But I haven't gotten there yet - unfortunately the code above doesn't do anything to the background color. If anyone could help me with the whole solution that would be great.

The `DT` package has some built in functions to change font colors/background colors. See [here](https://rstudio.github.io/DT/010-style.html) — Gregor de Cillia, Jul 07 '17 at 10:02
@GregordeCillia I have looked at those but I couldn't figure out how to color a row based on whether it was selected or not. — James Allingham, Jul 07 '17 at 10:06
You can use a `dataTableProxy` and update the styling whenever `input$table_rows_selected` changes — Gregor de Cillia, Jul 07 '17 at 10:09
Wait...there is no `formatStyle` equivalent for proxys. Maybe this approach doesn't work. — Gregor de Cillia, Jul 07 '17 at 10:14
@GregordeCillia yeah I was about to say that I couldn't get it to work... Any other ideas? :) — James Allingham, Jul 07 '17 at 10:27

score 19 · Accepted Answer · answered Jul 07 '17 at 11:09

19

This should do the job:

#rm(list = ls())
library(shiny)
library(DT)

ui <- basicPage(
  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))

answered Jul 07 '17 at 11:09

Pork Chop

28,528
5
63
77

2

Thank you very much for the above, it helped me with a similar problem. To set different colours for selected rows and columns, use: `tags$style(HTML('table.dataTable tr.selected td{background-color: pink !important;}')), tags$style(HTML('table.dataTable td.selected {background-color: orange !important;}'))` – Hester Lyons Mar 02 '18 at 10:39

Iria Roca · Answer 2 · 2023-07-20T09:46:42.280

In case anyone is having the same problem as me: if you are using the 'bootstrap' styling in datatable, you need to change ".selected" for ".active", otherwise it won't work. For example, in the answer provided by Pork Chop:

library(shiny)
library(DT)

ui <- basicPage(
  tags$style(HTML('table.dataTable tr.active td, table.dataTable tr.active {background-color: pink !important;}')),
  mainPanel(DT::dataTableOutput('mytable'))
)    

server <- function(input, output,session) {
  output$mytable = DT::renderDataTable(    
    datatable(mtcars, style="bootstrap")
  ) 
}

runApp(list(ui = ui, server = server))

EDIT: Since DataTables v1.12, background-color is not longer working: the property that controls now row colours is box-shadow (see: https://datatables.net/blog/2022-05-13#Row-colouring-improvements, https://www.w3schools.com/CSSREF/css3_pr_box-shadow.php).

tags$style(HTML('table.dataTable tr.selected td, table.dataTable tr.selected {box-shadow: inset 0 0 0 9999px pink !important;}'))

And with 'bootstrap' styling:

tags$style(HTML('table.dataTable tr.active td, table.dataTable tr.active {box-shadow: inset 0 0 0 9999px pink !important;}'))

R Shiny DataTable selected row color

2 Answers2

Linked