how ui-grid can customize dynamic number of header and data?

Question

i have a ui-grid with this structure : http://plnkr.co/edit/qwfPVBfci4qbMEbwdNvM?p=preview how can I customize this grid to have different number of header or data . actualy i have to make dynamic funktion for difference kind of dataset for example for this dataSet:

{0:["date","numberOfTransaction", "price"],
1:["20170207", "3029223", "5294194476028"],
2:["20170208", "2176469", "1479374036275"],
3:["20170209", "2902111", "6971208095034"],
4:["all", "8107803", "13744776607337"]}

or for this :

{0:["date","numberOfTransaction", "price","total price"],
1:["20170207", "3029223", "5294194476028","3232"],
2:["20170208", "2176469", "1479374036275","223"],
3:["20170209", "2902111", "6971208095034","322"],
4:["all", "8107803", "13744776607337","1321"]}

Answer 1

It should be like this. You should create columns of ui-grid firstly. then init data array of ui-grid. for this i create a function that create row of ui-grid. this function have a parameter that is an array. by using of this array and columns of ui-grid creating rows of ui-grid. after crating each row push it in data array of ui-grid. as you see below.

 var obj = {};
 var row = {};
 angular.forEach($scope.myData[0],function(data,j){
   $scope.gridOptions.columnDefs.push({field:data});
 });
 angular.forEach($scope.myData,function(data,j){
  if(j != 0){
   row = createObject(data);
   $scope.gridOptions.data.push(row);
  }
})  

  function createObject(array){
    var obj = {};
    for(var h=0; h < array.length;h++){
      obj[$scope.gridOptions.columnDefs[h].field] = array[h];
    }
  return obj;
 }

Demo