CODEWITHSUNDEEP
rshinydt
firmo23
firmo23

Reputation: 8404

DT::datatable is not loaded when combining formatStyle() with JS code in a shiny app

I have a shiny app in which I want the cursor to change when the user hovers over Species column and also I want to format this column with:

%>%
        formatStyle('View',  color = 'red', backgroundColor = 'orange', fontWeight = 'bold')

But when I add this certain code line my table is not and loaded and is stuck in 'Processing' mode. This does not happen when I delete the JS part for mouse hovering ability. How can I combine them?

rowCallback = JS(
                              "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
                              "var full_text = aData[1] + ','+ aData[2] + ',' + aData[3] + ','+ aData[4];",
                              "$('td:eq(5)', nRow).attr('title', full_text);", # Tool Tip
                              "$('td:eq(5)', nRow).css('cursor', 'pointer');", # Cursor icon changes to hand (pointer) on Hover
                              "}")

app

library(shiny)
library(DT)

shinyApp(
    ui = fluidPage(
        DT::dataTableOutput("irisTable")
    ),
    server = function(input, output) {

        output$irisTable <- DT::renderDataTable({
            DT::datatable(datasets::iris, 
                          options = list(rowCallback = JS(
                              "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
                              "var full_text = aData[1] + ','+ aData[2] + ',' + aData[3] + ','+ aData[4];",
                              "$('td:eq(5)', nRow).attr('title', full_text);", # Tool Tip
                              "$('td:eq(5)', nRow).css('cursor', 'pointer');", # Cursor icon changes to hand (pointer) on Hover
                              "}"),pageLength = 5,columnDefs = list(list(className = 'dt-left', targets = "_all"))),rownames= T,
                          selection = list(mode = 'single', target = 'cell')

            )%>%
                formatStyle('Species',  color = 'red', backgroundColor = 'orange', fontWeight = 'bold')

        })
    }
)

Upvotes: 0

Views: 445

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84519

That's because formatStyle also uses the rowCallback option but the arguments are named row and data, not nRow and nData. You have to use these names and this works:

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    DTOutput("irisTable")
  ),
  
  server = function(input, output) {
    
    output$irisTable <- renderDT({
      datatable(
        datasets::iris, 
        options = list(
          rowCallback = JS(
            "function(row, data) {",
            "var full_text = data[1] + ',' + data[2] + ',' + data[3] + ',' + data[4];",
            "$('td:eq(5)', row).attr('title', full_text);", # Tool Tip
            "$('td:eq(5)', row).css('cursor', 'pointer');", # Cursor icon changes to hand (pointer) on Hover
            "}"),
          pageLength = 5,
          columnDefs = list(
            list(className = 'dt-left', targets = "_all")
          )
        ),
        rownames= TRUE,
        selection = list(mode = 'single', target = 'cell')
      )%>%
        formatStyle('Species',  color = 'red', backgroundColor = 'orange', fontWeight = 'bold')
      
    })
  }
)

Upvotes: 1

Related Questions