How to make the whole row clickable?

I am using Vue and have:

<tr v-for="(blabla, index) in data">
  <td>{{ blabla.id }}</td>
  <td>{{ blabla.username }}</td>
  <td>{{ blabla.name }}</td>
  <td>
    <router-link 
      :to="{ name: 'name', params: { blabla: blabla.id } }"
      class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
    >
      Details
    </router-link>                     
  </td>                    
</tr>

How can I make the whole row clickable, not just the button that has the router link?