Multiple Grid View using ui-grid

Question

I have a scenario to split the single grid view into multiple grid view,

Example: In an array I have 10 data a[10] values for these each data I have to put new ui-grid using angular js.

Customer 1 having 10 unique records reg1, reg2, reg2 datas, for this I have to display in a grid view

Label view:

REG101 Customer 1

Grid View:

----------------------------------------------
Item1| shop| details |avaialbilty   |Workshop     
----------------------------------------------

Label view:

REG102 Customer 2

Grid View:

----------------------------------------------
Item2| shop| details |avaialbilty   |Workshop     
----------------------------------------------

Label view:

REG103 Customer 3

Grid View:

----------------------------------------------
Item3| shop| details |avaialbilty  |Workshop      
----------------------------------------------

Answer 1

using ng-repeat we can achieve this in ease. I have done a sample code to demonstrate it

var app=angular.module('myapp',["ngGrid"]);

app.controller('mycontroller',function($scope){

$scope.Datas=[
{"data":[{"color":"red"
},{"color":"green"
},{"color":"amber"
}]},
{"data":[{"color":"blue"
},{"color":"violet"
},{"color":"pink"
}]},
{"data":[{"color":"steelblue"
},{"color":"yellow"
},{"color":"white"
}]}
];
  $scope.gridOptions = [{data:'Datas[0].data'},{data:'Datas[1].data'},{data:'Datas[2].data'}];
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
<div ng-app='myapp'>
   <div ng-controller='mycontroller'>
     <!-- <div ng-repeat="item in Datas" facdata="item"></div> -->
  
<div ng-repeat="item in gridOptions" class="gridStyle" ng-grid="item"></div>
  
   </div>
   </div>