javascriptrshinydtshinywidgets

AutoNumeric.js (ShinyWidgets) in Shiny DT Table


I am struggling to embed an autonumeric Input inside a DT table within a shiny app. I stumbled over this post here which made things a bit clearer for me.

However, I cant make it work for an autonumeric Input.

Here is what I have so far:

library(shiny)
library(DT)
library(shinyWidgets)

ui <- 
  tagList(
    DTOutput("dtable")
  ) 

server <- function(input, output){
  
  output$dtable <- 
    renderDT(
      {
        
        dat <- data.frame(
          select = c(
            as.character(
              autonumericInput(
                inputId = 'id_1',
                label = "Default Input 1",
                value = 1.34
              )
            )
          )
        )
        
        js <- c(
          "function(settings){",
          "  $('[id^=id_1]').autoNumeric({",
          "    minimumValue: 1,",
          "    maximumValue: 2,",
          "  });",
          "}"
        )
        
        datatable(
          dat,
          rownames = FALSE,
          escape = FALSE,
          options = list(
            initComplete = JS(js),
            preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
            drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); }')
          )
        )
      }
    )
  
}

shinyApp(ui, server)

I think the problem will probably be that the js-snippet is not correct and the initialization of the object does not work properly. However, I know close to nothing about JS and I am not sure on how to do this properly. Can anyone help me with this?


Solution

  • It works now, my colleague figured it out. Two things were missing / wrong:

    1. The initialization of the object can be done within the drawCallback JS function
    2. The respective html dependencies have to be added

    The following code works:

    library(shiny)
    library(DT)
    library(shinyWidgets)
    
    ui <- 
      tagList(
        DTOutput("dtable")
      ) 
    
    server <- function(input, output){
      
      output$dtable <- 
        renderDT(
          {
            
            dat <- data.frame(
              select = c(
                as.character(
                  autonumericInput(
                    inputId = 'id_1',
                    label = "Default Input 1",
                    value = 1.34,
                    maximumValue = 1.99,
                    minimumValue = 1.00,
                    currencySymbol = " €",
                    currencySymbolPlacement = "s"
                  )
                )
              )
            )
            
            
            dat2 <- 
              datatable(
              dat,
              rownames = FALSE,
              escape = FALSE,
              options = list(
                preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
                drawCallback = JS('function() {Shiny.initializeInputs(this.api().table().node()); Shiny.bindAll(this.api().table().node()); }')
              )
            )
            
            dep2 <- htmltools::htmlDependency(
              "shinyWidgets", "0.8.2",
              src = "packer",
              script = "autonumeric.js",
              package = "shinyWidgets")
            dat2$dependencies <- c(dat2$dependencies, list(dep2))
            dat2
            
          }
        )
      
    }
    
    shinyApp(ui, server)