如何仅用JavaScript修改Rmd/qmd中reactable表格的数据？

问题背景 #

在Quarto的.qmd文件中使用reactable包创建了表格，希望不依赖crosstalk或Shiny，仅通过JavaScript（OJS）实现根据用户选择动态更新表格数据。以下是原始示例代码：

---
title: "update reactable"
format: html
---

```{r}
library(reactable)

ojs_define(iris1 = iris[1:5,],
           iris2 = iris[51:52,],
           iris3 = iris[101:104,])

reactable(iris[1:5,],
          elementId = 'iris')

viewof choice = Inputs.radio(['a','b','c'], {label: 'choose a dataset', value: 'a'})

datasets = ({'a': iris1,
            'b': iris2,
            'c': iris3
            })

dataset = datasets[ choice];

dataset

"update reactable instance based on user's choice here"
// update reactable instance based on user's choice here

### 解决方案
核心思路是利用`reactable`暴露的实例方法`setData`，结合OJS监听用户选择变化来更新表格。具体步骤如下：

1. **确保reactable有唯一elementId**：原始代码中已设置`elementId='iris'`，这是后续通过JS定位表格的关键。
2. **监听选择变化并更新表格**：在最后一个OJS块中，添加代码监听`choice`的变化，获取对应数据集后调用reactable实例的`setData`方法更新数据。

修改后的完整OJS更新块代码如下：

```{ojs}
// 监听选择变化，自动触发表格更新
Inputs.observe(() => {
  // 获取reactable实例
  const table = document.getElementById('iris').__reactable__;
  // 获取当前选中的数据集
  const dataset = datasets[choice];
  // 调用setData方法更新表格数据
  table.setData(dataset);
}, [choice])

完整修改后的.qmd代码 #

---
title: "update reactable"
format: html
---

```{r}
library(reactable)

ojs_define(iris1 = iris[1:5,],
           iris2 = iris[51:52,],
           iris3 = iris[101:104,])

reactable(iris[1:5,],
          elementId = 'iris')

viewof choice = Inputs.radio(['a','b','c'], {label: 'choose a dataset', value: 'a'})

datasets = ({'a': iris1,
            'b': iris2,
            'c': iris3
            })

dataset = datasets[ choice];

// 监听选择变化，更新reactable表格
Inputs.observe(() => {
  const tableInstance = document.getElementById('iris').__reactable__;
  tableInstance.setData(datasets[choice]);
}, [choice])

### 关键说明
- `reactable`会将表格实例挂载到对应DOM元素的`__reactable__`属性上，通过`document.getElementById`即可获取。
- `setData`是reactable实例提供的官方方法，直接传入新的数据集即可完成表格数据更新，会自动保留表格的原有配置（如排序、过滤等）。
- 使用`Inputs.observe`监听`choice`变量的变化，确保每次用户切换选项时都能触发表格更新。

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