Shiny中reactable刷新时如何保留用户自定义排序设置

问题描述 #

• 搭载reactable组件的Shiny应用开启用户自主排序功能后，表格触发刷新时排序状态会回退到初始默认排序，需要实现刷新后自动保留用户选定排序规则的效果
• 现有方案依赖selectInput、pickerInput等外部输入组件传值给defaultSorted参数，需要无额外控件的原生实现方式
• 官方提供的getReactableState方法仅支持获取页大小、页码、选中项状态，无法直接读取排序配置
• 最小复现代码如下：用户对前两列排序后点击Toggle按钮，表格刷新后排序会重置为初始状态

library(shiny)
library(reactable)


ui <- fluidPage(
  actionButton("toggle", "Toggle"),
  reactableOutput("table")
)

server <- function(input, output, session){
  
  df <- eventReactive(input$toggle, {
    mtcars[c(1:2,sample(3:ncol(mtcars), size = 3))]
  })
  
  output$table <- renderReactable({
    reactable(df(),
              filterable = FALSE, 
              sortable = TRUE)
  })
  
}


shinyApp(ui, server)

实现方法 #

不需要新增任何外部输入控件，通过reactable自带的状态回调即可实现：

1. 利用onStateChange JS回调实时监听表格排序变化，将排序配置同步到Shiny端存储
2. 表格重新渲染时，将存储的排序配置直接传入defaultSorted参数，即可恢复用户之前选择的排序规则

修改后可正常运行的代码：

library(shiny)
library(reactable)

ui <- fluidPage(
  actionButton("toggle", "Toggle"),
  reactableOutput("table")
)

server <- function(input, output, session){
  # 响应式值存储当前排序状态
  saved_sort <- reactiveVal(NULL)
  
  df <- eventReactive(input$toggle, {
    mtcars[c(1:2,sample(3:ncol(mtcars), size = 3))]
  })
  
  output$table <- renderReactable({
    reactable(
      df(),
      filterable = FALSE, 
      sortable = TRUE,
      # 渲染时传入已保存的排序规则
      defaultSorted = saved_sort(),
      # JS回调监听状态变化，同步排序配置到Shiny
      onStateChange = JS("
        function(state) {
          if (state.sorted) {
            Shiny.setInputValue('reactable_sort', state.sorted, {priority: 'event'})
          }
        }
      ")
    )
  })
  
  # 更新存储的排序规则
  observeEvent(input$reactable_sort, {
    saved_sort(input$reactable_sort)
  })
  
}

shinyApp(ui, server)

实现说明 #

• 回调返回的state.sorted数据结构和defaultSorted要求的参数格式完全一致，不需要额外做格式转换
• Shiny.setInputValue配置priority: 'event'避免重复触发无效渲染
• 如果刷新后原排序列被移除，reactable会自动忽略不存在的列，不会抛出报错，适配动态列场景

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