Vue

HTML

<table class="js-table-sections table table-hover">
    <thead>
        <tr>
           <th style="width: 30px;"></th>
           <th>Name</th>
           <th style="width: 15%;">Access</th>
           <th class="hidden-xs" style="width: 15%;">Date</th>
        </tr>
    </thead>
                    
    <tbody class="js-table-sections-header open">
        <tr>
          <td class="text-center">
            <i class="fa fa-angle-right"></i>
          </td>
          <td class="font-w600">Sara Holland</td>
          <td>
              <span class="label label-danger">Disabled</span>
          </td>
          <td class="hidden-xs">
              <em class="text-muted">June 7, 2015 12:16</em>
          </td>
        </tr>
     </tbody>
     <tbody>
         <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $92,00</td>
            <td>
                <small>Paypal</small>
            </td>
            <td class="hidden-xs">
                <small class="text-muted">June 19, 2015 12:16</small>
            </td>
         </tr>
         <tr>
             <td class="text-center"></td>
             <td class="font-w600 text-success">+ $54,00</td>
             <td>
                <small>Paypal</small>
             </td>
             <td class="hidden-xs">
               <small class="text-muted">June 16, 2015 12:16</small>
             </td>
         </tr>
         <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $84,00</td>
            <td>
                <small>Paypal</small>
            </td>
            <td class="hidden-xs">
                <small class="text-muted">June 26, 2015 12:16</small>
            </td>
         </tr>
         <tr>
             <td class="text-center"></td>
             <td class="font-w600 text-success">+ $24,00</td>
             <td>
                 <small>Paypal</small>
             </td>
             <td class="hidden-xs">
                ...

CSS

.js-table-sections-header > tr {
  cursor: pointer;
}
.js-table-sections-header > tr > td:first-child > i {
  -webkit-transition: -webkit-transform 0.15s ease-out;
  transition: transform 0.15s ease-out;
}
.js-table-sections-header + tbody {
  display: none;
}
.js-table-sections-header.open > tr {
  background-color: #f9f9f9;
}
.js-table-sections-header.open > tr > td:first-child > i {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.js-table-sections-header.open + tbody {
  display: table-row-group;
}

Vue

$('.js-table-sections-header').click(function() {
	$(this).toggleClass('open');
})

new Vue({
	data() {
  	return {
      myList: 
        {
          "Sara": {
              'payments': ['+$92,00', '+$54,00', '+$84,00', '+$23,00']
          },
          "Maya": {
              'payments': ['+$82,00', '+$24,00', '+$34,00', '+$29,00']
          }
        }
    }
  }
})