I am trying to perform two distinct formatting operations on a datatable object using the DT and magrittr packages. One uses the helper function formatRound() and the other is passed in as JavaScript to a rowCallback option in the datatable function.

When I run either of the formatting operations individually the datatable renders with the expected formatting. However, when I run both together the datatable renders blank but I do not get an error.

This code shows the behavior I am describing.

library(magrittr)
library(DT)

df = data.frame(matrix(rnorm(20), nrow=10))

datatable(
  data = df
) %>%
  formatRound(c("X1", "X2"), 1)

#table renders as expected

datatable(
  data = df,
  options = list(
    rowCallback = JS("
     function( row, data, index ) {
       if ( index > 2 ) {
        $(row).css('background-color', '#EDEDED');
       }
       else if ( index > 0 ) {
        $(row).css('background-color', '#DEDEDE');
       }
       else {
        $(row).css('background-color', '#D3D3D3');
       }
     }"
    )
  )
)

#table renders as expected

datatable(
  data = df,
  options = list(
    rowCallback = JS("
     function( row, data, index ) {
      if ( index > 2 ) {
        $(row).css('background-color', '#EDEDED');
      }
      else if ( index > 0 ) {
        $(row).css('background-color', '#DEDEDE');
      }
      else {
        $(row).css('background-color', '#D3D3D3');
      }
     }"
    )
  )
) %>%
  formatRound(c("X1", "X2"), 1)

#table renders as blank but with no error returned

I am trying to perform two distinct formatting operations on a datatable object using the DT and magrittr packages. One uses the helper function formatRound() and the other is passed in as JavaScript to a rowCallback option in the datatable function.

When I run either of the formatting operations individually the datatable renders with the expected formatting. However, when I run both together the datatable renders blank but I do not get an error.

This code shows the behavior I am describing.

library(magrittr)
library(DT)

df = data.frame(matrix(rnorm(20), nrow=10))

datatable(
  data = df
) %>%
  formatRound(c("X1", "X2"), 1)

#table renders as expected

datatable(
  data = df,
  options = list(
    rowCallback = JS("
     function( row, data, index ) {
       if ( index > 2 ) {
        $(row).css('background-color', '#EDEDED');
       }
       else if ( index > 0 ) {
        $(row).css('background-color', '#DEDEDE');
       }
       else {
        $(row).css('background-color', '#D3D3D3');
       }
     }"
    )
  )
)

#table renders as expected

datatable(
  data = df,
  options = list(
    rowCallback = JS("
     function( row, data, index ) {
      if ( index > 2 ) {
        $(row).css('background-color', '#EDEDED');
      }
      else if ( index > 0 ) {
        $(row).css('background-color', '#DEDEDE');
      }
      else {
        $(row).css('background-color', '#D3D3D3');
      }
     }"
    )
  )
) %>%
  formatRound(c("X1", "X2"), 1)

#table renders as blank but with no error returned

• javascript
• r
• datatable
• shiny
• dt

1 Answer 1

If you have a look at the JS function of your third attempt in the browser's JS console(click on "Inspect Element option in browser"), it shows up an error saying that 'var' is unidentified because it is outside the scope of the JS function:

(
var d = parseFloat(data[1]); $(this.api().cell(row, 1).node()).html(isNaN(d) ? '' : d.toFixed(1));
var d = parseFloat(data[2]); $(this.api().cell(row, 2).node()).html(isNaN(d) ? '' : d.toFixed(1));
     function( row, data, index ) {
      if ( index > 2 ) {
        $(row).css('background-color', '#EDEDED');
      }
      else if ( index > 0 ) {
        $(row).css('background-color', '#DEDEDE');
      }
      else {
        $(row).css('background-color', '#D3D3D3');
      }
     })

If you put those two lines inside the JS function, it works perfectly.

You can find the updated code below.

datatable(
    data = df,
    options = list(
        rowCallback = JS("
     function( row, data, index ) {
        var d = parseFloat(data[1]); 
        $(this.api().cell(row, 1).node()).html(isNaN(d) ? '' : d.toFixed(1));
        var d = parseFloat(data[2]); 
        $(this.api().cell(row, 2).node()).html(isNaN(d) ? '' : d.toFixed(1));
       if ( index > 2 ) {
        $(row).css('background-color', '#EDEDED');
       }
       else if ( index > 0 ) {
        $(row).css('background-color', '#DEDEDE');
       }
       else {
        $(row).css('background-color', '#D3D3D3');
       }
     }"
        )
    )
)