JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<br /> <br />

<div ng-app="myApp"> 
    <div ng-controller="TableCtrl"> 
        
        <div class="input-group">
  <input class="form-control"   ng-model="searchText" placeholder="Search" type="search" ng-change="search()" />
  <span class="input-group-addon">
      <span class="glyphicon glyphicon-search"></span>
  </span>
</div>
             
        <table class="table  table-hover data-table sort display">
             <thead>
                 <tr>
                     <th class="EmpId"> <a href="" ng-click="columnToOrder='EmpId';reverse=!reverse">EmpId 
                          
                         </a></th>
                     <th class="name"> <a href="" ng-click="columnToOrder='name';reverse=!reverse"> Name </a> </th>
                 <th class="Email"> <a href="" ng-click="columnToOrder='Email';reverse=!reverse"> Email </a> </th>
                     
                 </tr>
             </thead> 
             <tbody>
                 
                 <tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">
                     <td>{{item.EmpId}}</td>
                     <td>{{item.name}}</td>
                     <td>{{item.Email}}</td>
                 </tr>
             </tbody>
        </table>
         
        
<div class="row">
  <div class="col-xs-3">
    <input type="text" ng-model="newEmpId" class="form-control" placeholder="EmpId">
  </div>
  <div class="col-xs-3">
    <input type="text" ng-model="newName" class="form-control" placeholder="Name">
  </div>
  <div class="col-xs-4">
    <input type="email" ng-model="newEmail" class="form-control" placeholder="Email">
  </div> 
     <div class="col-xs-1">
         <button ng-click="add()" type="button" class="btn btn-primary">
              <span class="glyphicon glyphicon-plus"></span>
        </button> 
     ...

JavaScript

//Demo of Searching and Sorting Table with AngularJS
var myApp = angular.module('myApp',[]);
  
 myApp.controller('TableCtrl', ['$scope', function($scope) {  
    
    $scope.allItems = getDummyData(); 
      
     $scope.resetAll = function()
     {
         $scope.filteredList = $scope.allItems ; 
         $scope.newEmpId = '';
         $scope.newName = '';
         $scope.newEmail = '';
         $scope.searchText = ''; 
     }
     
     
     $scope.add = function()
     {
         $scope.allItems.push({EmpId : $scope.newEmpId, name : $scope.newName, Email:$scope.newEmail});
         $scope.resetAll();  
     }
     
     
    $scope.search = function()
    { 
        $scope.filteredList  = _.filter($scope.allItems,
                 function(item){  
                     return searchUtil(item,$scope.searchText); 
                 });
        
        if($scope.searchText == '')
        {
            $scope.filteredList = $scope.allItems ;
        }
    }  
    
    $scope.resetAll();       
}]);
 
/* Search Text in all 3 fields */
function searchUtil(item,toSearch)
{
    /* Search Text in all 3 fields */
    return ( item.name.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.Email.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.EmpId == toSearch
                            )                              
                     ? true : false ;
}

/*Get Dummy Data for Example*/
function getDummyData()
{
    return [
         {EmpId:2, name:'Jitendra', Email: '[email protected]'},
         {EmpId:1, name:'Minal', Email: '[email protected]'},
         {EmpId:3, name:'Rudra', Email: '[email protected]'} 
        ];
}