r - Factor Search Clearing Button in DT: shinydashboard vs. shinymaterial

Question

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.

shinydashboard screenshot where the "filter clearing" button for the factor column is present: shinydashboard screenshot

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

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)

question from:https://stackoverflow.com/questions/65894974/factor-search-clearing-button-in-dt-shinydashboard-vs-shinymaterial

Answer 1

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").