JSFiddle - React, Tailwind, and code Playground

by Harsha Jayamanna

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <table>
        <thead>
            <tr>
                <th class="col-md-1 col-xs-1 col-sm-1">Col1</th>
                <th class="col-md-1 col-xs-1 col-sm-1">Col2</th>
                <th class="col-md-1 col-xs-1 col-sm-1">Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in obj | groupBy: 'col1'">

                <td> {{ item.col1 }} </td>
                <td> {{ item.col2 }} </td>
                <td> {{ item.col3 }} </td>
            </tr>
        </tbody>
        

    </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    
    app.filter('groupBy', function() {
      return function(input, column) {
      	console.log(input);
        input = input || '';
        var out = '';
        //for (var i = 0; i < input.length; i++) {
        	
          //out = input.charAt(i) + out;
        //}
        // conditional based on optional argument
        //if (uppercase) {
       //   out = out.toUpperCase();
        //}
         	var filtered = [];
          angular.forEach(input, function(item) {
            if( 2 == item.column ) {
              filtered.push(item);
            }
          });
          return filtered;
      
      };
    })

    app.controller('myCtrl', function ($scope) {
        $scope.obj = [
          { col1: 1, col2: "a", col3: "x" }, 
          { col1: 1, col2: "b", col3: "y" }, 
          { col1: 2, col2: "c", col3: "z" }
        ];
        
        
        
        
    });
</script>