Shopify Question posted in
The Shopify help center can be found here.

Clickable row with Shopify Polaris DataTable

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

shopify polaris datatable

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search