search

rstudio / DT

R Interface to the jQuery Plug-in DataTables
https://rstudio.github.io/DT/
Other
587 stars 184 forks source link

(Buttons ext) drop down menus do not render smoothly #773

Open ghost opened 4 years ago

ghost commented 4 years ago

I have just upgraded DT, from 0.6 to 0.12 (although, from a mathematical perspective, it doesn't look like an upgrade).

I have only noticed that when I use the Buttons extension and provide e.g. the option of Column Selection, the drop down menus do not render smoothly like before, although they are ultimately shown correctly.

buttons =
  list(
    "pageLength",
  list(
    extend = "colvis",
    text = "Column Selection"
   ),

By filing an issue to this repo, I promise that

I understand that my issue may be closed if I don't fulfill my promises.

shrektan commented 4 years ago

the drop down menus do not render smoothly like before, although they are ultimately shown correctly.

I don't understand what you are pointing to. It works fine with the below reproducible example.

I'm going to close this but feel free to reopen it if you have more details and the session info and the browser you are using.

DT::datatable(
  options = list(
    dom = 'Bfrtip',
    buttons =
      list(
        "pageLength",
        list(extend = "colvis", text = "Column Selection")
      )
  ),
  iris, extensions = 'Buttons'
)
ghost commented 4 years ago

Ok, here is the full rmarkdown chunk. I hope that my point will be apparent. (I don't know how to reopen the issue)

library(dplyr)
library(DT)

datatable(iris,
  extensions = c("Buttons"), # ,'FixedColumns'
  escape = FALSE,
  style = "bootstrap", # 'default', bootstrap
  class = "cell-border stripe table-condensed hover",
  options = list(
    pageLength = 25,
    lengthMenu = list(c(10, 25, 50, -1), c("10", "25", "50", "All")),
    autoWidth = TRUE,
    columnDefs = list(
      list(className = "dt-center", targets = 1:3),
      list(width = "300px", targets = c(3))
    ),
    dom = "Bfrtip", # Bλfrtip
    scrollX = TRUE,
    buttons =
        list(
              "pageLength",
              list( # colvis
                extend = "colvis",
                text = "Επιλογή Στηλών"
              ),
              "copy", "csv",
              list( # excel
                extend = "excel",
                title = "my title",
                filename = "my_title"
              ),
              list( # pdf
                extend = "pdf",
                title = "my title",
                pageSize = "A4",
                orientation = "landscape",
                filename = "my_title",
                exportOptions =
                  list(
                    columns = ":visible"
                  ),
                customize = JS(
                  "function (doc) { 
                              doc.defaultStyle.fontSize = 7;   
                              doc.styles.tableHeader.fontSize = 8;
                            }"
                )
              ), 
              list( # print
                extend = "print",
                title = "my title",
                exportOptions =
                  list(
                    columns = ":visible"
                  )
              )
    )
  )
) %>%
  formatStyle("Sepal.Length", backgroundColor = "AntiqueWhite", fontWeight = "bold") %>%
  formatStyle(c("Species"), `font-size` = "12px")

sessionInfo

## R version 3.6.1 (2019-07-05)
## Platform: x86_64-w64-mingw32/x64 (64-bit)
## Running under: Windows 8.1 x64 (build 9600)
## 
## Matrix products: default
## 
## locale:
## [1] LC_COLLATE=Greek_Greece.1253  LC_CTYPE=Greek_Greece.1253   
## [3] LC_MONETARY=Greek_Greece.1253 LC_NUMERIC=C                 
## [5] LC_TIME=Greek_Greece.1253    
## 
## attached base packages:
## [1] stats     graphics  grDevices utils     datasets  methods   base     
## 
## other attached packages:
## [1] DT_0.12     dplyr_0.8.4
## 
## loaded via a namespace (and not attached):
##  [1] Rcpp_1.0.3        knitr_1.28        magrittr_1.5      tidyselect_1.0.0 
##  [5] xtable_1.8-4      R6_2.4.1          rlang_0.4.4       fastmap_1.0.1    
##  [9] stringr_1.4.0     tools_3.6.1       xfun_0.12         htmltools_0.4.0  
## [13] crosstalk_1.0.0   yaml_2.2.1        assertthat_0.2.1  digest_0.6.24    
## [17] tibble_2.1.3      crayon_1.3.4      shiny_1.4.0       later_1.0.0      
## [21] purrr_0.3.3       promises_1.1.0    htmlwidgets_1.5.1 mime_0.9         
## [25] glue_1.3.1        evaluate_0.14     rmarkdown_2.1     stringi_1.4.6    
## [29] compiler_3.6.1    pillar_1.4.3      jsonlite_1.6.1    httpuv_1.5.2     
## [33] pkgconfig_2.0.3
shrektan commented 4 years ago

It's an issue related to the style = 'bootstrap'(possible with bootstrap4 as well). A simpler example can be illustrated by the below code. When the sub-element of the buttons being pop up, it will beneath the column header at the first second. One second later, it will be at the top level.

I doubt it relates to the upstream. Will investigate when I have time.

library(shiny)
ui <- fluidPage(
  DT::DTOutput('tbl')
)
server <- function(input, output, session) {
  output$tbl <- DT::renderDT({
    DT::datatable(
      style = 'bootstrap',
      options = list(
        dom = 'Bfrtip',
        buttons =
          list(
            'copy', 'pdf', 'print',
            "pageLength",
            list(extend = "colvis", text = "Column Selection")
          )
      ),
      iris, extensions = 'Buttons'
    )
  })
}
shiny::runApp(list(ui = ui, server = server))

UPDATE: This only happens on bootstrap3. It works fine on Bootstrap4.

UPDATE2: It's because the dropdown menu is showing up with a transition animation. It means at first the menu is sort of transparent. On bootstrap3, it takes about 2 seconds which is very long, compared to bootstrap4 which takes only 1 second. This is my roughly feeling. I will report to the upstream when I have more confidence in the causes.

shrektan commented 4 years ago

I've reported to the upstream.