为何从shinydashboard迁移到shinymaterial后DT因子过滤清除按钮消失？

因shinymaterial的界面美观性更受用户偏好，目前正将多个基于shinydashboard开发的Shiny应用迁移至shinymaterial框架，迁移过程中发现DT表格组件的渲染异常：在shinymaterial仪表板中使用DT表格对因子类型列执行搜索过滤时，shinydashboard环境下可正常显示的、用于一键清除已选因子过滤条件的“x”按钮无法正常渲染。

现象对照 #

• shinydashboard环境下，配置完全一致的DT表格，选中因子列的过滤选项后，清除按钮可正常显示
• shinymaterial环境下，采用相同表格配置时，该清除按钮完全缺失

可复现问题的代码示例 #

运行正常的shinydashboard版本 #

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

# 加载shinydashboard框架依赖
library(shinydashboard)

ui <- shinydashboard::dashboardPage(
  shinydashboard::dashboardHeader(
    title = "示例标题",
    titleWidth = 250
  ),
  shinydashboard::dashboardSidebar(),
  shinydashboard::dashboardBody(
    DT::dataTableOutput("exampleDT")
  )
)

server <- function(input, output, session) {
  
  # 基于mpg数据集，将manufacturer列转换为因子类型
  df <- mpg %>%
    mutate(manufacturer = as.factor(manufacturer))
  
  # 渲染DT数据表格
  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)

# 加载shinymaterial框架依赖
library(shinymaterial)

ui <- shinymaterial::material_page(
  title = "示例标题",
  primary_theme_color = "grey",
  shinymaterial::material_tabs(
    tabs = c("标签页1" = "tab1")
  ),
  shinymaterial::material_tab_content(
    tab_id = "tab1",
    shinymaterial::material_card(
      title = "",
      DT::dataTableOutput("exampleDT")
    )
  )
)

server <- function(input, output, session) {
  
  # 基于mpg数据集，将manufacturer列转换为因子类型
  df <- mpg %>%
    mutate(manufacturer = as.factor(manufacturer))
  
  # 渲染DT数据表格
  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)

内容的提问来源于stack exchange，提问作者Jim Fairman