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 not behaving in the same way as the example in http://datatables.net/extensions/colvis/ :

When clicking the Show/hide columns button, the list mixes up with the values in the table underneath, and I cannot make the list disappear by clicking the button again or clicking anywhere else in the page (again, the example in the datatables page behaves correctly).

Also, I am confused about using sDom to order the different elements in the table. I would like the Show/hide columns button to be on the top right instead of top left. I am also not sure how to order the different elements in the sDom of the table so that after changing the order of the columns, saving to CSV/Excel or hiding some column will give me the new table layout instead of the original one.

Any ideas?

ui.R

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='//cdn.datatables.net/colvis/1.1.0/js/dataTables.colVis.min.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$script(HTML("if (window.innerHeight < 400) alert('Screen too small');")))
                ),
        dataTableOutput("mytable")
      )
)

server.R

shinyServer(function(input, output, session) {
output$mytable = renderDataTable({
          diamonds[,1:6]
      }, options = list(
               "sDom" = 'RMDCT<"clear">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")
                                                )
                               )
                     )
             )
    )
})

#

Also, there is an issue with column sorting and column reorder: if one sorts then reorders columns and sorts again, the column headers are flipped around. For example, sort by column depth, then shift column one to the left, then click on header again to sort, now we got header depth with content from the wrong column. See snapshot:

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/