Flexdashboard is not allowing horizontal scrolling of DT

[DianaCesar]

Hi,

I have a Flexdashboard that renders a DT::datatable that has a lot of columns. The trouble is, Flexdashboard does not seem to allow me to scroll this DT to the left or right. Only the first n columns are displayed on the screen, and the rest of the table is cut off. In addition, no pagination controls are visible at the bottom of the table, and the message at the bottom of the table that says "Showing 1 to 5 of 147 entries" is missing, even though I have both enabled for this DT.

I noticed that when I decrease the width of the browser window, these controls reappear and I am able to horizontally scroll. Why is it that I can't scroll horizontally when the window is wider?

These are my settings for the YAML:

output: flexdashboard::flex_dashboard: orientation: columns vertical_layout: scroll

These are my settings for the only two content blocks:

knitr::opts_chunk$set(echo = TRUE)

Column {.tabset .tabset-fade data-width=10000 data-height=10000}

Title

#some beginning code...

And this is my DT:

DT:::datatable(tableName, rownames=F, escape = F, extensions=c('Buttons','FixedHeader'), autoHideNavigation = F, fillContainer=T, options=list(dom='fBrtip', buttons=c('colvis','excel','csv'), fixedHeader=T, pageLength=5, searchHighlight=T, autoWidth=T, columnDefs=list(list(width='100px',targets=c(0:58))), scrollX=T)) #why can't I scroll horizontally?

Is there something that I am using incorrectly? When I recreate this same Rmd in the html_output layout, everything works correctly.

[jjallaire]

A couple of problems here, first echo = TRUE isn't supported in flexdashboard (this throws off the layout engine). Also, setting data-width and data-height to 10000 seems like it would place some content offscreen so that might also be an issue. Finally, with DT you should always make sure you are running the latest version from CRAN as the most recent update contains some important enhancements/fixes for flexdashboard.

[DianaCesar]

Hi jjallaire,

I made the suggested changes, unfortunately, with no effect.

While we are on the subject of scrolling, I have also noticed a few difficulties with getting flexdashboard to scroll vertically when the output object is taller than the screen. For example, in the above partial example, if I set vertical_layout to 'scroll' as I have already done, and I create a DT that is taller than the available screen, then I would expect a vertical scroll bar to appear on the right-hand side of the page. Currently, I can get a vertical scrollbar to appear within the DT table itself, but there is no scrollbar to control the entire page (i.e., to allow me to view the items directly beneath the DT, such as the pagination/other controls). Now when I place another object beneath this DT, the vertical scroller appears, so that I can see both objects.

I can't seem to control the appearance/disappearance of the vertical scrollbar with the data-height attribute, either. Perhaps this feedback gives you a hint as to what I could be doing wrong?

[maxmoro]

I've the same issue, I can see the horizontal scroll bar in the interactive Rstudio, but when I publish to Connect the bar is not visible. Here my code for the rendering

` Row {auto-height='400px', style= 'overflow-x:auto'}

Details

renderDataTable(server=T,{ dt= DT::datatable(out ,escape=FALSE ,rownames=FALSE ,filter = list(position = 'top', clear = FALSE, plain=T) ,options = list( dom = 'Bfrtip' ,searching=T ,pageLength=15 ,scrollX=TRUE ,autoWidth = T ,deferRender=F ,stateSave=TRUE ,lengthMenu=c(10,15,25,50,100,250,500)

              ))

}) `

Thank you Max

[maxmoro]

I found that it works when the YAML vertical_layout is set to fill, but I really need the option as scroll

[tarunparmar]

Checkout my example I just posted on issue 109.

Apparently scrollX and scrollY dont take boolean values.