JSFiddle - React, Tailwind, and code Playground

by Riderman Sousa

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
      <td></td>
    </tr>
  </thead>
  <tbody>
  <tr v-for="client in clients" @click="open(client)">
    <td>{{client.name}}</td>
    <td>{{client.age}}</td>
    <td>
      <button @click.stop="deleteClient(client)" >Delete</button>
    </td>
  </tr>
  </tbody>
</table>

</div>

CSS

table tr {
  cursor: pointer;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    clients: [
    	{ name: 'Riderman', age: 31 },
      { name: 'John', age: 29 }
    ]
  },
  methods: {
  	deleteClient: function(client) {
    	alert('Deleting ', client)
    },
    open: function(client) {
    	alert('Open', client)
    }
  }
})