how to change the header text of table in angular? - angularjs

Question

I am trying to learn Ui-grid from this link
http://ui-grid.info/docs/#/tutorial/101_intro.
I make a simple example of ui-grid in plunker..Actually the table header takes first object property name .I need to give other name instead of property name.Example I need my first columns name should "First" and "second" without changing the array of objects here is my code
https://plnkr.co/edit/s0NUaL15W4Q95WXGeQK5?p=preview
angular.module('app',['ngTouch', 'ui.grid']).controller('MainCtrl',function($scope){
$scope.data=[{
name:'abc',
lastname:'hrt'
},{
name:'pqr',
lastname:'oiu'
},{
name:'lqm',
lastname:'ytu'
}]
})

Answer 1

see your solution here
https://plnkr.co/edit/cDaeiNmWIvQ0NLoWxYKX?p=preview
you need to set Options to ui-grid, so you can set displayName in columnDefs
$scope.gridOptions = {
columnDefs: [
{field: 'name', displayName:'First'},
{field: 'lastname', displayName:'Second'}
]
};

Answer 2

use grid option 'columnDefs'
angular.module('app',['ngTouch', 'ui.grid']).controller('MainCtrl',function($scope){
$scope.datas=[{
name:'abc',
lastname:'hrt'
},{
name:'pqr',
lastname:'oiu'
},{
name:'lqm',
lastname:'ytu'
}];
$scope.gridOptions = {
columnDefs: [
{ name:'First', field: 'name' },
{ name:'Second', field: 'lastname' }],
data : $scope.datas
};
})
html
<div ng-controller="MainCtrl">
{{3+5}}
<div id="grid1" ui-grid="gridOptions" class="grid" ></div>
</div>