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

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)

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