R Shiny DataTables ColVis Behavior

Question

I have an RStudio Shiny server page with DataTables, and I got TableTools and ColReorder working in the example below, but ColVis ( Show/hide columns ) doesn't behave the same as the example in http://datatables.net/extensions/ colvis / :

When you click the Show/hide columns button, the list is mixed with the values ​​in the table below, and I cannot delete the list by clicking the button again or clicking anywhere on the page (again, the example in the data page behaves correctly).

Also, I got confused about using sDom to arrange the various elements in a table. I would like the Show/hide columns button to be in the upper right corner instead of the upper left. I am also not sure how to arrange the various elements in the table sDom table, so that after changing the order of the columns, saving in CSV / Excel or hiding a certain column gives me a 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") ) ) ) ) ) }) 

#

In addition, there is a problem with sorting columns and reordering columns: if one of them sorts, then reorders columns and sorts again, column headings are upside down. For example, sort by column depth, then move the column one to the left, and then click on the header again to sort, now we have the depth of the header with the contents from the wrong column. See Snapshot:

Answer 1

Some notes:

The current version of data.table is not compatible with shiny atm. We need version 1.9.4 . We also need the colvis version for 1.1.0 . Unfortunately, this refers to the old version of jQuery, which came up with a call to jQuery.browser . Therefore, the link to this jQuery.browser needs to be removed, it appears in lines from 856 to 859. The sDom attribute is also a little more complicated, it does not appear in the new data table, which is replaced by dom . The documentation is at http://legacy.datatables.net/usage/options#sDom . We add the contents of colVis to class="cvclear" with this <"cvclear"C> . Placing it on top is done by arranging it at the beginning of the sDom . This works, however, we must align it correctly. This is usually done by adding align = "right" to the class, but since the class is initiated by calling sDom , we should instead use HTML5 css text-align:right . We add this with tags$style .

Thus, the above should allow us to use colvis with the current brilliance. With brilliant updates to data.table 1.10.0 then we should be able to use the current colvis plugin colvis , and hopefully no corrections are needed.

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 application at:

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