R shiny DataTables ColVis behavior

Question

I got an RStudio Shiny server page with DataTables, and I got TableTools and ColReorder working in the example below, but ColVis (Show/hide columns button) is n

Answer 1

Some notes:

The current data.table version is incompatible with shiny atm. We need the 1.9.4 version. We then also need the pre 1.1.0 version of colvis. Unfortunately this referred to an old version of jQuery that issued a call to jQuery.browser. So reference to this jQuery.browser needs to be removed it occurs in line 856 to 859. The sDom attribute is also a bit tricky it doesnt appear in the new data.table being replaced by dom. Documentation is at http://legacy.datatables.net/usage/options#sDom. We add the colVis content to a class="cvclear" using this snippet <"cvclear"C>. Placing it at the top is done by ordering it at the start of the sDom statement. This works however we need to right align it. Normally that would be done by adding align = "right" to the class but because the class is initiated thru the sDom call we instead have to use the HTML5 css text-align:right. We add this using tags$style.

So the above should allow us to use colVis with the current shiny. When shiny upgrades to data.table 1.10.0 then we should be able to use the current colVis plugin files and the fixes hopefully wont be necessary.

The following works for me:

ui.R

# get the colVis js file and delete lines 
library(RCurl)
write(getURL("https://raw.githubusercontent.com/openMF/mifosx-community-apps/master/IndividualLendingGeneralJavaScript/resources/libs/DataTables-1.9.4/extras/ColVis/media/js/ColVis.js")
      , file = 'www/colvis.js')
tf <- readLines("www/colvis.js")[-c(856:859)]
write(tf, file = "www/colvis.js")
shinyUI({
  pageWithSidebar(

    h1('Diamonds DataTable with TableTools'),
    tagList(
      singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/TableTools.min.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='//cdn.datatables.net/colreorder/1.1.1/js/dataTables.colReorder.min.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='colvis.js',type='text/javascript'))),
      singleton(tags$head(tags$script(src='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/js/ZeroClipboard.min.js',type='text/javascript'))),
      singleton(tags$head(tags$link(href='//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/css/TableTools.min.css',rel='stylesheet',type='text/css'))),
      singleton(tags$head(tags$link(href='https://raw.githubusercontent.com/openMF/mifosx-community-apps/master/IndividualLendingGeneralJavaScript/resources/libs/DataTables-1.9.4/extras/ColVis/media/css/ColVis.css',rel='stylesheet',type='text/css'))),     
      singleton(tags$script(HTML("if (window.innerHeight < 400) alert('Screen too small');"))),
      singleton(tags$head(tags$link(href='https://raw.githubusercontent.com/DataTables/ColVis/18b52dfdd7255ffe96a92aadc16cadd70e3e174a/media/css/ColVis.css',rel='stylesheet',type='text/css')))  
      , tags$head(
        tags$style(HTML("
                        .cvclear{
                         text-align:right}")
        )
      )
    ),
    dataTableOutput("mytable")
  )
})

server.R

library(shiny)
library(ggplot2)

shinyServer(function(input, output, session) {
  output$mytable = renderDataTable({
    diamonds[,1:6]
  }, options = list(
    "sDom" = 'RMD<"cvclear"C><"clear"T>lfrtip',
    "oTableTools" = list(
      "sSwfPath" = "//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls.swf",
      "aButtons" = list(
        "copy",
        "print",
        list("sExtends" = "collection",
             "sButtonText" = "Save",
             "aButtons" = c("csv","xls")
        )
      )
    )
  )
  )
}
)

You can view the app at:

http://128.199.255.233:3838/userApps/john/cvtestapp/