带有 Shopify Polaris 数据表的可点击行

Question

有什么方法可以使 Shopify Polaris DataTable 的行可点击吗？

Answer 1

使行可点击并不是天生的可能性，但似乎您仍然有一些选择：

1. 直接在 DOM 上添加事件监听器来触发你的操作（但这有点反模式与反应）。
2. 对于字符串数据，您可以在

   rows

   数组中添加 dom （也可能是组件）元素。您可以定义函数并用

   <div onClick="..."></div>

   包装每个数据。为了使用户体验更好并使整行可点击（而不仅仅是其内容），您需要向包装 div 添加一些自定义 css，使其超出初始的 Polaris 单元格填充。

请参阅以下链接：

https://codesandbox.io/s/kind-joliot-ich3x?file=/App.js

Answer 2

只需使用下面给出的 HTML 代码更改每一行并将 CSS 添加到您的项目中。

<div className="row_click" onClick={() => rowClicked(row)}>

tbody .Polaris-DataTable__Cell{
  padding: 0px !important;
}
.row_click {
  cursor: pointer;
  padding: var(--p-space-4);
}

Answer 3

最简单的方法是将要使其可点击的元素包装到带有 onClick() 属性的 div 中。

你可以这样做：

<div onClick={() => alert("Clicked!")}>.
    YOUR CLICKABLE AREA HERE
</div>