Creating Grid View in Angular js
<p>I am facing difficulty in creating grid view for my table whose data is coming from database as a response in JSON format. Both UI and Javascript code are in same file. I have installed ng-grid using npm package at root path of application.</p>

<p>Index.html</p>

<pre><code>&lt;script src="node_modules/angular-ui-grid/ui.grid.min.js"&gt;&lt;/script&gt;
&lt;script src="ng-grid-2.0.11.min.js"&gt;&lt;/script&gt;

 &lt;table style="width:50%" class="table table-bordered"&gt;
      &lt;thead&gt;
         &lt;tr&gt;
           &lt;th&gt;Select&lt;/th&gt;
           &lt;th&gt;FR_ID&lt;/th&gt;
           &lt;th&gt;FR_Client&lt;/th&gt;
           &lt;th&gt;FR_Source&lt;/th&gt;
           &lt;th&gt;FR_Destination&lt;/th&gt;
         &lt;/tr&gt;
       &lt;/thead&gt;

       &lt;tbody&gt;
          &lt;tr ng-repeat="search in searches"&gt;
            &lt;td&gt;&lt;input type="checkbox" /&gt;&lt;/td&gt;
            &lt;td&gt;{{search.id}}&lt;/td&gt;
            &lt;td&gt;{{search.client}}&lt;/td&gt;
            &lt;td&gt;{{search.source}}&lt;/td&gt;
            &lt;td&gt;{{search.destination}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;

   &lt;/table&gt;
            &lt;div class="small-12 columns"&gt;
                    &lt;div class="submitButton" id="submitButton" ng-app="searchapp"&gt;
                        &lt;div style="visibility:hidden;"&gt;{{y=name}}&lt;/div&gt;

                        &lt;input type="submit" value="Search" ng-click="seachRecords(y)" style="font-size:20px" /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
</code></pre>

<p>Angular:</p>

<pre><code>     &lt;script&gt;
            var app = angular.module('myApp',[]);
            app.controller('myCtrl', function ($scope, $http){

             $scope.seachRecords = function (y) {
                var httpRequest = $http({
                    method: 'GET',
                    url: '/user/search?seachString='+y,

                }).then(function (response, status) {

                    var responsetest = JSON.stringify(response.data);

                    $scope.searches = response.data;

                }, function myError(data, status) {
                    $scope.searches = data;     
                });
            }
        });
    &lt;/script&gt;
</code></pre>

<p>I am able to create below table as shown in the image attached but I am trying to get Grid view and not able to form it, please suggest changes required for this.</p>

<p><a href="https://i.stack.imgur.com/FsH6y.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FsH6y.jpg" alt="enter image description here"></a></p>