如何实现点击reactable表格行时弹出新窗口展示子表格？

我明白你想要实现的效果：点击父表格（Table 1）的任意行，就能在独立的新窗口中打开对应制造商的子表格（Table 2），并且多个窗口可以同时存在。下面是一个完全可行的实现方案，不需要依赖Shiny，纯前端就能完成：

完整代码实现 #

library(reactable)
library(dplyr)
library(htmltools)
library(jsonlite)

# 1. 准备原始数据
data <- MASS::Cars93[18:47, ] %>% 
  mutate(ID = as.character(18:47), 
         Date = seq(as.Date("2019-01-01"), by = "day", length.out = 30)) %>% 
  select(ID, Date, Manufacturer, Model, Type, Price)

sales_by_mfr <- data %>% 
  group_by(Manufacturer) %>% 
  summarize(Quantity = n(), Sales = sum(Price))

# 2. 预先生成每个制造商的子表格HTML字符串
# 这样点击时直接调用现成的HTML，避免前端动态处理数据的麻烦
child_tables <- setNames(
  lapply(unique(sales_by_mfr$Manufacturer), function(mfr) {
    # 筛选当前制造商的数据
    sales_data <- filter(data, Manufacturer == mfr) %>% select(-Manufacturer)
    # 生成子表格并转为HTML字符串
    as.character(reactable(
      sales_data, 
      outlined = TRUE, 
      highlight = TRUE, 
      fullWidth = TRUE
    ))
  }), 
  unique(sales_by_mfr$Manufacturer) # 用制造商名称作为列表的键
)

# 3. 渲染父表格，添加点击打开新窗口的逻辑
reactable(
  sales_by_mfr,
  onClick = JS(paste0("function(rowInfo) {
    // 获取当前行对应的制造商名称
    const manufacturer = rowInfo.row.Manufacturer;
    // 从预生成的HTML中取出对应子表格的内容
    const tableContent = ", jsonlite::toJSON(child_tables), "[manufacturer];
    
    // 打开新窗口，指定窗口大小（可根据需求调整）
    const newWindow = window.open('', '_blank', 'width=900,height=700');
    
    // 向新窗口写入完整的HTML文档，确保样式正常加载
    newWindow.document.write(`
      <!DOCTYPE html>
      <html>
      <head>
        <title> ${manufacturer} - Sales Details </title>
        <!-- 引入reactable的样式表，保证子表格样式正常 -->
        <style> ${reactable::reactableDependencies()$stylesheet} </style>
      </head>
      <body style='padding: 20px;'>
        <h2> Sales Details for ${manufacturer} </h2>
        ${tableContent}
      </body>
      </html>
    `);
    
    // 结束文档写入，确保内容渲染完成
    newWindow.document.close();
  }")),
  # 添加鼠标指针样式，提示用户可点击
  rowStyle = list(cursor = "pointer")
)

关键细节解释 #

1. 预生成子表格HTML：
   我们提前在R端为每个制造商生成对应的子表格HTML字符串，存储在一个以制造商名称为键的列表中。这样点击时不需要在前端处理数据，直接调用现成的HTML，既高效又避免了跨语言数据传递的问题。

2. JS点击事件逻辑：

   • 通过rowInfo.row.Manufacturer获取当前点击行的制造商名称；
   • 用window.open打开独立的新窗口，_blank参数保证每次点击都打开新窗口，不会覆盖之前的；
   • 向新窗口写入完整的HTML文档，包括reactable的样式表（确保子表格的样式正常显示），以及子表格的内容和标题，让窗口内容更清晰。

3. 用户体验优化：
   给父表格的行添加cursor: pointer样式，让用户一眼就能看出这些行是可点击的。

这个方案完全满足你的需求：每次点击父行都会打开一个独立的新窗口显示对应子表格，之前打开的窗口不会被关闭，所有窗口可以同时存在。

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