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:
Some notes:
The current data.table version is incompatible with shiny atm. We need the
1.9.4
version. We then also need the pre1.1.0
version ofcolvis
. Unfortunately this referred to an old version of jQuery that issued a call tojQuery.browser
. So reference to thisjQuery.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 bydom
. Documentation is at http://legacy.datatables.net/usage/options#sDom. We add the colVis content to aclass="cvclear"
using this snippet<"cvclear"C>
. Placing it at the top is done by ordering it at the start of thesDom
statement. This works however we need to right align it. Normally that would be done by addingalign = "right"
to the class but because the class is initiated thru thesDom
call we instead have to use the HTML5 csstext-align:right
. We add this usingtags$style
.So the above should allow us to use
colVis
with the current shiny. When shiny upgrades to data.table1.10.0
then we should be able to use the currentcolVis
plugin files and the fixes hopefully wont be necessary.The following works for me:
ui.R
server.R
You can view the app at: