在Tabulator格式化程序中使用React元素

Question

对于Node.js来说是全新的，可以做出反应。

使用制表符定义分页表格并使它正常工作。

这是我的简单列声明：

const columns = [
  {
    title: "ID",
    field: "id",
    formatter: function(cell) {
      return '<span style="color: red;">' + cell.getValue() + "</span>";
    }
  },
  { title: "First Name", field: "first_name", headerFilter: true },
  { title: "Last Name", field: "last_name", headerFilter: true },
  { title: "Email", field: "email" },
  { title: "Gender", field: "gender" },
  { title: "IP Address", field: "ip_address" }
];

我想做的是单击ID号时使用reactjs-popup创建一个模式窗口。

弹出代码是：

<Popup
  trigger={<span style="color: red;">{cell.getValue()}</span>}
  modal
  closeOnDocumentClick
>
  <span> Modal content </span>
</Popup>

如何更换return '<span style="color: red;">' + cell.getValue() + "</span>";

是否具有Popup元素，以便根据需要将ID字段呈现为红色，然后在单击时触发模式窗口？

我尝试将Popup包装在const Modal = () => (...popup code here...)中并返回Modal对象，但无济于事。