2

I'm trying to place orderInput elements (from shinyjqui package) inside a DT table. Placing simple inputs like checkboxes can be done fairly easily. Since these inputs are more complex, I followed a similar approach to this one. While the inputs do render properly, their functionality doesn't work - and I know that's because their javascript isn't initialized properly (because of the call to as.character()). Here is the code I have:

library(shiny)
library(shinyjqui)

ui <- shinyUI(
  fluidPage(
    h2('Reorder'),
    DT::dataTableOutput('mytable')
  )
)

server = shinyServer(function(input, output, session) {

  data <- head(mtcars)

  # helper function for making inputboxes in a DT
  shinyInput = function(FUN, BrandID, stem, items, id,connect,  ...) { 
    unlist(lapply(seq_len(length(items)), function(x){
      as.character(FUN(inputId=paste(id, stem, BrandID[x], sep="_"), label = NULL, items=items[x],connect[-x], ...))
    }))
  } 

  # datatable with orderinputs
  output$mytable = DT::renderDataTable({
    x <- data.frame(
      sapply(seq(ncol(data)), function(x){
        shinyInput(FUN=shinyjqui::orderInput,
                   BrandID=as.character(rownames(data)), 
                   stem=names(data)[x], 
                   items=as.character(data[,x]),
                   id="OrdImp",
                   connect=paste("OrdImp", names(data)[x], as.character(rownames(data)), sep="_"),
                   as_source=T,
                   width="20%", 
                   item_class='primary')
      })
    )
    names(x) <- names(data)
    rownames(x) <- rownames(data)

    data.frame(x)
  }, escape = FALSE, options = list( 
    preDrawCallback = JS('function() {Shiny.unbindAll(this.api().table().node());}'), 
    drawCallback = JS('function() {Shiny.bindAll(this.api().table().node());} ') 
  ))
}
)

shinyApp(ui = ui, server = server)

The call to as.character() is necessary so that the elements will even render in the HTML, but it strips out the javascript metadata from the shiny tag. Some javascript needs to run to initialize these inputs - similar to this SO answer that manually runs javascript to initialize selectInputs inside DT. I need help finding out that bit of javascript that would make this work.

Thanks!

DeanAttali
  • 25,268
  • 10
  • 92
  • 118
  • 2
    I'm not sure to see what is the expected result. You want to be able to drag the cells within a column ? – Stéphane Laurent Apr 12 '19 at 12:56
  • Exactly, within each column – DeanAttali Apr 12 '19 at 17:46
  • 2
    I think this is not possible because the [sortable](https://jqueryui.com/sortable/) items must be in a same element. For example it should be possible to have sortable rows by applying `.sortable()` to the `tbody` (but there's the DataTables extension `RowReorder` which does that). But the cells within a column are in different ``'s. – Stéphane Laurent Apr 12 '19 at 18:13
  • Is it possible now? – TarJae Aug 27 '23 at 07:20

0 Answers0