如何在React Prime DataTable中添加超链接？

Question

我有一个数据表，我正在使用 React prime 库， 我的要求是在一个特定列中添加一个链接。

 <DataTable
        paginator
        rows={tableRowPage}
        value={products}
        tableStyle={{ minWidth: "30rem" }}
      ><Column
                key={field}
                field={field}
                header={header}
                style={{ width: "25%" }}
              />
   </DataTable>

我需要特定单元格中的超链接

Answer 1

我在数据表中遇到了同样的问题，不幸的是，根据我的研究，他们似乎不提供对此的支持。

但是，我已经设法通过这种方式解决了这个问题：

数据表添加链接逻辑：

<Column
  field="code"
  header="Code"
  body={(rowData) => {
    return (
      <div
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <div
          style={{
            color: "#3F00FF",
            textDecoration: "underline",
            cursor: "pointer",
            "&:hover": {
              color: "#23297A",
            },
          }}
          onClick={() => window.open("www.google.com", "_blank").focus()}
        >
          {rowData.code}
        </div>
      </div>
    );
  }}
></Column>;

我已经使用 Prime React Column 组件中的

body

渲染了数据。我应用 CSS 将其设置为链接样式，并添加了 onClick 事件以进行重定向。您可以根据您的要求修改逻辑。

完整代码链接：https://codesandbox.io/s/primereact-demo-forked-kqtdvs?file=/src/App.jsx

如果您还有任何疑问，请告诉我。