使用Shopify Polaris DataTable单击的行

Question

有任何方法使北极星DataTable的行可点击吗？

​

​

Answer 1

使行可单击并不是一种固有的可能性，但似乎您仍然有几个选项：

1. 直接在DOM上添加事件侦听器以触发您的操作(但这是一种带有react的反模式)。
2. 对于字符串数据，可以在rows数组中添加dom (也可能是组件)元素。您可以定义函数并使用<div onClick="..."></div>包装每个数据。为了使UX更好，并使整个行可点击(而不仅仅是它的内容)，您需要在包装div中添加一些自定义的css，这样它就超越了初始的北极星单元格填充。

见下面的链接：

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);
}