JSFiddle - React, Tailwind, and code Playground

by Ray Mak

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<table ng-app="app" ng-controller="AppsCtrl">
  <thead>
    <tr>
      <th>+</th>
      <th>Name</th>
      <th>Email</th>
      <th>DOB</th>
      <th>Hobby</th>
    </tr>
  </thead>
  <tbody ng-repeat="customer in customerData | filter: filderCustomer">
    <tr>
      <td><a href="#" class="main" ng-click="expandTable($event)">+</a></td>
      <td>{{customer.name}}</td>
      <td>{{customer.email}}</td>
      <td>{{customer.DOB}}</td>
      <td>{{customer.Hobby}}</td>
    </tr>
    <tr class="showhide">
      <td> </td>
      <td>Degree</td>
      <td>{{customer.Degree}}</td>
      <td>Job title</td>
      <td>{{customer.Job}}</td>
    </tr>
    <tr class="showhide">
      <td></td>
      <td>Country</td>
      <td>{{customer.Country}}</td>
      <td>City</td>
      <td>{{customer.City}}</td>
    </tr>
  </tbody>
</table>

CSS

.showhide {
  display: none;
}

JavaScript

// AngularJS toggle table

var app = angular.module('app', []);
app.controller('AppsCtrl', function($scope) {
  $scope.expandTable = function() {
    console.log($(event.target).closest('tr').nextUntil("tr.main"));
    $(event.target).closest('tr').nextUntil("tr.main").slideToggle();
    // console.log($(event.currentTarget).parent().parent());
  }
  var data = [{
    "name": "John",
    "email": "[email protected]",
    "DOB": "01/05/1968",
    "Degree": " BSC",
    "Job": "Engineer",
    "Hobby": "Football",
    "Country": "US",
    "City": "Houston"
  }, {
    "name": "Jessica",
    "email": "[email protected]",
    "DOB": "03/05/1976",
    "Degree": " Accounting",
    "Job": "CPA",
    "Hobby": "Video games",
    "Country": "US",
    "City": "Fredericks"
  }, {
    "name": "Andrew",
    "email": "[email protected]",
    "DOB": "06/12/1998",
    "Degree": " PHD",
    "Job": "Professor",
    "Hobby": "Writing",
    "Country": "US",
    "City": "San Diago"
  }, {
    "name": "Rich",
    "email": "[email protected]",
    "DOB": "09/21/1988",
    "Degree": " PHD",
    "Job": "Technician",
    "Hobby": "Writing",
    "Country": "US",
    "City": "San Diago"
  }];
  $scope.customerData = data;
  $scope.filderCustomer = function(item)
  {
  	var found = false;
    angular.forEach($scope.filterObject, function(value, key){
      if (value.Job === item.Job)
          found = true;
    });
    return found;
  }
  $scope.filterObject = [{
    "Job": "CPA"
  }, {
    "Job": "Engineer"
  }]
});