DT table in Shiny (overriding custom css) - How to color the whole row based on a value in a specific column?

Question

I am trying to color the top two rows differently from the rest of the table as it contains control samples. The table is made using DT for Shiny app.

Desired output:

Actual output:

The code:

output$table <- renderDataTable({
dt <- dt %>% datatable(rownames=FALSE, class="table table-hover row-border", extensions = c( 'FixedHeader'),
                options = list( scrollX = TRUE, pageLength = -1,dom = 'Btpl', ordering = TRUE, 
                                dom="ft",
                                lengthMenu = list(c(10,25,-1),
                                                  c(10,25,"All")), 
                                columnDefs = list(list(visible=FALSE, targets=c(7,8)))
                )) %>%
          formatStyle('Sample', 
                      fontWeight ='bold', 
                      backgroundColor = styleEqual(c("Positive control", "Negative control"), 
                      c("#fcf4d9", "#fcf4d9")))
})

I have tried adding target = "row" argument but it doesn't work. I also tried to use styleRow() instead of styleEqual() but this resulted in error "coercion of NA values".

Update:

The default bakcground colors are specified in tags$style that is why it doesn't work using format style:

  tags$style(HTML(sprintf('table.dataTable tbody tr {background-color:  %1$s !important; color:  %2$s !important;}', 
                          table_col,font_col_dark)))

I am not that familiar with this expression, but is it possible to specify the bakcground color for controls in tags instead?

Answer 1

Adding target = 'row' should be the solution:

Code:

# Data
dt <- tibble(Well = 1:5, Sample = c("Positive control", "Negative control", "Sample 1", "Sample 2", "Sample 3"), Result = 10:14)

# Table
dt %>% datatable(rownames=FALSE, class="table table-hover row-border", extensions = c( 'FixedHeader'),
                 options = list( scrollX = TRUE, pageLength = -1,dom = 'Btpl', ordering = TRUE, 
                                 dom="ft",
                                 lengthMenu = list(c(10,25,-1),
                                                   c(10,25,"All")), 
                                 columnDefs = list(list(visible=FALSE, targets=c(7,8)))
                 )) %>%
    formatStyle('Sample', 
                fontWeight ='bold',
                target = 'row',
                backgroundColor = styleEqual(c("Positive control", "Negative control"), 
                                             c("#fcf4d9", "#fcf4d9")))

Update:

You might control the background color by using some helper vectors instead:

# Data
dt <- tibble(Well = 1:5, Sample = c("Positive control", "Negative control", "Sample 1", "Sample 2", "Sample 3"), Result = 10:14)

# Helper
id_helper <- unique(dt$Sample)
color_helper <- ifelse(id_helper %in% c("Positive control", "Negative control"), '#fcf4d9', 'blue')

# Table
dt %>% datatable(rownames=FALSE, class="table table-hover row-border", extensions = c( 'FixedHeader'),
                 options = list( scrollX = TRUE, pageLength = -1,dom = 'Btpl', ordering = TRUE, 
                                 dom="ft",
                                 lengthMenu = list(c(10,25,-1),
                                                   c(10,25,"All")), 
                                 columnDefs = list(list(visible=FALSE, targets=c(7,8)))
                 )) %>%
    formatStyle('Sample', 
                fontWeight ='bold',
                target = 'row',
                backgroundColor = styleEqual(id_helper, 
                                             color_helper))