Control row stripe color in datatable output

What is the "best" way is to set a custom row stripe/row striping color in datatable (DT)?

I'm using datatable (DT) to create interactive tables (e.g HTML via rmarkdown), with download ability, etc. That's why I'm not using Huxtable or any other table formatting package, and ideally I don't have to style the table first in another package before sending it to datatable - though open to this if necessary/best available option.

Here is a self-contained example of row striping, modified from the example shown here, answer#1 (https://src-bin.com/en/q/1b3261f), similar to this unsuccessful attempt. One issue is that the hover color no longer works, though it is meant to be a tint applied to whatever is there? Another is that the row color stays with the original row data after re-ordering by column - not sure if this default behavior is what I want - is it easy to change?

  DT::datatable(head(iris, 20),
                extensions = 'Buttons',
                options=list(dom = 'Bfrtip',
                             buttons = c('excel','csv','print'),
                             rowCallback=JS(
                               'function(row,data) {
     if($(row)["0"]["_DT_RowIndex"] % 2 <1) 
            $(row).css("background","#f2f9ec")
   }')))

There's an option here to color background of cells by value, which is not what I'm after: color-cells-in-dt-datatable-in-shiny

Datatables(dot)net datatables.net/manual/styling/theme-creator has an example stylesheet that creates a whole pile of CSS (357 lines of code), which presumably could be used in a style.css file to do what is required (row striping, custom color)? That seems overkill to me when I think the secret sauce for my purpose is just this line of code (below). Note, the default behavior of the datatable example has striping independent of the initial row number (c.f code above where striping stays with the original raw data). Can I get the code below into the r datatable code directly, e.g. like the example above?

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {`
background-color` `: ` `#f9f9f9` `; }`

library(DT) callback <- c( "$('table.dataTable.display tbody tr:odd').css('background-color', 'green');", "$('table.dataTable.display tbody tr:even').css('background-color', 'red');", "$('table.dataTable.display tbody tr:odd')", " .hover(function(){", " $(this).css('background-color', 'yellow');", " }, function(){", " $(this).css('background-color', 'green');", " }", " );", "$('table.dataTable.display tbody tr:even')", " .hover(function(){", " $(this).css('background-color', 'orange');", " }, function(){", " $(this).css('background-color', 'red');", " }", " );" ) datatable(iris, callback = JS(callback))

EDIT

Here is a fix following @Mark Neal's comment:

library(DT) rowCallback <- c( "function(row, data, num, index){", " var $row = $(row);", " if($row.hasClass('even')){", " $row.css('background-color', 'green');", " $row.hover(function(){", " $(this).css('background-color', 'yellow');", " }, function(){", " $(this).css('background-color', 'green');", " }", " );", " }else{", " $row.css('background-color', 'cyan');", " $row.hover(function(){", " $(this).css('background-color', 'orange');", " }, function(){", " $(this).css('background-color', 'cyan');", " }", " );", " }", "}" ) datatable(iris, options = list(rowCallback = JS(rowCallback)))

EDIT

Recommended topics

Hot tags