DT::datatable – Format selected column?

Question

Can you please help me with DT::datatable column formatting? I have for example this table:

DT::datatable(iris, 
          class = 'row-border stripe hover compact', 
          rownames = F, 
          autoHideNavigation = T,
          options = list(pageLength = nrow(summary.month),
                         searching = F,
                         paging = F,
                         info = F))

I need to set:

• 1st column: bold, aligned left
• 3rd coumn: bold, aligned right

I found, that I should use columns.ClassName, but how to set the class styles in R?

The html output of datatable will be used in R markdown document then.

Answer 1

It has been a while since this question was initially asked, but I just had this same problem. Here is a simpler solution that doesn't require editing the source data or calling JS, but instead uses functions within the DT package itself.

DT::datatable(iris, 
          class = 'row-border stripe hover compact', 
          rownames = F, 
          autoHideNavigation = T, escape =FALSE) %>% 
  formatStyle(columns = c("Sepal.Length"), fontWeight = 'bold', `text-align` = 'left') %>% 
  formatStyle(columns = c("Petal.Length"), fontWeight = 'bold', `text-align` = 'right')

Answer 2

So far the only way I can get it to work is by manually setting the HTML tags first, and then using escape = FALSE

Here we wrap Sepal.Length in the bold HTML tag:

iris$SepalLength2 <- paste0("<b>", iris$Sepal.Length, "</b>")>

Then use escape = FALSE so that the HTML tags are parsed.

datatable(iris, 
          class = 'row-border stripe hover compact', 
          rownames = F, 
          autoHideNavigation = T, escape =FALSE)

Edit:

For align left/right, you can wrap in a <p align ="left"></p>

So: iris$SepalLength2 <- paste0('<p align ="right"><b>', iris$Sepal.Length, '</b></p>')

Note that I am neither an HTML guru, nor an expert on this particular library, but this seems like one way to get your desired result.

Answer 3

You don't need to modify the contents of your data. Instead, you can use the rowCallback option:

library(DT)

rowCallback <- c(
  "function(row, data, index){",
  "  $(this.api().cell(index, 0).node())",
  "    .css('text-align', 'left')",
  "    .css('font-weight', 'bold');",
  "  $(this.api().cell(index, 2).node())",
  "    .css('text-align', 'right')",
  "    .css('font-weight', 'bold');",
  "}"
)

DT::datatable(iris, 
              class = 'row-border stripe hover compact', 
              rownames = FALSE, 
              autoHideNavigation = TRUE,
              options = list(pageLength = 5,
                             searching = FALSE,
                             paging = TRUE,
                             info = FALSE, 
                             rowCallback = JS(rowCallback))
)