R Shiny中嵌入Tabulator的可行性及初始化实现咨询

能否在R Shiny中嵌入Tabulator？ #

完全可以。你可以通过Shiny的HTML标签系统引入Tabulator的资源文件，再编写自定义JavaScript代码完成表格的初始化与控制，实现和Shiny应用的交互。

jQuery引用是否必要？ #

Tabulator 5.x及以上版本不再依赖jQuery，无需额外引入jQuery库。直接使用原生JavaScript就能完成所有操作，避免不必要的依赖。

初始化表格并显示示例数据 #

下面是完整的Shiny示例，包含Tabulator资源引入、表格初始化以及两行示例数据展示：

library(shiny)

ui <- fluidPage(
  # 引入Tabulator的CSS和JS（官方CDN）
  tags$link(rel = "stylesheet", href = "https://cdn.jsdelivr.net/npm/tabulator-tables@5.5.2/dist/css/tabulator.min.css"),
  tags$script(src = "https://cdn.jsdelivr.net/npm/tabulator-tables@5.5.2/dist/js/tabulator.min.js"),
  
  # 容纳Tabulator表格的div容器
  div(id = "tabulatorDiv", style = "width: 80%; margin: 20px auto;"),
  
  # 初始化表格的自定义JS
  tags$script(HTML('
    // 等待Shiny页面加载完成后初始化表格
    document.addEventListener("shiny:connected", function() {
      // 定义表格列配置
      const columns = [
        {title: "姓名", field: "name", width: 150},
        {title: "年龄", field: "age", width: 100},
        {title: "城市", field: "city", width: 200}
      ];
      
      // 两行示例数据
      const sampleData = [
        {id: 1, name: "张三", age: 28, city: "北京"},
        {id: 2, name: "李四", age: 32, city: "上海"}
      ];
      
      // 初始化Tabulator表格
      new Tabulator("#tabulatorDiv", {
        columns: columns,
        data: sampleData,
        layout: "fitColumns"
      });
    });
  '))
)

server <- function(input, output, session) {
  # 后续交互逻辑可在此扩展
}

shinyApp(ui, server)

将Tabulator事件传回R #

要把Tabulator的事件（如行点击、单元格编辑）传回R，可通过Shiny.setInputValue()方法将事件数据发送到Shiny的输入对象，再在R端监听该输入。

以下是行点击事件传回R的示例，在上述JS代码的表格初始化配置中添加事件监听：

new Tabulator("#tabulatorDiv", {
  columns: columns,
  data: sampleData,
  layout: "fitColumns",
  rowClick: function(e, row) {
    // 将点击的行数据发送到R，输入名为tabulator_row_click
    Shiny.setInputValue("tabulator_row_click", row.getData(), {priority: "event"});
  }
});

然后在R的server函数中接收并处理这个事件：

server <- function(input, output, session) {
  observeEvent(input$tabulator_row_click, {
    clicked_row <- input$tabulator_row_click
    print(paste("点击了行：", clicked_row$name))
    # 此处可添加自定义业务逻辑
  })
}

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