rstudio / DT

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

two "remove" icons in filtered filter = 'top'? #1098

Closed alanfarahani closed 11 months ago

alanfarahani commented 12 months ago

Hi all,

I'm persistently encountering something in my DT tables with filter = 'top' that I'm not sure is a bug or a feature.

I have tried this in bslib, bs4Dash, and shinydashboardplus. See the MREs below.

Namely, no matter the combination of bootstrap versions, themes, or presets, in conjunction with any of the DT styles (default, bootstrap 4, 5, etc.), there are always two "remove filter" icons -- one in the search field itself (what I would take to be the default behavior), and one appearing in the bottom left hand corner. The sole exception is shinydashboardplus.

Is this in fact supposed to be default behavior?

I can close this issue if I should escalate this to bslib / bs4Dash instead.

Thanks.

Examples:

bslib: theme_shiny

shinydashboardplus: shinydbplus_dt_filter

bslib MRE:

library(shiny)
library(bslib)
library(DT)

# bslib UI
ui <- page_fluid(
  theme = bs_theme(
    #version = 5,
    preset = "shiny",
    #bootswatch = "cerulean",
  ),
  title = "Test",
  card(
    card_header("Data table"),
    height = 600,
    card_body(
      min_height = 500,
      DT::dataTableOutput("table")
    )
  )
)

# Server
server <- function(input, output, session) {
  output$table <-  DT::renderDataTable({
    DT::datatable(
      mtcars,
      style = "bootstrap5",
      filter = "top"
    )
  })
}

shinyApp(ui, server)

shinydashboardplus MRE:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPage(
    title = "Basic Dashboard",
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    controlbar = dashboardControlbar(),
    footer = dashboardFooter(),
    body = dashboardBody(
      fluidRow(
        column(width = 12,
               box(
                 width = NULL,
                 title = "Data table",
                 DT::dataTableOutput("table")
               ))
      )
    )
  ),
  server = function(input, output) {

    output$table <-  DT::renderDataTable({
      DT::datatable(
        mtcars,
        style = "bootstrap4",
        filter = "top"
      )
    })

  }
)

Session Info


  ─ Session info ──────────────────────────────────────────────────────────────────────
setting  value
version  R version 4.3.0 (2023-04-21 ucrt)
os       Windows 10 x64 (build 19045)
system   x86_64, mingw32
ui       RStudio
language (EN)
collate  English_United States.utf8
ctype    English_United States.utf8
tz       America/Los_Angeles
date     2023-11-18
rstudio  2023.06.1+524 Mountain Hydrangea (desktop)
pandoc   NA

─ Packages ──────────────────────────────────────────────────────────────────────────
package     * version    date (UTC) lib source
bslib       * 0.5.1.9000 2023-11-18 [1] Github (rstudio/bslib@02d5c0c)
cachem        1.0.8      2023-05-01 [1] CRAN (R 4.2.3)
callr         3.7.3      2022-11-02 [1] CRAN (R 4.3.0)
cli           3.6.1      2023-03-23 [1] CRAN (R 4.2.3)
crayon        1.5.2      2022-09-29 [1] CRAN (R 4.3.0)
crosstalk     1.2.0      2021-11-04 [1] CRAN (R 4.3.0)
devtools      2.4.5      2022-10-11 [1] CRAN (R 4.3.0)
digest        0.6.33     2023-07-07 [1] CRAN (R 4.3.2)
DT          * 0.30       2023-10-05 [1] CRAN (R 4.3.2)
ellipsis      0.3.2      2021-04-29 [1] CRAN (R 4.2.1)
fansi         1.0.4      2023-01-22 [1] CRAN (R 4.2.3)
fastmap       1.1.1      2023-02-24 [1] CRAN (R 4.2.3)
fs            1.6.3      2023-07-20 [1] CRAN (R 4.3.1)
glue          1.6.2      2022-02-24 [1] CRAN (R 4.2.1)
htmltools     0.5.7      2023-11-03 [1] CRAN (R 4.3.2)
htmlwidgets   1.6.2      2023-03-17 [1] CRAN (R 4.3.0)
httpuv        1.6.11     2023-05-11 [1] CRAN (R 4.2.3)
jquerylib     0.1.4      2021-04-26 [1] CRAN (R 4.3.0)
jsonlite      1.8.7      2023-06-29 [1] CRAN (R 4.3.2)
later         1.3.1      2023-05-02 [1] CRAN (R 4.2.3)
lifecycle     1.0.4      2023-11-07 [1] CRAN (R 4.3.2)
magrittr      2.0.3      2022-03-30 [1] CRAN (R 4.2.1)
memoise       2.0.1      2021-11-26 [1] CRAN (R 4.3.0)
mime          0.12       2021-09-28 [1] CRAN (R 4.2.0)
miniUI        0.1.1.1    2018-05-18 [1] CRAN (R 4.3.0)
pillar        1.9.0      2023-03-22 [1] CRAN (R 4.3.0)
pkgbuild      1.4.2      2023-06-26 [1] CRAN (R 4.3.1)
pkgconfig     2.0.3      2019-09-22 [1] CRAN (R 4.3.0)
pkgload       1.3.2.1    2023-07-08 [1] CRAN (R 4.3.1)
prettyunits   1.1.1      2020-01-24 [1] CRAN (R 4.3.0)
processx      3.8.2      2023-06-30 [1] CRAN (R 4.3.1)
profvis       0.3.8      2023-05-02 [1] CRAN (R 4.3.0)
promises      1.2.0.1    2021-02-11 [1] CRAN (R 4.2.1)
ps            1.7.5      2023-04-18 [1] CRAN (R 4.3.0)
purrr         1.0.1      2023-01-10 [1] CRAN (R 4.2.3)
R6            2.5.1      2021-08-19 [1] CRAN (R 4.3.0)
Rcpp          1.0.10     2023-01-22 [1] CRAN (R 4.2.3)
remotes       2.4.2.1    2023-07-18 [1] CRAN (R 4.3.1)
rlang         1.1.2      2023-11-04 [1] CRAN (R 4.3.2)
rsconnect     1.0.2      2023-08-17 [1] CRAN (R 4.3.1)
rstudioapi    0.15.0     2023-07-07 [1] CRAN (R 4.3.1)
sass          0.4.7      2023-07-15 [1] CRAN (R 4.3.2)
sessioninfo   1.2.2      2021-12-06 [1] CRAN (R 4.3.0)
shiny       * 1.8.0      2023-11-17 [1] CRAN (R 4.3.0)
stringi       1.7.12     2023-01-11 [1] CRAN (R 4.2.2)
stringr       1.5.0      2022-12-02 [1] CRAN (R 4.2.2)
tibble        3.2.1      2023-03-20 [1] CRAN (R 4.2.3)
urlchecker    1.0.1      2021-11-30 [1] CRAN (R 4.3.0)
usethis       2.2.2      2023-07-06 [1] CRAN (R 4.3.1)
utf8          1.2.3      2023-01-31 [1] CRAN (R 4.2.3)
vctrs         0.6.2      2023-04-19 [1] CRAN (R 4.2.3)
withr         2.5.0      2022-03-03 [1] CRAN (R 4.3.0)
xtable        1.8-4      2019-04-21 [1] CRAN (R 4.3.0)
yaml          2.3.7      2023-01-23 [1] CRAN (R 4.2.3)

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.

philibe commented 11 months ago

Look at development mode (F12) if you have conflicts.

For example after I have installed some plugins by hand, I had conflicts for, and commented out some :

Try also to put normal in some css, after found the call at two CSS in conflict.

Example found after I had seen it by F12 :

.query-builder.bt-checkbox-glyphicons .checkbox input[type=checkbox]:checked+label::after {
             content: normal;
alanfarahani commented 11 months ago

Hi @philibe, thanks for your response.

I was aware that I could fix this issue using CSS. For those interested, in the bslib MRE I provided above, just add the following:

 tags$style(
    HTML(".glyphicon-remove-circle:before {content: normal;}")
  )

Still, I wanted to raise the issue in the event that it was worth addressing in DT itself, maybe through identifying bootstrap version conflicts and adjusting the css / jscript accordingly.