DT::datatable not working as expected

[komalsrathi]

Hi,

I recently updated R and all the packages. Since, I am seeing an unexpected behavior when viewing DT::datatable within a flexdashboard. If you run the code below, you will see that the footer of the table is not visible and you have to zoom out at least 50% to see the page numbers and total number of rows which wasn't the case before (screenshots of before and after attached: cannot reproduce before tables with mtcars so showing a table that I had generated using the same code).

Before updates, the table showed pagination, total number of rows by default. Even though it shows 6 rows but I was able to scroll vertically to see all 10 rows:

Now, you cannot scroll vertically or horizontally and cannot see total number of rows as well as pagination:

You have to zoom out to see the bottom part of a table:

Here is a reproducible test.Rmd file:

---
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
editor_options: 
  chunk_output_type: console
---

---
title: Test
---
  
```{r include=FALSE, echo=FALSE}
knitr::opts_chunk$set(comment = NA)
```


```{r load_libraries}
library(DT)
```

Tab1 (P1) {data-navmenu="Tab"}
===
Row {data-height=200}
---   

### Some Information

```{r empty}
```

Row {data-height=500}
---
  
### Table1
  
```{r table1}
DT::datatable(mtcars)
```

Row {data-height=300}
---
  
### Table2
  
```{r table2}
DT::datatable(mtcars)
```

I convert the Rmd to html using:

rmarkdown::render(input = 'test.Rmd', output_file = "test.html")

My sessionInfo:

R version 4.0.4 (2021-02-15)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS High Sierra 10.13.6

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/4.0/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] kableExtra_1.3.4 DT_0.17         

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.6          later_1.1.0.1       bslib_0.2.4         compiler_4.0.4      jquerylib_0.1.3     highr_0.8          
 [7] tools_4.0.4         digest_0.6.27       jsonlite_1.7.2      evaluate_0.14       lifecycle_1.0.0     viridisLite_0.3.0  
[13] rlang_0.4.10        shiny_1.6.0         rstudioapi_0.13     crosstalk_1.1.1     yaml_2.2.1          xfun_0.21          
[19] fastmap_1.1.0       httr_1.4.2          stringr_1.4.0       knitr_1.31          xml2_1.3.2          htmlwidgets_1.5.3  
[25] sass_0.3.1          systemfonts_1.0.1   webshot_0.5.2       flexdashboard_0.5.2 svglite_2.0.0       glue_1.4.2         
[31] R6_2.5.0            rmarkdown_2.7       magrittr_2.0.1      ellipsis_0.3.1      promises_1.2.0.1    scales_1.1.1       
[37] htmltools_0.5.1.1   rvest_0.3.6         xtable_1.8-4        mime_0.10           colorspace_2.0-0    httpuv_1.5.5       
[43] tinytex_0.29        stringi_1.5.3       munsell_0.5.0      

[mbjohnsonmn]

I've been experiencing similar issues with the doc info and page menu dom objects "disappearing". I had not thought to zoom out. The only "solution" I found to getting the DT to render as configured was to not use the row .tabset attribute and set vertical_layout: scroll. I would really like to restore tab navigation.

[cpsievert]

@komalsrathi thanks for the report. Do you happen to know what versions of DT and flexdashboard were giving you the correct behavior?

[komalsrathi]

@cpsievert I was using R version 3.6 and I recently updated to R version 4.0 and all installed packages. So, I looked into the libraries of R 3.6 and found DT 0.13 and 0.5.1.1. However, I have tried reverting back to these specific versions and it is still not working for me so I am not sure what's wrong.

[komalsrathi]

I've been experiencing similar issues with the doc info and page menu dom objects "disappearing". I had not thought to zoom out. The only "solution" I found to getting the DT to render as configured was to not use the row .tabset attribute and set vertical_layout: scroll. I would really like to restore tab navigation.

@mbjohnsonmn As a workaround, I did try the vertical_layout: scroll, it works when you have elements of the same size on a page but I have multiple tabs with various rows/columns in my flexdashboard and they just go out of alignment when I use this.

[meztez]

I believe the table is overflowing its container in a tabPanel. I've not dug into the css source of the problem yet.

Here my temporary fix :

    DT::datatable(
      {data},
      options = list(
        scrollY="100vh",
        scrollCollapse = FALSE
      )
    )

> sessionInfo()
R version 4.0.4 (2021-02-15)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19041)

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.1252 
[2] LC_CTYPE=English_United States.1252   
[3] LC_MONETARY=English_United States.1252
[4] LC_NUMERIC=C                          
[5] LC_TIME=English_United States.1252    
system code page: 65001

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods  
[7] base     

other attached packages:
[1] DT_0.17                  flexdashboard_0.5.2.9000
[3] rmarkdown_2.7.4          shiny_1.6.0             

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.6         later_1.1.0.1      bslib_0.2.4.9002  
 [4] compiler_4.0.4     jquerylib_0.1.3    prettyunits_1.1.1 
 [7] remotes_2.2.0.9000 tools_4.0.4        RPostgres_1.3.1   
[10] digest_0.6.27      pkgbuild_1.2.0     bit_4.0.4         
[13] lifecycle_1.0.0    jsonlite_1.7.2     evaluate_0.14     
[16] pkgconfig_2.0.3    rlang_0.4.10       cli_2.3.1         
[19] DBI_1.1.1          rstudioapi_0.13    curl_4.3          
[22] yaml_2.2.1         xfun_0.22          fastmap_1.1.0     
[25] withr_2.4.1        knitr_1.31         htmlwidgets_1.5.3 
[28] sass_0.3.1         vctrs_0.3.6        hms_1.0.0         
[31] rprojroot_2.0.2    bit64_4.0.5        glue_1.4.2        
[34] R6_2.5.0           processx_3.4.5     callr_3.5.1       
[37] blob_1.2.1         magrittr_2.0.1     promises_1.2.0.1  
[40] ellipsis_0.3.1     ps_1.6.0           htmltools_0.5.1.1 
[43] rsconnect_0.8.16   assertthat_0.2.1   xtable_1.8-4      
[46] mime_0.10          httpuv_1.5.5       crayon_1.4.1 

[meztez]

I've also added

/* Fix DT / Flexdashboard container cut off */
.chart-stage-flex {
  overflow: scroll !important;
}

I get always-on scroll bar but at least content stay accessible.

[komalsrathi]

@meztez thanks, I just tried it and the combination of the above two is a good workaround until this issue is resolved.

[cpsievert]

Turns out that {DT} was doing something it should do make the example in #315 (comment) not work. Install the development version of {DT} to fix it

remotes::install_github("rstudio/DT")

Note, however, that installing the new version of {DT} won't fix sizing issues with vertical_layout: scroll -- I opened a new issue for that #321