Clickable row with Shopify Polaris DataTable

Question

Is there any way to make the rows of a Shopify Polaris DataTable to be clickable?

Answer 1

Making the rows clickable is not a native possibility, however it seems you still have a few options :

1. Add event listeners directly on DOM to trigger your actions (but is kinda an anti pattern with react).
2. For string data you can add dom (maybe components also) element inside your rows array. You could define your function and wrap each of your data with a <div onClick="..."></div>. To make UX better and make the whole row clickable (and not just its content), you would need to add some custom css to your wrapping div so it goes beyond initial polaris cell padding.

See the link below :

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

Answer 2

Just need to change each row with the below-given HTML code & add CSS to your project.

<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

The easiest way is to wrap the element you want to make clickable into a div with an onClick() property.

You can do something like that:

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