JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="AngularCtrl">
    
   <table>
 <thead><td>Id</td><td>Name</td><td>Ratings</td></thead>
 <tbody>
   <tr ng-repeat="user in users">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td>
        <input type="text" ng-model="SearchText"/>
        <div my-repeater></div>
    </td>
   </tr>
 </tbody>
</table>
    
</div>

CSS

tr{
    border-bottom: 1px solid blue;    
}
td{
    padding: 10px;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.filter('filterFilter', function() {
  return function( items, searchText) {
    var filtered = [];
    angular.forEach(items, function(item) {
      if(item.rating.match(searchText)){
        filtered.push(item);
      }
    });
    return filtered;
  };
});

myApp.directive('myRepeater', function(filterFilter) {
    return {
        restrict: 'A',        
        link: function(scope, element, attrs) {
            var myTemplate = "<div>{{rating}}</div>";
            var filteredItems = filterFilter(scope.items, scope.SearchText);
            angular.forEach(filteredItems, function(item){                
                var text = myTemplate.replace("{{rating}}",item.rating);
                element.append(text);
            });            
        }
    };
}); 

function AngularCtrl($scope) {
    
   $scope.users = [{id: 1, name: 'John'}, {id: 2, name: 'Ken'}, {id: 3, name: 'Mike'}];
    $scope.items = [{id: 1, rating: 10},{id: 2, rating: 20},{id: 3, rating: 30},{id: 4, rating: 40},{id: 5, rating: 50},{id: 6, rating: 60},{id: 7, rating: 70}];
}