Factor Search Clearing Button in DT: shinydashboard vs. shinymaterial

[fairmantium]

Hi All,

I have several applications that I am attempting to port from shinydashboard to shinymaterial, due to the nice aesthetics that my users seem to enjoy. I am facing an issue with searching/filtering factors in the shinymaterial dashboards where the "x" button that normally clears factor filtering is NOT present when using shinymaterial.

shinymaterial screenshot where there is no "filter clearing" button for the factor column:

Sorry, as a new user the bulletin board will not allow me to attached 2 screenshots

Here are my reproducible code examples:

shinydashboard

library(shiny)
library(tidyverse)
library(DT)

# Shiny Dashboard or Shiny Material
library(shinydashboard)

ui <- shinydashboard::dashboardPage(
  shinydashboard::dashboardHeader(
    title = "Some Title",
    titleWidth = 250
  ),
  
  shinydashboard::dashboardSidebar(),
  
  shinydashboard::dashboardBody(
    DT::dataTableOutput("exampleDT")
  )
)

server <- function(input, output, session) {
  
  # Use MPG Data and convert manufacturer to Factor
  df <- mpg %>%
    mutate(manufacturer = as.factor(manufacturer))
  
  # Create Datatable
  output$exampleDT <- DT::renderDataTable({
    
    DT::datatable(df,
                  class = 'cell-border stripe',
                  rownames = FALSE,
                  escape = FALSE,
                  extensions = c("KeyTable"),
                  filter = list(position = "top"),
                  options = list(searching = TRUE,
                                 searchHighlight = TRUE,
                                 scrollX = TRUE,
                                 pageLength = 5,
                                 autoWidth = TRUE,
                                 keys = TRUE,
                                 columnDefs = list(list(className = "dt-center", targets = "_all"))
                  )
    )
  })
  
}

shinyApp(ui = ui, server = server)

shinymaterial

library(shiny)
library(tidyverse)
library(DT)

# Shiny Dashboard or Shiny Material
library(shinymaterial)

ui <- shinymaterial::material_page(
  title = "Some Title",
  primary_theme_color = "grey",
  
  shinymaterial::material_tabs(
    tabs = c("Tab 1" = "tab1")
  ),
  
  shinymaterial::material_tab_content(
    tab_id = "tab1",
    shinymaterial::material_card(
      title = "",
      DT::dataTableOutput("exampleDT")
    )
  )
  
)

server <- function(input, output, session) {
  
  # Use MPG Data and convert manufacturer to Factor
  df <- mpg %>%
    mutate(manufacturer = as.factor(manufacturer))
  
  # Create Datatable
  output$exampleDT <- DT::renderDataTable({
    
    DT::datatable(df,
                  class = 'cell-border stripe',
                  rownames = FALSE,
                  escape = FALSE,
                  extensions = c("KeyTable"),
                  filter = list(position = "top"),
                  options = list(searching = TRUE,
                                 searchHighlight = TRUE,
                                 scrollX = TRUE,
                                 pageLength = 5,
                                 autoWidth = TRUE,
                                 keys = TRUE,
                                 columnDefs = list(list(className = "dt-center", targets = "_all"))
                  )
    )
  })
  
}

shinyApp(ui = ui, server = server)

[fairmantium]

From my accompanying StackOverflow post, I got an answer:

That's because this "button" actually is a glyphicon icon. The glyphicon icons are included in bootstrap, which is automatically loaded when you use an ordinary Shiny page, but not when you use 'shinymaterial'. So you have to add a link to bootstrap-glyphicons.css:

ui <- shinymaterial::material_page(
  tags$head(
    tags$link(href = "https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css", rel="stylesheet")
  ),
  
  title = "Some Title",
  ......

This way requires to use the app online. But instead of including a link, you can download the css file and put it in the www subfolder of your app, and include it with tags$link(href = "bootstrap-glyphicons.css", rel = "stylesheet").